Utilisation d'Elememt-UI pour créer le backend de gestion dans Vue (tutoriel détaillé)-js tutoriel-php.cn

Cet article partage avec vous en détail le processus de création d'un backend de gestion avec Vue Elememt-UI et des exemples de code associés, veuillez vous y référer et apprendre ensemble.

Installation

J'utilise vue-cli pour initialiser le projet La commande est la suivante :

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

Copier après la connexion

Modifier le. Fichier package.json :

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

Copier après la connexion

Exécutez ensuite npm install pour installer les dépendances. Si la vitesse d'installation est un peu lente, vous pouvez essayer cnpm et découvrir par vous-même l'installation et l'utilisation spécifiques.

Une brève introduction à la structure des répertoires du projet :

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

Copier après la connexion

Après cela, exécutez npm run dev dans le répertoire racine du projet, ouvrez le navigateur et entrez http://localhost : 8080 pour le voir.

Cible

Page de connexion, connexion, fonction de déconnexion
Page d'accueil, liste de rendu de l'interface d'appel

Routage

Le routage utilise vue-router Pour une utilisation spécifique, veuillez vous référer à la documentation officielle

<🎜. >Nous sommes là Deux itinéraires sont requis :

src/router/index.js

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;
import Index from &#39;@/components/Index&#39;
import Login from &#39;@/components/Login&#39;

Vue.use(Router)

const routers = new Router({
 routes: [
  {
   path: &#39;/index&#39;,
   name: &#39;index&#39;,
   component: Index
  },
  {
   path: &#39;/login&#39;,
   name: &#39;login&#39;,
   component: Login
  }
 ]
})

routers.beforeEach((to, from, next) => {
 if (to.name !== &#39;login&#39; && !localStorage.getItem(&#39;token&#39;)) {
  next({path: &#39;login&#39;})
 } else {
  next()
 }
})

export default routers

Copier après la connexion

Page de connexion

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>

Copier après la connexion

Accueil

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>

Copier après la connexion

Application

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>

Copier après la connexion

Appel 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
  })
 }
}

Copier après la connexion

config

src/config.js Configurez ici le client_id et le secret requis pour vous connecter à oauth

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

Copier après la connexion

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;
})

Copier après la connexion

interface API

utilise principalement deux interfaces, l'une est api /oauth/token est l'interface de connexion pour obtenir le jeton, et une API/user/list pour obtenir la liste.

La première interface utilise laravel oauth, et la deuxième interface est directement une simple interface de liste d'utilisateurs de requête. Les détails seront décrits dans le prochain article.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.