search

Home  >  Article  >  Web Front-end  >  Element-UI build management backend code sharing in Vue

Element-UI build management backend code sharing in Vue

小云云
小云云Original
2018-05-15 11:48:334893browse

This article mainly shares with you the Elememt-UI construction and management backend code in Vue, hoping to help you.

Installation

I am using vue-cli initialization project, the command is as follows: 

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

Modify the package.json file:

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

After Execute npm install to install dependencies. If the installation speed is a bit slow, you can try cnpm and find out the specific installation and usage by yourself.

Briefly introduce the directory structure of the project: 

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

Then execute npm run dev in the project root directory, open the browser and enter http://localhost:8080 to view it.

Goal

Login page, login, exit function

Home page, call interface rendering list

Routing

Routing uses vue -router, for specific usage, please refer to the official documentation
We need two routes here:
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

Login page

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>

Homepage

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>

Call 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 Here configure the client_id and secret required for logging in to oauth

   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 interface

Mainly uses two interfaces, one is the api/oauth/token login and token interface, and the other is the get list api /user/list.
The first interface uses laravel oauth, and the second interface is directly a simple query user list interface. The details will be described in the next article.

Related recommendations:

WeChat public platform development management backend development

Management backend developed based on thinkphp5

Vue’s elementUI implements custom themes

The above is the detailed content of Element-UI build management backend code sharing in Vue. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of the margin attribute of cssNext article：Detailed explanation of the margin attribute of css

Related articles

See more