Tabla de contenido
1. Análisis de la implementación de enrutamiento front-end
1.1: Llamar a la ruta en el archivo de entrada
1.2: Definir el módulo de enrutamiento
1.3: Escribir un archivo de módulo de enrutamiento
1.3.1: Configurar una o más subrutas
1.3.2: Escribir el archivo correspondiente para el enrutamiento del profesor
2. Análisis de la interfaz de back-end (conexión con la puerta de enlace de back-end)
2.2: configuración de clase de herramienta axios
2.2.1: Ver clases de herramientas
2.2.3: Deshabilitar datos simulados
2.3: Interfaz de back-end personalizada
2.3.1: Modificar el archivo de inicio de sesión del usuario
1. Análisis de la implementación de enrutamiento front-end
1.1: Llamar a la ruta en el archivo de entrada
-
src/main.js Este archivo importa el enrutamiento, busque el enrutador en la ubicación de enrutamiento src
1.2: Definir el módulo de enrutamiento
Encuentre el archivo index.js debajo de la ruta
módulos: archivo de módulo de enrutamiento
Paso 1: Cree un archivo de enrutamiento teacher.js para el módulo del profesor
Paso 2: importa el archivo teacher.js en el archivo index.js
importar teacherRouter desde './modules/teacher'
Puede ver que está atenuado después de la importación porque este archivo no se ha declarado para ser utilizado
Paso 3: declara el archivo teacher.js
1.3: Escribir un archivo de módulo de enrutamiento
Puede escribir las variables de enrutamiento correspondientes al profesor en el archivo teacher.js del módulo
1.3.1: Configurar una o más subrutas
Modificar profesor.js
importar diseño desde '@/layout'
const profesorRouter = {
ruta: '/profesor', // ruta del prefijo del módulo actual, debe comenzar con /
componente: Diseño, // Use el componente de diseño para mostrar el módulo actual [predeterminado]
redirect: '/teacher/teacherList', // "Gestión de profesores" muestra la ruta por defecto
nombre: 'Gestión de profesores', // nombre de la ruta
meta: {
title: 'Gestión de profesores', // el nombre del menú de primer nivel, children.length==0 ocultar
icon: 'table' // Icono de menú de nivel 1, children.length==0 oculto
},
niños: [
{
ruta: 'lista de profesores',
componente: () => import('@/views/edu/teacher/teacherList'),
nombre: 'Lista de profesores',
meta: {título: 'Lista de profesores'} //Nombre del menú secundario
},
{
ruta: 'agregar profesor',
componente: () => import('@/views/edu/teacher/teacherAdd'),
nombre: 'Añadir profesor',
meta: {título: 'Agregar maestro'} // nombre del menú secundario
}
]
}
exportar profesor enrutador predeterminado
1.3.2: Escribir el archivo correspondiente para el enrutamiento del profesor
-
Crear una página de listado
@/views/edu/teacher/teacherList.vue
<template> <div> 所有老师 </div> </template> <script> export default { name: 'WORKSPACE_NAMEteacherList', data() { return { }; }, mounted() { }, methods: { }, }; </script> <style lang="scss" scoped> </style>
-
Crear página de agregar
@/views/edu/teacher/teacherAdd.vue
<template>
<div>
添加老师
</div>
</template>
<script>
export default {
name: 'WORKSPACE_NAMEteacherAdd',
data() {
return {
};
},
mounted() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>
2. Análisis de la interfaz de back-end (conexión con la puerta de enlace de back-end)
2.1: Prefijo de Acceso
Modificar el .env.development
archivo
De acuerdo con el acceso de la puerta de enlace de back-end
Esta es la ruta al acceso de inicio de sesión anterior:
Modifique la ruta de acceso después de conectarse al sitio web de back-end a través del archivo de configuración:
2.2: configuración de clase de herramienta axios
2.2.1: Ver clases de herramientas
element ui admin proporciona clases de herramientas que mejoran los axios nativos
-
Ubicación:
@/utils/request.js
2.2.2: Modificar la clase de herramienta
Modifique el archivo request.js para facilitar la visualización del error.
// Cuando la solicitud es anómala, imprime el aviso (ruta, etc., datos, etc.)
console.info(response.config, res)
2.2.3: Deshabilitar datos simulados
Estos trabajos preliminares han sido completados
2.3: Interfaz de back-end personalizada
Para mantener el programa en la etapa posterior, todas las rutas de acceso de axios se extraen uniformemente a @/api
under y se crea un archivo js para cada módulo.
2.3.1: Modificar el archivo de inicio de sesión del usuario
Revisar@/api/user.js
import axios from '@/utils/request'
export function login(user) {
//这边登录功能属于user后端先不写
//return axios.post(`/user-service/user/login`,user)
//临时模拟数据进行登录完善老师模块的功能
return axios.post(`/teacher-service/user/login`,user)
}
export function getInfo(token) {
//return axios.get('/user-service/user/info',{
return axios.get('/teacher-service/user/info',{
params: {token}
});
}
export function logout() {
return axios({
url: '/vue-element-admin/user/logout',
method: 'post'
})
}
En este momento, la ruta de acceso se ha cambiado por completo y 404 es una excepción controlable.
En el servicio del profesor, cree una clase de procesamiento de inicio de sesión temporal
JavaBean: Usuario
package com.czxy.zx.temp;
import lombok.Data;
@Data
public class User {
private String username;
private String password;
}
Clase de procesamiento: UserController, Element UI Admin
@RestController
@RequestMapping("/user")
@Api(tags = "主页登录",description = "模拟登录")
public class UserController {
/**
* 用户登录
* @param user
* @return
*/
@PostMapping("/login")
@ApiOperation("模拟登录")
public BaseResult login(@RequestBody User user) {
Map<String,Object> map = new HashMap<>();
if("admin".equals(user.getUsername())) {
map.put("token", "admin-token");
} else {
map.put("token", "editor-token");
}
return BaseResult.ok("登录成功",map);
}
@GetMapping("/info")
@ApiOperation("模拟登录")
public BaseResult login(String token) {
Map<String,Object> map = new HashMap<>();
if("admin-token".equals(token)) {
map.put("roles", Arrays.asList("admin"));
map.put("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
map.put("name", "Super Admin");
} else {
map.put("roles", Arrays.asList("editor"));
map.put("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
map.put("name", "Normal Editor");
}
return BaseResult.ok("登录成功",map);
}
}
Aquí también hay un inicio de sesión exitoso