search

Home >Web Front-end >JS Tutorial >Using Elememt-UI to build the management backend in Vue (detailed tutorial)

Using Elememt-UI to build the management backend in Vue (detailed tutorial)

亚连
亚连Original
2018-06-04 11:33:042298browse

This article shares with you in detail the process of building a management backend with Vue Elememt-UI and related code examples, please refer to it and learn together.

Installation

I am using vue-cli to initialize the project. The command is as follows: 

npm i -g vue-cli
mkdir my-project && cd my-project
vue init webpack

Modify the package.json file: 

...
"dependencies": {
 "vue": "^2.5.2",
 "vue-router": "^3.0.1",
 "element-ui": "^2.0.7", // element-ui
 "axios": "^0.17.1" // http 请求库
}
...

Then execute npm install to install the dependencies. If the installation speed is a bit slow, you can try cnpm and find out the specific installation and usage by yourself.

Briefly introduce the directory structure of the project: 

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

Then execute npm run dev in the project root directory, open the browser and enter http://localhost:8080 to view it.

Goal

  • Login page, login, exit function

  • Home page, call interface rendering list

Routing

Routing uses vue-router. For specific usage, please refer to the official documentation

We are here Two routes are required:

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

Login page

src/components/Login .vue

<template>
 <p 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>
 </p>
</template>

<script>
import $http from &#39;@/api/&#39;
import config from &#39;@/config&#39;

export default {
 data () {
  return {
   user: {
    name: &#39;&#39;,
    password: &#39;&#39;
   }
  }
 },
 mounted: function () {
  var token = localStorage.getItem(&#39;token&#39;)
  if (token) {
   this.$router.push(&#39;/index&#39;)
  }
 },
 methods: {
  login: function () {
   var data = {
    grant_type: &#39;password&#39;,
    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: &#39;登录成功&#39;,
      type: &#39;success&#39;
     })
     _this.$router.push(&#39;/index&#39;)
    } else {
     _this.$message({
      showClose: false,
      message: &#39;登录失败&#39;,
      type: &#39;error&#39;
     })
    }
   })
  }
 }
}
</script>

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

首页

src/components/Index.vue

<template>
 <p 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>
 </p>
</template>

<script>
import $http from &#39;@/api/&#39;

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>
 <p 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: &#39;/&#39; }">首页</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" />
 </p>
</template>

<script>
import Menus from &#39;@/components/Menu&#39;
export default {
 name: &#39;App&#39;,
 data () {
  return {
   token: false
  }
 },
 mounted: function () {
  this.token = localStorage.getItem(&#39;token&#39;) ? true : false
 },
 watch: {
  &#39;$route.path&#39;: function ($newVal, $oldVal) {
   this.token = localStorage.getItem(&#39;token&#39;) ? true : false
  }
 },
 methods: {
   operate: function (command) {
   if (command === &#39;/logout&#39;) {
    localStorage.removeItem(&#39;token&#39;)
    this.$router.push(&#39;login&#39;)
   } 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: &#39;Avenir&#39;, 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>

Call API

##src/api/index.js

import axios from &#39;axios&#39;
axios.defaults.baseURL = &#39;http://localhost:8000/&#39;
axios.defaults.headers.post[&#39;Content-Type&#39;] = &#39;application/x-www-form-urlencoded&#39;
axios.defaults.headers.common[&#39;Authorization&#39;] = &#39;Bearer &#39; + localStorage.getItem(&#39;token&#39;)


export default {
 setToken: function (token) {
  localStorage.setItem(&#39;token&#39;, token)
  axios.defaults.headers.common[&#39;Authorization&#39;] = &#39;Bearer &#39; + token
 },
 login: function (param) {
  return axios.post(&#39;oauth/token&#39;, param)
 },
 index: function (params) {
  return axios.get(&#39;api/user/list&#39;, {
   params: params
  })
 }
}

config

src/config.js Here configure the client_id and secret required for logging in to oauth

export default {
 oauth_client_id: 2,
 oauth_secret: &#39;&#39;
}

main.js

src/main.js

import Vue from &#39;vue&#39;
import App from &#39;./App&#39;
import router from &#39;./router&#39;
import ElementUI from &#39;element-ui&#39;
import &#39;element-ui/lib/theme-chalk/index.css&#39;

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
 el: &#39;#app&#39;,
 router,
 components: { App },
 template: &#39;<App/>&#39;
})

api interface


Mainly uses two interfaces, one is the api/oauth/token login and token interface, and the other is the get list api/ user/list.


The first interface uses laravel oauth, and the second interface is directly a simple query user list interface. The details will be described in the next article.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use vue to convert timestamps into custom time formats

Using vue and element -UIHow to implement table content paging

Detailed explanation of FastClick source code (detailed tutorial)

The above is the detailed content of Using Elememt-UI to build the management backend in Vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What are the methods of using isPlainObject() in jQuery?Next article：What are the methods of using isPlainObject() in jQuery?

Related articles

See more