融易宝项目管理平台前台搭建
关注微信公众号：序辑，回复 管理前台代码 获取前端代码
一、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() {
// 调用api
integralGradeApi.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-button
type="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 = 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')
})
}
}
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 = true
if (!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-button
type="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 = true
if (!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积分区间列表页面组件
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
