Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记

 

-----写在前面-----

虽然自己写了个仿站,但小林心里十分有数,这个玩意到时候可能都不好意思写到简历上,果然前端越往后面学越觉得自己之前是弟弟。

现在在看6月份的简历,突然明白为啥公司们都不要我...就干两个月,技术还没多好,打扰了(;′⌒`)

把ElementUI的官网文档过了一遍,感叹作者也太?了...大神们造的轮子属实给劲

正好看到了一个用标题所列的技术栈搭建的一个后台管理系统,clone下来看了一下发现属实有点脑壳疼,不过问题不大,一天看懂一些,总归是能吃的透透的嗷

 Vue-Admin-Demo

-----2019.08.24(Day 1):目录梳理、路由配置详解、login.vue-----

Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第1张图片

和直接使用vue-cli以webpack模板生成的工程文件不同

作者把路由组件放在views文件夹下

api文件夹用于接收mock文件夹模拟出的数据并作为axios的请求地址(这个后面会详解)

路由配置文件:

//省略路由的引入

let routes = [
  {
    path: '/login',
    component: Login,
    name: '',
    hidden: true
  },
  {
    path: '/404',
    component: NotFound,
    name: '',
    hidden: true
  },
  //{ path: '/main', component: Main },
  {
    path: '/',
    component: Home,
    name: '',
    iconCls: 'el-icon-menu',
    leaf: true, //只有一个节点
    children: [{ path: '/Index', component: Index, name: '首页' }]
  },
  {
    path: '/',
    component: Home,
    name: '',
    iconCls: 'el-icon-menu', //图标样式class
    leaf: true, //只有一个节点
    children: [
      { path: '/Application', component: Application, name: '应用管理' }
    ]
  },
  {
    path: '/',
    component: Home,
    name: '日志管理',
    iconCls: 'el-icon-menu',
    children: [
      { path: '/SysLog', component: SysLog, name: '系统日志' },
      { path: '/AdminLog', component: AdminLog, name: '管理员操作日志' },
      { path: '/UserLog', component: UserLog, name: '用户使用日志' }
    ]
  },
  {
    path: '/',
    component: Home,
    name: '配置管理',
    iconCls: 'el-icon-menu',
    children: [
      {
        path: '/GuidePageConfig',
        component: GuidePageConfig,
        name: '引导页配置'
      },
      {
        path: '/IntegralConfig',
        component: IntegralConfig,
        name: '积分规则配置'
      },
      {
        path: '/SubscribeConfig',
        component: SubscribeConfig,
        name: '订阅栏目配置'
      }
    ]
  },
  {
    path: '/',
    component: Home,
    name: '权限管理',
    iconCls: 'el-icon-menu',
    children: [
      { path: '/page4', component: Page4, name: '权限组管理' },
      { path: '/Main', component: Main, name: '权限组权限管理' },
      { path: '/Form', component: Form, name: '权限组人员管理' }
    ]
  },
  {
    path: '/',
    component: Home,
    name: '账号管理',
    iconCls: 'el-icon-menu',
    children: [
      { path: '/user', component: user, name: '页面4' },
      { path: '/page5', component: Page5, name: '页面5' }
    ]
  },
  {
    path: '*',
    hidden: true,
    redirect: { path: '/404' }
  }
]

export default routes
Routes.js

/login:登陆界面

/404:无效界面

Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第2张图片

 

/:通过指定不同的name属性以及不同的嵌套组件来执行不同的跳转(至子页面)

这样写的好处是url不会是/page1/page1-1/page1-1-1,而是直接将最后一级路由拼上去。即/page1-1-1

 

iconCls: ElementUI为路由指定图标的方式

Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第3张图片

 

hidden&leaf属性:自定义属性,用于后面配合指定路由是否渲染

 

login.vue

form
    :model="ruleForm2"
    :rules="rules2"
    ref="ruleForm2"
    label-position="left"
    label-width="0px"
    class="demo-ruleForm login-container"
  >
    

系统登录

记住密码 button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining" >登录
login.vue

 Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第4张图片

 Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第5张图片

model:表单的数据对象,使用方式:

Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第6张图片

Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第7张图片

 

rules:验证规则

Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第8张图片

 

label-position、label-width:表单域标签的位置、表单域标签的宽度

详见 ElementUI-表单

 

 登录按钮:使用native修饰符,否则无法监听到原生click事件(被封装过的),再阻止默认事件提交,并调用handleSubmit2()事件:

Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第9张图片

Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第10张图片

 

 

-----2019-08-26 Home.Vue、Index.Vue------

Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第11张图片

 

 

Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第12张图片

 

 trigger:触发菜单展开的行为

divided:显示分割线

更多下拉菜单相关

 

面包屑导航

在这里是利用跟踪路由变化来进行渲染新的面包屑导航项,例如进入一个二级路由界面后,$route.matched会被推入新的项,此时面包屑导航会多渲染出新的一项

Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记_第13张图片

 

 菜单

转载于:https://www.cnblogs.com/linbudu/p/11403630.html

你可能感兴趣的:(Vue全家桶+ElementUI+Mock.Js实现的后台管理系统:学习笔记)