Proyecto de educación en línea [Análisis de enrutamiento front-end e implementación de Ajax y análisis de conexión con back-end]

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.1: Prefijo de Acceso

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

 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 @/apiunder 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

Supongo que te gusta

Origin blog.csdn.net/m0_64550837/article/details/126689975
Recomendado
Clasificación