elemenetui 布局_详解Vue Elememt-UI构建管理后台

安装

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

npm i -g vue-cli

mkdir my-project && cd my-project

vue init webpack

修改 package.json 文件：

...

"dependencies": {

"vue": "^2.5.2",

"vue-router": "^3.0.1",

"element-ui": "^2.0.7", // element-ui

"axios": "^0.17.1" // http 请求库

}

...

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

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

├─build // 构建配置

├─config // 配置文件

├─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

import Vue from 'vue'

import Router from 'vue-router'

import Index from '@/components/Index'

import Login from '@/components/Login'

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

登录页面

src/components/Login.vue

import $http from '@/api/'

import config from '@/config'

export default {

data () {

return {

user: {

name: '',

password: ''

}

}

},

mounted: function () {

var token = localStorage.getItem('token')

if (token) {

this.$router.push('/index')

}

},

methods: {

login: function () {

var data = {

grant_type: 'password',

client_id: config.oauth_client_id,

client_secret: config.oauth_secret,

username: this.user.name,

password: this.user.password

}

var _this = this

$http.login(data).then(function (res) {

if (res.status === 200) {

$http.setToken(res.data.access_token)

_this.$message({

showClose: false,

message: '登录成功',

type: 'success'

})

_this.$router.push('/index')

} else {

_this.$message({

showClose: false,

message: '登录失败',

type: 'error'

})

}

})

}

}

}

.login{

width: 300px;

margin: 100px auto;

background-color: #ffffff;

padding: 30px 30px 5px;

border-radius: 5px;

}

首页

src/components/Index.vue

import $http from '@/api/'

export default {

data () {

return {

tableData: [],

total: 0,

loading: false

}

},

mounted: function () {

this.getList()

},

methods: {

pageList: function (page) {

this.search.page = page

this.getList()

},

getList: function () {

var _this = this

_this.loading = true

$http.index().then(function (res) {

if (res.status === 200) {

_this.tableData = res.data.data.lists

_this.total = res.data.data.total

}

_this.loading = false

})

}

}

}

App

src/App.vue

import Menus from '@/components/Menu'

export default {

name: 'App',

data () {

return {

token: false

}

},

mounted: function () {

this.token = localStorage.getItem('token') ? true : false

},

watch: {

'$route.path': function ($newVal, $oldVal) {

this.token = localStorage.getItem('token') ? true : false

}

},

methods: {

operate: function (command) {

if (command === '/logout') {

localStorage.removeItem('token')

this.$router.push('login')

} else {

this.$router.push(command)

}

}

},

components: {

Menus

}

}

body{

margin: 0;

padding: 0;

background-color: #eeeeee;

}

.header{

position: absolute;

top: 5px;

right: 20px;

}

.header img{

width: 38px;

height: 38px;

border-radius: 20px;

border: 1px solid #aaaaaa;

}

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.main{

padding: 20px;

min-height: 600px;

margin-bottom: 20px;

}

.main table{

background: #ffffff;

}

.left-menu{

background-color: #33374B;

}

.logo{

padding: 20px 0 15px 20px;

font-size: 24px;

border-bottom: 2px solid #3a8ee6;

}

.logo a{

color: #ffffff;

text-decoration: none;

}

.left-menu .el-menu{

border-right: 0;

}

.breadcrumb{

line-height: 40px;

padding: 5px 20px;

background: #ffffff;

}

.breadcrumb span{

color: #069;

font-weight: normal;

}

.breadcrumb .active{

color: #aaaaaa;

}

.page{

margin: 20px 0 0;

margin-left: -10px;

}

.page .el-pager li.number{

background-color: #ffffff;

}

.el-submenu .el-menu-item{

padding-left: 60px !important;

}

.footer{

position: fixed;

bottom: 0;

right: 0;

font-size: 12px;

color: #888888;

padding: 15px 20px;

text-align: center;

background-color: #ffffff;

margin-top: 40px;

}

调用 API

src/api/index.js

import axios from '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')

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

export default {

oauth_client_id: 2,

oauth_secret: ''

}

main.js

src/main.js

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

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构建管理后台的全部内容，感谢大家对脚本之家的支持。