Verwenden von Elememt-UI zum Erstellen des Management-Backends in Vue (ausführliches Tutorial)

In diesem Artikel erfahren Sie im Detail den Prozess des Aufbaus eines Management-Backends mit Vue Elememt-UI und zugehörigen Codebeispielen. Bitte lesen Sie ihn durch und lernen Sie gemeinsam.

Installation

Ich verwende vue-cli, um das Projekt zu initialisieren. Der Befehl lautet wie folgt:

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

Ändern Sie das Paket. json-Datei:

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

Führen Sie dann npm install aus, um Abhängigkeiten zu installieren. Wenn die Installationsgeschwindigkeit etwas langsam ist, können Sie cnpm ausprobieren und die spezifische Installation und Verwendung selbst herausfinden.

Eine kurze Einführung in die Verzeichnisstruktur des Projekts:

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

Führen Sie dann npm run dev im Projektstammverzeichnis aus, öffnen Sie den Browser und geben Sie http://localhost:8080 ein, um es anzuzeigen .

Ziel

• Anmeldeseite, Anmelde-, Abmeldefunktion

• Startseite, Aufrufschnittstellen-Renderingliste

Routing

Routing verwendet Vue-Router. Informationen zur spezifischen Verwendung finden Sie in der offiziellen Dokumentation

Wir sind hier. Zwei Routen sind erforderlich:

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

Anmeldeseite

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>

Home

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 '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 Konfigurieren Sie hier die client_id und das Geheimnis, die für die Anmeldung bei oauth

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: &#39;<App/>&#39;
})

API-Schnittstelle

Verwendet hauptsächlich zwei Schnittstellen, eine davon ist die API/Oauth/Token-Anmeldung und die Token-Schnittstelle , und das andere ist die Get-Liste api/user/list.

Die erste Schnittstelle verwendet Laravel OAuth, und die zweite Schnittstelle ist direkt eine einfache Benutzerlistenschnittstelle. Die Details werden im nächsten Artikel beschrieben.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So konvertieren Sie Zeitstempel in benutzerdefinierte Zeitformate mit Vue

Verwenden von Vue und Element -UI How um das Paging von Tabelleninhalten zu implementieren

Detaillierte Erläuterung des FastClick-Quellcodes (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonVerwenden von Elememt-UI zum Erstellen des Management-Backends in Vue (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!