HAPPY-MMALL后台项目总结

首先是创建vue-cli2项目

通过vue init webpack '项目名称' 命令创建

之后通过配置项目基本架构就创建完成了

通过 cd 项目名称进入项目的文件夹，然后通过cnpm install下载依赖

依赖下载完成后，通过npm run dev启动项目，启动成功后会出现​​​​​​http://localhost:8080

这就代表项目启动成功，接下来就是下载插件配置的阶段。

后台项目用到的插件有 axios、element-ui等等。

cnpm i axios --save-dev
cnpm i element-ui --save-dev

为了方便以后接口更换，我们需要对axios进行二次封装

首先在src目录下新建一个axios文件夹，然后再里面创建http.js和axios-api.js文件（起什么名字看个人习惯）

 然后再http.js里面引入axios，创建axios的实例，还可以配置请求拦截器和响应拦截器，然后配置请求成功和失败的方法，最后抛出

 然后再axios-api.js文件里引入axios实例、配置接口地址、请求方法、传参方式，最后通过export抛出，用的时候在组件中直接引入就可以使用了

 接下来还有element-ui的按需引入，由于element-ui的很多功能我们用不到，如果全局引入的话，就会造成资源浪费，所以为了节省资源，需要做按需引入组件和样式

首先在src目录下创建element文件夹，创建index.js文件，在里面引入element-ui样式和vue，然后通过

import {Button} from ‘elememt-ui’按需引入，之后通过vue进行实例化

 然后再main.js中引入就可以使用了

 由于项目功能较多，我在这列出几个难点讲解

首先是商品添加、商品编辑的上传图片

这个用到的是element-ui的上传图片插件

    <el-upload
  class="upload-demo"
  action="/api/product/upload.do"   //上传图片的接口
  name="upload_file"   //上传的图片名称
  
  :on-success="success"   //上传图片成功触发的方法
  list-type="picture"
 >
  <el-button size="small" type="primary">点击上传</el-button>
  
</el-upload>

当我们选好图片后点击上传图片，等待上传成功后就会触发on-success方法，这个也是element自带的方法，触发后我们通过  response  参数来接收图片的地址。

  success(response) {
      console.log(response);//response  这个参数是方法自带的，不用传  代表的是添加的图片信息，是个对象
      this.mainImage = response.data.uri;  //这个是获取那个图片的路径
      this.subImages = response.data.uri;  //这个是获取那个图片的路径
    },

获取到之后我们吧图片路径上传到接口就可以实现上传图片的功能了

 obj = {
         categoryId: this.id1,   
          parentCategoryId: this.id,
          name: this.name,
          subtitle: this.subtitle,
          mainImage: this.mainImage,  //图片路径
          subImages: this.subImages,   //图片路径
          detail: this.detail,
          price: this.price,
          stock: this.stock,
          status: this.status
        }
        console.log(obj);
        var { date: res } = await add(obj);

之后还有难点就是一级分类和二级分类

这个渲染分类的话是用两个值得： parentcategoryid 、 categoryld ，parentcategoryld 这个 id 是用来筛选一级分类的 categoryld 这个是二级分类思路： 
1 ．首先请求分类的接口，传一个默认的值0过去，这样能获取到所有的一级分类这个数据 

2 ．然后通过 filter 来过滤所有的一级分类数据，用每条数据的 id 和 Parentcategoryld 进行对比得到当前的选中的一级分类

3 ．之后在通过请求分类接口这个传值是传 ParentCategoryld 这个，获取当前一级数据下的所有二级分类

4 ．然后通过 filter 过滤二级数据，用每条数据的 id 和 categoryld 进行对比获取当前的选中的二级分类

但有时候会出现 parentcategoryld 这个字段为0的情况，如果这个字段为0，就代表目前只有一级分类，解决方案： 
1 ．首先请求分类的接口，传一个默认的值0过去，这样能获取到所有的一级分类这个数据很多出现这种情况，然后通过 filter 来过滤所有的一级分类数据，用每条数据的 id 和。 ategoryld 进行对比得到当前的选中的一级分类 如果 parentcategoryld 为0，就用 categoryld 来过滤一级分类id1是parentcategoryid， id 是 categoryld。

  var id=this.obj.parentCategoryId
        if(id==0){
          id=this.obj.categoryId
        }
       
             this.aa=  this.options.filter(item=>{
            return item.id==id
        })
        console.log(this.aa);
        if(this.aa.length==0){
             this.value="请选择一级分类"
        }else{
            this.value=this.aa[0].name
        }
var obj1={categoryId:this.obj.parentCategoryId}
if(id==this.obj.categoryId){
  return 
}
        var {data:res1} =await fenlei(obj1)
        console.log(res1);
        this.options1=res1.data
              this.a=  this.options1.filter(item=>{
            return item.id==this.obj.categoryId
        })

 以上就是我对这个的项目的总结

​​​​​​​