本文共 8130 字，大约阅读时间需要 27 分钟。

1、引言

寒假是用来反超的！一起来学习Vue把，这篇博客是关于商品列表，请多指教~

2、商品列表篇

2.1 通过路由加载商品列表组件

2.2 渲染商品列表数据

2.3 自定义格式化时间的全局过滤器

2.4 实现商品列表的分页功能

2.5 实现搜索与清空的功能

               
                    
                     
                      
                 
                
                    
     
      添加商品
                 
            
   

2.6 根据id删除商品数据

// 根据id删除对应的商品        async removeById(id){
               const confirmResult = await this.$confirm('此操作将永久删除该商品，是否继续？','提示',{
                   confirmButtonText: '确定',                cancelButtonText: '取消',                type: 'warning'            }).catch(err => err)            // 用户取消了删除操作            if(confirmResult !== 'confirm') return this.$message.info('已取消删除！')             // 删除的业务逻辑            const {
   data:res} = await this.$http.delete('goods/'+id)            if(res.meta.status !== 200) return this.$message.error('删除商品失败！')            // 删除成功就关闭对话框并重新刷新列表数据            this.$message.success('删除商品成功!')            this.getGoodsList()        }

2.7 通过编程式导航跳转到商品添加页面

2.8 渲染添加页面的基本结构

2.9 实现步骤条和tab栏的数据联动效果

2.10 绘制基本信息面板的UI结构

           
           
            
                
                     
                          
                       
                      
                          
                       
                      
                          
                       
                      
                          
                       
                  
                 
     
      商品参数            
                 
     
      商品属性            
                 
     
      商品图片            
                 
     
      商品内容            
             
            
   

2.11 绘制商品分类的级联选择器

2.12 阻止页签切换

当我们基本信息没有填完之前，是不能进行页签切换的，所以需要采用以下的方式进行阻止：

// 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。        beforeTabLeave(activeName,oldActiveName){
               if(oldActiveName == '0' && this.addForm.goods_cat.length != 3){
                   this.$message.error('请先选择商品分类!')                return false            }        }

2.13 绘制商品参数面板中的复选框组

// 获取tag标签里面的数据        async tabClicked(){
               //证明访问的是动态参数面板            if(this.activeIndex == '1'){
                   const {
   data : res} = await this.$http.get('categories/'+this.cateId+'/attributes', {
   params:{
   sel: 'many'}})                if(res.meta.status !== 200) return this.$message.error('获取父级分类列表失败')                   // 将attr_vals进行分割 获得标签                // ps:后面改进用三元表达式 解决attr_vals为空的情况                res.data.forEach(item => {
                       item.attr_vals = item.attr_vals ?  (item.attr_vals || '').split(' ') : []                })                console.log(res.data)                this.manyTableData = res.data            }        }

2.14 渲染商品属性面板的UI结构

// 获取tag标签里面的数据        async tabClicked(){
               //证明访问的是动态参数面板            if(this.activeIndex == '1'){
                   const {
   data : res} = await this.$http.get('categories/'+this.cateId+'/attributes', {
   params:{
   sel: 'many'}})                if(res.meta.status !== 200) return this.$message.error('获取动态参数列表失败')                   // 将attr_vals进行分割 获得标签                // ps:后面改进用三元表达式 解决attr_vals为空的情况                res.data.forEach(item => {
                       item.attr_vals = item.attr_vals ?  (item.attr_vals || '').split(' ') : []                })                //console.log(res.data)                this.manyTableData = res.data            }else if(this.activeIndex == '2'){
                   /* 获取静态属性列表 */                const {
   data : res} = await this.$http.get('categories/'+this.cateId+'/attributes', {
   params:{
   sel: 'only'}})                if(res.meta.status !== 200) return this.$message.error('获取静态属性列表失败')                   // 将attr_vals进行分割 获得标签                // ps:后面改进用三元表达式 解决attr_vals为空的情况                res.data.forEach(item => {
                       item.attr_vals = item.attr_vals ?  (item.attr_vals || '').split(' ') : []                })                console.log(res.data)                this.onlyTableData = res.data            }        }

2.15 初步使用upload上传组件，实现图片预览效果

由于Element-UI中的upload组件并没有调用axios，于是需要主动指定请求头中Authorization字段。

                   
                    
                    
     
      点击上传
                     
                
   

// 处理图片预览事件        handlePreview(file){
               this.previewPath = file.response.data.url            this.previewVisible = true        },        //处理移除图片的操作         handleRemove(file){
               // 1、获取想要删除图片的临时路径            const filePath = file.response.data.tmp_path            // 2、从pics数组中，找到这个图片对应的索引值            const idx = this.addForm.pics.findIndex(x => x.pic == filePath)            // 3、调用数组的splice方法，把图片信息对象，从pic数组中删除            this.addForm.pics.splice(idx,1)            console.log(this.addForm)        },        // 监听图片上传成功的事件        handleSuccess(response){
               // console.log(response)            // 1、拼接得到一个图片信息对象            const picInfo = {
   pic: response.data.tmp_path}            // 2、将图片信息对象 push到pics数组中            this.addForm.pics.push(picInfo)            // console.log(this.addForm.pics)        }

2.16 安装并配置vue-quill-editor

2.17 实现表单数据的预验证

// 点击添加商品按钮触发的事件        addGoods(){
               // console.log(this.addForm)            this.$refs.addFormRef.validate(valid =>{
                   if(!valid) return this.$message.error('请填写必要的表单项！')                // 执行添加的业务逻辑            })        }

2.18 完成商品添加操作

3、结束语

至此，我们的功能就完成了！

Vue全家桶开发电商管理系统码云地址，欢迎一起来学习~

https://gitee.com/Chocolate666/vue_shop

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

学如逆水行舟，不进则退

转载地址：https://chocolate.blog.csdn.net/article/details/104063899 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！