Cet article partage principalement avec vous le code backend de construction et de gestion d'Elememt-UI dans Vue, dans l'espoir d'aider tout le monde.
Installation
J'utilise le projet d'initialisation vue-cli, la commande est la suivante :
npm i -g vue-cli mkdir my-project && cd my-project vue init webpack
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 请求库 } ...
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.
Présentez brièvement la structure des répertoires du projet :
├─build // 构建配置 ├─config // 配置文件 ├─src // vue 开发源文件目录 ├────assets // css/js 文件 ├────components // vue 组件 ├────router // 路由 ├────App.vue // 启动组件 ├────main.js // 入口文件 ├─static // 静态文件目录 ├─test // 测试目录
Ensuite, 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
Route
La route utilise vue -router, pour un usage spécifique, veuillez vous référer à la documentation officielle
Nous avons besoin de deux routes ici :
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
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 '@/api/' import config from '@/config' export default { data () { return { user: { name: '', password: '' } } }, mounted: function () { var token = localStorage.getItem('token') if (token) { this.$router.push('/index') } }, methods: { login: function () { var data = { grant_type: 'password', 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: '登录成功', type: 'success' }) _this.$router.push('/index') } else { _this.$message({ showClose: false, message: '登录失败', type: 'error' }) } }) } } } </script> <style> .login{ width: 300px; margin: 100px auto; background-color: #ffffff; padding: 30px 30px 5px; border-radius: 5px; } </style>
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 '@/api/' 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: '/' }">首页</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 '@/components/Menu' export default { name: 'App', data () { return { token: false } }, mounted: function () { this.token = localStorage.getItem('token') ? true : false }, watch: { '$route.path': function ($newVal, $oldVal) { this.token = localStorage.getItem('token') ? true : false } }, methods: { operate: function (command) { if (command === '/logout') { localStorage.removeItem('token') this.$router.push('login') } 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: 'Avenir', 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>
Appel de l'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 Configurez ici le client_id et requis pour se connecter à oauth secret
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: '<App/>' })
interface API
utilise principalement deux interfaces, l'une est api/oauth/token Login pour obtenir l'interface de jeton, une liste d'obtention api/user/list.
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.
Recommandations associées :
Développement du backend de gestion du développement de la plateforme publique WeChat
Backend de gestion développé sur la base de thinkphp5
ElementUI de Vue implémente des thèmes personnalisés
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!