詳解VueElememt-UI構(gòu)建管理后臺

安裝

創(chuàng)新互聯(lián)建站專業(yè)提供成都主機托管四川主機托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價格，機房位于中國電信/網(wǎng)通/移動機房，服務(wù)器機柜租賃服務(wù)有保障！

我使用的是 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 請求庫
}
...

之后執(zhí)行 npm install 進行安裝依賴，如果安裝速度有點慢的話，可以試一下 cnpm ，具體安裝和用法自行查找。

簡單介紹下項目的目錄結(jié)構(gòu)：

├─build // 構(gòu)建配置
├─config // 配置文件
├─src // vue 開發(fā)源文件目錄
├────assets // css/js 文件
├────components // vue 組件
├────router  // 路由
├────App.vue  // 啟動組件
├────main.js // 入口文件
├─static // 靜態(tài)文件目錄
├─test // 測試目錄

之后在項目根目錄執(zhí)行 npm run dev ，打開瀏覽器輸入 http://localhost:8080 就可以查看了。

目標(biāo)

登錄頁面，登錄，退出功能
首頁，調(diào)用接口渲染列表

路由

路由使用的是 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

首頁

src/components/Index.vue

App

src/App.vue

調(diào)用 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 需要的 client_id 和 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: ''
})

api 接口

主要用到兩個接口，一個是 api/oauth/token 登錄獲取 token 接口，一個獲取列表 api/user/list。

第一個接口是用到 laravel oauth，第二個接口直接是一個簡單的查詢用戶列表接口，詳細講會在下一篇文章中講述。

以上就是本次整理的關(guān)于Vue Elememt-UI構(gòu)建管理后臺的全部內(nèi)容，感謝大家對創(chuàng)新互聯(lián)的支持。

本文名稱：詳解VueElememt-UI構(gòu)建管理后臺
本文URL：http://weahome.cn/article/gdjhgs.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

詳解VueElememt-UI構(gòu)建管理后臺

Admin

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管