5、管理平台前端搭建
5.1、搭建管理平台前端程序
5.1.1、vue-element-admin
vue-element-admin是基于element-ui 的一套后台管理系统集成方案。
GitHub地址:https://github.com/PanJiaChen/vue-element-admin
项目在线预览:https://panjiachen.gitee.io/vue-element-admin
5.1.2、vue-admin-template
5.1.2.1、简介
vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板(最少精简版),可作为模板进行二次开发。
**GitHub地址:**https://github.com/PanJiaChen/vue-admin-template
**根据用户角色来动态生成侧边栏的分支:**https://github.com/PanJiaChen/vue-admin-template/tree/permission-control
5.1.2.2、安装和运行
# 解压压缩包vue-admin-template-permission-control.zip
# 重命名为srb-admin
# 进入目录
cd srb-admin
# 安装依赖
npm install
# 启动。执行后,浏览器自动弹出并访问http://localhost:9528/
npm run dev
5.1.3、前端配置
5.1.3.1、禁用ESLint语法检查
vue.config.js 第30行处禁用ESLint语法检查
lintOnSave: false,
5.1.3.2、添加prettier格式化配置
在vue项目根目录下新建一个文件.prettierrc
{
"semi": false,
"singleQuote": true,
"htmlWhitespaceSensitivity": "ignore"
}
5.1.3.3、修改页面标题
src/settings.js 第3行处修改页面标题
5.1.3.4、国际化设置
src/main.js 第7行处修改语言
测试平台语言的修改
5.1.3.5、下拉菜单修改
5.1.3.6、登录页修改
src/views/login/index.vue
修改页面标题、登录按钮等
5.2、尚融宝管理系统路由配置
5.2.1**、组件定义**
5.2.1.1、创建vue组件
在src/views文件夹下创建以下文件夹和文件
5.2.1.2、core/integral-grade/list.vue
<template>
<div class="app-container">
积分等级列表
</div>
</template>
5.2.1.3、core/integral-grade/form.vue
<template>
<div class="app-container">
积分等级表单
</div>
</template>
5.2.2、路由定义
修改 src/router/index.js 文件,重新定义constantRoutes,拷贝到 dashboard路由节点 下面
注意:每个路由的name不能相同
{
path: '/core/integral-grade',
component: Layout,
redirect: '/core/integral-grade/list',
name: 'coreIntegralGrade',
meta: { title: '积分等级管理', icon: 'el-icon-s-marketing' },
alwaysShow: true,
children: [
{
path: 'list',
name: 'coreIntegralGradeList',
component: () => import('@/views/core/integral-grade/list'),
meta: { title: '积分等级列表' }
},
{
path: 'create',
name: 'coreIntegralGradeCreate',
component: () => import('@/views/core/integral-grade/form'),
meta: { title: '新增积分等级' }
},
{
path: 'edit/:id',
name: 'coreIntegralGradeEdit',
component: () => import('@/views/core/integral-grade/form'),
meta: { title: '编辑积分等级' },
hidden: true
}
]
},
5.3、前端项目开发流程
5.3.1、全栈开发流程
5.3.1.1、前端调用流程
下图是开发过程中涉及到和几个核心的模块,我们已经完成了路由的配置和页面组件的创建,接下来我们需要进一步完善页面组件的模板部分,以及脚本
5.3.1.2、nginx反向代理配置
目前,应用程序的前后端基本架构如下:srb-admin是前端程序,直接调用后端的srb-core微服务
为了能够让前端程序能够同时对接多个后端服务,我们可以使用多种解决方案,例如nginx反向代理、微服务网关等。这里我们先使用nginx作为前后端中间的反向代理层,架构如下
nginx的配置
server {
listen 80;
server_name localhost;
location ~ /core/ {
proxy_pass http://localhost:8110;
}
location ~ /sms/ {
proxy_pass http://localhost:8120;
}
location ~ /oss/ {
proxy_pass http://localhost:8130;
}
}
nginx的命令
start nginx #启动
nginx -s stop #停止
nginx -s reload #重新加载配置
前端的配置: .env.development
# base api:连接到nginx
VUE_APP_BASE_API = 'http://localhost'
5.3.1.3、mock-server
VUE_APP_BASE_API的修改会影响到平台模拟登录功能的mock数据,因此需要修改mock-server的地址
修改 mock/mock-server.js 文件 第37行
url: new RegExp(`/dev-api${url}`),
修改 src/api/user.js中的接口调用,为每一个远程调用添加配置
baseURL: '/dev-api',
5.3.2、前端组件开发
5.3.2.1、定义api模块
创建文件 src/api/core/integral-grade.js
// @ 符号在vue.config.js 中配置, 表示 'src' 路径的别名
import request from '@/utils/request'
export default {
list() {
return request({
url: '/admin/core/integralGrade/list',
method: 'get'
})
}
}
5.3.2.2、定义页面组件脚本
src/views/core/integral-grade/list.vue
<script>
import integralGradeApi from '@/api/core/integral-grade'
export default {
// 定义数据模型
data() {
return {
list: [] // 数据列表
}
},
// 页面渲染成功后获取数据
created() {
this.fetchData()
},
// 定义方法
methods: {
fetchData() {
// 调用api
integralGradeApi.list().then(response => {
this.list = response.data.list
})
}
}
}
</script>
5.3.2.3、定义页面组件模板
<template>
<div class="app-container">
<!-- 表格 -->
<el-table :data="list" border stripe>
<el-table-column type="index" width="50" />
<el-table-column prop="borrowAmount" label="借款额度" />
<el-table-column prop="integralStart" label="积分区间开始" />
<el-table-column prop="integralEnd" label="积分区间结束" />
</el-table>
</div>
</template>
5.3.2.4、axios响应拦截器修改
src/utils/request.js 中 将第49行的
if (res.code !== 20000) {
修改成
if (res.code !== 0 && res.code !== 20000) {
因为我们的后端接口统一结果判断0为成功的响应结果,而mock数据判断20000位正确的结果
5.4、完善积分等级模块
5.4.1**、删除数据**
5.4.1.1、定义api
src/api/core/integral-grade.js
removeById(id) {
return request({
url: `/admin/core/integralGrade/remove/${id}`,
method: 'delete'
})
}
5.4.1.2、页面组件模板
src/views/core/integral-grade/list.vue,在table组件中添加删除列
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="removeById(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
5.4.1.3、删除数据脚本
// 根据id删除数据
removeById(id) {
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
integralGradeApi.removeById(id).then(response => {
this.$message.success(response.message)
this.fetchData()
})
})
.catch(error => {
this.$message.info('取消删除')
})
}
5.4.2、新增数据
5.4.2.1、定义api
src/api/core/integral-grade.js
save(integralGrade) {
return request({
url: '/admin/core/integralGrade/save',
method: 'post',
data: integralGrade
})
}
5.4.2.2、定义页面data
src/views/core/integral-grade/form.vue,完善data定义
<script>
export default {
data() {
return {
integralGrade: {}, // 初始化数据
saveBtnDisabled: false // 保存按钮是否禁用,防止表单重复提交
}
}
}
</script>
5.4.2.3、页面组件模板
src/views/core/integral-grade/form.vue,完善template
<template>
<div class="app-container">
<!-- 输入表单 -->
<el-form label-width="120px">
<el-form-item label="借款额度">
<el-input-number v-model="integralGrade.borrowAmount" :min="0" />
</el-form-item>
<el-form-item label="积分区间开始">
<el-input-number v-model="integralGrade.integralStart" :min="0" />
</el-form-item>
<el-form-item label="积分区间结束">
<el-input-number v-model="integralGrade.integralEnd" :min="0" />
</el-form-item>
<el-form-item>
<el-button
:disabled="saveBtnDisabled"
type="primary"
@click="saveOrUpdate()"
>
保存
</el-button>
</el-form-item>
</el-form>
</div>
</template>
5.4.2.4、新增数据脚本
src/views/core/integral-grade/form.vue,引入api
import integralGradeApi from '@/api/core/integral-grade'
定义保存方法
methods: {
saveOrUpdate() {
// 禁用保存按钮
this.saveBtnDisabled = true
this.saveData()
},
// 新增数据
saveData() {
// debugger
integralGradeApi.save(this.integralGrade).then(response => {
this.$message({
type: 'success',
message: response.message
})
this.$router.push('/core/integral-grade/list')
})
}
}
5.4.3、回显数据
5.4.3.1、列表页编辑按钮
src/views/core/integral-grade/list.vue,表格“操作”列中增加“修改”按钮
<router-link :to="'/core/integral-grade/edit/' + scope.row.id" style="margin-right:5px;" >
<el-button type="primary" size="mini" icon="el-icon-edit">
修改
</el-button>
</router-link>
5.4.3.2、定义api
src/api/core/integral-grade.js
getById(id) {
return request({
url: `/admin/core/integralGrade/get/${id}`,
method: 'get'
})
}
5.4.3.3、获取数据脚本
src/views/core/integral-grade/form.vue,methods中定义回显方法
// 根据id查询记录
fetchDataById(id) {
integralGradeApi.getById(id).then(response => {
this.integralGrade = response.data.record
})
}
页面渲染成功后获取数据
因为已在路由中定义如下内容:path: ‘edit/:id’,因此可以使用 this.$route.params.id 获取路由中的id
//页面渲染成功
created() {
if (this.$route.params.id) {
this.fetchDataById(this.$route.params.id)
}
},
5.4.4、更新数据
5.4.4.1、定义api
src/api/core/integral-grade.js
updateById(integralGrade) {
return request({
url: '/admin/core/integralGrade/update',
method: 'put',
data: integralGrade
})
}
5.4.4.2、更新数据脚本
src/views/core/integral-grade/form.vue,methods中定义updateData
// 根据id更新记录
updateData() {
// 数据的获取
integralGradeApi.updateById(this.integralGrade).then(response => {
this.$message({
type: 'success',
message: response.message
})
this.$router.push('/core/integral-grade/list')
})
}
完善saveOrUpdate方法
saveOrUpdate() {
// 禁用保存按钮
this.saveBtnDisabled = true
if (!this.integralGrade.id) {
this.saveData()
} else {
this.updateData()
}
},
5.5、关于Vue组件(了解)
5.5.1、什么是组件
组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用界面都可以抽象为一个组件树:
5.5.2、项目组件分析
5.5.2.1、程序入口
- 入口html:public/index.html
- 入口js脚本:src/main.js
- 顶层组件:src/App.vue
- 路由:src/router/index.js
main.js 中引入了App.vue和 router/index.js,根据路由配置,App.vue中的路由出口会显示相应的页面组件的内容
入口脚本
引入顶层组件模块和路由模块
顶层组件
路由出口的位置
路由配置
路由出口的位置显示的页面组件
5.5.2.2、登录页组件关系
5.5.3、Layout
5.5.3.1、路由
src/router/index.js:这个组件应用了Layout布局文件
5.5.3.2、布局
src/layout/index.vue:侧边栏、导航栏、主内容区
5.5.3.3、主内容区
src/layout/components/AppMain.vue:Layout的路由出口(主内容区)