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