element ui 前台模板_用 Vue+ElementUI 搭建后台管理极简模板
本文由圖雀社區(qū)成員https://blog.csdn.net/crxk_?blog.csdn.net
寫在前面
此篇文章為一篇說明文檔，不是教你從零構(gòu)建一個后臺管理系統(tǒng)，而是基于一個實際項目，已經(jīng)搭建好了一個后臺管理系統(tǒng)的基礎(chǔ)框架，教你如何在此基礎(chǔ)上快速開發(fā)自己的后臺管理系統(tǒng)，能讓讀者能在掌握一些基礎(chǔ)知識的情況下，也能上手vue后臺開發(fā)。只有接觸項目，才能更好地理解自己所學(xué)知識的意義，觸類旁通把死知識點變成活學(xué)活用的技能。
先跑起來
# 克隆項目
git clone https://github.com/tuture-dev/vue-admin-template.git
# 進(jìn)入目錄
cd vue-admin-template
# 安裝依賴
npm install --registry=https://registry.npm.taobao.org
# 運行
npm run dev
本文所涉及的源代碼都放在了 Github 上，如果您覺得我們寫得還不錯，希望您能給??這篇文章點贊+Github倉庫加星??哦~tuture-dev/vue-admin-template?github.com
增添側(cè)邊導(dǎo)航新建文件。在src/views/ 新建一個空白的文件夾 test，在此目錄下新建文件 test.vue
添加路由。打開 src/router/index.js，此文件為該項目的后臺路由配置文件。在constantRoutes這個數(shù)組中，添加路由的格式如下：
{
path: '/test', //url路徑 component: Layout, // 此處不用動，這個全局統(tǒng)一的一個布局文件 children: [{
path: 'test', // 二級路徑 name: 'test',
component: () => import('@/views/test/test'), // 懶加載，此處寫所添加文件的路徑 meta: {
title: '測試', icon:'plane' //配置選項可配置測試名稱和圖標(biāo) }
}]
},
我們可以自定義圖標(biāo)，格式的文件，可以在iconfont中下載，之后放入src/icons/svg 目錄下即可：Iconfont-阿里巴巴矢量圖標(biāo)庫?www.iconfont.cn
對于二級導(dǎo)航可以按照如下的方式進(jìn)行配置。
{
path: '/material',
component: Layout,
redirect: '/material/upload',
meta: {
title: '素材管理', //元信息，一級導(dǎo)航的名稱 icon: 'plane' // 元信息，導(dǎo)航圖標(biāo)的名稱 },
children: [{
path: 'check-template',
name: 'check-template',
component: () => import('@/views/material/check-template'),
meta: {
title: '查看模板',
}
},
{
path: 'logo',
name: 'logo',
component: () => import('@/views/material/check-logo'),
meta: {
title: '查看logo',
}
},
{
path: 'generate',
name: 'generate',
component: () => import('@/views/material/generate'),
meta: {
title: '生成素材',
}
},
{
path: 'check',
name: 'check',
component: () => import('@/views/material/check'),
meta: {
title: '查看素材',
}
},
]
},
在此配置完成后，框架會自動地根據(jù)路由配置文件，生成邊側(cè)導(dǎo)航條目。我們所需要做的工作就是根據(jù)業(yè)務(wù)需求，編寫一個個vue組件，往框架里面填充內(nèi)容就OK了。
使用Element UI組件
Element UI提供了很多可復(fù)用的組件，對于一般的后臺應(yīng)用，這些組件完全可以滿足需求。如果個性化需求不高的話，我們完全可以做一名“復(fù)制粘貼”工程師又稱“CV”工程師，快速開發(fā)。The world's most popular Vue UI framework?element.eleme.cn
對于每一個組件，其文檔上都有效果示例與代碼，只需選擇所需組件，將其代碼粘貼進(jìn)我們的代碼文件中，稍加修改即可。
網(wǎng)絡(luò)請求
當(dāng)整個框架搭建完畢以后，前端程序員最主要的工作就是發(fā)起請求，渲染數(shù)據(jù)。現(xiàn)在我們就來完整地走一遍這個過程。
基礎(chǔ)配置配置代理。
因為跨域資源請求的問題，在開發(fā)階段所有和后端交互的網(wǎng)絡(luò)請求在底層由node.js代理。相關(guān)文檔Configuration Reference | Vue CLI?cli.vuejs.org
打開根目錄下的vue.config.js文件
// 代理所有以‘/admin’開頭的網(wǎng)絡(luò)請求proxy: {
'/admin': {
target: `http://localhost:8886/`, //后臺服務(wù)地址 changeOrigin: true,
pathRewrite: {
}
}
}配置地址
生產(chǎn)環(huán)境與開發(fā)環(huán)境通常有不同的服務(wù)地址。編輯 .env.development 以及 .env.production 這兩個文件，修改其中的 VUE_APP_BASE_API 配置項即可
以開發(fā)環(huán)境為例：
VUE_APP_BASE_API = '/admin'配置攔截器
打開src/utils/request.js，此文件封裝了一個axios請求對象，該系統(tǒng)中的網(wǎng)絡(luò)請求都是基于這個對象來處理的。 我們可以在網(wǎng)絡(luò)請求發(fā)送之前和收到服務(wù)端回復(fù)之后做一些通用性的工作。比如根據(jù)服務(wù)端的狀態(tài)碼判斷請求是否正常，若不正常給出相應(yīng)的提示。
service.interceptors.response.use(
response => {
const res = response.data
// 如果服務(wù)器的狀態(tài)碼不為200，說明請求異常，應(yīng)給出錯誤提示。 if (res.code !== 200) {
Message({
message: res.msg || 'Error check your token or method',
type: 'error',
duration: 2 * 1000
})
return Promise.reject(new Error(res.msg || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug Message({
message: error.message,
type: 'error',
duration: 2 * 1000
})
return Promise.reject(error)
}
)掛載請求對象
在src/main.js首先導(dǎo)入網(wǎng)絡(luò)請求對象，并掛載至Vue全局對象，這樣在每個組件中直接引用即可，不用要再導(dǎo)入。
import request from '@/utils/request'
Vue.prototype.req = request
請求與渲染搭建一個簡易node服務(wù)
僅供教程說明使用
let http = require('http');
let querystring = require('querystring');
let my_result = [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
let server = http.createServer((req, res) => {
let post = '';
req.on('data', function (chunk) {
post += chunk;
});
req.on('end', function () {
res.writeHead(200, {
'Content-Type': 'application/json; charset=utf-8'
})
post = querystring.parse(post);
console.log('post-data:', post);
if (post) {
let result = {
code: 200,
// msg: "server error" data: my_result
}
res.end(JSON.stringify(result));
} else {
let result = {
code: '0',
msg: '沒有接受到數(shù)據(jù)'
}
res.end(JSON.stringify(result));
}
});
});
server.listen(8886)
//在命令行 node server.js 即可運行發(fā)起請求
this.req({
url: "getInfo?id=6", // 此處寫不同業(yè)務(wù)對應(yīng)的url，框架會自動與baseURL拼接 data: {},
method: "GET"
}).then(
res => {
// 請求成功后的處理 console.log("res :", res);
},
err => {
// 請求失敗后的處理 console.log("err :", err);
}
);
按照最佳實踐，應(yīng)該把網(wǎng)絡(luò)請求統(tǒng)一抽離到單一文件，然后在每個具體的頁面進(jìn)行對服務(wù)端數(shù)據(jù)的處理。 比如下面的這種形式，首先創(chuàng)建文件src/api/test.js，把在test組件中需要用到的網(wǎng)絡(luò)請求都寫入此文件。
// src/api/test.jsimport request from '@/utils/request'
export function getList(params) {
return request({
url: 'getTableData',
method: 'get',
params
})
}
在組件test.vue中引入請求方法
import { getTableData } from "@/api/test.js";
……
mounted: function() {
// 網(wǎng)絡(luò)請求統(tǒng)一處理getTableData().then(res => {
console.log("api tableData :", res);
this.tableData = res.data;
},err=>{
console.log("err :", err);
});
// 網(wǎng)絡(luò)請求直接寫在文件中this.req({
url: "getTableData",
data: {},
method: "GET"
}).then(
res => {
console.log("tableData :", res);
this.tableData = res.data;
},
err => {
console.log("err :", err);
}
);
},網(wǎng)絡(luò)數(shù)據(jù)流
在控制臺可以看出，我們的請求地址為localhost:9528,而后臺服務(wù)的的地址為localhost:8886。為啥不一樣呢？我們以一流程圖說明
應(yīng)用程序上線后，對于CORS跨域資源訪問的問題，可以用類似的方案(Nginx反向代理)在前端解決。
Hello Table
現(xiàn)在我們在test.vue中用Element UI所提供的 Table組件寫一個表格數(shù)據(jù)展示頁面。進(jìn)入Element UI Table組件的說明文檔，復(fù)制粘貼對應(yīng)的代碼。框架對于Element UI已經(jīng)進(jìn)行了全局引入，所以這些組件拿來即用。如果是其他第三方的組件，還需要我們自己引入后再使用。The world's most popular Vue UI framework?element.eleme.cn
在組件裝載時請求數(shù)據(jù)
mounted: function() {
this.req({
url: "getTableData",
data: {},
method: "GET"
}).then(
res => {
console.log("tableData :", res);
this.tableData = res.data // 數(shù)據(jù)渲染 },
err => {
console.log("err :", err); // 當(dāng)業(yè)務(wù)邏輯發(fā)生錯誤時 進(jìn)行處理 }
);
},實際效果
業(yè)務(wù)邏輯正常
業(yè)務(wù)出錯時，彈出服務(wù)端給的錯誤信息。彈出此信息是在攔截器request.js文件定義的，這是統(tǒng)一的業(yè)務(wù)邏輯錯誤處理，也可以在每個請求中單獨處理。
簡易權(quán)限控制
這種權(quán)限控制方式為靜態(tài)方式，有些復(fù)雜的動態(tài)權(quán)限管理不在此說明。 該框架每一次的路由跳轉(zhuǎn)都會通過router.beforeEach檢驗一遍權(quán)限，我們可以在這里添加配置項。 進(jìn)入文件 src/permission.js，以只有管理員才能進(jìn)入用戶管理界面為例：
if (to.path === '/user/user') {
let id = JSON.parse(localStorage.getItem('userInfo')).id
console.log(id)
if (id > 2) { //id>2位普通用戶，無權(quán)訪問 next({ path: '/task' })
window.alert('permission denied')
}
}
結(jié)語
到此后臺開發(fā)中最常用的操作已經(jīng)介紹完畢，對于一些小項目已經(jīng)是綽綽有余。花盆里長不出參天松，庭院里練不出千里馬，項目寫得多了很多東西就自然而然的通透了。一千個讀者就有一千個哈姆雷特，這只是一個基礎(chǔ)框架，在開發(fā)的過程，需要我們自己對其修改，讓它成為你自己最順手的框架。https://github.com/PanJiaChen/vue-admin-template.git?github.com想要學(xué)習(xí)更多精彩的實戰(zhàn)技術(shù)教程？來圖雀社區(qū)逛逛吧。圖雀社區(qū)?tuture.co本文所涉及的源代碼都放在了 Github 上，如果您覺得我們寫得還不錯，希望您能給??這篇文章點贊+Github倉庫加星??哦tuture-dev/vue-admin-template?github.com
總結(jié)
以上是生活随笔為你收集整理的element ui 前台模板_用 Vue+ElementUI 搭建后台管理极简模板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 空间刚架matlab_Matlab绘制空
- 下一篇： html表格选择一行,vue + ele