H5大咖分享：Vue如何搭建中后臺(tái)框架？

發(fā)布時(shí)間：

2020-12-21
版權(quán)所有：

云和教育
分享：

后臺(tái)框架搭建過(guò)程

1.1創(chuàng)建一個(gè)Vue項(xiàng)目

vue create?項(xiàng)目名

1.1.1選擇合適的選項(xiàng)進(jìn)行安裝

·?default·?Manually select features

等待一段時(shí)間，項(xiàng)目創(chuàng)建完成

1.2.刪除原有的demo

1.2.1src/views

·?about.vue· home.vue

1.2.2 App.vue

?刪除對(duì)應(yīng)的nav和style樣式<div?id=”nav”>

<router-link?to=”/”>Home</router-link>?|

<router-link?to=”/about”>About</router-link>

</div>

1.2.3 src/router/index.js

引入home的代碼，和相關(guān)的路由配置全部刪除

1.2.4 src/components

刪除HelloWord.vue基于以上操作后，項(xiàng)目才會(huì)變成空白項(xiàng)目

1.3 搭建環(huán)境

1.3.1 UI框架

·?ElementUI·?iview

·?antDesign

具體的框架選擇，可以選擇該網(wǎng)站作為參考

拿iview做例子

1.3.1.1 @vue/cli3/4

vue add vue-cli-plugin-viewui直接運(yùn)行，不需要在進(jìn)行多余的配置

1.3.1.2 如果使用傳統(tǒng)方式

安裝iviewnpm?i?–save?view-design

在main.js中引入iview

import?ViewUI?from?‘view-design’

import?‘view-design/dist/styles/iview.css’

Vue.use(ViewUI)

如果我們需要在一個(gè)css中對(duì)iview進(jìn)行重置，則需要去創(chuàng)建一個(gè)css并且在main.js引入

在assets中創(chuàng)建css/reset.css，在main.js中引入（需要放在UI組件的css的下面）

import?‘./assets/css/reset.css’

1.3.2 axios

1.3.2.1 安裝axios

npm?i?–save?axios# 或者

yarn add axios

1.3.2.2 創(chuàng)建一個(gè)新的axios實(shí)例進(jìn)行配置，并作為模塊導(dǎo)出

在src下新建文件utils/server.jsserver.js

import?axios?from?‘axios’

// 調(diào)用axios的create方法創(chuàng)建一個(gè)新的axios

const?instance?=?axios.create({

// 公共的請(qǐng)求前綴

baseURL:?‘https://some-domain.com/api/’,

// 請(qǐng)求超時(shí)時(shí)間

timeout:?1000,

// 設(shè)置默認(rèn)的header信息

// headers: {‘a’: ‘1’}

})

// 創(chuàng)建axios的請(qǐng)求攔截器（一般設(shè)置的是401的問(wèn)題）

instance.interceptors.request.use(config?=>?{

// 在發(fā)送請(qǐng)求之前做些什么

// 一般配置config中的headers添加token

return?config;

},?error?=>?{

// 對(duì)請(qǐng)求錯(cuò)誤做些什么

return?Promise.reject(error);

});

instance.interceptors.response.use(response?=>?{

// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么

return?response;

},?error?=>?{

// 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么

return?Promise.reject(error);

});

// 最后將實(shí)例導(dǎo)出，未來(lái)作為模塊使用

export?default?instance

1.3.3.接口配置

我們應(yīng)該對(duì)接口進(jìn)行統(tǒng)一的管理·?GET /books?page=1&limit=10 獲取第一頁(yè)的信息

·?GET /books/:id 獲取某本書的信息

·?POST /books ?新建一本書{title: “”,ISBN: “”,author: “”,price: “”}

·?PUT /books/:id 更新書本全部?jī)?nèi)容{title: “”,ISBN: “”,author: “”,price: “”}

·?PATCH /books/:id 更新書本部分內(nèi)容{title: “”,ISBN: “”,author: “”,price: “”}

·?DELETE /books/:id 刪除某本書

·?POST /login{username: ”,password: ”}

1.3.3.1. 創(chuàng)建文件夾api

在src下創(chuàng)建api文件夾，對(duì)應(yīng)的統(tǒng)一模塊的數(shù)據(jù)應(yīng)該放在api下的模塊.js中，模塊中有相應(yīng)模板src/api/books.js

// 引入axios的實(shí)例

import?axios?from?‘@/utils/server’

請(qǐng)求的函數(shù)最終返回的一定是一個(gè)Promise對(duì)象（axios.xxx()）

// 獲取很多圖書信息

/* {

page: 1,

limit: 10

} */

export?const?getBooks?=?params?=>?axios.get(‘/books’, {params})

// 獲取某一本書

export?const?getBook?=?id?=>?axios.get(`/books/${id}`)

// 創(chuàng)建一本書

export?const?postBook?=?data?=>?axios.post(‘/books’,?data)

// 更新一本書

export?const?putBook?=?(id,?data)?=>?axios.put(`/books/${id}`,?data)

export?const?patchBook?=?(id,?data)?=>?axios.patch(`/books/${id}`,?data)

// 刪除一本書

export?const?deleteBook?=?id?=>?axios.delete(`/books/${id}`)

src/api/user.js

import?axios?from?‘@/utils/server’

export?const?login?=?data?=>?axios.post(‘/login’,?data)

1.3.4? 路由配置

根據(jù)左側(cè)導(dǎo)航菜單進(jìn)行路由的配置

·?Dashboard·?主控臺(tái)

·?監(jiān)控頁(yè)

·?工作臺(tái)

·?表單頁(yè)面

·?基礎(chǔ)表單

·?高級(jí)表單

·?列表頁(yè)面

·?基礎(chǔ)列表

·?用戶列表

·?搜索頁(yè)面

·?文章列表

·?項(xiàng)目列表

// 這里的相關(guān)path沒(méi)有按要求寫，只是個(gè)例子

const?routes?=?[

{

path:?‘/Dashboard’,

component: Layout,

children: [

{

path:?‘主控臺(tái)’,

}, {

path:?‘監(jiān)控頁(yè)’

}, {

path:?‘工作臺(tái)’

}

]

}, {

path:?‘/表單頁(yè)面’,

component: Layout,

children: [

{

path:?‘基礎(chǔ)表單’

}, {

path:?‘高級(jí)表單’

}

]

}

]

src/router/Dashboard.js

import?Layout?from?‘Layout路徑’

export?default?{

path:?‘/Dashboard’,

redirect:?‘/Dashboard/主控臺(tái)’,

component: Layout,

children: [

{

path:?‘主控臺(tái)’,

component: ()?=>?import(‘組件路徑’)

}, {

path:?‘監(jiān)控頁(yè)’,

component: ()?=>?import(‘組件路徑’)

}, {

path:?‘工作臺(tái)’,

component: ()?=>?import(‘組件路徑’)

}

]

}

src/router/表單頁(yè)面.js

import?Layout?from?‘Layout路徑’

export?default?{

path:?‘/表單頁(yè)面’,

redirect:?‘/表單頁(yè)面/基礎(chǔ)表單’,

component: Layout,

children: [

{

path:?‘基礎(chǔ)表單’,

component: ()?=>?import(‘組件路徑’)

}, {

path:?‘高級(jí)表單’,

component: ()?=>?import(‘組件路徑’)

}

]

}

這個(gè)時(shí)候我們就可以在router/index.js中引入對(duì)應(yīng)的路由模塊

import?Dashboard?from?‘Dashboard.js’

import?表單頁(yè)面?from?‘表單頁(yè)面.js’

const?routes?=?[

Dashboard,

表單頁(yè)面

]

如果我們還有新增的菜單，我們可以繼續(xù)

1.?新建文件src/router/菜單.js

2.?在對(duì)應(yīng)的文件中配置對(duì)應(yīng)的路由

import?Layout?from?‘Layout路徑’

export?default?{

path:?‘/一級(jí)菜單路徑’,

redirect:?‘/一級(jí)菜單路徑/二級(jí)菜單路徑’

component: Layout,

children: [

{

path:?‘二級(jí)菜單路徑’,

component: ()?=>?import(‘組件路徑’)

}

]

}

3.?把這個(gè)對(duì)象在src/router/index.js中引入

import?Dashboard?from?‘Dashboard.js’

import?表單頁(yè)面?from?‘表單頁(yè)面.js’

import?菜單?from?‘菜單.js’

const?routes?=?[

Dashboard,

表單頁(yè)面,

菜單

]

1.3.4.1 添加路由后自動(dòng)渲染菜單

該功能需要我們自己實(shí)現(xiàn)，在我們的菜單組件中，獲取到對(duì)應(yīng)的路由配置，根據(jù)路由配置的數(shù)組遍歷得到菜單結(jié)構(gòu)先在src/router/index.js導(dǎo)出routes

export?const?routes?=?[

//…

]

在對(duì)應(yīng)的菜單組件中，引入對(duì)應(yīng)的routes

在渲染時(shí)，我們發(fā)現(xiàn)，缺少必要的信息，例如

import?Layout?from?‘Layout路徑’

export?default?{

path:?‘/一級(jí)菜單路徑’,

component: Layout,

meta: {

title:?“一級(jí)菜單”,

icon:?“ios-xxx”

children: [

{

path:?‘二級(jí)菜單路徑’,

component: ()?=>?import(‘組件路徑’),

meta: {

title:?“二級(jí)菜單”

}

{

path:?‘二級(jí)菜單路徑（不需要渲染到菜單）’,

component: ()?=>?import(‘組件路徑’),

meta: {

title:?“二級(jí)菜單”,

hidden:?true

}

]

}

{

“title”:?“”,

“icon”:?“”

}

這些自定義信息，我們可以添加到meta中

src/components/Sider.vue

<Menu?:theme=”theme2″?:active-name=”$route.path”>

<!– 根據(jù)頂級(jí)路由生成Submenu –>

<template?v-for=”parent in routes”>

<Submenu?:name=”parent.path”?:key=”parent.path”?v-if=”!parent.meta.hidden”>

<template?slot=”title”>

<Icon?:type=”parent.meta.icon”?/>

</template>

<!– 根據(jù)children生成MenuItem –>

<MenuItem?:key=”child.path”?:name=”parent.path + ‘/’ + child.path”?v-for=”child in parent.children”?:to=”parent.path + ‘/’ + child.path”>{{child.meta.title}}</MenuItem>

</template>

</Submenu>

</template>

</Menu>

</template>

import?{routes}?from?‘@/router’

export?default?{

data?() {

return?{

routes

}

</script>

1.3.5 路由組件創(chuàng)建

src/views中存放我們的路由組件，原則上，一個(gè)模塊應(yīng)該分別在一個(gè)文件夾- views

– dashboard

– 總控臺(tái).vue

– 監(jiān)控頁(yè).vue

– 工作臺(tái).vue

– 表單

– 普通表單.vue

– 高級(jí)表單.vue

如果是屬于路由組件中的普通組件

– components

– 路由組件名（文件夾）

– 普通組件.vue

1.3.6 vuex

vuex最好使用modules，在配置時(shí)，添加對(duì)應(yīng)模塊在src/store/modules- modules

– dashboard.js

– 表單.js

在每個(gè)js中結(jié)構(gòu)都是相同的

demo.js

export?default?{

namespaced:?true,

state: {},

mutations: {},

actions: {}

getters: {},

modules: {}

}

再把模塊js放置在src/store/index.js中

index.js

import?模塊?from?‘模塊路徑’

const?store?=?new?Vuex.Store({

state: {},

mutations: {},

actions: {},

getters: {},

modules: {

模塊

}

})

如果我們要用到請(qǐng)求，那么在對(duì)應(yīng)模塊中引入，并在action里調(diào)用

如果我們想要在vuex中使用Message、router等相關(guān)的對(duì)象

直接引入即可

import?{Message}?from?‘view-design’

import?router?from?‘@/router’

在vue中有一些東西是一樣

this.$store?===?new?Vue.Store()

this.$router?===?new?VueRouter()

文/云和數(shù)據(jù)高級(jí)H5開(kāi)發(fā)工程師

H5大咖分享：Vue如何搭建中后臺(tái)框架？

最新開(kāi)班信息

課程咨詢

云和熱門培訓(xùn)課程

推薦閱讀