首页 > 试题

spuid

更新时间:2022-11-16 21:39:22 阅读: 评论:0

大一数学建模论文范文-think过去式


2022年11月16日发(作者:qq女生头像小清新)

vue后台管理知识点、难点总结01

vue后台管理知识点、难点总结

时,png格式的不能上传????(不对)

//上传相关

//图⽚上传成功

handleAvatarSuccess(res,file){

(res,file,222222);

l=;

},

//图⽚上传之前

beforeAvatarUpload(file){

//constisJPG===="image/jpeg";

constisJPG===='image/jpg'||==='image/png'||==='image/PNG'||==='image/JPG';

constisLt2M=/1024/1024<2;

if(!isJPG){

//this.$("上传头像图⽚只能是JPG格式!");

this.$("上传头像图⽚只能是JPG和PNG格式!");

}

if(!isLt2M){

this.$("上传头像图⽚⼤⼩不能超过2MB!");

}

returnisJPG&&isLt2M;

},

2js中的项⽬应⽤什么时候⽤async和await

获取分页数据的时候;获取列表,点击删除数据确定按钮、点击添加和修改的确定按钮的时候;

3添加或者编辑的时候报错:Errorinv-onhandler(Promi/async):“Error:失败”(解决,其他页

的数据正常显⽰)

4注册全局组件和⽅法

//引⼊相关接⼝API

importAPIfrom'@/api';

importCategorySeletefrom'@/components/CategorySelect'

//(组件实例的原型的原型指向的是ype)放在原型上,任意组件都可使⽤API相关的接⼝

ype.$API=API;

//注册全局组件

ent(,CategorySelete)

5深拷贝:

1.//fo=(ify(row))

fo=cloneDeep(row)

第⼆种引⼊elementui中封装的⽅法:cloneDeep

//按需引⼊lodash当中的深拷贝

importcloneDeepfrom'lodash/cloneDeep'

exportdefault{

name:'',

data(){}

.........

methods:{

fn(row){

...

fo=cloneDeep(row)

}

}

}

6v-if和v-el之间不能有任何节点,或者失效

7vue中data的数据都是响应式的,添加到data中的也是

数组的检测可以通过替换或变更(push也是变更)实现

8查看模式转为编辑模式时(span–>input)⽤$nextTick()

//单击span

toEdit(row,index){

//点击span时,切换为input,对于浏览器⽽⾔,重排重绘需要耗时间,不可能⽴即取到input键

//这是⽤$nextTick()==>当节点渲染完毕了,会执⾏⼀次

this.$nextTick(()=>{

this.$refs[index].focus();

})

=true

},

9elementui版本问题

在⽤Popconfirm⽓泡确认框时,绑定confirm事件时没有效果,原因是最新的elementui版本号(2.15.x)和模板版本号(2.13.x)不⼀

致,项⽬低,于是事件绑定改为@onConfirm="deleteAttrValue"即可

type="danger"

size="mini"

icon="el-icon-delete"

slot="reference"

>

deleteAttrValue(){

alert(333);

},

10为什么删除属性值列表不⽤发送请求(没解决)

11数组中filter

1.会返回⼀个新的数组

2.过滤的作⽤,从起始遍历,筛选需要的数据,需要返回的布尔值妖魔真要么假

12elementui中分页pagination的汉化

中添加:

//element分页组件汉化

importzhLocalefrom'element-ui/lib/locale/lang/zh-CN'//引⼊中⽂版

(ElementUI,{zhLocale})

13⽗组件想要调⽤⼦组件的⽅法(⽗组件想要获取⼦组件的属性和⽅法),可⽤$ref$childen

每次点击⽗组件中的按钮(如⽗组件列表中有修改按钮),点击修改按钮后,展⽰⼦组件的页⾯的同时,同时四个请求),怎么解决?

总结::项⽬功能需求是,每⼀次显⽰SpuForm⼦组件时,都会发四个请求。

mounted是组件挂载完毕后,只执⾏⼀次。

不能在⼦组件中的mounted中写,因为v-show只是控制SpuForm⼦组件显⽰与隐藏,这个⼦组件并没有卸载,导致mounted只执⾏⼀次

//⽗组件中封装好的⼦组件

解决思路:每次点击修改按钮时,让⼦组件发四个请求

可以给⼦组件加⼀个ref

在点击修改时的函数中可以得到⼦组件的⽅法

updateSpu(row){

=1

(this.$,999999);//可以获取到⼦组件spuForm⼦组件的,那么⼦组件的数据和⽅法也可以拿到

},

接着,在⼦组件中定义⼀个初始化⽅法。那么在⽗组件中就可以通过$refs接收到⽅法

updateSpu(row){

=1

this.$uData()

},

14⽤foreach修改服务器传过来的数据

//获取SPU图标的接⼝

letresult3=awaitthis.$ImageList();

(result3,113);

if(==200){

//由于照⽚墙显⽰图⽚的数据需要数组,数组⾥⾯的元素需要有name和url,so进⾏修改

letlistArr=;

h(item=>{

=e

=

});

geList=listArr;

}

15vue中的computed

computed必须有返回值return

every返回布尔值

filter返回的值为布尔值为真的值

computed:{

unSelectSaleAttr(){

letresult=(item=>{

((item2)=>{//不知道为啥是every,⽤some也可

`在这⾥插⼊代码⽚`AttrName!==

})

})

returnresult

}

},

16el-lect多选框可以穿多个数据,拼接⼀下即可

添加销售属性

17项⽬中添加的数据push到收集数据的spu中,判断输⼊的是否为空

//添加新的销售属性

addSaleAttr(){

//把收集到的销售属性进⾏分割

const[baSaleAttrId,saleAttrName]=(":");

letnewSaleAttr={baSaleAttrId,saleAttrName,spuSaleAttrValueList:[]};

(newSaleAttr);

AndAttrName="";

},

//添加属性值

addSaleAttrValue(row){

(row,555);

//isible=true不是响应式的数据

this.$t(row,"inputVisible",true);

this.$t(row,"inputValue","");

},

//el-input失焦事件

handleInputConfirm(row){

(row,8888);

//this.$t(row,"inputVisible",fal);已经是响应式的了

const{baSaleAttrId,inputValue}=row

if(()==''){

this.$message('属性值不能为空')

return

}

letnewSaleAttrValue={baSaleAttrId,saleAttrValueName:inputValue}

(newSaleAttrValue)

isible=fal

},

18someeveryfilter返回的都是布尔值,需要return

//不能为空

if(()==""){

this.$message("属性值不能为空");

return;

}

//不能重复

//every和some都可,some更合理⼀些

letresult=((item)=>{

trValueName!=inputValue;

});

//或者不写{},也不⽤return

//letresult=((item)=>

//trValueName!=inputValue

//);

if(!result){

this.$message("属性值不能重复,请重新输⼊");

return;//不执⾏

}

19elementui模板请求数据

importrequestfrom'@/utils/request'

//获取SPU列表数据的接⼝/admin/product/{page}/{limit}get

exportconstreqSpuList=(page,limit,category3Id)=>request({url:`/admin/product/${page}/${limit}`,method:'get',params:{category3Id}})

//获取SPU信息/admin/product/getSpuById/{spuId}get

exportconstreqSpu=(spuId)=>request({url:`/admin/product/getSpuById/${spuId}`,method:'get'})

//获取品牌的信息/admin/product/baTrademark/getTrademarkListget

exportconstreqTradeMarkList=()=>request({url:'/admin/product/baTrademark/getTrademarkList',method:'get'})

//获取SPU图标的接⼝/admin/product/spuImageList/{spuId}get

exportconstreqSpuImageList=(spuId)=>request({url:`/admin/product/spuImageList/${spuId}`,method:'get'})

//获取平台全部销售属性(3个)/admin/product/baSaleAttrListget颜⾊,版本,尺码

exportconstreqBaSaleAttrList=()=>request({url:'/admin/product/baSaleAttrList',method:'get'})

//保存spu数据修改或者添加,携带的参数⼤致相同,唯⼀的区别是携带的参数是否带id/admin/product/saveSpuInfo

exportconstreqAddOrUpdateSpu=(supInfo)=>{

//有参数,修改

if(){

returnrequest({url:`/admin/product/updateSpuInfo`,method:'post',data:supInfo})

}el{

//⽆参数,添加

returnrequest({url:`/admin/product/saveSpuInfo`,method:'post',data:supInfo})

}

}

20在中引⼊接⼝和组件等总结

//引⼊相关接⼝API

importAPIfrom'@/api';

//(组件实例的原型的原型指向的是ype)放在原型上,任意组件都可使⽤API相关的接⼝

ype.$API=API;

//注册全局组件

importCategorySeletefrom'@/components/CategorySelect'

ent(,CategorySelete)

//element分页组件汉化

importzhLocalefrom'element-ui/lib/locale/lang/zh-CN'//引⼊中⽂版

(ElementUI,{zhLocale})

//引⼊HintButton组件

importHintButtonfrom'@/components/HintButton'

ent(,HintButton)

21map映射,可以把已有的数组数据通过return⼀个新数组

map()⽅法定义在JavaScript的Array中,它返回⼀个新的数组,数组中的元素为原始数组调⽤函数处理后的值。

注意:

map()不会对空数组进⾏检测

map()不会改变原始数组

22取消按钮,清除数据的⽅法

cancel(){

//点击取消按钮,清除数据

//:es6中新增的⽅法,可以合并对象

//组件实例this._data可以操作data当中的响应式数据

//his.$options可以获取配置对象,配置对象的data函数执⾏,返回的响应式数据为空的

(this._data,this.$())

(this._data,this.$(),'this.$options');

},

23删除某⼀页数据列表时,当也数据删除完毕之后,⾃动返回都上⼀页

align="center"

type="index"

prop="prop"

label="序号"

width="80"

>

//删除spu

asyncdeleteSpu(row){

letresult=awaitthis.$eteSpu();

(result,"888888");

if(==200){

this.$message({type:"success",message:"删除成功"});

List(>1?:-1);

}

},

24form表单中海油form

25获取的数据中不含有某个参数,这个参数需要收集,以后传给服务器

收集的过程中进⾏添加,不能放在收集的图⽚列表中,因为table列表时复选框,选中后才有

//获取图⽚

letresult=awaitthis.$ImageList();

if(==200){

//整理参数,result中午isDefault,循环添加

letlist=;

h(item=>{

ult=0//0代表设置默认1代表默认

});

geList=list

}

26可以在获取的数据中通过⼀下形式收集参数

v-model="AndValueId"是定义的

:label="me"

v-for="(attr,index)inattrInfoList"

:key=""

>

:label="ame"

:value="`${}:${}`"

v-for="(attrVal,index)lueList"

:key=""

>

27如何把获取到的部分数据添加到收集(上传服务器所需要的参数)的数据⾥⾯foreach和reduce都

可以

save(){

//整理收集数据

//平台属性

//第⼀种⽅法

//const{skuInfo,attrInfoList}=this

//letarr=[];

//h((item)=>{

//当前⽤户是否进⾏了选择

//if(AndValueId){

//const[attrId,valueId]=(":");

//letobj={valueId,attrId};

//(obj);

//}

//});

//rValueList=arr

//第⼆种⽅法

const{attrInfoList,skuInfo}=this

rValueList=((prev,item)=>{

//prev初始值[]

if(AndValueId){

const[attrId,valueId]=(":");

({attrId,valueId})

}

returnprev

},[]);

},

28获取列表数据,分页加载

//获取到的spu数据

asyncgetSpuList(pager=1){

=pager;

const{page,limit,category3Id}=this;

letresult=awaitthis.$List(page,limit,category3Id);

if(==200){

s=s;

=;

}

},

29深度选择器

30在bootcdn找依赖包

31安装echarts

npminstall--saveecharts

32map()

if(){

((item)=>{

constdataObj={

name:"",

value:[],

};

=;

[0]=onVal;

[1]=l;

[2]=ionVal;

[3]=Val;

[4]=icationVal;

[5]=sVal;

[6]=al;

[7]=al;

(dataObj);

});

}

本文发布于:2022-11-16 21:39:22,感谢您对本站的认可!

本文链接:http://www.wtabcd.cn/fanwen/fan/88/33839.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:spuid
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图