融易宝项目管理平台前台搭建

关注微信公众号：序辑，回复管理前台代码获取前端代码

一、NPM包管理

1.简介

1.1什么是NPM

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端maven。

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v

2.使用npm管理项目

2.1项目初始化

#建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。

#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y

2.2修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。
设置镜像地址：

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org #查看npm配置信息
npm config list

2.3 npm install命令

基本命令

#使用 npm install 安装依赖包的最新版，
#简写 npm i
#模块安装的位置：项目目录\node_modules
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
#默认参数：--save  简写  -S  将当前依赖保存在dependencies节点下
npm install axios

下载特定版本的依赖

#如果安装时想指定特定的版本
npm i axios@0.18.x

下载开发依赖

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm i --save-dev mockjs
#或简写
npm i -D mockjs

根据依赖下载安装包

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
npm i #根据package.json中的配置下载依赖，初始化项目

2.4其他命令

#更新包（更新到最新版本）
npm update 包名#卸载包
npm uninstall 包名

二、搭建管理平台前端程序

1. vue-element-admin

vue-element-admin是基于element-ui 的一套后台管理系统集成方案。
**GitHub地址：**https://github.com/PanJiaChen/vue-element-admin
项目在线预览：https://panjiachen.gitee.io/vue-element-admin

2. vue-admin-template

2.1 简介

vue-admin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。
**GitHub地址：**https://github.com/PanJiaChen/vue-admin-template
**根据用户角色来动态生成侧边栏的分支：**https://github.com/PanJiaChen/vue-admin-template/tree/permission-control

2.2 安装和运行

# 解压压缩包vue-admin-template-permission-control.zip
# 重命名为srb-admin
# 进入目录
cd srb-admin# 安装依赖
npm install# 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
npm run dev

3.前端配置

3.1禁用ESLint语法检查

vue.config.js第30行禁用ESLint语法检查

lintOnSave: false,

3.2添加prettier格式化配置

在vue项目根目录下新建一个文件.prettierrc

{"semi": false,"singleQuote": true,"htmlWhitespaceSensitivity": "ignore"
}

3.3修改页面标题

src/settings.js第三处修改页面标题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qhww8ySd-1643978339542)(修改页面标题.png)]

3.4国际化设置

src/main.js第7行处修改语言

测试平台语言的修改

3.5下拉菜单修改

3.6登录页修改

src/views/login/index.vue
修改页面标题、登录按钮等

三、管理同路由配置

1.组件定义

1.1创建vue组件

在src/views文件夹下创建以下文件夹和文件

1.2 core/integral-grade/list.vue

<template><div class="app-container">积分等级列表</div>
</template>

1.3 core/integral-grade/form.vue

<template><div class="app-container">积分等级表单</div>
</template>

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}]
},

四、前端项目开发流程

1.全栈开发流程

1.1前端调用流程

下图是开发过程中涉及到和几个核心的模块，我们已经完成了路由的配置和页面组件的创建，接下来我们需要进一步完善页面组件的模板部分，以及脚本

1.2nginx反向代理配置

目前，应用程序的前后端基本架构如下：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'

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',

2.前端组件开发

2.1定义aoi模块

创建文件 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'})}
}

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() {// 调用apiintegralGradeApi.list().then(response => {this.list = response.data.list})}}
}
</script>

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>

2.4axios响应拦截器修改

src/utils/request.js 中将第49行的

if (res.code !== 20000) {

修改成

if (res.code !== 0 && res.code !== 20000) {

因为我们的后端接口统一结果判断0为成功的响应结果，而mock数据判断20000位正确的结果

五、完善积分等级模块

1.删除数据

1.1定义api

src/api/core/integral-grade.js

removeById(id) {return request({url: `/admin/core/integralGrade/remove/${id}`,method: 'delete'})
}

1.2页面组件模板

src/views/core/integral-grade/list.vue，在table组件中添加删除列

<el-table-column label="操作" width="200" align="center"><template slot-scope="scope"><el-buttontype="danger"size="mini"icon="el-icon-delete"@click="removeById(scope.row.id)">删除</el-button></template>
</el-table-column>

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('取消删除')})
}

2.新增数据

2.1定义aoi

src/api/core/integral-grade.js

save(integralGrade) {return request({url: '/admin/core/integralGrade/save',method: 'post',data: integralGrade})
}

2.2定义页面data

src/views/core/integral-grade/form.vue，完善data定义

<script>
export default {data() {return {integralGrade: {}, // 初始化数据saveBtnDisabled: false // 保存按钮是否禁用，防止表单重复提交}}
}
</script>

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>

2.4新增数据脚本

src/views/core/integral-grade/form.vue，引入api

import integralGradeApi from '@/api/core/integral-grade'

定义保存方法

methods: {saveOrUpdate() {// 禁用保存按钮this.saveBtnDisabled = truethis.saveData()},// 新增数据saveData() {// debuggerintegralGradeApi.save(this.integralGrade).then(response => {this.$message({type: 'success',message: response.message})this.$router.push('/core/integral-grade/list')})}
}

3.回显数据

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>

3.2定义api

src/api/core/integral-grade.js

getById(id) {return request({url: `/admin/core/integralGrade/get/${id}`,method: 'get'})
}

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)}
},

4.更新数据

4.1定义api

src/api/core/integral-grade.js

updateById(integralGrade) {return request({url: '/admin/core/integralGrade/update',method: 'put',data: integralGrade})
}

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 = trueif (!this.integralGrade.id) {this.saveData()} else {this.updateData()}
},

5.完整代码

integral-grade.js

// @ 符号在vue.config.js 中配置， 表示 'src' 路径的别名
import request from '@/utils/request'// 导出默认模块
export default {list() {return request({url: '/admin/core/adminIntegralGrade/list',method: 'get'})},removeById(id) {return request({url: '/admin/core/adminIntegralGrade/remove/' + id,method: 'delete'})},save(integralGrade) {return request({url: '/admin/core/adminIntegralGrade/save',method: 'post',data: integralGrade})},getById(id) {return request({url: `/admin/core/adminIntegralGrade/get/${id}`,method: 'get'})},updateById(integralGrade) {return request({url: '/admin/core/adminIntegralGrade/update',method: 'put',data: integralGrade})}
}

router\index.js

export const constantRoutes = [{path: '/login',component: () => import('@/views/login/index'),hidden: true},{path: '/404',component: () => import('@/views/404'),hidden: true},{path: '/',component: Layout,redirect: '/dashboard',children: [{path: 'dashboard',name: 'Dashboard',component: () => import('@/views/dashboard/index'),meta: { title: '首页', icon: 'dashboard' }}]},{path: '/core/integral-grade',component: Layout,redirect: '/core/integral-grade/list',name: 'coreIntegralGrade',meta: { title: '积分等级管理', icon: 'el-icon-tickets' },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}]},{path: '/example',component: Layout,redirect: '/example/table',name: 'Example',meta: { title: '例子', icon: 'el-icon-s-help' },children: [{path: 'table',name: 'Table',component: () => import('@/views/table/index'),meta: { title: 'Table', icon: 'table' }},{path: 'tree',name: 'Tree',component: () => import('@/views/tree/index'),meta: { title: 'Tree', icon: 'tree' }}]},{path: '/form',component: Layout,children: [{path: 'index',name: 'Form',component: () => import('@/views/form/index'),meta: { title: '表单', icon: 'form' }}]}
]

list.vue

<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-column label="操作" width="200" align="center"><template slot-scope="scope"><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><el-buttontype="danger"size="mini"icon="el-icon-delete"@click="removeById(scope.row.id)">删除</el-button></template></el-table-column></el-table></div></template>><script>
// 引入模块
import integralGradeApi from '@/api/core/integral-grade'export default {data() {return {list: []}},created() {this.fetchData()},methods: {fetchData() {integralGradeApi.list().then(response => {this.list = response.data.list})},removeById(id) {console.log('id' + id)this.$confirm('此操作将永久删除该记录，是否继续？', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {integralGradeApi.removeById(id).then(response => {this.$message({message: response.message,type: 'success'})this.fetchData()})}).catch((error) => {if (error === 'cancel') {this.$message({type: 'info',message: '取消删除'})}})}}
}
</script><style scoped></style>

from.vue

<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>
<script>
import integralGradeApi from '@/api/core/integral-grade'
export default {data() {return {integralGrade: {},saveBtnDisabled: false // 保存按钮是否禁用}},// 页面渲染成功created() {if (this.$route.params.id) {this.fetchDataById(this.$route.params.id)}},methods: {saveOrUpdate() {// 禁用保存按钮this.saveBtnDisabled = trueif (!this.integralGrade.id) {this.saveData()} else {this.updateData()}},saveData() {integralGradeApi.save(this.integralGrade).then(response => {this.$message({type: 'success',message: response.message})})},// 根据id更新记录updateData() {// 数据的获取integralGradeApi.updateById(this.integralGrade).then(response => {this.$message({type: 'success',message: response.message})this.$router.push('/core/integral-grade/list')})},// 根据id查询记录fetchDataById(id) {integralGradeApi.getById(id).then(response => {this.integralGrade = response.data.record})}}
}
</script><style scoped></style>

六、Vue组件(了解)

1.什么是组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树：

2.项目组件分析

2.1程序入口

入口html：public/index.html
入口js脚本：src/main.js
dingc组件：src/App.vue
路由：src/router/index.js

main.js 中引入了App.vue和 router/index.js，根据路由配置，App.vue中的路由出口会显示相应的页面组件的内容

入口脚本
引入顶层组件模块和路由模块

顶层组件
路由出口的位置

路由配置
路由出口的位置显示的页面组件

2.2登录页组件关系

3. Layout

3.1路由

src/router/index.js：这个组件应用了Layout布局文件

3.2布局

src/layout/index.vue：侧边栏、导航栏、主内容区

3.3主内容区

src/layout/components/AppMain.vue：Layout的路由出口（主内容区）

3.4积分区间列表页面组件