Vue中Element-UI建置管理後台程式碼分享-js教程-PHP中文網

本文主要和大家分享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 就可以檢視了。

目標

登入頁面，登錄，退出功能

首頁，呼叫介面渲染清單

路由

路由使用的是 vue -router，具體用法可參考官方文件
我們這裡需要兩個路由：
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

登入後複製

登入頁面

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="/">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 &#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 這裡設定登入oauth 所需的client_id 和secret

   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 介面

#主要用到兩個接口，一個是 api/oauth/token 登入取得token 接口，一個取得清單 api /user/list。
第一個接口是用到 laravel oauth，第二個接口直接是一個簡單的查詢用戶列表接口，詳細講會在下一篇文章中講述。