Reconoce la realidad, abandona la fantasía, prepárate para luchar

1. Definición de componente

1. Crear componentes vue

Cree las siguientes carpetas y archivos en la carpeta src/views

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. Definición de enrutamiento

Modifique el archivo src/router/index.js, redefina constantRoutes y cópielo en el nodo de enrutamiento del panel.

Nota: El nombre de cada ruta no puede ser el mismo

{
    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. Proceso de desarrollo de pila completa

1. Proceso de llamada de front-end

La siguiente figura muestra varios módulos centrales involucrados en el proceso de desarrollo. Hemos completado la configuración de enrutamiento y la creación de componentes de página. A continuación, necesitamos mejorar aún más la plantilla <plantilla> parte del componente de página, así como el script <script> y otras partes, y luego cree el módulo api requerido para el acoplamiento de front-end y back-end, y finalmente inicie una llamada a la interfaz de back-end a través del módulo api.

2. Configuración del proxy inverso nginx

Actualmente, la arquitectura básica del front-end y back-end de la aplicación es la siguiente: srb-admin es el programa front-end, que llama directamente al microservicio srb-core del back-end

Para permitir que los programas de front-end se conecten a múltiples servicios de back-end al mismo tiempo, podemos usar una variedad de soluciones, como el proxy inverso nginx, la puerta de enlace de microservicio, etc. Aquí primero usamos nginx como la capa de proxy inverso entre los extremos delantero y trasero. La arquitectura es la siguiente

configuración de 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;
	}
}

comando nginx

iniciar nginx #Iniciar
nginx -s detener
#Detener nginx -s recargar #Recargar configuración

Configuración de front-end: .env.development

# API base: conectarse a nginx
VUE_APP_BASE_API = 'http://localhost'

3, servidor simulado

La modificación de VUE_APP_BASE_API afectará los datos simulados de la función de inicio de sesión simulado de la plataforma, por lo que es necesario modificar la dirección del servidor simulado

Modifique la línea 37 del archivo mock/mock-server.js

url: new RegExp(`/dev-api${url}`),

Modifique las llamadas de la interfaz en src/api/user.js y agregue la configuración para cada llamada remota

baseURL: '/dev-api',

En segundo lugar, el desarrollo de componentes front-end.

1. Definir el módulo api

Cree el archivo 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. Defina el script del componente de la página

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. Defina la plantilla del componente de página

<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. Modificación del interceptor de respuesta Axios

En src/utils/request.js se alineará 49

if (res.code !== 20000) {

cambiado a

if (res.code !== 0 && res.code !== 20000) {

Porque el resultado unificado de nuestra interfaz de back-end juzga 0 como un resultado de respuesta exitoso, y los datos simulados juzgan 20,000 resultados correctos.

Proyecto de microservicio: Shangrongbao (14) (plataforma frontal: configuración de enrutamiento del sistema de gestión de Shangrongbao)