vue.js从入门到深入再到随心而用————vue电商项目006(商品管理模块)

商品管理模块其实相对来说是比较复杂的一个模块，在商品列表页面的显示页面上，有一个添加商品的功能，添加商品这个功能在实际的开发过程中直接写成了一个新的组件进行路由。所以对于商品管理模块我们分为两部分完成

1.商品列表

1.1商品列表的初始化

在goods文件夹下创建List.vue组件，添加相应的路由规则

打开List.vue组件，添加下列代码

1.2数据展示

关于过滤器如何使用欢迎大家看我的另外一篇介绍：

点击跳转了解过滤器的用法

添加数据表格展示数据以及分页功能的实现,搜索功能的实现
在main.js中添加过滤器：

Vue.filter('dateFormat',function(originVal){
	const dt=new Date(originVal)
	
	const y=dt.getFullYear()
	const m=(dt.getMonth()+1+'').padStart(2,'0')
	
	const d=(dt.getDate()+'').padStart(2,'0')
	
	const hh=(dt.getHours()+'').padStart(2,'0')
	
	const mm=(dt.getMinutes()+'').padStart(2,'0')
	
	const ss=(dt.getSeconds()+'').padStart(2,'0')
	
	return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

    
    
        
            
                
            
        
        
            添加商品
        
    

    
    
        
        
        
        
        
            
        
        
            
        
    

    
    
    


//绑定数据以及添加方法

1.3实现删除商品

//绑定按钮点击事件


//事件函数代码编写
async removeGoods(goods_id) {
  //根据id删除对应的参数或属性
  //弹窗提示用户是否要删除
  const confirmResult = await this.$confirm(
    '请问是否要删除该商品',
    '删除提示',
    {
      confirmButtonText: '确认删除',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).catch(err => err)
  //如果用户点击确认，则confirmResult 为'confirm'
  //如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'
  if (confirmResult != 'confirm') {
    return this.$message.info('已经取消删除')
  }

  //没有取消就是要删除，发送请求完成删除
  const {data:res} = await this.$http.delete(`goods/${goods_id}`)

  if (res.meta.status !== 200) {
    return this.$message.error('删除商品失败')
  }

  this.$message.success('删除商品成功')
  this.getGoodsList()
}

1.4完成后的效果和代码

完整的代码

2.添加商品功能

2.1添加商品功能完成后的效果

有如下的要求：

• 使用el-steps组件，实现进图条的效果
• 必须选择商品分类才能进行下一步
• 点击tab栏切时步骤条同步
• 满足验证所有的验证规则才能添加
• 完成上传图片的功能
• 导入富文本编辑器

2.2创建和布局Add.vue组件

在goods文件夹下创建Add.vue组件并且添加想关的路由规则

布局过程中需要使用Steps组件，在element.js中引入并注册该组件，并在global.css中给组件设置全局样式

import {Steps,Step} from 'element-ui'
Vue.use(Step)
Vue.use(Steps)

//global.css
.el-steps{
    margin:15px 0;
}
.el-step__title{
    font-size: 13px;
}

然后再在Add.vue中进行页面布局

2.3验证是否选择了商品分类

我这里没有做其他的验证，是在店家提交时判断是否满足了验证规则，好一点的做法是只有当把基本信息全部填写完毕才能跳转到下一步

beforeTabLeave(activaName,oldActiveName){
				if(oldActiveName==='0'&&this.addForm.goods_cat.length!==3){
					this.$message.error('请选择商品分类')
					return false
				}
				
			}

2.4展示信息

展示商品参数信息,商品属性信息
在商品参数信息展示中使用的el-checkbox,el-checkbox-group组件，打开element.js引入组件并注册组件

//在用户点击tab栏时触发事件

........

//在参数信息，商品属性面板中添加循环生成结构的代码

  
  
      
      
          
      
  


  
  
      
  


//在data数据中添加保存动态参数和静态属性的数组
export default {
  data() {
    return {
      ......
      //动态参数列表
      manyTableData: [],
      //静态属性列表
      onlyTableData:[]
      }
  },methods: {
    .......
    async tabClicked() {
      //当用户点击切换tab栏时触发
      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字符串转换为数组
        res.data.forEach(item => {
          item.attr_vals =
            item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ')
        })
        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('获取静态属性列表失败')
        }

        this.onlyTableData = res.data
      }
    }
  },
  //添加 计算属性获取三级分类
  computed: {
    cateId() {
      if (this.addForm.goods_cat.length === 3) {
        return this.addForm.goods_cat[2]
      }
      return null
    }
  }
}

2.5完成图片上传

使用upload组件完成图片上传
在element.js中引入upload组件，并注册
因为upload组件进行图片上传的时候并不是使用axios发送请求
所以，我们需要手动为上传图片的请求添加token，即为upload组件添加headers属性

//在页面中添加upload组件，并设置对应的事件和属性

  
  
    点击上传
  

//在el-card卡片视图下面添加对话框用来预览图片


  


//在data中添加数据
data(){
  return {
    ......
    //添加商品的表单数据对象
    addForm: {
      goods_name: '',
      goods_price: 0,
      goods_weight: 0,
      goods_number: 0,
      goods_cat: [],
      //上传图片数组
      pics: []
    },
    //上传图片的url地址
    uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
    //图片上传组件的headers请求头对象
    headerObj: { Authorization: window.sessionStorage.getItem('token') },
    //保存预览图片的url地址
    previewPath: '',
    //控制预览图片对话框的显示和隐藏
    previewVisible:false
  }
},
//在methods中添加事件处理函数
methods:{
  .......
  handlePreview(file) {
    //当用户点击图片进行预览时执行，处理图片预览
    //形参file就是用户预览的那个文件
    this.previewPath = file.response.data.url
    //显示预览图片对话框
    this.previewVisible = true
  },
  handleRemove(file) {
    //当用户点击X号删除时执行
    //形参file就是用户点击删除的文件
    //获取用户点击删除的那个图片的临时路径
    const filePath = file.response.data.tmp_path
    //使用findIndex来查找符合条件的索引
    const index = this.addForm.pics.findIndex(item => item.pic === filePath)
    //移除索引对应的图片
    this.addForm.pics.splice(index, 1)
  },
  handleSuccess(response) {
    //当上传成功时触发执行
    //形参response就是上传成功之后服务器返回的结果
    //将服务器返回的临时路径保存到addForm表单的pics数组中
    this.addForm.pics.push({ pic: response.data.tmp_path })
  }
}

2.6使用富文本插件

想要使用富文本插件vue-quill-editor，就必须先从依赖安装该插件
引入并注册vue-quill-editor，打开main.js，编写如下代码

//导入vue-quill-editor（富文本编辑器）
import VueQuillEditor from 'vue-quill-editor'
//导入vue-quill-editor的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
......
//全局注册组件
Vue.component('tree-table', TreeTable)
//全局注册富文本组件
Vue.use(VueQuillEditor)

使用富文本插件vue-quill-editor

  
  
  
  添加商品


//在数据中添加goods_introduce
//添加商品的表单数据对象
addForm: {
  goods_name: '',
  goods_price: 0,
  goods_weight: 0,
  goods_number: 0,
  goods_cat: [],
  //上传图片数组
  pics: [],
  //商品的详情介绍
  goods_introduce:''
}
//在global.css样式中添加富文本编辑器的最小高度
.ql-editor{
    min-height: 300px;
}
//给添加商品按钮添加间距
.btnAdd{
  margin-top:15px;
}

2.7添加商品

完成添加商品的操作
在添加商品之前，为了避免goods_cat数组转换字符串之后导致级联选择器报错
我们需要打开vue控制条，点击依赖，安装lodash，把addForm进行深拷贝

//打开Add.vue，导入lodash

2.8推送代码

推送goods_list分支到码云
将代码添加到暂存区： git add .
将代码提交到本地仓库： git commit -m “完成商品功能开发”
将代码推送到码云： git push
切换到master主分支： git checkout master
将goods_list分支代码合并到master: git merge goods_list
将master推送到码云： git push

2.9完整的代码

大家如果需要数据库和后端的接口以及有任何问题和建议欢迎大家留言，会持续更新，谢谢支持！！