이 글은 Vue Elememt-UI를 활용한 관리 백엔드 구축 과정과 관련 코드 예시를 자세히 공유하고 있으니 참고하시고 함께 배워보세요.
Installation
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
로그인 페이지, 로그인, 로그아웃 기능
홈페이지, 통화 인터페이스 렌더링 목록
Routing
라우팅은 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/comComponents/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>
Homepage
src /구성요소/ 색인 .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="/" 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: '/' }">首页</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>
Call 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: '<App/>' })
api 인터페이스
에 필요한 client_id와 secret은 주로 두 가지 인터페이스를 사용합니다. 하나는 토큰 인터페이스를 얻기 위한 api/oauth/token 로그인입니다. 다른 하나는 Get list api/user/list입니다.
첫 번째 인터페이스는 laravel oauth를 사용하고, 두 번째 인터페이스는 바로 간단한 쿼리 사용자 목록 인터페이스입니다. 자세한 내용은 다음 글에서 설명하겠습니다.
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
vue를 사용하여 타임스탬프를 사용자 정의 시간 형식으로 변환하는 방법
vue 및 element-ui를 사용하여 테이블 콘텐츠 페이징을 구현하는 방법
FastClick 소스 코드에 대한 자세한 설명(자세한 튜토리얼) )
위 내용은 Elememt-UI를 사용하여 Vue에서 관리 백엔드 구축(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!