3.前端路由实现分析

3.1入口文件中调用路由

src/main.js

3.2 定义路由模块

src/router/index.js

步骤1：创建自定义路由文件 @/router/modules/teacher.js
步骤2：导入自定义路由文件

<span style="background-color:#f8f8f8">import teacherRouter from './modules/teacher'      //自定义模块--老师模块</span>

步骤3：启用自定义模块路由

<span style="background-color:#f8f8f8"> teacherRouter,      //自定义模块--老师模块</span>

3.3 编写路由模块文件

创建 @/router/modules/teacher.js

3.3.1 配置一个子路由

修改teacher.js

<span style="background-color:#f8f8f8"><span style="color:#aa5500">/** When your routing table is too long, you can split it into small modules **/</span>

<span style="color:#770088">import</span> <span style="color:#0000ff">Layout</span> <span style="color:#770088">from</span> <span style="color:#aa1111">'@/layout'</span>

<span style="color:#770088">const</span> <span style="color:#0000ff">teacherRouter</span> <span style="color:#981a1a">=</span> {
  <span style="color:#000000">path</span>: <span style="color:#aa1111">'/teacher'</span>,           <span style="color:#aa5500">// 当前模块前缀路径，必须以/开头</span>
  <span style="color:#000000">component</span>: <span style="color:#000000">Layout</span>,          <span style="color:#aa5500">// 采用布局组件显示当前模块【默认】</span>
  <span style="color:#000000">redirect</span>: <span style="color:#aa1111">'/teacher/list'</span>,  <span style="color:#aa5500">// “教师管理”默认显示路由</span>
  <span style="color:#000000">name</span>: <span style="color:#aa1111">'教师管理'</span>,            <span style="color:#aa5500">// 路由名称</span>
  <span style="color:#000000">meta</span>: {
    <span style="color:#000000">title</span>: <span style="color:#aa1111">'教师管理'</span>,         <span style="color:#aa5500">// 一级菜单名称，children.length==0 隐藏</span>
    <span style="color:#000000">icon</span>: <span style="color:#aa1111">'table'</span>             <span style="color:#aa5500">// 一级菜单图标，children.length==0 隐藏</span>
  },
  <span style="color:#000000">children</span>: [
    {
      <span style="color:#000000">path</span>: <span style="color:#aa1111">'list'</span>,
      <span style="color:#000000">component</span>: () <span style="color:#981a1a">=></span> <span style="color:#770088">import</span>(<span style="color:#aa1111">'@/views/edu/teacher/list'</span>),
      <span style="color:#000000">name</span>: <span style="color:#aa1111">'教师列表'</span>,
      <span style="color:#000000">meta</span>: { <span style="color:#000000">title</span>: <span style="color:#aa1111">'教师列表'</span> }   <span style="color:#aa5500">//二级菜单名称</span>
    }
  ]
}
<span style="color:#770088">export</span> <span style="color:#770088">default</span> <span style="color:#000000">teacherRouter</span>
</span>

3.3.2 配置多个子路由

修改teacher.js，添加add子路由

<span style="background-color:#f8f8f8">/** When your routing table is too long, you can split it into small modules **/
import Layout from '@/layout'
const teacherRouter = {
  path: '/teacher',           // 当前模块前缀路径，必须以/开头
  component: Layout,          // 采用布局组件显示当前模块【默认】
  redirect: '/teacher/list',  // “教师管理”默认显示路由
  name: '教师管理',            // 路由名称
  meta: {
    title: '教师管理',         // 一级菜单名称，children.length==0 隐藏
    icon: 'table'             // 一级菜单图标，children.length==0 隐藏
  },
  children: [
    {
      path: 'list',
      component: () => import('@/views/edu/teacher/list'),
      name: '教师列表',
      meta: { title: '教师列表', icon: 'list' }   //二级菜单名称
    },
    {
      path: 'add',
      component: () => import('@/views/edu/teacher/add'),
      name: '添加教师',
      meta: { title: '添加教师', icon: 'edit'  }   //二级菜单名称
    }
  ]
}
export default teacherRouter
</span>

3.4 编写教师路由对应的文件

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

<span style="background-color:#f8f8f8"><template>
  <div>
    教师管理
  </div>
</template></span>

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

<span style="background-color:#f8f8f8"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
    添加
  <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span></span>

4. 后端接口分析

4.1 访问前缀

修改 .env.development

<span style="background-color:#f8f8f8"># just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:10010/'</span>

4.2 axios工具类配置

4.2.1 查看工具类

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

位置：@/utils/request.js
内容：

<span style="background-color:#f8f8f8"><span style="color:#aa5500">// 导入axios</span>
<span style="color:#770088">import</span> <span style="color:#0000ff">axios</span> <span style="color:#770088">from</span> <span style="color:#aa1111">'axios'</span>

<span style="color:#aa5500">// 创建axios实例，并使用 VUE_APP_BASE_API 确定的访问前缀</span>
<span style="color:#770088">const</span> <span style="color:#0000ff">service</span> <span style="color:#981a1a">=</span> <span style="color:#000000">axios</span>.<span style="color:#000000">create</span>({
  <span style="color:#000000">baseURL</span>: <span style="color:#000000">process</span>.<span style="color:#000000">env</span>.<span style="color:#000000">VUE_APP_BASE_API</span>, <span style="color:#aa5500">// url = base url + request url</span>
  <span style="color:#aa5500">// withCredentials: true, // send cookies when cross-domain requests</span>
  <span style="color:#000000">timeout</span>: <span style="color:#116644">5000</span> <span style="color:#aa5500">// request timeout</span>
})

<span style="color:#aa5500">// 请求处理（略）</span>
<span style="color:#000000">service</span>.<span style="color:#000000">interceptors</span>.<span style="color:#000000">request</span>.<span style="color:#000000">use</span>(<span style="color:#555555">...</span>)
<span style="color:#aa5500">// 响应处理（略）</span>
<span style="color:#000000">service</span>.<span style="color:#000000">interceptors</span>.<span style="color:#000000">response</span>.<span style="color:#000000">use</span>(<span style="color:#555555">...</span>)  

<span style="color:#aa5500">// 返回处理后的axios</span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> <span style="color:#000000">service</span></span>

4.2.2 修改工具类

完善工具类，打印错误提示信息

1.<span style="background-color:#f8f8f8"><span style="color:#aa5500">// 请求异常时，打印提示(路径等,数据等)</span>
<span style="color:#000000">console</span>.<span style="color:#000000">info</span>(<span style="color:#000000">response</span>.<span style="color:#000000">config</span>, <span style="color:#000000">res</span>)</span>

4.2.3 禁用模拟数据

4.3 自定义后端接口

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

4.3.1 修改用户登录文件

修改 @/api/user.js

<span style="background-color:#f8f8f8"><span style="color:#333333">import axios from '@/utils/request'
export function login(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'
  })
}
</span></span>

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

JavaBean：User

<span style="background-color:#f8f8f8">package com.czxy.zx.temp;
import lombok.Data;
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 */
@Data
public class User {
    private String username;
    private String password;
}
</span>

处理类：UserController，Element UI Admin

<span style="background-color:#f8f8f8"><span style="color:#770088">package</span> <span style="color:#0000ff">com</span>.<span style="color:#000000">czxy</span>.<span style="color:#000000">zx</span>.<span style="color:#000000">temp</span>;

<span style="color:#770088">import</span> <span style="color:#000000">com</span>.<span style="color:#000000">czxy</span>.<span style="color:#000000">zx</span>.<span style="color:#000000">vo</span>.<span style="color:#000000">BaseResult</span>;
<span style="color:#770088">import</span> <span style="color:#000000">org</span>.<span style="color:#000000">springframework</span>.<span style="color:#000000">web</span>.<span style="color:#000000">bind</span>.<span style="color:#000000">annotation</span>.<span style="color:#981a1a">*</span>;

<span style="color:#770088">import</span> <span style="color:#000000">java</span>.<span style="color:#000000">util</span>.<span style="color:#000000">Arrays</span>;
<span style="color:#770088">import</span> <span style="color:#000000">java</span>.<span style="color:#000000">util</span>.<span style="color:#000000">HashMap</span>;
<span style="color:#770088">import</span> <span style="color:#000000">java</span>.<span style="color:#000000">util</span>.<span style="color:#000000">Map</span>;

<span style="color:#aa5500">/**</span>
 <span style="color:#aa5500">* @author 桐叔</span>
 <span style="color:#aa5500">* @email liangtong@itcast.cn</span>
 <span style="color:#aa5500">*/</span>
<span style="color:#555555">@RestController</span>
<span style="color:#555555">@RequestMapping</span>(<span style="color:#aa1111">"/user"</span>)
<span style="color:#770088">public</span> <span style="color:#770088">class</span> <span style="color:#0000ff">UserController</span> {
    <span style="color:#aa5500">/**</span>
     <span style="color:#aa5500">* 用户登录</span>
     <span style="color:#aa5500">* @param user</span>
     <span style="color:#aa5500">* @return</span>
     <span style="color:#aa5500">*/</span>
    <span style="color:#555555">@PostMapping</span>(<span style="color:#aa1111">"/login"</span>)
    <span style="color:#770088">public</span> <span style="color:#000000">BaseResult</span> <span style="color:#000000">login</span>(<span style="color:#555555">@RequestBody</span> <span style="color:#000000">User</span> <span style="color:#000000">user</span>) {
        <span style="color:#000000">Map</span><span style="color:#981a1a"><</span><span style="color:#008855">String</span>,<span style="color:#008855">Object</span><span style="color:#981a1a">></span> <span style="color:#000000">map</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">HashMap</span><span style="color:#981a1a"><></span>();
        <span style="color:#770088">if</span>(<span style="color:#aa1111">"admin"</span>.<span style="color:#000000">equals</span>(<span style="color:#000000">user</span>.<span style="color:#000000">getUsername</span>())) {
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"token"</span>, <span style="color:#aa1111">"admin-token"</span>);
        } <span style="color:#770088">else</span> {
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"token"</span>, <span style="color:#aa1111">"editor-token"</span>);
        }
        <span style="color:#770088">return</span> <span style="color:#000000">BaseResult</span>.<span style="color:#000000">ok</span>(<span style="color:#aa1111">"登录成功"</span>,<span style="color:#000000">map</span>);
    }

    <span style="color:#555555">@GetMapping</span>(<span style="color:#aa1111">"/info"</span>)
    <span style="color:#770088">public</span> <span style="color:#000000">BaseResult</span> <span style="color:#000000">login</span>(<span style="color:#008855">String</span> <span style="color:#000000">token</span>) {
        <span style="color:#000000">Map</span><span style="color:#981a1a"><</span><span style="color:#008855">String</span>,<span style="color:#008855">Object</span><span style="color:#981a1a">></span> <span style="color:#000000">map</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">HashMap</span><span style="color:#981a1a"><></span>();
        <span style="color:#770088">if</span>(<span style="color:#aa1111">"admin-token"</span>.<span style="color:#000000">equals</span>(<span style="color:#000000">token</span>)) {
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"roles"</span>, <span style="color:#000000">Arrays</span>.<span style="color:#000000">asList</span>(<span style="color:#aa1111">"admin"</span>));
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"avatar"</span>, <span style="color:#aa1111">"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"</span>);
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"name"</span>, <span style="color:#aa1111">"Super Admin"</span>);
        } <span style="color:#770088">else</span> {
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"roles"</span>, <span style="color:#000000">Arrays</span>.<span style="color:#000000">asList</span>(<span style="color:#aa1111">"editor"</span>));
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"avatar"</span>, <span style="color:#aa1111">"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"</span>);
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"name"</span>, <span style="color:#aa1111">"Normal Editor"</span>);
        }
        <span style="color:#770088">return</span> <span style="color:#000000">BaseResult</span>.<span style="color:#000000">ok</span>(<span style="color:#aa1111">"登录成功"</span>,<span style="color:#000000">map</span>);
    }
}
</span>

修改用户登录处理函数，打印错误信息，方便出错提示

4.3.2 教师接口文件

创建 @/api/edu/teacher.js 文件

<span style="background-color:#f8f8f8"><span style="color:#aa5500">// 导入axios工具类</span>
<span style="color:#770088">import</span> <span style="color:#0000ff">axios</span> <span style="color:#770088">from</span> <span style="color:#aa1111">'@/utils/request'</span>

<span style="color:#aa5500">//编写具体功能，一个功能一个函数，并使用export导出</span>

<span style="color:#aa5500">// 查询所有教师</span>
<span style="color:#770088">export</span> <span style="color:#770088">function</span> <span style="color:#0000ff">findAll</span>() {
  <span style="color:#770088">return</span> <span style="color:#000000">axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/teacher-service/teacher'</span>)
}

<span style="color:#aa5500">// 添加教师</span>
<span style="color:#770088">export</span> <span style="color:#770088">function</span> <span style="color:#0000ff">save</span>(<span style="color:#0000ff">teacher</span>) {
  <span style="color:#770088">return</span> <span style="color:#000000">axios</span>.<span style="color:#000000">post</span>(<span style="color:#aa1111">'/teacher-service/teacher'</span>, <span style="color:#0055aa">teacher</span>)
}
</span>

4.3.2 使用接口

<span style="background-color:#f8f8f8"><span style="color:#333333"><template>
  <div>
    教师管理
  </div>
</template>
<script>
// 导入接口文件，并解构指定的方法
import { findAll } from '@/api/edu/teacher'
export default {
  methods: {
    async findAllTeacher() {
      // 调用接口文件中接口到的方法
      let { data } = await findAll()
    }
  },
  mounted() {
    // 页面加载成功，查询所有老师
    this.findAllTeacher()
  },
}
</script>
<style>
</style>
</span></span>

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端（二）

3.前端路由实现分析

3.1入口文件中调用路由

3.2 定义路由模块

3.3 编写路由模块文件

3.3.1 配置一个子路由

3.3.2 配置多个子路由

3.4 编写教师路由对应的文件

4. 后端接口分析

4.1 访问前缀

4.2 axios工具类配置

4.2.1 查看工具类

4.2.2 修改工具类

4.2.3 禁用模拟数据

4.3 自定义后端接口

4.3.1 修改用户登录文件

4.3.2 教师接口文件

4.3.2 使用接口

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端（二）

3.前端路由实现分析

3.1入口文件中调用路由

3.2 定义路由模块

3.3 编写路由模块文件

3.3.1 配置一个子路由

3.3.2 配置多个子路由

3.4 编写教师路由对应的文件

4. 后端接口分析

4.1 访问前缀

4.2 axios工具类配置

4.2.1 查看工具类

4.2.2 修改工具类

4.2.3 禁用模拟数据

4.3 自定义后端接口

4.3.1 修改用户登录文件

4.3.2 教师接口文件

4.3.2 使用接口

热门文章

最新文章

相关课程

相关电子书

相关实验场景