一步步带你作vue后台管理框架(一)——介绍框架

系列教程《一步步带你作vue后台管理框架》第一课

github地址：vue-framework-wz
线上体验地址：当即体验
 
 
《一步步带你作vue后台管理框架》第一课：介绍框架
《一步步带你作vue后台管理框架》第二课：上手使用
《一步步带你作vue后台管理框架》第三课：登陆功能
 

简介

在现在的科技公司中有不少前端的需求都是要写一个相似于后台管理框架，平常的工做中会有太多重复的内容加剧咱们程序员的工做，浪费咱们的时间，致使不能早点下班回家吃饭。

普通程序员拿到一个项目老是会从新写，写路由花了两小时，写vuex花了两小时，写个Header组件花了1小时，侧边栏又要1小时，这样下来项目拿到手一天的时间都没真正去作项目的需求，再加上改bug，写css，准备工做都要花三四天，等到产品过来催，尚未真正去实现功能。这样是极大的浪费时间。
 
那么咱们怎么才能成为一个高效率的程序员呢?
 
成功的秘籍就在于须要有一个本身的后台管理框架，当你拿到一个项目，全部的UI组件、路由、状态管理、登陆鉴权功能、等等都已经写好，你只须要去复用代码再加上少许的逻辑，当你一个小时作完准备工做，出去买杯咖啡回来看到你的同事还在苦逼的写vue路由，你确定会会心一笑：“框架在手，天下我有”。**

表格

　　表格是咱们工做中最多见的组件。就拿写一个表格来举例吧

 
 　　高下立判。传统写一个表格须要大量重复html，且须要本身写css，本身定义数据渲染方式。效率低下且质量不高，而咱们的框架已经定义好表格组件，只须要把注意力放在数据获取上，工做瞬间轻松了不少。

 
　　　再来看下wz框架表格组件在实际应用中的强大之处吧。

筛选数据，扩展行，瞬间导出原始数据或排序后的数据等等强大的功能。

 咱们的框架已经定义好表格组件，上手即用，是否是又美观又简单好用啊。

不止表格，还有各类你工做中会遇到的组件，轻松完成工做中出现的复杂需求。

UI组件已经有了，咱们的框架还有哪些特性呢？　

自适应

自适应!!!如今不少vue框架都没有自适应功能，而不少使用场景也在手机上会有，这也是wz后台管理框架诞生的缘由之一。想一想要本身每次作自适应就头疼，如今有了wz框架老板不再用担忧个人界面适配问题了。

 咱们看下效果：
　　 

是否是很棒！wz框架基于超好用的开源UI iview，采用了row和col的思想，Row为一行，Col为一列，配置Col 的sm md lg 等属性就能够作到自适应。
　　代码以下例

<Row>
     <Col :md="8" :sm="12" :lg="9"> 
    </Col>
</Row>

 
 
还有什么使人激动的特性呢？

登陆鉴权

莫过于登陆鉴权功能了！

产品要作登陆功能你把但愿寄托于后端，后端不背锅把锅甩你身上？求人不如求己，wz框架已经替你封装好登陆鉴权，只需发送服务端验证一下用户名密码便可。

来看下咱们炫酷的登陆界面

　  

炫酷狂拽吊炸天是否是。

逻辑就是登陆的时候输入密码存到cookie里，能够由我的选择加密方式，每次在路由跳转的时候利用router.beforeEach((to, from, next) 判断是否有token，若是有，发送到服务端验证，若是经过，就继续路由，若是没有，就重定向到登陆界面，后面会用详细的教程讲一下。

鉴权也是同样的道理，在router配置中加上　
meta: { role: ['Administrator'] }，在router.beforeEach（）中判断要去的那个界面是否须要权限。而且侧边栏是根据可访问的路由动态生成的，不一样级别的用户能够看到的侧边栏是不同的，这就在必定程度上作到了简单的权限管理的功能。

能够看一下这端代码，就是登陆鉴权的核心。

router.beforeEach((to, from, next) => {
  // console.log(to)
  NProgress.start(); // 开启Progress
  if (store.getters.token) { // 判断是否有token


            // alert('dont need login ');
           if (to.path === '/login') {
              next({ path: '/' });
            }  
             else {//若是不是去login 而是其余须要断定权限的
              // console.log(store.getters.roles)
              if (store.getters.roles.length === 0) { // 若是当前用户没有拉取完user_info信息
                store.dispatch('GetInfo').then(res => { // 拉取user_info
                  const roles = res.data.role;
                  store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
                    router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
                    // console.log(store.getters.addRouters);
                    next({ ...to }); // hack方法 确保addRoutes已完成
                  })
                })
              } else {
                // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
                if (hasPermission(store.getters.roles, to.meta.role)) {
                  // console.log(to.meta.role)
                  // console.log("has permission");
                  next();//
                } else {
                  // console.log("has no permission");

                  next({ path: '/', query: { noGoBack: true } });
                }
                // 可删 ↑
              }
            }


  } else {
    if (whiteList.indexOf(to.path) !== -1) { // 在免登陆白名单，直接进入
      next()
    } else {
      alert('please login');
      next('/login'); // 不然所有重定向到登陆页
      NProgress.done(); // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
    }
  }
});
 ```
　　
说完特性，咱们再来看看框架的目录结构。

build和config是webpack的配置文件，src中存放着框架的主要文件，api是已经封装好的api请求，components是咱们的UI组件。mock是便于咱们前端调试的一个工具，能够截获http请求，返回数据，从而作到独立于后端开发，加快咱们的开发进度，当咱们须要请求服务器的时候要把这个文件夹删掉。

咱们须要新加页面就在views里面加上新的界面文件，而后在router里配置好路由就能够正常访问了。

当咱们须要提交页面放到服务器上也很简单，运行

npm run build:prod

 
　　项目目录下就会多出一个dist文件夹，里面有index.html文件和static文件夹，放在服务器上就行。不须要在服务器上安装任何环境，甚至不须要node便可。

　　不再用为发布项目操心了。

####项目目录结构

├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 全部请求
│ ├── components // 全局UI组件
│ ├── directives // 全局指令
│ ├── mock // mock数据
│ ├── router // 路由
│ ├── store // 全局store管理
│ ├── utils // 全局公用方法
│ ├── containers // 自适应布局组合
│ ├── vendor // UI组件依赖js
│ ├── views // views界面
│ │ ├── charts //图表组件
│ │ ├── components //首页组件
│ │ ├── login //登陆界面
│ │ ├── pages //错误界面
│ │ └── permission //权限测试界面
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── static // 静态资源
│ ├── bower_components //七牛SDK
│ ├── css //css
│ ├── js //js
│ └── Jquery.min.js // jq
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json

 关于框架的介绍就基本是这些了，wz框架的特色就在于自适应、登陆鉴权、封装好UI组件、简单易上手、稳定高效。
但愿你们多多使用，多多宣传。

 你们有什么问题最好去我github提issues，文章评论评论较长时间才查看一次。

 

**接下来的教程讲一下封装UI组件、router、webpack、node命令行构建工具等内容。**
**但愿你们看了这系列教程都能制做出本身的前端框架，从而在工做中驾轻就熟。**

**若是喜欢就点个start鼓励下做者吧。**
 
**github地址：[vue-framework-wz](https://github.com/herozhou/vue-framework-wz)**
**线上体验地址：[当即体验](http://herozhou.coding.me/vue-framework-wz/#/dashboard)**