-
國家級
全民數字素養與技能培訓基地 -
河南省
第一批產教融合型企業建設培育單位 -
鄭州市
數字技能人才（碼農）培養評價聯盟
后臺框架搭建過程
等待一段時間，項目創建完成
1.2.2 App.vue
<router-link?to=”/”>Home</router-link>?|
<router-link?to=”/about”>About</router-link>
</div>
·?antDesign
具體的框架選擇，可以選擇該網站作為參考
FE
拿iview做例子
在main.js中引入iview
import?ViewUI?from?‘view-design’
import?‘view-design/dist/styles/iview.css’
Vue.use(ViewUI)
如果我們需要在一個css中對iview進行重置，則需要去創建一個css并且在main.js引入
在assets中創建css/reset.css，在main.js中引入（需要放在UI組件的css的下面）
import?‘./assets/css/reset.css’
yarn add axios
import?axios?from?‘axios’
// 調用axios的create方法創建一個新的axios
const?instance?=?axios.create({
// 公共的請求前綴
baseURL:?‘https://some-domain.com/api/’,
// 請求超時時間
timeout:?1000,
// 設置默認的header信息
// headers: {‘a’: ‘1’}
})
// 創建axios的請求攔截器（一般設置的是401的問題）
instance.interceptors.request.use(config?=>?{
// 在發送請求之前做些什么
// 一般配置config中的headers添加token
return?config;
},?error?=>?{
// 對請求錯誤做些什么
return?Promise.reject(error);
});
instance.interceptors.response.use(response?=>?{
// 對響應數據做點什么
return?response;
},?error?=>?{
// 對響應錯誤做點什么
return?Promise.reject(error);
});
// 最后將實例導出，未來作為模塊使用
export?default?instance
1.3.3.接口配置
·?GET /books/:id 獲取某本書的信息
·?POST /books ?新建一本書{title: “”,ISBN: “”,author: “”,price: “”}
·?PUT /books/:id 更新書本全部內容{title: “”,ISBN: “”,author: “”,price: “”}
·?PATCH /books/:id 更新書本部分內容{title: “”,ISBN: “”,author: “”,price: “”}
·?DELETE /books/:id 刪除某本書
·?POST /login{username: ”,password: ”}
// 引入axios的實例
import?axios?from?‘@/utils/server’
/*
請求的函數最終返回的一定是一個Promise對象（axios.xxx()）
*/
// 獲取很多圖書信息
/* {
page: 1,
limit: 10
} */
export?const?getBooks?=?params?=>?axios.get(‘/books’, {params})
// 獲取某一本書
export?const?getBook?=?id?=>?axios.get(`/books/${id}`)
// 創建一本書
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? 路由配置
·?監控頁
·?工作臺
·?表單頁面
·?基礎表單
·?高級表單
·?列表頁面
·?基礎列表
·?用戶列表
·?搜索頁面
·?文章列表
·?項目列表
// 這里的相關path沒有按要求寫，只是個例子
const?routes?=?[
{
path:?‘/Dashboard’,
component: Layout,
children: [
{
path:?‘主控臺’,
}, {
path:?‘監控頁’
}, {
path:?‘工作臺’
}
]
}, {
path:?‘/表單頁面’,
component: Layout,
children: [
{
path:?‘基礎表單’
}, {
path:?‘高級表單’
}
]
}
]
src/router/Dashboard.js
import?Layout?from?‘Layout路徑’
export?default?{
path:?‘/Dashboard’,
redirect:?‘/Dashboard/主控臺’,
component: Layout,
children: [
{
path:?‘主控臺’,
component: ()?=>?import(‘組件路徑’)
}, {
path:?‘監控頁’,
component: ()?=>?import(‘組件路徑’)
}, {
path:?‘工作臺’,
component: ()?=>?import(‘組件路徑’)
}
]
}
src/router/表單頁面.js
import?Layout?from?‘Layout路徑’
export?default?{
path:?‘/表單頁面’,
redirect:?‘/表單頁面/基礎表單’,
component: Layout,
children: [
{
path:?‘基礎表單’,
component: ()?=>?import(‘組件路徑’)
}, {
path:?‘高級表單’,
component: ()?=>?import(‘組件路徑’)
}
]
}
這個時候我們就可以在router/index.js中引入對應的路由模塊
import?Dashboard?from?‘Dashboard.js’
import?表單頁面?from?‘表單頁面.js’
const?routes?=?[
Dashboard,
表單頁面
]
如果我們還有新增的菜單，我們可以繼續
1.?新建文件src/router/菜單.js
2.?在對應的文件中配置對應的路由
import?Layout?from?‘Layout路徑’
export?default?{
path:?‘/一級菜單路徑’,
redirect:?‘/一級菜單路徑/二級菜單路徑’
component: Layout,
children: [
{
path:?‘二級菜單路徑’,
component: ()?=>?import(‘組件路徑’)
}
]
}
3.?把這個對象在src/router/index.js中引入
import?Dashboard?from?‘Dashboard.js’
import?表單頁面?from?‘表單頁面.js’
import?菜單?from?‘菜單.js’
const?routes?=?[
Dashboard,
表單頁面,
菜單
]
1.3.4.1 添加路由后自動渲染菜單
export?const?routes?=?[
//…
]
在對應的菜單組件中，引入對應的routes
在渲染時，我們發現，缺少必要的信息，例如
import?Layout?from?‘Layout路徑’
export?default?{
path:?‘/一級菜單路徑’,
component: Layout,
meta: {
title:?“一級菜單”,
icon:?“ios-xxx”
},
children: [
{
path:?‘二級菜單路徑’,
component: ()?=>?import(‘組件路徑’),
meta: {
title:?“二級菜單”
}
},
{
path:?‘二級菜單路徑（不需要渲染到菜單）’,
component: ()?=>?import(‘組件路徑’),
meta: {
title:?“二級菜單”,
hidden:?true
}
}
]
}
{
“title”:?“”,
“icon”:?“”
}
這些自定義信息，我們可以添加到meta中
src/components/Sider.vue
<template>
<Menu?:theme=”theme2″?:active-name=”$route.path”>
<!– 根據頂級路由生成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”?/>
{{parent.meta.title}}
</template>
<!– 根據children生成MenuItem –>
<template>
<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>
<script>
import?{routes}?from?‘@/router’
export?default?{
data?() {
return?{
routes
}
}
}
</script>
– dashboard
– 總控臺.vue
– 監控頁.vue
– 工作臺.vue
– 表單
– 普通表單.vue
– 高級表單.vue
如果是屬于路由組件中的普通組件
– components
– 路由組件名（文件夾）
– 普通組件.vue
– dashboard.js
– 表單.js
在每個js中結構都是相同的
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: {
模塊
}
})
如果我們要用到請求，那么在對應模塊中引入，并在action里調用
如果我們想要在vuex中使用Message、router等相關的對象
直接引入即可
import?{Message}?from?‘view-design’
import?router?from?‘@/router’
在vue中有一些東西是一樣
this.$store?===?new?Vue.Store()
this.$router?===?new?VueRouter()
文/云和數據高級H5開發工程師
