详解Vue Elememt-UI构建管理后台

安装

我使用的是 vue-cli 初始化项目，命令如下：

之后执行 npm install 进行安装依赖，如果安装速度有点慢的话，可以试一下 cnpm ，具体安装和用法自行查找。

简单介绍下项目的目录结构：

配置文件 ├─src // vue 开发源文件目录 ├────assets // css/js 文件 ├────components // vue 组件 ├────router // 路由 ├────App.vue // 启动组件 ├────main.js // 入口文件 ├─static // 静态文件目录 ├─test // 测试目录

之后在项目根目录执行 npm run dev ，打开浏览器输入 http://localhost:8080 就可以查看了。

目标

登录页面，登录，退出功能
首页，调用接口渲染列表

路由

路由使用的是 vue-router，具体用法可参考官方文档

我们这里需要两个路由：

src/router/index.js

Vue.use(Router)

const routers = new Router({
routes: [
{
path: '/index',name: 'index',component: Index
},{
path: '/login',name: 'login',component: Login
}
]
})

routers.beforeEach((to,from,next) => {
if (to.name !== 'login' && !localStorage.getItem('token')) {
next({path: 'login'})
} else {
next()
}
})

export default routers

App

src/App.vue

export default {
setToken: function (token) {
localStorage.setItem('token',token)
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
},login: function (param) {
return axios.post('oauth/token',param)
},index: function (params) {
return axios.get('api/user/list',{
params: params
})
}
}

config

src/config.js 这里配置登录 oauth 需要的 client_id 和 secret

main.js

src/main.js

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
el: '#app',router,components: { App },template: ''
})

api 接口

主要用到两个接口，一个是 api/oauth/token 登录获取 token 接口，一个获取列表 api/user/list。

第一个接口是用到 laravel oauth，第二个接口直接是一个简单的查询用户列表接口，详细讲会在下一篇文章中讲述。

以上就是本次整理的关于Vue Elememt-UI构建管理后台的全部内容，感谢大家对编程之家的支持。

详解Vue Elememt-UI构建管理后台

安装

路由

登录 页面

首页

App

调用 API

config

main.js

猜你在找的Vue相关文章