1 Star 0 Fork 13

飘渺 / GinSkeleton-Admin-Frontend

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 5.09 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
张奇峰 提交于 2021-03-23 14:40 . 1. README.md 更新

GinSkeleton-Admin (前端部分)

基于iview(4.5.0) + GinSkeleton(1.5) 开发

在线演示地址: GinSkeleton-Admin

1.业务开发指南

GinSkeleton 前后端配合才是一整套系统, 现将前端开发指南编写如下: 为了配合后端部分开发指南,我们使用相同的模块:按钮管理表(tb_auth_button_cn_en) 做代码演示

1.1 视图入口地址

// src/view/system_setting/button/index.vue ,
// 其中 view/system_setting/button/index  是后端配置菜单(路由地址)所需要的
// 开发完成此页面,告知后端, 配置在相关菜单,访问即可到达此页面

1.2 以上视图页面对应的组件(components)地址

 // src/components/system_setting/button
 // 以上目录内部包含了 增删改查相关的代码,请自行阅读即可

1.3 开发过程中,注意事项

3.1 我们以查询界面为例介绍注意事项


 // 1.界面按钮设置注意事项

 // 以下代码就是当前界面所设置的全部的按钮代码,每个按钮的代码,增删改查在本系统都是固定的
 // 除此之外的按钮代码请向后端获取,后端在按钮表统一设置所有的按钮代码,最后才能精确控制每个按钮的权限
         buttonList: {
          insert: 'insert',
          delete: 'delete',
          update: 'update',
          select: 'select',
        },

  // 界面导入函数代码说明
  import {list} from '@/api/system_setting/button'   // @ 表示目录已经定位到 src/
  import {list} from '_c/api/system_setting/xxx'     // _c 表示目录已经定位到 src/components/

1.4 开发完成的视图(页面)需要在后台配置

  // 开发完成的视图(页面) 需要将导出名称, 配置在后端系统
  // 例如:src/view/system_setting/button/index.vue
  // 视图组件导出的名称为: button_cn_en
  //相关代码如下:
    export default {
    name: 'button_cn_en',
    components: {
      MenuButton
    }
  }

  // 那么就需要在后台系统:
  // 菜单设置---按钮设置---(界面参数)路由名称 ,设置为: button_cn_en
  // 也就是说,前台的每一个视图(页面)名称都需要在后台菜单设置对应的路由名称

前后端路由对应关系设置 菜单与前端页面

2.环境安装

2.1 node 环境node安装

     Windows7 系统

1.nodejs 推荐版本:v13.14系列(该系列是win7能够使用的最高版本). 2.请根据自己的系统环境下载安装对应版本: https://nodejs.org/dist/latest-v13.x/

     Windows10 系统

1.nodejs 使用最新版本即可: https://nodejs.org/zh-cn/download/

镜像源设置

根据自己的实际情况,决定是否使用国内淘宝镜像替换 nmp 官方镜像源:

  // 使用淘宝镜像替换官方镜像源
 npm install -g cnpm --registry=https://registry.npm.taobao.org
 cnpm  -v //查看版本,测试是否安装成功

2.2 安装本项目依赖

// 项目根目录执行
cnpm  install

2.3 启动本项目

// 项目根目录执行
npm run  dev

// 浏览器会自动打开本地分配的登陆地址
// 默认登陆信息如下,更多参见:src/config/index.js
// 账号: admin
// 密码:ginskeleton

2.4 开发环境、生产环境参数配置

编译为生产环境时,务必检查配置文件服务器ip、端口等参数信息!


  // 1.设置编译前的生产环境参数配置
  路径:
  ./src/config/index.js
  配置参数:
    baseUrl: {
    // npm run dev 有效
    dev: 'http://127.0.0.1:20201/admin/',

    // npm run build 有效
    pro: 'http://你的生产环境服务器ip:20201/admin/'
  },

2.5 编译、打包


  // 最后编译、打包
    npm run build

2.6 nginx 配置,供部署参考使用

GinSkeleton 提供了nginx 日志(access.log 、 error.log)集中管理功能,可以直接对接到 ELK 服务器,请参考后端项目日志集中管理方案部分.


server
 {
     listen 20202;
     server_name www.ginskeleton.com ;
     index index.html index.htm;
     # 设置项目根目录,dist 目录为本项目编译后解压目录
     root  /home/wwwroot/test/dist;

    if ($request_method = 'OPTIONS') {
         return 202 ;
      }

    #解决vue项目部署后刷新页面出现404的问题
    location  / {
        try_files $uri $uri/ /index.html;
    }

     location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
     {
         expires      30d;
     }

     location ~ .*\.(js|css)?$
     {
         expires      12h;
     }

     location ~ /.well-known {
         allow all;
     }

     location ~ /\.
     {
         deny all;
     }

		# 设置访问日志与错误日志记录,相关路径请自行修改
    access_log   /home/wwwlogs/ginskeleton_admin_fronted_access.log ;
    error_log   /home/wwwlogs/ginskeleton_admin_fronted_error.log ;
 }

评论 ( 0 )

你可以在登录后,发表评论

JavaScript
1
https://gitee.com/seedlings_2020/gin-skeleton-admin-frontend.git
git@gitee.com:seedlings_2020/gin-skeleton-admin-frontend.git
seedlings_2020
gin-skeleton-admin-frontend
GinSkeleton-Admin-Frontend
master

搜索帮助

105716 1d94204e 1850385 105716 2d26be5c 1850385