详解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 相关文章推荐
jquery each()源代码
Feb 14 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
详解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 CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python实现TCP文件传输
2020/03/20 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
python文件排序的方法总结
2020/09/13 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
勾股定理课后反思
2014/04/26 职场文书
项目经理岗位职责
2015/01/31 职场文书
武侯祠导游词
2015/02/04 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
JS函数式编程实现XDM一
2022/06/16 Javascript
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技