cari

Rumah  >  Artikel  >  hujung hadapan web  >  Vue中Element-UI构建管理后台代码分享

Vue中Element-UI构建管理后台代码分享

小云云
小云云asal
2018-05-15 11:48:334888semak imbas

本文主要和大家分享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 '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/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，第二个接口直接是一个简单的查询用户列表接口，详细讲会在下一篇文章中讲述。

相关推荐：

微信公众平台开发管理后台开发

基于thinkphp5开发的管理后台

Vue的elementUI实现自定义主题

Atas ialah kandungan terperinci Vue中Element-UI构建管理后台代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css之margin属性详解Artikel seterusnya：动态生成form表单实现方法

Artikel berkaitan

Lihat lagi