【金融项目】尚融宝项目（三）

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的路由出口（主内容区）

5.5.3.4、积分区间列表页面组件