公司网站微信小程序_详解Vue Elememt

2021-01-08 16:24 admin
详解Vue Elememt-UI构建管理后台       本篇文章给大家详细分享了Vue Elememt-UI构建管理后台的过程以及相关代码实例,一起参考学习下。

之后执行 npm install 进行安装依赖,如果安装速度有点慢的话,pm ,具体安装和用法自行查找。

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

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

之后在项目根目录执行 npm run dev ,打开浏览器输入 p>

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

路由

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

登录页面

 template 
 div 
 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 

首页

 template 
 div 
 el-table
 stripe
 v-loading="loading"
 element-loading-background="#dddddd"
 :data="tableData"
 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"
 @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 
 h3 a href="/" rel="external nofollow" Admin /a /h3 
 /menus 
 el-col :span="21" :gutter="0" :offset="3" 
 el-breadcrumb separator- 
 el-breadcrumb-item :to="{ path: '/' }" 首页 /el-breadcrumb-item 
 el-breadcrumb-item 列表 /el-breadcrumb-item 
 /el-breadcrumb 
 el-dropdown @command="operate" 
 img src="/static/image/head.jpg" / 
 el-dropdown-menu slot="dropdown" :click="true" 
 el-mand="/user/profile" 基本资料 /el-dropdown-item 
 el-mand="/logout" 安全退出 /el-dropdown-item 
 /el-dropdown-menu 
 /el-dropdown 
 router-view/ 
 /el-col 
 el-col :span="21" :gutter="0" :offset="3" 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.$mand)
 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 = ''
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.mon['Authorization'] = 'Bearer ' + localStorage.getItem('token')

localStorage.setItem('token', token) axios.mon['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,第二个接口直接是一个简单的查询用户列表接口,详细讲会在