Recognize reality, give up fantasy, prepare to fight

1. Component Definition

1. Create vue components

Create the following folders and files under the src/views folder

2、core/integral-grade/list.vue

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

3、core/integral-grade/form.vue

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

2. Routing 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: '积分等级管理', 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. Full stack development process

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 <template> part of the page component, as well as the script <script> and other parts , and then create the api module required for front-end and back-end docking, and finally initiate a call to the back-end interface through the api module.

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

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 line 37 of the mock/mock-server.js file

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

Second, the development of front-end components

1. Define the api module

Create the file 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. Define the page component script

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>

3. Define the page component template

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

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

Microservice project: Shangrongbao (14) (front-end platform: Shangrongbao management system routing configuration)