今天完成的事
1，解决昨天使用axios发起put请求失败的问题，重新启动项目即可；
2，为列表展示页添加编辑，删除，修改产品状态功能；
修改产品状态：
//产品状态改变
changeStatus(id, status) {
if (status == 1) {
alert("你确定将产品上线吗？");
status = 2;
}else {
alert("你确定将产品下线吗？");
status = 1;
}
this.$axios.put(`api/a/u/article/status`, this.$qs.stringify({
id: id,
status: status
})).then(res => {
if (res.data.code == 0) {
alert("操作成功!");
this.getDataFormBackend();
}
})
},
删除列表项：
//删除列表项
deleteArticle(id) {
alert("确定删除该列表项吗?");
this.$axios.delete(`api/a/u/article/${id}`)
.then(res => {
if (res.data.code == 0) {
alert("删除成功");
this.getDataFormBackend();
}
})
},
编辑特定列表项：
//跳转编辑列表项
toEditArticle(id) {
this.$router.push({
path: '/article-increase',
query: {
id: id
}
})
},
通过路由传递列表项id到编辑页面，随后再编辑页面组件周期created时发起请求获取对应数据：
created: function() {
let id = this.$route.query.id
if (id) {
this.id = id
this.$axios.get(`api/a/article/${id}`)
.then(res => {
if (res.data.code ==0) {
let returnData = res.data.data.article
this.ruleForm.title = returnData.title
this.ruleForm.type = returnData.type
this.img = returnData.img
this.ruleForm.content = returnData.content
this.ruleForm.url = returnData.url
}
})
}else {
console.log(id);
}
},
3，更换昨天制作的新增页面，引入ElementUI中表单组件，并可以进行简单的表单验证；
4，为列表新增/编辑页面添加本地文件图片读取预览，以及上传图片到后台：
本地文件图片读取预览：
//选择需要上传的文件
handleFiles() {
var that = this
this.file = this.$refs.chooseFile.files[0];
this.imgName = this.file.name;
this.canUpload = false;
let reader = new FileReader();
this.imgSize = this.returnFileSize(this.file.size);
if (this.file) {
reader.readAsDataURL(this.file);
reader.onload = function() {
// console.log(e);
// console.log(this.result);
that.img = this.result
}
}
},
上传图片到后台：（同时读取上传文件时的进度条即时展示到页面中）
upLoadImg() {
var form = new FormData()
form.append('file', this.file)
let config = {
onUploadProgress: progressEvent => {
var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
this.upProgress = complete
}
}
this.$axios.post('api/a/u/img/task', form, config)
.then(res => {
if (res.data.code == 0) {
console.log(res);
this.imgSrc = res.data.data.url
}
})
}
明天计划的事
1，最后页面编辑/新增后的数据上传；
2，检查项目，保证页面功能完整；
遇到的问题
已解决
收获
1，vue页面跳转传参：
https://blog.csdn.net/qq_44388958/article/details/93925720
2，vue实现文件上传进度读取展示：
https://www.jb51.net/article/130995.htm
axios使用指南中详细介绍
http://www.axios-js.com/zh-cn/docs/index.html#%E8%AF%B7%E6%B1%82%E9%85%8D%E7%BD%AE
3，本地文件选取并预览读取信息：
https://www.cnblogs.com/FHC1994/p/12104170.html
4，将图片读成 Base64 编码的 URL 显示到网页中实现图片的预览
https://blog.csdn.net/qq_22188085/article/details/90484413
5，监听vue中对象的特定属性
https://www.cnblogs.com/jingxuan-li/p/11817329.html
6，vue的ref属性，以及$ref
https://blog.csdn.net/weixin_41646716/article/details/80455506
返回列表
评论