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实现在线教育前端（二）