vue后台管理知识点、难点总结01
生活随笔
收集整理的這篇文章主要介紹了
vue后台管理知识点、难点总结01
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
vue后臺(tái)管理知識(shí)點(diǎn)、難點(diǎn)總結(jié)
- 1.upload時(shí)，png格式的不能上傳？？？？(不對(duì))
- 2 js中的項(xiàng)目應(yīng)用什么時(shí)候用async和await
- 3 添加或者編輯的時(shí)候報(bào)錯(cuò)：Error in v-on handler (Promise/async): "Error: 失敗"（解決，其他頁(yè)的數(shù)據(jù)正常顯示）
- 4 注冊(cè)全局組件和方法
- 5 深拷貝：
- 6 v-if和v-else之間不能有任何節(jié)點(diǎn)，或者失效
- 7 vue中 data的數(shù)據(jù)都是響應(yīng)式的，添加到data中的也是
- 8查看模式轉(zhuǎn)為編輯模式時(shí)（span-->input）用$nextTick()
- 9 elementui版本問(wèn)題
- 10 為什么刪除屬性值列表不用發(fā)送請(qǐng)求（沒(méi)解決）
- 11 數(shù)組中filter
- 12 element ui中分頁(yè)pagination的漢化
- 13 父組件想要調(diào)用子組件的方法（父組件想要獲取子組件的屬性和方法），可用$ref $childen
- 14 用foreach修改服務(wù)器傳過(guò)來(lái)的數(shù)據(jù)
- 15 vue中的computed
- 16 el-select多選框可以穿多個(gè)數(shù)據(jù)，拼接一下即可
- 17 項(xiàng)目中添加的數(shù)據(jù)push到收集數(shù)據(jù)的spu中，判斷輸入的是否為空
- 18 some every filter 返回的都是布爾值，需要return
- 19 elementui模板請(qǐng)求數(shù)據(jù)
- 20 在main.js中引入接口和組件等總結(jié)
- 21 map 映射，可以把已有的數(shù)組數(shù)據(jù)通過(guò)return一個(gè)新數(shù)組
- 22 取消按鈕，清除數(shù)據(jù)的方法
- 23 刪除某一頁(yè)數(shù)據(jù)列表時(shí)，當(dāng)也數(shù)據(jù)刪除完畢之后，自動(dòng)返回都上一頁(yè)
- 24 form表單中海油form
- 25 獲取的數(shù)據(jù)中不含有某個(gè)參數(shù)，這個(gè)參數(shù)需要收集，以后傳給服務(wù)器
- 26 可以在獲取的數(shù)據(jù)中通過(guò)一下形式收集參數(shù)
- 27 如何把獲取到的部分?jǐn)?shù)據(jù)添加到收集（上傳服務(wù)器所需要的參數(shù)）的數(shù)據(jù)里面 foreach和reduce都可以
- 28 獲取列表數(shù)據(jù)，分頁(yè)加載
- 29 深度選擇器
- 30 在boot cdn找依賴包
- 31 安裝echarts
- 32 map()
1.upload時(shí)，png格式的不能上傳？？？？(不對(duì))
// 上傳相關(guān)//圖片上傳成功handleAvatarSuccess(res, file) {console.log(res, file, 222222);this.tmForm.logoUrl = res.data;},//圖片上傳之前beforeAvatarUpload(file) {// const isJPG = file.type === "image/jpeg";const isJPG = file.type === 'image/jpg' || file.type === 'image/png'|| file.type === 'image/PNG'|| file.type === 'image/JPG';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {// this.$message.error("上傳頭像圖片只能是 JPG 格式!");this.$message.error("上傳頭像圖片只能是 JPG和PNG 格式!");}if (!isLt2M) {this.$message.error("上傳頭像圖片大小不能超過(guò) 2MB!");}return isJPG && isLt2M;},2 js中的項(xiàng)目應(yīng)用什么時(shí)候用async和await
獲取分頁(yè)數(shù)據(jù)的時(shí)候；獲取列表，點(diǎn)擊刪除數(shù)據(jù)確定按鈕、點(diǎn)擊添加和修改的確定按鈕的時(shí)候；
3 添加或者編輯的時(shí)候報(bào)錯(cuò)：Error in v-on handler (Promise/async): “Error: 失敗”（解決，其他頁(yè)的數(shù)據(jù)正常顯示）
4 注冊(cè)全局組件和方法
//引入相關(guān)接口API import API from '@/api'; import CategorySelete from '@/components/CategorySelect'//（組件實(shí)例的原型的原型指向的是Vue.prototype）放在原型上,任意組件都可使用API相關(guān)的接口 Vue.prototype.$API=API; //注冊(cè)全局組件 Vue.component(CategorySelete.name,CategorySelete)5 深拷貝：
第二種引入elementui中封裝的方法：cloneDeep
6 v-if和v-else之間不能有任何節(jié)點(diǎn)，或者失效
7 vue中 data的數(shù)據(jù)都是響應(yīng)式的，添加到data中的也是
數(shù)組的檢測(cè)可以通過(guò)替換或變更（push也是變更）實(shí)現(xiàn)
8查看模式轉(zhuǎn)為編輯模式時(shí)（span–>input）用$nextTick()
//單擊spantoEdit(row,index){//點(diǎn)擊span時(shí)，切換為input,對(duì)于瀏覽器而言，重排重繪需要耗時(shí)間，不可能立即取到input鍵//這是用 $nextTick()==>當(dāng)節(jié)點(diǎn)渲染完畢了，會(huì)執(zhí)行一次this.$nextTick(()=>{this.$refs[index].focus();})row.flag=true},9 elementui版本問(wèn)題
在用Popconfirm 氣泡確認(rèn)框時(shí)，綁定confirm事件時(shí)沒(méi)有效果，原因是最新的elementui版本號(hào)（2.15.x）和模板版本號(hào)（2.13.x）不一致，項(xiàng)目低，于是事件綁定改為@onConfirm="deleteAttrValue"即可
<el-popconfirm :title="`這是一段內(nèi)容確定${row.valueName}刪除嗎？`" @onConfirm="deleteAttrValue"><el-buttontype="danger"size="mini"icon="el-icon-delete"slot="reference"></el-button></el-popconfirm>deleteAttrValue() {alert(333);},10 為什么刪除屬性值列表不用發(fā)送請(qǐng)求（沒(méi)解決）
11 數(shù)組中filter
1.會(huì)返回一個(gè)新的數(shù)組
2.過(guò)濾的作用，從起始遍歷，篩選需要的數(shù)據(jù)，需要返回的布爾值妖魔真要么假
12 element ui中分頁(yè)pagination的漢化
main.js中添加：
//element分頁(yè)組件漢化 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入中文版 Vue.use(ElementUI,{zhLocale})13 父組件想要調(diào)用子組件的方法（父組件想要獲取子組件的屬性和方法），可用$ref $childen
每次點(diǎn)擊父組件中的按鈕（如父組件列表中有修改按鈕），點(diǎn)擊修改按鈕后，展示子組件的頁(yè)面的同時(shí)，同時(shí)四個(gè)請(qǐng)求），怎么解決？
總結(jié)：：項(xiàng)目功能需求是，每一次顯示SpuForm子組件時(shí)，都會(huì)發(fā)四個(gè)請(qǐng)求。
mounted是組件掛載完畢后，只執(zhí)行一次。
不能在子組件中的mounted中寫，因?yàn)関-show只是控制SpuForm子組件顯示與隱藏，這個(gè)子組件并沒(méi)有卸載，導(dǎo)致mounted只執(zhí)行一次
解決思路：每次點(diǎn)擊修改按鈕時(shí)，讓子組件發(fā)四個(gè)請(qǐng)求
可以給子組件加一個(gè)ref
在點(diǎn)擊修改時(shí)的函數(shù)中可以得到子組件的方法
updateSpu(row){this.scene=1console.log(this.$refs.spu,999999);//可以獲取到子組件spuForm子組件的,那么子組件的數(shù)據(jù)和方法也可以拿到},接著，在子組件中定義一個(gè)初始化方法。那么在父組件中就可以通過(guò)$refs接收到方法
updateSpu(row){this.scene=1this.$refs.spu.initSpuData()},14 用foreach修改服務(wù)器傳過(guò)來(lái)的數(shù)據(jù)
//獲取SPU圖標(biāo)的接口let result3 = await this.$API.spu.reqSpuImageList(this.spuId);console.log(result3, 113);if (result3.code == 200) {//由于照片墻顯示圖片的數(shù)據(jù)需要數(shù)組，數(shù)組里面的元素需要有name和url，so進(jìn)行修改let listArr= result3.data;listArr.forEach(item => {item.name=item.imgNameitem.url=item.imgUrl});this.spuImageList = listArr;}15 vue中的computed
computed必須有返回值return
every返回布爾值
filter返回的值為布爾值為真的值
16 el-select多選框可以穿多個(gè)數(shù)據(jù)，拼接一下即可
<el-form-item label="銷售屬性"><el-select :placeholder="`還有${unSelectSaleAttr.length}未選擇`" v-model="attrId"><el-option :label="item.name" :value="`${item.id}:${item.name}`" v-for="(item,index) in unSelectSaleAttr" :key="item.id"></el-option></el-select><el-button type="primary" icon="el-icon-plus" :disabled="!attrId">添加銷售屬性</el-button></el-form-item>17 項(xiàng)目中添加的數(shù)據(jù)push到收集數(shù)據(jù)的spu中，判斷輸入的是否為空
//添加新的銷售屬性addSaleAttr() {//把收集到的銷售屬性進(jìn)行分割const [baseSaleAttrId, saleAttrName] = this.attrIdAndAttrName.split(":");let newSaleAttr = { baseSaleAttrId, saleAttrName, spuSaleAttrValueList: [] };this.spu.spuSaleAttrList.push(newSaleAttr);this.attrIdAndAttrName = "";},//添加屬性值addSaleAttrValue(row) {console.log(row, 555);// row.inputVisible=true 不是響應(yīng)式的數(shù)據(jù)this.$set(row, "inputVisible", true);this.$set(row, "inputValue", "");},//el-input失焦事件handleInputConfirm(row) {console.log(row,8888);// this.$set(row, "inputVisible", false); 已經(jīng)是響應(yīng)式的了const {baseSaleAttrId,inputValue}=rowif(inputValue.trim()==''){this.$message('屬性值不能為空')return}let newSaleAttrValue={baseSaleAttrId,saleAttrValueName:inputValue}row.spuSaleAttrValueList.push(newSaleAttrValue)row.inputVisible=false},18 some every filter 返回的都是布爾值，需要return
//不能為空if (inputValue.trim() == "") {this.$message("屬性值不能為空");return;}//不能重復(fù)// every和some都可，some更合理一些let result = row.spuSaleAttrValueList.every((item) => {return item.saleAttrValueName != inputValue;});//或者不寫{}，也不用return// let result = row.spuSaleAttrValueList.every((item) => // item.saleAttrValueName != inputValue// );if (!result) {this.$message("屬性值不能重復(fù)，請(qǐng)重新輸入");return; //不執(zhí)行}19 elementui模板請(qǐng)求數(shù)據(jù)
import request from '@/utils/request'//獲取SPU列表數(shù)據(jù)的接口 /admin/product/{page}/{limit} get export const reqSpuList=(page,limit,category3Id)=>request({url:`/admin/product/${page}/${limit}`,method:'get',params:{category3Id}})//獲取SPU信息 /admin/product/getSpuById/{spuId} get export const reqSpu=(spuId)=>request({url:`/admin/product/getSpuById/${spuId}`,method:'get'})//獲取品牌的信息 /admin/product/baseTrademark/getTrademarkList get export const reqTradeMarkList=()=>request({url:'/admin/product/baseTrademark/getTrademarkList',method:'get'})//獲取SPU圖標(biāo)的接口 /admin/product/spuImageList/{spuId} get export const reqSpuImageList=(spuId)=>request({url:`/admin/product/spuImageList/${spuId}`,method:'get'})//獲取平臺(tái)全部銷售屬性（3個(gè)） /admin/product/baseSaleAttrList get 顏色，版本，尺碼 export const reqBaseSaleAttrList=()=>request({url:'/admin/product/baseSaleAttrList',method:'get'})//保存spu數(shù)據(jù) 修改或者添加 ，攜帶的參數(shù)大致相同，唯一的區(qū)別是攜帶的參數(shù)是否帶id /admin/product/saveSpuInfo export const reqAddOrUpdateSpu=(supInfo)=>{//有參數(shù)，修改if(supInfo.id){return request({url:`/admin/product/updateSpuInfo`,method:'post',data:supInfo})}else{//無(wú)參數(shù)，添加return request({url:`/admin/product/saveSpuInfo`,method:'post',data:supInfo})} }20 在main.js中引入接口和組件等總結(jié)
//引入相關(guān)接口API import API from '@/api'; //（組件實(shí)例的原型的原型指向的是Vue.prototype）放在原型上,任意組件都可使用API相關(guān)的接口 Vue.prototype.$API=API;//注冊(cè)全局組件 import CategorySelete from '@/components/CategorySelect' Vue.component(CategorySelete.name,CategorySelete)//element分頁(yè)組件漢化 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入中文版 Vue.use(ElementUI,{zhLocale})//引入HintButton組件 import HintButton from '@/components/HintButton' Vue.component(HintButton.name,HintButton)21 map 映射，可以把已有的數(shù)組數(shù)據(jù)通過(guò)return一個(gè)新數(shù)組
map()方法定義在JavaScript的Array中，它返回一個(gè)新的數(shù)組，數(shù)組中的元素為原始數(shù)組調(diào)用函數(shù)處理后的值。
注意：
map()不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)
map()不會(huì)改變?cè)紨?shù)組
22 取消按鈕，清除數(shù)據(jù)的方法
cancel(){//點(diǎn)擊取消按鈕，清除數(shù)據(jù)// Object.assign:es6中新增的方法，可以合并對(duì)象//組件實(shí)例this._data可以操作data當(dāng)中的響應(yīng)式數(shù)據(jù)//his.$options可以獲取配置對(duì)象，配置對(duì)象的data函數(shù)執(zhí)行，返回的響應(yīng)式數(shù)據(jù)為空的Object.assign(this._data,this.$options.data())console.log(this._data,this.$options.data(),'this.$options');},23 刪除某一頁(yè)數(shù)據(jù)列表時(shí)，當(dāng)也數(shù)據(jù)刪除完畢之后，自動(dòng)返回都上一頁(yè)
<el-table :data="records" style="width: 100%" border><el-table-columnalign="center"type="index"prop="prop"label="序號(hào)"width="80"></el-table-column></el-table>//刪除spuasync deleteSpu(row) {let result = await this.$API.spu.reqDeleteSpu(row.id);console.log(result, "888888");if (result.code == 200) {this.$message({ type: "success", message: "刪除成功" });this.getSpuList(this.records.length>1?this.page:this.page-1);}},24 form表單中海油form
<el-form-item label="平臺(tái)屬性"><el-form :inline="true" ref="form" label-width="80px"><el-form-item label="屏幕尺寸"><el-select placeholder="請(qǐng)選擇" value="value"><el-option label="label" value="value"></el-option><el-option label="label" value="value"></el-option></el-select></el-form-item><el-form-item label="無(wú)線通信"><el-select placeholder="請(qǐng)選擇" value="value"><el-option label="label" value="value"></el-option><el-option label="label" value="value"></el-option></el-select></el-form-item></el-form></el-form-item>25 獲取的數(shù)據(jù)中不含有某個(gè)參數(shù)，這個(gè)參數(shù)需要收集，以后傳給服務(wù)器
收集的過(guò)程中進(jìn)行添加，不能放在收集的圖片列表中，因?yàn)閠able列表時(shí)復(fù)選框，選中后才有
//獲取圖片let result = await this.$API.sku.reqSpuImageList(spu.id);if (result.code == 200) {//整理參數(shù)，result中午isDefault，循環(huán)添加let list = result.data;list.forEach(item => {item.isDefault=0 //0代表設(shè)置默認(rèn) 1代表默認(rèn)});this.spuImageList=list}26 可以在獲取的數(shù)據(jù)中通過(guò)一下形式收集參數(shù)
v-model="attr.attrIdAndValueId"是定義的
<el-form-item label="平臺(tái)屬性"><el-form :inline="true" ref="form" label-width="80px"><el-form-item:label="attr.attrName"v-for="(attr, index) in attrInfoList":key="attr.id"><el-select placeholder="請(qǐng)選擇" v-model="attr.attrIdAndValueId"><el-option:label="attrVal.valueName":value="`${attrVal.id}:${attrVal.id}`"v-for="(attrVal, index) in attr.attrValueList":key="attrVal.id"></el-option></el-select></el-form-item></el-form></el-form-item>27 如何把獲取到的部分?jǐn)?shù)據(jù)添加到收集（上傳服務(wù)器所需要的參數(shù)）的數(shù)據(jù)里面 foreach和reduce都可以
save() {//整理收集數(shù)據(jù)//平臺(tái)屬性//第一種方法// const {skuInfo,attrInfoList}=this// let arr = [];// attrInfoList.forEach((item) => {// 當(dāng)前用戶是否進(jìn)行了選擇// if (item.attrIdAndValueId) {// const [attrId, valueId] = item.attrIdAndValueId.split(":");// let obj = {valueId,attrId };// arr.push(obj);// }// });// skuInfo.skuAttrValueList=arr//第二種方法const {attrInfoList,skuInfo}=thisskuInfo.skuAttrValueList=attrInfoList.reduce((prev, item) => {//prev初始值[]if (item.attrIdAndValueId) {const [attrId, valueId] = item.attrIdAndValueId.split(":");prev.push({attrId, valueId})}return prev}, []);},28 獲取列表數(shù)據(jù)，分頁(yè)加載
// 獲取到的spu數(shù)據(jù)async getSpuList(pager = 1) {this.page = pager;const { page, limit, category3Id } = this;let result = await this.$API.spu.reqSpuList(page, limit, category3Id);if (result.code == 200) {this.records = result.data.records;this.total = result.data.total;}},29 深度選擇器
30 在boot cdn找依賴包
31 安裝echarts
npm install --save echarts32 map()
if (res.result) {res.result.map((item) => {const dataObj = {name: "",value: [],};dataObj.name = item.tag;dataObj.value[0] = item.decisionVal;dataObj.value[1] = item.loadVal;dataObj.value[2] = item.situationVal;dataObj.value[3] = item.factorVal;dataObj.value[4] = item.communicationVal;dataObj.value[5] = item.processVal;dataObj.value[6] = item.skillVal;dataObj.value[7] = item.applyVal;that.radarData.push(dataObj);});}總結(jié)
以上是生活随笔為你收集整理的vue后台管理知识点、难点总结01的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 使用Neo4j+InteractiveG
- 下一篇： 使用vue做一个“淘宝“项目(显示页面)