Elememt-UI を使用して Vue で管理バックエンドを構築する (詳細なチュートリアル)

この記事では、Vue Elememt-UI を使用して管理バックエンドを構築するプロセスと関連するコード例を詳しく共有します。参照して一緒に学習してください。

インストール

私は 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 と入力して表示します。

target

• loginページ、ログイン、ログアウトfunctionhomepage、call interface rendering listドキュメント

• ここには 2 つのルートが必要です:

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

ホームページ

ソース/コンポーネント/インデックス .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>

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

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インターフェース
で必要なclient_idとsecretは主に2つのインターフェースを使用します。1つはトークンインターフェースを取得するためのapi/oauth/tokenログインです。もう 1 つは Get list api/user/list です。

最初のインターフェイスはlaravel oauthを使用し、2番目のインターフェイスは直接単純なクエリユーザーリストインターフェイスです。詳細は次の記事で説明します。 上記は私があなたのためにまとめたものです。

関連記事:

vueを使用してタイムスタンプをカスタムの時間形式に変換する方法

vueとel​​ement-uiを使用してテーブルコンテンツページングを実装する方法

FastClickソースコードの詳細な説明(詳細なチュートリアル) )

以上がElememt-UI を使用して Vue で管理バックエンドを構築する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。