賣座后臺(tái)管理系統(tǒng)知識(shí)體系
目錄
vue-cli3 創(chuàng)建項(xiàng)目（略）
重置樣式和公共樣式(略)
路由配置（略）
使用餓了么 ui 庫(kù)捂襟，請(qǐng)看文檔（略）
布局組件（已完成）
vue 原生點(diǎn)擊事件（已完成）
vuex
axios 攔截器（完成一半）
打包部署項(xiàng)目
active-class
父子組件通信
vue-cli3 腳手架配置
五律适、布局組件
- 拷貝餓了么的布局容器
- 展開(kāi)側(cè)邊欄的設(shè)置 :default-openeds 設(shè)置
- 樣式調(diào)整
- layout 組件設(shè)置 padding-top
- 頭部調(diào)整（固定定位）
- 側(cè)邊欄 html=>body=>#app>div>aside 高度全部設(shè)為 100%
六椒袍、vue 原生點(diǎn)擊事件
在組件上添加事件的時(shí)候需要添加修飾符剧罩。native 來(lái)綁定事件固翰，比如
<el-submenu index="2" @click.native="open('2')"></el-submenu>
八收厨、axios 攔截器
文檔地址：http://huruqing.cn/docs/Vue/advance/02.axios.html
在新建 /utils/request.js
-
使用 axios 創(chuàng)建實(shí)例围俘，配置 baseUrl 和超時(shí)時(shí)間
const service = axios.create({ // 配置基本的路徑 baseURL: 'http://132.232.87.95:3000/admin', timeout: 5000 // 請(qǐng)求超時(shí)時(shí)間(因?yàn)樾枰{(diào)試后臺(tái),所以設(shè)置得比較大) }) -
response 攔截器讓我們?cè)谡?qǐng)求成功之后砸讳，統(tǒng)一做某些處理（完整的代碼請(qǐng)看項(xiàng)目）
// response 攔截器 service.interceptors.response.use(res => { if (res.data.code == 666) { return res.data } else { return Promise.reject(res.data.msg); } }, error => { return Promise.reject(error) }); export default service; 把 axios 掛載在 Vue 的原型上
import $axios from '@/utils/request';
Vue.prototype.$axios = $axios;
- 發(fā)送請(qǐng)求只需要這樣寫(xiě)
let url = "/city/getList";
this.$axios
.get(url)
.then(res => {
this.list = res.cities;
console.log(res.cities);
})
.catch(err => {
console.log(err);
});
九、打包部署項(xiàng)目（上線）
-
全局變量 process.env
let env = process.env.NODE_ENV; let baseURL = ''; // 開(kāi)發(fā)環(huán)境 if (env === 'development') { baseURL = 'http://jun.huruqing.cn:3000/admin'; } else { // 生產(chǎn)環(huán)境 baseURL = 'http://jun.huruqing.cn:3000/admin'; }web04 班因?yàn)闂l件限制界牡，所以簿寂，開(kāi)發(fā)和生產(chǎn)用同一套代碼
-
配置打包路徑和資源訪問(wèn)路徑
-
新建 /vue.config.js, 代碼如下
// 以陳燦為例 module.exports = { // 資源路徑 publicPath: '/maizuo/chencan/', // 打包路徑 outputDir: 'chencan', // 關(guān)閉eslint檢查 lintOnSave: false }
-
執(zhí)行 npm run build 命令，然后把生成的文件夾 chencan 上傳到 jun.huruqing.cn/maizuo/
十宿亡、路由表和側(cè)邊欄配置
-
導(dǎo)出路由數(shù)組
export const routes = []; -
導(dǎo)入路由數(shù)組
import {routes} from '@/router/index' item.meta && item.meta.title => && 左邊為 false 的時(shí)候常遂，不會(huì)繼續(xù)執(zhí)行
-
設(shè)置默認(rèn)值
function test(data) { data = data || {}; console.log(data.aa); }
十一、路由守衛(wèi)
-
配置全局路由守衛(wèi)
let routes = []; let router = new Router({ routes }) router.beforeEach((to, from, next) => { // 修改網(wǎng)頁(yè)標(biāo)題 document.title = to.meta.title; next(); }) export default router;- to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象
- from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由
- next
利用路由守衛(wèi)讓沒(méi)登錄的時(shí)候挽荠，不管訪問(wèn)什么頁(yè)面都調(diào)到登錄頁(yè)面
// 獲取登錄狀態(tài)isLogi的值 this.$store.state
import store from '../store/index';
router.beforeEach((to, from, next) => {
// console.log('登錄狀態(tài)', store.state.isLogin);
// 修改網(wǎng)頁(yè)標(biāo)題
document.title = to.meta.title;
let isLogin = store.state.isLogin;
debugger;
// 如果沒(méi)登錄,并且去的頁(yè)面不是登錄頁(yè)面, 就跳轉(zhuǎn)到登陸頁(yè)面
if (!isLogin && to.path !== '/login') {
next('/login');
} else {
next();
}
})
export default router;
十二克胳、級(jí)聯(lián)組件的使用 (影院模塊的制作)
-
覆蓋餓了么的樣式
-
給組件起一個(gè)不會(huì)重復(fù)的class,模塊名+組件名,比如
<div class="cinema-add"> // cinema模塊的add組件 使用兩個(gè)style,一個(gè)加scoped,另外一個(gè)不加
-
覆蓋餓了么組件樣式
<style lang="less"> .cinema-add { .el-cascader { display: block; } } </style>// 下面的style用來(lái)寫(xiě)本組件的樣式
<style lang="less" scoped> </style>
-
Promise.all,同時(shí)發(fā)多個(gè)請(qǐng)求
// promise1,promise2都是promise對(duì)象 Promise.all([promise1,promise2]).then(res=> { // res是一個(gè)數(shù)組,返回兩個(gè)promise的數(shù)據(jù) })// 獲取城市列表和地區(qū)列表 getList() { let cityUrl = '/city/allCity'; let areaUrl = '/area/allArea'; // 獲取城市列表的promise let cityPromise = this.$axios.get(cityUrl); // 獲取地區(qū)列表的promise let areaPromise = this.$axios.get(areaUrl); Promise.all([cityPromise,areaPromise]).then(res=> { console.log(res); }).catch(err=> { this.$message.error(err); }) }, -
把城市列表和地區(qū)列表編程級(jí)聯(lián)組件需要的數(shù)據(jù)格式
getList() { let cityUrl = "/city/allCity"; let areaUrl = "/area/allArea"; // 獲取城市列表的promise let cityPromise = this.$axios.get(cityUrl); // 獲取地區(qū)列表的promise let areaPromise = this.$axios.get(areaUrl); Promise.all([cityPromise, areaPromise]) .then(res => { // console.log(res); // 把城市列表和地區(qū)列表編程級(jí)聯(lián)組件需要的數(shù)據(jù)格式 let cityList = res[0].cities; let areaList = res[1].areas; let newCityList = cityList.map(city => { // 找出城市對(duì)應(yīng)的地區(qū)列表 let newAreaList = areaList.filter(area => { return area.cityId === city.cityId; }); // 地區(qū)列表變成組件需要的數(shù)據(jù)結(jié)構(gòu) newAreaList = newAreaList.map(area=> { return { value: area.areaId, label: area.name } }) return { value: city.cityId, label: city.name, children: newAreaList }; }); // console.log(newCityList); this.options = newCityList; }) .catch(err => { this.$message.error(err); });級(jí)聯(lián)組件添加清空,搜索,禁用
-
子組件向父組件傳數(shù)據(jù)
-
父組件自定義事件
<Address @getAddress="getAddress"></Address> getAddress(data) { console.log('父組件收到的數(shù)據(jù)',data); }, -
自組件通過(guò)$emit觸發(fā)父組件定義的自定義事件
handleChange(value) { this.$emit('getAddress',value); }
-
-
十三、請(qǐng)求的loading和axios.finally
.finally不管請(qǐng)求成功或失敗都會(huì)執(zhí)行回調(diào)
cinemaDetail(cinemaId) {
let loading = this.$loading({
lock: true,
text: "努力加載中...",
background: "rgba(0, 0, 0, 0.7)"
});
let url = "/cinema/getDetail2?cinemaId="+ cinemaId;
this.$axios.get(url).then(res => {
console.log(res);
}).catch(err => {
this.$message.error(err);
}).finally(()=> {
loading.close();
})
},
十四圈匆、動(dòng)態(tài)路由配置
例子1:
// 路由配置
{
path: 'edit/:cinemaId',
meta: {
title: 'edit'
},
component: () => import('@/pages/demo/edit')
},
// 頁(yè)面跳轉(zhuǎn)
<router-link to="/demo/edit/a1234444">去編輯</router-link>
// 獲取cinemaId的值
this.$route.params.cinemaId;
例子2: 傳多個(gè)參數(shù)
// 路由配置
{
path: 'edit/:cinemaId/:cityId/:areaId',
meta: {
title: 'edit'
},
component: () => import('@/pages/demo/edit')
},
// 頁(yè)面跳轉(zhuǎn)
<router-link to="/demo/edit/a1234444/b234234/c1234234">去編輯</router-link>
// 獲取cinemaId,cityId,areaId
let {cinemaId,cityId,areaId} = this.$route.params;
十五毯欣、添加和編輯共用同一個(gè)組件(以城市模塊為例)
-
判斷當(dāng)前路由是添加還是編輯
-
方法一: 獲取cityId,有cityId為編輯頁(yè)面,沒(méi)有則是添加頁(yè)面
this.$route.params.cityId;具體代碼如下
<template> <div> <el-button>{{isAdd?'立即添加':'立即編輯'}}</el-button> </div> </template> <script> export default { data() { return { // 是否是添加頁(yè)面 isAdd: true }; }, created() { let cityId = this.$route.params.cityId; this.isAdd = !!cityId ? false : true; } }; </script>
-
-
方法二: 通過(guò)this.$route.path來(lái)判斷
<template> <div> <el-button>{{isAdd?'立即添加':'立即編輯'}}</el-button> </div> </template> <script> export default { data() { return {}; }, computed: { isAdd() { return this.$route.path.includes("add"); } } }; </script>
