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

2023-09-16 00:47:07 61

安装

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

npmi-gvue-cli
mkdirmy-project&&cdmy-project
vueinitwebpack

修改package.json文件：

...
"dependencies":{
"vue":"^2.5.2",
"vue-router":"^3.0.1",
"element-ui":"^2.0.7",//element-ui
"axios":"^0.17.1"//http请求库
}
...

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

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

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

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

目标

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

路由

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

我们这里需要两个路由：

src/router/index.js

importVuefrom'vue'
importRouterfrom'vue-router'
importIndexfrom'@/components/Index'
importLoginfrom'@/components/Login'

Vue.use(Router)

constrouters=newRouter({
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()
}
})

exportdefaultrouters

登录页面

src/components/Login.vue

首页

src/components/Index.vue

App

src/App.vue

调用API

src/api/index.js

importaxiosfrom'axios'
axios.defaults.baseURL='http://localhost:8000/'
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded'
axios.defaults.headers.common['Authorization']='Bearer'+localStorage.getItem('token')


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

config

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

exportdefault{
oauth_client_id:2,
oauth_secret:''
}

main.js

src/main.js

importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'
importElementUIfrom'element-ui'
import'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip=false

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

api接口

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

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

以上就是本次整理的关于VueElememt-UI构建管理后台的全部内容，感谢大家对毛票票的支持。

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

热门推荐

随机推荐