Table of contents
1. Analysis of front-end routing implementation
1.1: Call the route in the entry file
1.2: Define the routing module
1.3: Write a routing module file
1.3.1: Configure one or more sub-routes
1.3.2: Write the corresponding file for teacher routing
2. Back-end interface analysis (connecting with the back-end gateway)
2.2: axios tool class configuration
2.3.1: Modify the user login file
1. Analysis of front-end routing implementation
1.1: Call the route in the entry file
-
src/main.js This file imports routing, find the router under the routing location src
1.2: Define the routing module
Find the index.js file under the route
modules: routing module file
Step 1: Create a routing file teacher.js for the teacher module
Step 2: Import the teacher.js file in the index.js file
import teacherRouter from './modules/teacher'
You can see that it is grayed out after importing because this file has not been declared to be used
Step 3: Declare the teacher.js file
1.3: Write a routing module file
You can write the routing variables corresponding to the teacher in the teacher.js file of the module
1.3.1: Configure one or more sub-routes
Modify teacher.js
import Layout from '@/layout'
const teacherRouter = {
path: '/teacher', // current module prefix path, must start with /
component: Layout, // Use the layout component to display the current module [default]
redirect: '/teacher/teacherList', // "Teacher Management" displays the route by default
name: 'Teacher management', // route name
meta: {
title: 'Teacher management', // the name of the first-level menu, children.length==0 hide
icon: 'table' // Level 1 menu icon, children.length==0 hidden
},
children: [
{
path: 'teacherList',
component: () => import('@/views/edu/teacher/teacherList'),
name: 'Teacher list',
meta: { title: 'Teacher List' } //Secondary menu name
},
{
path: 'teacherAdd',
component: () => import('@/views/edu/teacher/teacherAdd'),
name: 'Add teacher',
meta: { title: 'Add teacher' } // secondary menu name
}
]
}
export default teacherRouter
1.3.2: Write the corresponding file for teacher routing
-
Create a listing page
@/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> -
Create add page
@/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. Back-end interface analysis (connecting with the back-end gateway)
2.1: Access Prefix
Modify the .env.developmentfile
Consistent with back-end gateway access
This is the path to the previous login access:
Modify the access path after connecting to the back-end website through the configuration file:
2.2: axios tool class configuration
2.2.1: View tool classes
element ui admin provides tool classes that enhance native axios
-
Location:
@/utils/request.js
2.2.2: Modify the tool class
Modify the request.js file for the convenience of viewing the error
// When the request is abnormal, print the prompt (path, etc., data, etc.)
console.info(response.config, res)
2.2.3: Disable mock data
These preliminary works have been completed
2.3: Custom backend interface
In order to maintain the program in the later stage, all the axios access paths are uniformly extracted to @/apiunder , and a js file is created for each module.
2.3.1: Modify the user login file
Revise@/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'
})
}At this time, the access path has been completely changed, and 404 is a controllable exception.
In the teacher service, create a temporary login processing class
JavaBean: User
package com.czxy.zx.temp;
import lombok.Data;
@Data
public class User {
private String username;
private String password;
}
Processing class: 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);
}
}Here is also a successful login