在线教育项目【前端路由和Ajax实现分析&与后端连接分析】

àì夳堔傛蜴生んèń 2023-10-01 23:50 27阅读 0赞

**目录**

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

![08cadd91a673496ba92860849983bf8d.png][]

### 1.2：定义路由模块 ###

![c578a9b80187410bb09df4ca23551d8a.png][]

找到路由下的index.js文件

modules：路由模块文件

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

![78abef5f99b343cfa924999c5b2726d1.png][]

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

> import teacherRouter from './modules/teacher'

![76e3a2876f44460b8406450342a5af2e.png][]

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

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

![3d92292c773d4dd48386a666b54ab3ae.png][]

### 1.3：编写路由模块文件 ###

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

![34a56a6193cb4df9b23f65971210ae4b.png][]

#### 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

![58d2674b0e0f4ab0941722d5c22177ce.png][]

![fa0defeb8b08493cb50e7c713022d4f7.png][]

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

![a1eb1ad119214178bdbaa85ef546d679.png][]

*  创建列表页面 `@/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>
 *  创建添加页面 `@/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>

![f1c555f0a6174af0aa40afc0343f6f70.png][]

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

![76615d6bcd014de38bded22b2ef0752d.png][]

### 2.1：访问前缀 ###

![b83d23633aef4bdfacc6ff153e965f83.png][]

修改 `.env.development` 文件

![1a7c6b5b17604fbf84a4eb8c96111003.png][]

和后端网关访问保持一致

![b03e718076ab4ee8ae73041cf3fbaed2.png][]

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

![f21a6191e6fa42a5a756a4a5fce33d9a.png][]

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

![14eaa738f5be4b88a058691c84a23ee1.png][]

### 2.2：axios工具类配置 ###

![d3bc23adf8634cf3b86a79f3cb55d909.png][]

#### 2.2.1：查看工具类 ####

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

*  位置：`@/utils/request.js`

![ebccf788119f48c5a7299df9a09e761e.png][]

**2.2.2：修改工具类**

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

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

![48df3638631a41a09c3653786ad53783.png][]

#### 2.2.3：禁用模拟数据 ####

![10373010a1244afe8ed1d534319f1e1a.png][]

这些前期工作已经完成

### 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属于可控异常

![797990a65cec465caca1681b8cb16a72.png][]

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

![ec92af6565444e08b45b814dd05a81ed.png][]

JavaBean：User

package com.czxy.zx.temp;
    
    import lombok.Data;
    
    
    @Data
    public 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<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);
        }
    }

这边也是成功登录

[08cadd91a673496ba92860849983bf8d.png]: https://img-blog.csdnimg.cn/08cadd91a673496ba92860849983bf8d.png
[c578a9b80187410bb09df4ca23551d8a.png]: https://img-blog.csdnimg.cn/c578a9b80187410bb09df4ca23551d8a.png
[78abef5f99b343cfa924999c5b2726d1.png]: https://img-blog.csdnimg.cn/78abef5f99b343cfa924999c5b2726d1.png
[76e3a2876f44460b8406450342a5af2e.png]: https://img-blog.csdnimg.cn/76e3a2876f44460b8406450342a5af2e.png
[3d92292c773d4dd48386a666b54ab3ae.png]: https://img-blog.csdnimg.cn/3d92292c773d4dd48386a666b54ab3ae.png
[34a56a6193cb4df9b23f65971210ae4b.png]: https://img-blog.csdnimg.cn/34a56a6193cb4df9b23f65971210ae4b.png
[58d2674b0e0f4ab0941722d5c22177ce.png]: https://img-blog.csdnimg.cn/58d2674b0e0f4ab0941722d5c22177ce.png
[fa0defeb8b08493cb50e7c713022d4f7.png]: https://img-blog.csdnimg.cn/fa0defeb8b08493cb50e7c713022d4f7.png
[a1eb1ad119214178bdbaa85ef546d679.png]: https://img-blog.csdnimg.cn/a1eb1ad119214178bdbaa85ef546d679.png
[f1c555f0a6174af0aa40afc0343f6f70.png]: https://img-blog.csdnimg.cn/f1c555f0a6174af0aa40afc0343f6f70.png
[76615d6bcd014de38bded22b2ef0752d.png]: https://img-blog.csdnimg.cn/76615d6bcd014de38bded22b2ef0752d.png
[b83d23633aef4bdfacc6ff153e965f83.png]: https://img-blog.csdnimg.cn/b83d23633aef4bdfacc6ff153e965f83.png
[1a7c6b5b17604fbf84a4eb8c96111003.png]: https://img-blog.csdnimg.cn/1a7c6b5b17604fbf84a4eb8c96111003.png
[b03e718076ab4ee8ae73041cf3fbaed2.png]: https://img-blog.csdnimg.cn/b03e718076ab4ee8ae73041cf3fbaed2.png
[f21a6191e6fa42a5a756a4a5fce33d9a.png]: https://img-blog.csdnimg.cn/f21a6191e6fa42a5a756a4a5fce33d9a.png
[14eaa738f5be4b88a058691c84a23ee1.png]: https://img-blog.csdnimg.cn/14eaa738f5be4b88a058691c84a23ee1.png
[d3bc23adf8634cf3b86a79f3cb55d909.png]: https://img-blog.csdnimg.cn/d3bc23adf8634cf3b86a79f3cb55d909.png
[ebccf788119f48c5a7299df9a09e761e.png]: https://img-blog.csdnimg.cn/ebccf788119f48c5a7299df9a09e761e.png
[48df3638631a41a09c3653786ad53783.png]: https://img-blog.csdnimg.cn/48df3638631a41a09c3653786ad53783.png
[10373010a1244afe8ed1d534319f1e1a.png]: https://img-blog.csdnimg.cn/10373010a1244afe8ed1d534319f1e1a.png
[797990a65cec465caca1681b8cb16a72.png]: https://img-blog.csdnimg.cn/797990a65cec465caca1681b8cb16a72.png
[ec92af6565444e08b45b814dd05a81ed.png]: https://img-blog.csdnimg.cn/ec92af6565444e08b45b814dd05a81ed.png