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)

5.5.3.4. Integral interval list page components