详解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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
详解微信小程序网络请求接口封装实例
May 02 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新手上路(九)
2006/10/09 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
PHP数组实例总结与说明
2011/08/23 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
vue中轮训器的使用
2019/01/27 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
TensorFlow实现模型评估
2018/09/07 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
tensorflow自定义激活函数实例
2020/02/04 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
PHP经典面试题
2016/09/03 面试题
临床医学应届生求职信
2013/11/06 职场文书
日语专业个人的求职信
2013/12/03 职场文书
先进个人获奖感言
2014/01/24 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android