代码拉取完成,页面将自动刷新
同步操作将从 张奇峰/GinSkeleton-Admin-Frontend 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
基于iview(4.5.0) + GinSkeleton(1.5) 开发
GinSkeleton 前后端配合才是一整套系统, 现将前端开发指南编写如下: 为了配合后端部分开发指南,我们使用相同的模块:按钮管理表(tb_auth_button_cn_en) 做代码演示
// src/view/system_setting/button/index.vue ,
// 其中 view/system_setting/button/index 是后端配置菜单(路由地址)所需要的
// 开发完成此页面,告知后端, 配置在相关菜单,访问即可到达此页面
// src/components/system_setting/button
// 以上目录内部包含了 增删改查相关的代码,请自行阅读即可
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/
// 开发完成的视图(页面) 需要将导出名称, 配置在后端系统
// 例如:src/view/system_setting/button/index.vue
// 视图组件导出的名称为: button_cn_en
//相关代码如下:
export default {
name: 'button_cn_en',
components: {
MenuButton
}
}
// 那么就需要在后台系统:
// 菜单设置---按钮设置---(界面参数)路由名称 ,设置为: button_cn_en
// 也就是说,前台的每一个视图(页面)名称都需要在后台菜单设置对应的路由名称
1.nodejs 推荐版本:v13.14系列(该系列是win7能够使用的最高版本). 2.请根据自己的系统环境下载安装对应版本: https://nodejs.org/dist/latest-v13.x/
1.nodejs 使用最新版本即可: https://nodejs.org/zh-cn/download/
根据自己的实际情况,决定是否使用国内淘宝镜像替换 nmp 官方镜像源:
// 使用淘宝镜像替换官方镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v //查看版本,测试是否安装成功
// 项目根目录执行
cnpm install
// 项目根目录执行
npm run dev
// 浏览器会自动打开本地分配的登陆地址
// 默认登陆信息如下,更多参见:src/config/index.js
// 账号: admin
// 密码:ginskeleton
编译为生产环境时,务必检查配置文件服务器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/'
},
// 最后编译、打包
npm run build
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 ;
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。