本月度目前项目总结 Vue+elementui+SpringBoot+mybatisplus+OSS+JWT等

简单介绍：

大家好，首先来个简单的自我介绍，我是一个默默无闻的小程序员，每天奔跑在写代码和找bug的路上，每天为了工作到很晚才睡，不过也都习惯了，有人常说想象中的程序员是这样的

其实，现实程序员的是

当然了，我平时也是这种状态，有人说：喝点酒吸点烟一个bug找一天，马上也月末了，提前总结下项目，方便回忆，当然了博客也格式化不了，只能这样了，家人们凑活看吧

项目模块和功能介绍：

首先先简单说一下，这个月的项目是由和pms和ums两个模块组成商品后台管理系统。
当然了pms是商品模块，ums为用户模块，这套商品后台管理系统是使用框架和插件为Vue+elementui+SpringBoot+mybatisplus+OSS+JWT等等

首先介绍pms模块：

PMS，它又分为品牌管理，商品类型，商品分类，商品列表和添加商品。

一、 品牌管理
对于品牌管理来说，其实就是一套增删改查，不同点在于哪里呢？它有一个品牌的logo，上传图片使用的是elemrentUI上传oss服务器，它唯一的难点就是在上传的时候上传一半，但是用户又不想上穿了，点击取消删除已上传的图片，在修改的时候删除老图片等等。为什么要删除图片那，因为用户点击新增上传图片上传完之后点击取消，那数据库没有它上传的图片，但是oss服务器却多了一张图片对吧，那么如果用户一直点击上传呢，是不是页面上的图片是上传oss服务器之后返回的成功函数的值才显示页面的，如果用户让用户一直点，点100下是不是上传100张呢？点击1000下，而且他还不点击新增点击确认，那么数据库没有呢，是不是服务器就会多很多垃圾数据，等用户点取消的时候，服务器的这些数据是不是还是存在？是不是属于垃圾数据是不是需要将它删除呢？
答案当然是必须删除，为啥？因为oss是按照流量收费的，就是使用自己搭建的图片服务器那么它是不是也需要空间那，垃圾数据能少则少
二、新增修改弹框点击取消删除图片的思路：

本项目做的时候是前后端分离项目
做功能之前首先要考虑几个问题：
1.用户点击以下图片中的1时，X号时把上传的图片删除
2.用户点击以下图片中的2时，点击空白处时把上传的图片删除
3.用户点击以下图片中的3时，点击提交时新增成功
3.用户点击以下图片中的4时，点击取消时把上传的图片删除

步骤1 取消时删除垃圾图片 删除垃圾图片就是上传Oss但是没上传数据库的图片：
（1）首先需要一个全局close事件为@close="" 无论点击任何地方都必须close触发事件 close Dialog 关闭的回调，然后将这个事件先定义出来
（2）然后在data里面定义一个变量，它初始值为null，它是用来判断当前按钮，当前用户点击按钮是什么按钮，然后在用户点击新增的时候方法里面给它赋值为1，在修改的时候点击编辑时，给它赋值2，再弹框点击取消或者点击X的时候点击关闭的时候，给它赋值3。
（3）在刚才定义的全局的方法里面判断，如果当前的变量等于一，那么它走的就是新增的方法，否则在判断这个变量等于二，那么他走的就是修改的方法，否则他走任何方法都是为取消的方法。
为什么要定义不是麻烦吗？因为@close事件，在这个模态框里面，你无论点击任何地方他都会取消，无论点击空白的地方还是差还是取消，甚至你点击新增他都会变成取消，那么就有问题了，本来我是准备新增的，但是我点了新增还是把我照片给我删除了，这对用户不是很友好。
（4）那么接下来就是传值，接值和往后台发送请求进行删除的方法了。因为在上传oss之后，那么图片上传oss之后，上传之后会有一个成功回调函数，在成功回调函数里是不是能获取到这个图片的地址，然后将这个地址传到到自己想要的接参的页面，然后在页面进行接指，然后写在变量为3的方法里写删除的方法发送后台进行删除图片，当然是传参的时候使用数组进行，因为在用户点击上传图片的时候，不一定上传了多少张，所以进行数组进行循环删除,删除成功后需要刷新，因为图片是存在在缓存中，不刷新第二次就不能再删除了，值还是之前的
取消删除具体代码请参照此文章
步骤2 修改时删除老图片同时修改图片上传OSS之后不点击确认也一样删除上传OSS的图片 删除垃圾图片就是上传Oss但是没上传数据库的图片：
(1)修改的时候先定义一个变量，这个变量在实体类进行定义一下加个字段，这个只是用于查询使用，数据库没有这个字段，在页面这个data方法中的对象中加入这个字段，对象里面定义这么一个变量，在回显的时候往这个变量里去塞一个图片值，然后带到后台进行判断。在后台进行判断，先判断这个对象ID不为空，然后再进行判断，新图片和老图片值都不为空，并且新图片跟老图片它并不相等，如果他们都不相等的话，删除老图片。在修改的时候，如果点击上传的新图片，但是上传之后就不想传了，点击取消，那么就会用到了之前的模态框之前定的变量，再点击修改的时候点取消的时候，模态框的值就等于二，这时候就会进入模态框进行删除，判断之前的图片跟现在的图片不相等，如果不相等，删除上传删除图片。当然删除和批量删除就比较简单了在这就不多说了，有兴趣的可以看看代码
删除和批量删除

二、商品类型和商品分类模块
对于商品类型模块和商品分类模块来说，其实就是一套增删改查，重点时查看类型数据有那些属性和参数，如图：

在商品类型和商品分类两个模块中，
（1）查询时： 它都有一个level的一个字段，它是用来区分等级，在这个商品类型中，他有商品列表和商品参数这两个列表，在这个商品分类中，它分为一级，二级节点，对于这两个字两个类来说，它其实它都是一样的，它主要的查询的时候是根据当前的ID和一个分页每页显示的条数进行查询的，因为这两个列表下面它也是一个一张列表。在后台查询的时候，还是根据这个当前分类的数据库ID，然后等于当前ID的，否则，让再去查让level等于零的。

        if(vo.getId() != null){
            queryWrapper.eq("parent_id",vo.getId());
        }else {
            //页面显示为一级的数据
            queryWrapper.eq("level",0);
        }

（2）新增或者修改： 在新增或者修改的时候，因为前台没有level这个字段,新增的时候，所以新增和修改只能在后台进行，一级还是二级，在后台判断，如果他这个分类ID他不等于空，而且它不等于零的话给他塞一个亿，，这是啥意思呢,默认给他塞个1级节点，否则给他塞一个零 ， 零为1级节点，新增默认为1级节点。

（3）删除：在删除的时候删除1级节点数据节点的时候，他下面的二级子节点呢，也要一并删除，在后台进行判断，如果他的分类ID等于零的话，那么根据条件查询他的分类ID等于当前数据ID的所有数据，然后进行一并进行删除。

三、商品列表和添加商品是属于一个模块
1.商品的列表其实也是一个增删改查，但是对于这个增删改查来说，它里面有个添加商品，对于添加商品模块来说，它是使用步骤调的方式去做的，它里面包括了很多东西。新增使用的是步骤条，它分为添加商品信息、填写商品促销、填写商品属性啊等等几个页面。
2.添加商品:添加商品信息中商品的分类使用到了递归，首先在后台实现内通过super.list()得到一个集合，根据集合去进行循环操作，在循环里创建一个map集合，然后通过查询判断分类的Id等于pid的。然后我往map里放一级的值，再判断level=0的,让他自己调自己循环放值,当它没有子节点是循环结束。最后判断子节点不能为空，返回集合
商品促销部分牵涉到了会员价格表，阶梯价格表和满减价格表，因为都在不同的表中，所以请求在前台使用data发送数据，在后台使用@RequestBody 注解接收数据，同时定义bo包，在bo包中定义会员价格表，阶梯价格表和满减价格表的数据集合
3. 填写商品属性 新增模块最难的地方就是SKU属性模块，当然了SKU和SPU区别在于，简单说SPU相当于一个类，SKU相当于一个对象，如图：这是本项目的sku部分

（1）效果： 点击商品属性的下拉框选中任何一项选中完之后，它会触发商品规格，在商品规格中弹出一个表，在这个商品规格中选中自己组合的内容，颜色呢，可以添加，添加完之后选择这个颜色，选择容量点击刷新按钮，在下方会出现一个表格，在表格会出现自己需要的数据，比如说价格，输入1个价格，点击同步价格，价格里面所有的价格都会统一，库存也可以一键同步，所有的数据就可以直接进行同步了。SKU编号是后端生成的，前端不能输入或者修改，商品参数也是点击下拉框之后查询出来的

（2）思路新增：在商品属性下拉框中绑定一个事件，点击下拉框触发事件在事件中定义方法，分别查type等于0和type等于1并且要定义val接参,两个值的方法。
注：type是在实体类属性的类型；0->规格；1->参数
在方法中进行接参数，根据分页开始下标，每页显示条数，type和ID进去后台查询属性的数据，然后查询后的数据进行接收，付给变量值，以便于循环放值。
然后开始判断，如果这个type等于等于零的话，那么查询的是商品属性，开始循环这个变量，在一个循环里面呢，定义两个变变量数组，一个是values一个是options他们分别是。商品规格中的容量数组和颜色数组，然后判断是新增还是修改，如果是修改的话，还需要再判断他这个颜色，是手动添加的，还是从数据库中查出来的，然后把循环出的数据id放到options中 需要获取到当前属性的id 去判断，需要将这个方法定义出来将数据进行循环分割再塞到options中， 最后给商品规格属性数组push值，让它循环数据展示，
接下来判断type不等于0，那么查询的是商品参数，也是开始循环这个变量，在一个循环里面呢，定义values = “”，把循环出的数据id放到values 中 需要获取到当前属性的id 去判断，最后给商品参数属性数组push值，让它循环数据展示，
在商品规格中输入一个颜色，点击新增，它会触发一个方法，在方法里判断属性值不能为空，属性值不能重复，并且是手动加的，加完之后再给他进行清空数据。
再点击刷新按钮的同时，先获取将自己选中的值，然后循环放入到表格中进行展示，在刷新按钮的方法里进行给数据进行循环赋值。同步价格和同步库存都是在原有基础上判断他不能为空，并且它的长度大于零，然后循环给他赋值。
做好就是合并属性值把所有的SKU相关的数据进行合并，循环SKU的所有的数据，最后将这些数据循环放到到集合中，包括他的ID和他的数据，数据转字符串一下，包括他选购的商品参数的下拉框也是，进入循环放到到集合中，包括ID和数据发送到后台进行新增到数据库中

（3）思路回显：
商品的分类下拉框是在computed 中定义了一个方法，然后在watch中将它定义出来，接参id，然后再判断他是如果他不是修改的话让他进行返回，他如果是修改的话判断这个值newValue == undefined || newValue == null || newValue == 0 让他进行返回，最后将一级节点和二级节点的id放到数组中,然后进行取值展示
SKU回显：在computed 中定义了一个方法，然后在watch中将它定义出来，接参id，定义一个方法根据属性类型id进行获取数据，这个方法就是点击下拉框触发的那个方法，在这个方法里type==0中，之前判断的如果它等于修改的时候，叫他再循环，this.handleProductValus(attr[i].name)循环出的name赋给values。将定义方法开始回显商品规格
这个方法中定义一个values等于一个空数组，然后将商品的数据集合进行定义出来，定义一个变量，然后开始判断这个变量集合不能为空，不能为空字符串，然后开始循环这个数组，skuList[i].spData;得到的是json串。然后通过JSON.parse(spData);将json串转换成数组字符串，然后再循环得到的这个数组，如果这个取出来的name值等于这个数组中的Key，那么直接将这个 数组的value值values.push(spDataArr[j].value); 放到values数组中，break中断跳出，最后返回values；

回显商品参数也是方法type==1中，之前判断的如果它等于修改的时候，叫他再循环， values=this.getProductParams(attr[i].id);循环出的id赋给values。将定义方法开始回显商品参数
将回显参数的方法定义出来，然后进行接餐，然后定义values=“”，然后将获得的所有的数据集合定义出来，然后循环这个集合，如果这个接餐ID等于他这个集合中的ID，那么，就将这个数组的所有的value值赋给values，break中断跳出,最后返回values。

下面介绍ums模块

用户管理系统在设计过程中涉及到了五张表主表。这五张表分别是用户表、角色表、权限表、用户角色关系表、角色权限关系表，其中用户表和角色表是多对多的关系，角色表和权限表也是多对多的关系。

在后台管理系统中，我将权限管理设计成三个模块，分别是用户管理、角色管理、权限管理。

接下来我首先说一下用户管理模块，用户管理就是对用户的一个增删改查操作，在用户列表页加载后台数据，在新增和修改用户时我使用了elementui文件插件来上传用户头像，并且可以给该用户分配角色。
再者我说一下角色管理模块，角色管理就是角色的一个增删改查，在角色列表页展示角色数据。在并且可以给该角色分配权限。在删除角色时，我们会判断当前角色是否被用户所关联，如果被关联则提示用户无法删除。
最后就是权限管理模块了，权限管理也就是对权限的一个增删改查，在权限列表页展示权限数据，删除时我们会把选中节点下所有的子节点也一并删除。

====== 接下来针对用户管理、角色管理和权限管理方面的一些细节进作进一步的解释。======
一、用户管理 （包括登录,token,验证,token过期等等）
当然了，在上面用户管理模块儿，我提到了增删改查，其实也非常简单，包括使用elementui上传头像，我之前上面也有做过解释，接下来我简单说一说这个分配角色，他是如何实现的。
在这个用户管理模块操作里面，首先写一个分配角色的一个按钮， 当然啦，分配角色可以使用弹框做的，首先使用，先将这个弹框定义出来，然后将这些中的变量定义出来。点击按钮触发函数。


这个函数里呢，需要继续查询角色的所有的信息，去后台进行查询，在后台查询的时候，直接查询所有，不需要分 页。查询完之后将所得的直塞到allRoleList集合里面循环展示。
下面查询出来了，但是他也需要从数据库查完当前用户有哪些角色，这只是目前只是展示出来数据库目前有哪些角色。回显用户所拥有的的角色
那么回选角色还得查数据库哪张表呢？还得查用户角色关联表，获取到当前用户的角色ID，然后放到allocRoleIds进行回显。在查询回显的时候，需要在那分配角色的地方传ID，从数据里面获取ID，进下面进行接收ID给你ID去进行查询。 this.allocAdminId=adminId; 同时将allocAdminId附上id;


接下来就是进行修改，在这个分配角色弹框里有一个确认按钮，点击自己想要选中的角色，然后触发事件，在事件里进行定义时赋值，然后进行发送后台进行修改。

使用data发数据，在后台进行接收

在实现类进行操作，在时间内删除数据库原有的数据，根据他的字段名删除完之后再新增，自己选中那些数据，就可以完成对角色的一些修改新增。

分配权限也是同分配角色一样就不具体说了

源码地址

=未完待续===