5. Front-end construction of management platform
5.1. Build the front-end program of the management platform
5.1.1,vue-element-admin
vue-element-admin is a background management system integration solution based on element-ui.
GitHub address: https://github.com/PanJiaChen/vue-element-admin
Project online preview: https://panjiachen.gitee.io/vue-element-admin
5.1.2,vue-admin-template
5.1.2.1. Introduction
vueAdmin-template is a set of basic templates (minimum simplified version) of the background management system based on vue-element-admin, which can be used as a template for secondary development.
**GitHub address:**https://github.com/PanJiaChen/vue-admin-template
**Dynamic generation of sidebar branches based on user roles: **https://github.com/PanJiaChen/vue-admin-template/tree/permission-control
5.1.2.2, installation and operation
# Unzip the compressed package vue-admin-template-permission-control.zip # Renamed to srb-admin # enter the directory cd srb-admin # Install dependencies npm install # start up. After execution, the browser automatically pops up and accesses http://localhost:9528/ npm run dev
5.1.3. Front-end configuration
5.1.3.1. Disable ESLint syntax checking
Disable ESLint syntax checking at line 30 of vue.config.js
lintOnSave: false,
5.1.3.2, add prettier formatting configuration
Create a new file .prettierrc in the root directory of the vue project
{ "semi": false, "singleQuote": true, "htmlWhitespaceSensitivity": "ignore" }
5.1.3.3. Modify page title
Modify the page title at line 3 of src/settings.js
5.1.3.4. Internationalization settings
Modify the language at line 7 of src/main.js
Test platform language modification
5.1.3.5. Drop-down menu modification
5.1.3.6. Login page modification
src/views/login/index.vue
Modify page title, login button, etc.
5.2. Routing configuration of Shangrongbao management system
5.2.1**, component definition**
5.2.1.1. Create vue components
Create the following folders and files under the src/views folder
5.2.1.2,core/integral-grade/list.vue
<template> <div class="app-container"> Point level list </div> </template>
5.2.1.3,core/integral-grade/form.vue
<template> <div class="app-container"> Points Rating Form </div> </template>
5.2.2, route definition
Modify the src/router/index.js file, redefine constantRoutes, and copy it to the dashboard routing node
Note: The name of each route cannot be the same
{ path: '/core/integral-grade', component: Layout, redirect: '/core/integral-grade/list', name: 'coreIntegralGrade', meta: { title: 'Point level management', icon: 'el-icon-s-marketing' }, alwaysShow: true, children: [ { path: 'list', name: 'coreIntegralGradeList', component: () => import('@/views/core/integral-grade/list'), meta: { title: 'Point level list' } }, { path: 'create', name: 'coreIntegralGradeCreate', component: () => import('@/views/core/integral-grade/form'), meta: { title: 'Add points level' } }, { path: 'edit/:id', name: 'coreIntegralGradeEdit', component: () => import('@/views/core/integral-grade/form'), meta: { title: 'Edit points level' }, hidden: true } ] },
5.3. Front-end project development process
5.3.1. Full stack development process
5.3.1.1. Front-end calling process
The following figure shows several core modules involved in the development process. We have completed the configuration of routing and the creation of page components. Next, we need to further improve the template part of page components and scripts.
5.3.1.2, nginx reverse proxy configuration
At present, the basic architecture of the front-end and back-end of the application is as follows: srb-admin is the front-end program, which directly calls the srb-core microservice of the back-end
In order to allow front-end programs to connect to multiple back-end services at the same time, we can use a variety of solutions, such as nginx reverse proxy, microservice gateway, etc. Here we first use nginx as the reverse proxy layer between the front and back ends. The architecture is as follows
nginx configuration
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 command
start nginx #start up nginx -s stop #stop nginx -s reload #reload configuration
Front-end configuration: .env.development
# base api: connect to nginx VUE_APP_BASE_API = 'http://localhost'
5.3.1.3,mock-server
The modification of VUE_APP_BASE_API will affect the mock data of the platform's simulated login function, so it is necessary to modify the address of the mock-server
Modify mock/mock-server.js file line 37
url: new RegExp(`/dev-api${url}`),
Modify the interface calls in src/api/user.js and add configuration for each remote call
baseURL: '/dev-api',
5.3.2. Front-end component development
5.3.2.1, define api module
Create the file src/api/core/integral-grade.js
// The @ symbol is configured in vue.config.js and represents an alias for the 'src' path import request from '@/utils/request' export default { list() { return request({ url: '/admin/core/integralGrade/list', method: 'get' }) } }
5.3.2.2. Define page component script
src/views/core/integral-grade/list.vue
<script> import integralGradeApi from '@/api/core/integral-grade' export default { // Define the data model data() { return { list: [] // Datasheets } }, // Get data after page rendering is successful created() { this.fetchData() }, // define method methods: { fetchData() { // call api integralGradeApi.list().then(response => { this.list = response.data.list }) } } } </script>
5.3.2.3. Define page component template
<template> <div class="app-container"> <!-- sheet --> <el-table :data="list" border stripe> <el-table-column type="index" width="50" /> <el-table-column prop="borrowAmount" label="loan amount" /> <el-table-column prop="integralStart" label="The scoring interval begins" /> <el-table-column prop="integralEnd" label="End of point interval" /> </el-table> </div> </template>
5.3.2.4, axios response interceptor modification
In src/utils/request.js will line 49
if (res.code !== 20000) {
changed to
if (res.code !== 0 && res.code !== 20000) {
Because the unified result of our back-end interface judges 0 as a successful response result, and the mock data judges 20,000 correct results
5.4. Improve the integral level module
5.4.1**, delete data**
5.4.1.1, define api
src/api/core/integral-grade.js
removeById(id) { return request({ url: `/admin/core/integralGrade/remove/${id}`, method: 'delete' }) }
5.4.1.2, page component template
src/views/core/integral-grade/list.vue, add and delete columns in the table component
<el-table-column label="operate" width="200" align="center"> <template slot-scope="scope"> <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(scope.row.id)" > delete </el-button> </template> </el-table-column>
5.4.1.3. Delete data script
// delete data by id removeById(id) { this.$confirm('This action will permanently delete the record, Whether to continue?', 'hint', { confirmButtonText: 'Sure', cancelButtonText: 'Cancel', type: 'warning' }) .then(() => { integralGradeApi.removeById(id).then(response => { this.$message.success(response.message) this.fetchData() }) }) .catch(error => { this.$message.info('undelete') }) }
5.4.2. New data
5.4.2.1, define api
src/api/core/integral-grade.js
save(integralGrade) { return request({ url: '/admin/core/integralGrade/save', method: 'post', data: integralGrade }) }
5.4.2.2. Define page data
src/views/core/integral-grade/form.vue, improve the data definition
<script> export default { data() { return { integralGrade: {}, // Initialization data saveBtnDisabled: false // Whether the save button is disabled to prevent repeated form submissions } } } </script>
5.4.2.3, page component template
src/views/core/integral-grade/form.vue, perfect template
<template> <div class="app-container"> <!-- input form --> <el-form label-width="120px"> <el-form-item label="loan amount"> <el-input-number v-model="integralGrade.borrowAmount" :min="0" /> </el-form-item> <el-form-item label="The scoring interval begins"> <el-input-number v-model="integralGrade.integralStart" :min="0" /> </el-form-item> <el-form-item label="End of point interval"> <el-input-number v-model="integralGrade.integralEnd" :min="0" /> </el-form-item> <el-form-item> <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate()" > save </el-button> </el-form-item> </el-form> </div> </template>
5.4.2.4. New data script
src/views/core/integral-grade/form.vue, import api
import integralGradeApi from '@/api/core/integral-grade'
Define save method
methods: { saveOrUpdate() { // Disable save button this.saveBtnDisabled = true this.saveData() }, // Add data 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, echo data
5.4.3.1. List page edit button
src/views/core/integral-grade/list.vue, add the "Modify" button in the "Operation" column of the table
<router-link :to="'/core/integral-grade/edit/' + scope.row.id" style="margin-right:5px;" > <el-button type="primary" size="mini" icon="el-icon-edit"> Revise </el-button> </router-link>
5.4.3.2, define api
src/api/core/integral-grade.js
getById(id) { return request({ url: `/admin/core/integralGrade/get/${id}`, method: 'get' }) }
5.4.3.3. Get data script
src/views/core/integral-grade/form.vue, the echo method is defined in methods
// Query records by id fetchDataById(id) { integralGradeApi.getById(id).then(response => { this.integralGrade = response.data.record }) }
Get data after page rendering is successful
Because the following is defined in the route: path: 'edit/:id', you can use this.$route.params.id to get the id in the route
//The page is rendered successfully created() { if (this.$route.params.id) { this.fetchDataById(this.$route.params.id) } },
5.4.4. Update data
5.4.4.1, define api
src/api/core/integral-grade.js
updateById(integralGrade) { return request({ url: '/admin/core/integralGrade/update', method: 'put', data: integralGrade }) }
5.4.4.2. Update data script
src/views/core/integral-grade/form.vue, updateData is defined in methods
// Update record based on id updateData() { // data acquisition integralGradeApi.updateById(this.integralGrade).then(response => { this.$message({ type: 'success', message: response.message }) this.$router.push('/core/integral-grade/list') }) }
Improve the saveOrUpdate method
saveOrUpdate() { // Disable save button this.saveBtnDisabled = true if (!this.integralGrade.id) { this.saveData() } else { this.updateData() } },
5.5, about Vue components (understand)
5.5.1. What is a component
Component s are one of the most powerful features of Vue.js.
Components can extend HTML elements, encapsulating reusable code.
The component system allows us to build large applications with independent and reusable small components. Almost any type of application interface can be abstracted into a component tree:
5.5.2. Analysis of project components
5.5.2.1. Program entry
- Entry html: public/index.html
- Entry js script: src/main.js
- Top-level component: src/App.vue
- Route: src/router/index.js
App.vue and router/index.js are introduced in main.js. According to the routing configuration, the routing exit in App.vue will display the content of the corresponding page components
entry script
Introduce top-level component modules and routing modules
top level component
Location of route exit
routing configuration
The page component displayed by the location of the route exit
5.5.2.2. Component relationship of login page
5.5.3,Layout
5.5.3.1. Routing
src/router/index.js: This component applies the Layout layout file
5.5.3.2. Layout
src/layout/index.vue: sidebar, navigation bar, main content area
5.5.3.3. Main content area
src/layout/components/AppMain.vue: Layout's routing exit (main content area)