javascript Vue uni-app

vue-element-admin

2018-11-15  本文已影响2822人  不困于情

2018-1-1更新
给大家推荐另一个优秀的开源组件库，iview。去了解一下，你会回来点赞的。

vue-admin使用

首先，一句话：

物有本末，事有始终，追根溯源，心无旁骛。

1. 以添加页面讲解所谓物有本末

添加一个页面，vue中是在views中创建，在router中注册，即可。二者顺序无关紧要，成功访问的前提是你要完成这两个步骤。

我们习惯于先在脑海中建立一个框架，再去画页面，画页面时也是先在脑海中建立一个框架，再去添加页面元素。这都是一个从无到有的过程。

首先，我们要知道我们要画哪几个页面，其次，我们在router中注册，然后，我们去views中创建。

1.1 找到src下的router.js，代码位置可参考已有页面对应的位置，代码示例：

  {
    path: '/sys',
    component: Layout,
    redirect: '/sys/user', //如果用户地址栏输入地址/sys则重定向到/sys/user
    alwaysShow: true, 
    meta: {
      title: '系统设置',
      icon: 'setting',
      roles: ['admin', 'editor'] 
    },
    children: [
      {
        path: '/sys/user',
        component: () => import('@/views/sys/user/index.vue'),
        name: 'sysUser',
        meta: {
          title: '用户管理',
          icon: 'user',
          roles: ['admin'] 
        }
      },
      {
        path: '/sys/dept',
        component: () => import('@/views/sys/dept/index.vue'),
        name: 'sysDept',
        meta: {
          icon: 'dept',
          title: '部门管理'
          
        }
      },
      {
        path: '/sys/role',
        component: () => import('@/views/sys/role/index.vue'),
        name: 'sysRole',
        meta: {
          icon: 'role',
          title: '角色管理'
          
        }
      }
    ]
  },

路由配置项如下：

{
  path: '/permission',
  component: Layout,
  redirect: '/permission/index', //重定向地址，在面包屑中点击会重定向去的地址
  hidden: true, // 不在侧边栏线上
  alwaysShow: true, //一直显示根路由
  meta: { roles: ['admin','editor'] }, //你可以在根路由设置权限，这样它下面所以的子路由都继承了这个权限
  children: [{
    path: 'index',
    component: ()=>import('permission/index'),
    name: 'permission',
    meta: {
      title: 'permission',
      icon: 'lock', //图标
      role: ['admin','editor'], //或者你可以给每一个子路由设置自己的权限
      noCache: true // 不会被 <keep-alive> 缓存
    }
  }]
}

1.2 新建你所添加的页面在相应的位置

如上示例，你需要在views中新建sys/role/index.vue、sys/dept/index.vue、sys/user/index.vue三个vue文件，并写入相关内容即可。

2. 以书写api来讲解所谓追根溯源

我们开发是使用前后端分离的方式，所以前端需要调用后端的接口来完成通信。

书写api很简单，发起ajax请求，传过去参数，接收到请求，这就完成了一次通信。

vue-admin中已经封装好了axios在src/utils/request.js中，我们直接使用即可。

2.1 找到src下的api文件夹

创建一个js文件，如下示例：

//login.js
import request from '@/utils/request' //引入封装好的axios请求

export function loginByUsername(username, password) {
  const data = {
    username,
    password
  }
  return request({
    url: '/login/login',
    method: 'post',
    data
  })
}

export function logout() {
  return request({
    url: '/login/logout',
    method: 'post'
  })
}

export function getUserInfo(token) {
  return request({
    url: '/sys/user/info',
    method: 'get',
    params: { token }
  })
}

export出去一个方法即可，方法内容参考上述示例

几个重点

BASE_API: '"http://yapi.hzhengji.cn/mock/31/"' //使用对应的mock接口地址

3. 持续交付，切勿过多地停留

刚才讲个两个案例，分别举例说明如何开展工作以及可能遇到的问题。这些问题比较常见，当然还有很多不可预见的问题，接下来讲我们会讲如何定位问题和如何解决

首先，如何开展工作：

3.1 抓重点

看一个框架先看整体的结构和思路，然后逐步拆解消化。当然这个拆解消化的过程是你逐步完善一个项目的过程，而不是你先学会所有的，再去完善一个项目。

也就是说，从实战中去学习体会这个框架的一些思路。

很简单的一个例子，即使你不知道x+y=z，你也可以写出来x+y+x+y=z+z。模仿是我们的天性，你可以不知道axios的封装内容，但是你可以根据别人写过的如何调用后台api接口的方法去写你自己的api方法。

3.2 追溯源头

学会追溯源头而不是一筹莫展。

举个实战中的例子：实现登录功能（具体的原理思路手摸手已经讲得很清楚https://juejin.im/post/59097cd7a22b9d0065fb61d2，这里不再累述，只讲如何实现。）

你下载了vue-admin，要把接口改成我们自己mock的，于是你需要（上面有过介绍，再来过一遍流程）：

（1）找到BASE_API，改为我们自己的mock地址。

（2）找到login.js，把login的url改为自己项目的，把getuserinfo也改成自己项目的。

那么要说一下怎么知道是这两个文件的。我们要改登录的接口，就要先看登录的逻辑，找到登录的页面。

（1）找到登录页面：如何找，如果这个项目比较大，不容易找，那么按照下面的步骤。

首先，启动项目，找到项目url，（http://localhost:9527/#/login?redirect=%2Fdashboard），发现路 径是login。

其次，去router中搜索这个path，发现component: () => import('@/views/login/index')

最后，找到login文件夹下的index。

（2）打开登录页面，找到登录的方法，handleLogin，查看一下逻辑。

首先，验证登录表单，如果验证不通过，则console.log('error submit!!')。可以得知，如果你控制台打印的是error submit，那么问题就知道处在哪了。

其次，验证通过后，调用this.$store.dispatch('LoginByUsername', this.loginForm)，这是一个vuex的action，如果你不知道，没关系，接着向下找。进入store的modules文件夹中，找到user.js，打开。全局搜索一下LoginByUsername，发现在一个action里面，这就是登录页面的登录按钮所执行的方法。

然后，我们看一下LoginByUsername，逻辑大致是LoginByUsername这个action调用LoginByUsername这个同名的api（这个api是在最上面引入的import { loginByUsername, logout, getUserInfo } from '@/api/login'），传给服务器账号密码，服务器验证后传过来token，然后把token存入vuex的state和cookie中。至此，登录就完成了。

（3）什么？有问题，看看控制台是否报接口地址的错误，如果是，看看你的BASE_API是否和控制台打印的错误一致。接口没问题却还是没有跳转？报的错是roles must be a non-null array， 那就可能是前面说过的问题：在src文件夹下，有一个permission.js文件，里面的router.beforeEach的问题

经过如上的修改之后，你的登录功能应该就ok了，其他不可预见的问题自行排查。

3.3 学会问问题。

去问问题之前：

（1）明白你想问什么

（2）已经试过解决但没见成效

（3）话不在多

（4）去除无意义的提问

其次，定位问题和如何解决：

分享几个比较实用的技巧或者说是经验。

上一篇 下一篇

猜你喜欢

热点阅读