微服务和VUE入门教程(8):前端主页的编写

微服务和VUE入门教程(8):前端主页的编写

微服务和VUE入门教程(0): 着手搭建项目
微服务和VUE入门教程(1): 搭建前端登录界面
微服务和VUE入门教程(2): 注册中心
微服务和VUE入门教程(3): user微服务的搭建
微服务和VUE入门教程(4)：网关zuul的搭建
微服务和VUE入门教程(5)： 前后端交互
微服务和VUE入门教程(6)：连接数据库-mybatis
微服务和VUE入门教程(7):配置中心-config
微服务和VUE入门教程(8):前端主页的编写
微服务和VUE入门教程(9)： token验证-token后端生成以及前端获取
微服务和VUE入门教程(10)： token验证-前端登录拦截以及token过期提醒
微服务和VUE入门教程(11): mybatis 动态查询
微服务和VUE入门教程(12)：前端提示搜索框的实现
微服务和VUE入门教程(13)： token验证-zuul拦截与验证
微服务和VUE入门教程(14)： 热部署
微服务和VUE入门教程(15)： 课堂小知识
微服务和VUE入门教程(16)： zuul 熔断
微服务和VUE入门教程(17)： VUE 响应拦截器
微服务和VUE入门教程(18)： 前端接口模块化
微服务和VUE入门教程(19)： VUE组件化–子组件向父组件通信
微服务和VUE入门教程(20)： VUE组件化–父组件向子组件通信
微服务和VUE入门教程(21)： springboot中定时器-Schedule
微服务和VUE入门教程(22): 页面长时间未操作自动退出登录
微服务和VUE入门教程(23): 微服务之间的调用
微服务和VUE入门教程(24): 微服务之断路器
微服务和VUE入门教程(25): 微服务之Hystrix-dashboard
微服务和VUE入门教程(26): 微服务之turbine
微服务和VUE入门教程(27)：VUE前端工程打包

1.期望目标

如图，我们的前端页面很简单，头部导航栏，左侧导航栏，主体待填的内容。管理后台的常用布局。

2. 前端项目结构

我们编写的前端项目结构如上图，最底部的Home.vue作为主页，导航栏和其他内容作为home的组件。common文件夹存放了头部导航栏和侧边栏。library文件夹暂时只放了一个LinbraryIndex.vue。login文件夹还是一个登陆页面和hello页面。stu_manage文件夹存放了三个文件，班级信息管理，学生信息管理。学生成绩管理。

3.编写Home.vue

看完整理结构，我们先来看一个Home.vue。代码很简单，在

路由嵌套，会在接下来的开发体会到的。

4.编写头部导航栏NavMenu.vue

在elementUI官网上复制的，稍微改了改。没有什么技巧。

5.编写侧边导航栏

侧边导航栏看起来挺复杂的，就是一些循环而已。没有什么值得说的，都是套路。

有一个router关键词，它代表着：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

6.添加路由

import Home from '@/components/Home'

{
  path: '/home',
  name: 'Home',
  component: Home
 }

这时我们访问：http://localhost:8080/#/home

7. 编写其他页面

ClassInfoMgmt.vue,StuInfoMgmt.vue,StuPerfMgmt.vue三个页面，因为现在还没填什么内容，故而不写什么东西。

只写一个div，展示一下内容即可。

8. 修改路由

修改我们刚才写的home路由

{
  path: '/home',
  name: 'Home',
  component: Home,
  //home页面不需要被访问
  redirect: '/stuInfoMgmt',
  children:[
    {
      path: '/stuInfoMgmt',
      component: resolve => require(['@/components/stu_manage/StuInfoMgmt.vue'], resolve),
      meta: {
        title: 'stuInfoMgmt'
      }
    },
    {
      path: '/stuPerfMgmt',
      component: resolve => require(['@/components/stu_manage/StuPerfMgmt.vue'], resolve),
      meta: {
        title: 'stuPerfMgmt'
      }
    },

加上children里面的内容即可，整个页面的结构就算搭建完成。接下来我们就分别去相应页面中填充相应信息。

9.总结

VUE的前端代码比较散碎，组件化代码的好处与缺点吧。刚开始接触挺晕乎的，后面见多了，其实都一样了。