目录

1，前端路由实现分析

1.1：入口文件中调用路由

1.2：定义路由模块

1.3：编写路由模块文件

1.3.1：配置一个或者多个子路由

1.3.2：编写教师路由对应的文件

 2，后端接口分析（与后端网关连接）

2.1：访问前缀

2.2：axios工具类配置

2.2.1：查看工具类

2.2.3：禁用模拟数据

2.3：自定义后端接口

2.3.1：修改用户登录文件

1，前端路由实现分析

1.1：入口文件中调用路由

• src/main.js  这个文件中导入了路由 ，找一下路由位置src下的router

1.2：定义路由模块

 找到路由下的index.js文件

modules：路由模块文件

第一步：创建一个老师模块的路由文件teacher.js

第二步：在index.js文件中导入teacher.js文件

import teacherRouter from './modules/teacher'

 可以看到导入之后是灰的这是因为还没有声明使用这个文件

第三步：声明teacher.js这个文件

1.3：编写路由模块文件

可以模块teacher.js文件中书写teacher对应的路由变量

1.3.1：配置一个或者多个子路由

修改teacher.js

import Layout from '@/layout'

const teacherRouter = {

path: '/teacher', // 当前模块前缀路径，必须以/开头

component: Layout, // 采用布局组件显示当前模块【默认】

redirect: '/teacher/teacherList', // “教师管理”默认显示路由

name: '教师管理', // 路由名称

meta: {

title: '教师管理', // 一级菜单名称，children.length==0 隐藏

icon: 'table' // 一级菜单图标，children.length==0 隐藏

},

children: [

{

path: 'teacherList',

component: () => import('@/views/edu/teacher/teacherList'),

name: '教师列表',

meta: { title: '教师列表' } //二级菜单名称

},

{

path: 'teacherAdd',

component: () => import('@/views/edu/teacher/teacherAdd'),

name: '添加老师',

meta: { title: '添加老师' } //二级菜单名称

}

]

}

export default teacherRouter

1.3.2：编写教师路由对应的文件

• 创建列表页面 @/views/edu/teacher/teacherList.vue

      
   所有老师    
  export default {    name: 'WORKSPACE_NAMEteacherList',    data() { return {      };    },    mounted() {     },    methods: {     },};

• 创建添加页面 @/views/edu/teacher/teacherAdd.vue

    
 添加老师    
export default {    name: 'WORKSPACE_NAMEteacherAdd',    data() { return {      };    },    mounted() {     },    methods: {     },};

 2，后端接口分析（与后端网关连接）

2.1：访问前缀

 修改 .env.development 文件

 和后端网关访问保持一致

 这是之前的登录访问的路径：

 通过配置文件修改对接后端网站之后的访问路径：

2.2：axios工具类配置

2.2.1：查看工具类

 element ui admin 提供了对原生axios进行了增强的工具类

• 位置：@/utils/request.js

2.2.2：修改工具类

为了方便查看报错修改一下request.js文件

// 请求异常时，打印提示(路径等,数据等)
console.info(response.config, res)

2.2.3：禁用模拟数据

这些前期工作已经完成 

2.3：自定义后端接口

为了方面后期程序的维护，统一将所有axios访问路径，抽取到 @/api下，且一个模块创建一个js文件。

2.3.1：修改用户登录文件

修改 @/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'  })}

这时访问路径就已经完全改好，404属于可控异常 

在 teacher服务中，创建临时登录处理类

JavaBean：User

package com.czxy.zx.temp;import lombok.Data;@Datapublic class User {    private String username;    private String password;}

 处理类：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 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 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);    }}

 这边也是成功登录