10天完成民猫电商毕设——商品模块实现2（4th day）

1.知识充电

Mybatis-plus在Mapper层和Service层都提供了一些通用CRUD
Service层采用 get 查询单行 remove 删除 list 查询集合 page 分页 前缀命名方式区分 Mapper 层，避免混淆
两者区别：除查询方法外，其他方法的返回值不同，Service CRUD 返回的boolean的值，Mapper CRUD 返回的是int值(返回值大于0表示操作成功)
参数T表示任意实体对象，参数 Wrapper 为 条件构造器对象，参数 Serializable 为任意类型主键

1.1 Service CRUD 接口使用(推荐)

1.在自身的xxxServiceImpl 中直接使用Service CRUD方法，不需要对象装配和调用，非常方便！(强烈推荐)
2.在其他的yyyServiceImpl 中中首先装配一下需要使用的实现类，再进行操作
3.在controller中也需要先装配一下需要使用的实现类，再进行操作

//装配需要使用的实现类
@Resource
private UserService service;

1.2 Mapper CRUD接口使用

在xxxServiceImpl 中使用Mapper CRUD 方法：直接使用已经自动注入的baseMapper对象来调用CRUD方法

1.3 Wrapper 条件构造器

作用：构造SQL语句的where条件，条件构造器作为CRUD方法的参数，最终拼接成有条件查询或更新的SQL语句

1.4 @RequestMapping、@GetMapping和@PostMapping

作用：将 URL 映射到整个类或特定的处理程序方法上

get和post方法功能类似的，使用建议:

1. get方式的安全性较post方式要差些，包含机密信息的话，建议用post数据提交方式；
2. 在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；
   区别表现如下：
3. get是从服务器上获取数据，post是向服务器传送数据。
4. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
5. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
6. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
7. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

1.5 JS中的回调函数

什么是回调函数？
一个函数作为一个参数传递给另一个函数使用
可以将方法名作为参数传给另一个函数，也可以直接将匿名函数作为参数传递另一个函数
回调函数怎么用？

<script type="text/javascript">
		function title(value){//这是回调函数！！！！
			alert(value);
		}
		function main(title, value){//这个主函数:在参数列表中，title作为一个参数传递进来，也就是上文说的 参数化函数；然后value这个值正是title（）函数中所需要的。
			alert("我是主函数");
			title(value);//结果为：'我是回调函数'。——————然后在这行这个title()，它就是回调函数咯。
		}
		main(title,"我是回调函数");//title参数加上()后，就会变回一个函数，并会被执行一次。
		//PS:看清楚，调用的是main()函数，意味着先执行main()，这时已经执行了主函数，title()被main()在函数体中执行了一次，因此title()是回调函数。
	</script>

回调函数怎么传参？

• 将回调函数的参数作为与回调函数同等级的参数进行传递
• 回调函数的参数在调用回调函数内部创建

2.发布商品接口实现

分析：使用Service CRUD接口中Save方法

1. 设计接口

2.测试接口

3.封装请求

//发布商品
export const Post = (data) => requests({ url: '/tProduct/post', data, method: 'post' });

4.绑定事件
问题1：前端的发给后端的数据是如何被接收的？以及它们是如何反序列化为Java对象的？
例子：前端提交一个表单给后端的一个方法处理

分析：首先，我们应当知道前端的提交的数据是什么样的？通过双向绑定收集到表单数据，然后为按钮绑定一个点击事件，利用console.log()打印这个表单数据，结果如下：

由此可知，对于二级级联选择器它的提交表单值是一个字符数组，第1项是大分类的value，第2项是小分类的value
因此，不能简单使用@RequestBody来进行匹配式接收参数，必须对其进行处理然后调用服务层方法
并且前台的描述是desc,而后台的描述是description，无法自动匹配进行接收，两种方法：一是修改前台绑定的key，二是利用@RequestParam(“前端参数名”) String 后台参数名 进行手动匹配接收，在这里我选择第一种方法
问题2：前端如何提交规定格式的时间戳？
1.安装moment cnpm install moment --save
2.main.js中导入并挂载moment

import moment from 'moment'
Vue.prototype.$moment = moment;

3.组件中使用

let time = this.$moment().format('yyyy-MM-DD HH:mm:ss')
console.log(time)

经过一顿操作，终于把接口所需要的所有数据全部准备好了

不过对于sort数组还需要另外接收和处理，与TProduct对象的大分类ID和小分类ID进行匹配，可以用字符串数组，也可以用List
或者直接在前端就把它处理成可以匹配得上的bigTypeId和smallTypeId属性，我选择第二种，改动前端，因为我是先写后端的接口，为了不改变后端代码，保持开发连续性，我们修改前端与后端进行参数匹配

结果一番操作，终于成功模拟了前面接口测试所需要的所有数据
一个无语事件发生了，浪费了两个小时。。。
后端报错：

前端报错：

问题排查过程：
1.检查后端代码无误，且通过了接口测试，判断应该是前端代码问题
2.根据后端报错信息，前端缺失请求体，打开network控制台，发起一次请求，查看请求信息，发现没有payload
3.查看前端代码，依次检查绑定的事件和封装请求的代码，没有发现问题
4.仔细检查代码，发现封装请求的代码中的data参数写成了date,修改后无异常报错

3.表单中的图片上传实现

要求：上传一张图片，保存到项目的文件夹中，并且在表单提交时把图片保存的地址保存到数据库中
分析：图片上传与提交表单异步进行，先上传图片，后提交表单，图片为上传，不能提交表单
具体实现：提交到后台，后台将图片保存到项目文件夹中，返回保存图片的地址，前端将该地址暂存到vuex中，等到表单提交时，将图片保存地址和表单数据一起保存至数据库中。
累了，明天实现！

4.根据用户ID查询其发布的全部商品接口

1.设计接口

2.测试接口

参考文档：
Mybatis-plus官方文档
MyBatis-Plus Service CRUD 接口 跟Mapper CRUD 接口区别
vue之moment使用
超级简单教你Element UI上传功能（以及上传坑点）
JS回调函数——简单易懂有实例