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


Posted in Javascript onFebruary 27, 2018

安装

我使用的是 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

<template>
 <div class="login">
  <el-form name="aa" :inline="true" label-position="right" label-width="80px">
    <el-form-item label="用户名">
     <el-input v-model="user.name"></el-input>
    </el-form-item>
    <el-form-item label="密码">
     <el-input type="password" v-model="user.password"></el-input>
    </el-form-item>
    <el-form-item label=" ">
     <el-button type="primary" @click="login()">登录</el-button>
    </el-form-item>
  </el-form>
 </div>
</template>

<script>
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'
     })
    }
   })
  }
 }
}
</script>

<style>
.login{
  width: 300px;
  margin: 100px auto;
  background-color: #ffffff;
  padding: 30px 30px 5px;
  border-radius: 5px;
}
</style>

首页

src/components/Index.vue

<template>
 <div class="main">
  <el-table
   stripe
   v-loading="loading"
   element-loading-background="#dddddd"
   :data="tableData"
   style="width: 100%">
   <el-table-column
    prop="id"
    label="ID">
   </el-table-column>
   <el-table-column
    prop="name"
    label="名称">
   </el-table-column>
  </el-table>
  <el-pagination
   background
   layout="prev, pager, next"
   :total="total"
   class="page"
   @current-change="pageList">
  </el-pagination>
 </div>
</template>

<script>
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
   })
  }
 }
}
</script>

App

src/App.vue

<template>
 <div id="app">
  <el-row v-if="token">
   <menus class="left-menu">
    <h3 class="logo"><a href="/" rel="external nofollow" >Admin</a></h3>
   </menus>
   <el-col :span="21" :gutter="0" :offset="3">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
     <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
     <el-breadcrumb-item class="active">列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-dropdown @command="operate" class="header">
     <img src="/static/image/head.jpg" />
     <el-dropdown-menu slot="dropdown" :click="true">
      <el-dropdown-item command="/user/profile">基本资料</el-dropdown-item>
      <el-dropdown-item command="/logout">安全退出</el-dropdown-item>
     </el-dropdown-menu>
    </el-dropdown>
    <router-view/>
   </el-col>
   <el-col :span="21" :gutter="0" :offset="3" class="footer">Copyright © 2017 Flyerboy All Rights Reserved</el-col> 
  </el-row>

  <router-view v-if="!token" />
 </div>
</template>

<script>
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
 }
}
</script>

<style>
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;
}
</style>

调用 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: '<App/>'
})

api 接口

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

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

以上就是本次整理的关于Vue Elememt-UI构建管理后台的全部内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
javascript textContent与innerText的异同分析
Oct 22 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
javascript按顺序加载运行js方法
Dec 01 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 #Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 #Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 #Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 #jQuery
关于ES6箭头函数中的this问题
Feb 27 #Javascript
vue中echarts3.0自适应的方法
Feb 26 #Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 #Javascript
You might like
php 模拟POST|GET操作实现代码
2010/07/20 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
node文字生成图片的示例代码
2017/10/26 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
后勤主管工作职责
2013/12/07 职场文书
打架检讨书50字
2014/01/11 职场文书
教学质量评估实施方案
2014/03/17 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
美容院店长岗位职责
2014/04/08 职场文书
植树节活动总结
2014/04/30 职场文书
个人安全承诺书
2014/05/22 职场文书
支部鉴定材料
2014/06/02 职场文书
银行求职自荐信
2014/06/30 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
网络研修心得体会
2016/01/08 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python