【基于SprintBoot+Mybatis+Mysql】电脑商城项目之上传头像和新增收货地址

news/2025/2/10 11:17:43/

      🧸安清h：个人主页 

   🎥个人专栏：【Spring篇】【计算机网络】【Mybatis篇】

🚦作者简介：一个有趣爱睡觉的intp，期待和更多人分享自己所学知识的真诚大学生。

目录

🚀1.上传头像 -持久层

✨1.1规划SQL语句

✨1.2设计接口和抽象方法

✨1.3 接口的映射

✨1.4单元测试

🚀2.上传头像 -业务层

✨2.1规划异常

✨2.2设计接口和抽象方法

✨2.3抽象方法实现

🚀3.上传头像 -控制层

✨3.1规划异常

✨3.2处理异常

✨3.3设计请求

✨3.4实现请求

🚀4.上传头像 -前端页面

🚀5.解决BUG

✨5.1更改默认的大小限制

✨5.2显示头像

✨5.3登录后显示头像

🎃1.新增收货地址-数据表创建

 🎃2.新增收货地址-创建实体类

🎃3.新增收货地址-持久层

✨1.1各功能的开发顺序

✨1.2规划需要执行的SQL语句

✨1.3接口与抽象方法

✨1.4配置SQL映射

🎃4.新增收货地址-业务层

✨4.1规划异常

✨4.2接口与抽象方法

✨4.3实现抽象方法 

🎃5.新增收货地址-控制层

✨5.1处理异常

✨5.2设计请求

✨5.3处理请求

🎃6.新增收货地址-前端页面

🚀1.上传头像 -持久层

✨1.1规划SQL语句

将对应的文件保存在操作系统上，然后再把这个文件路径给记录下来，因为记录路径是非常方便和便捷的，将来如果要打开这个文件，可以依据这个路径去找到这个文件。在数据库中需要保存这个文件的路径即可。将所有的静态资源（图片，文件，其他）放到某台电脑上，再把这台电脑作为一台单独的服务器使用。

对应的是一个更新用户avatar字段的sql语句。

update t_user set avatar=?,modified_user=?,modified_time=? 
where uid=?

✨1.2设计接口和抽象方法

 UserMapper接口中来定义个抽象方法用于修改用户的头像。

     /*** @Param("SQL映射文件中#{}占位符的变量名")：解决的问题，* 当SQL语句的占位符和映射接口方法参数名不一致时，需要将某个参数强行注入到某个占位符变量上时，* 可以使用@Param这个注解来标注映射关系*也就是说@Param("avatar")就相当于mapper.xml中的#{avatar}** 根据用户的uid修改用户的头像* @param uid* @param avatar* @param modifiedUser* @param modifiedTime* @return 返回值为收影响的行数* */Integer updateAvatarByUid(@Param("uid") Integer uid,@Param("avatar") String avatar,@Param("modifiedUser") String modifiedUser,@Param("modifiedTime") Date modifiedTime);

✨1.3 接口的映射

UserMapper.xml文件中编写映射的SQL语句。

    <update id="updateAvatarByUid">update t_user set avatar=#{avatar},modified_user=#{modifiedUser},modified_time=#{modifiedTime}where uid=#{uid}</update>

✨1.4单元测试

在test->mapper包下的UserMapperTests类中编写测试方法updateAvatarByUid，代码如下：

    @Testpublic void updateAvatarByUid(){userMapper.updateAvatarByUid(7,"/upload/avatar.png","管理员",new Date());}

🚀2.上传头像 -业务层

✨2.1规划异常

1.用户数据不存在，找不到对应的用户数据。

2.更新的时候，有未知异常的产生。

前面已开发完成，无需重新开发。 

✨2.2设计接口和抽象方法

注释的快捷方法：/**+enter

    /*** 修改用户的头像* @param uid 用户id* @param avatar 用户的头像* @param username 用户的名称*/void changeAvatar(Integer uid,String avatar,String username);

✨2.3抽象方法实现

编写业务层的更新头像的方法。

    @Overridepublic void changeAvatar(Integer uid, String avatar, String username) {User result = userMapper.findByUid(uid);if(result == null || result.getIsDelete() == 1){throw new UserNotFoundException("用户数据不存在");}Integer rows = userMapper.updateAvatarByUid(uid,avatar, username, new Date());if(rows != 1){throw new UpdateException("更新时数据产生未知的异常");}}

测试业务层方法的执行。

    @Testpublic void changeAvatar(){userService.changeAvatar(7,"/upload/test.png","haha");}

🚀3.上传头像 -控制层

✨3.1规划异常

文件异常的父类：

        FileUploadException 泛指文件上传的异常。（父类）继承RuntimeException

父类是：FileUploadException

        FileEmptyException 文件为空的异常。

        FileSizeException 文件大小超出限制的异常。

        FileStateException 文件状态产生异常，即文件在打开状态时无法上传。

        FileTypeException 文件类型异常。

        FileUploadIOException 文件读写的异常。

 五个构造方法显式声明出来，再去继承相关的父类。

在controller包下新建包ex，在ex包里新建以上六个类。其中父类FileUploadException继承RuntimeException，其余五个类继承父类FileUploadException，在此不再做过多代码描述。

✨3.2处理异常

在基类BaseController类中进行编写和统一处理。

else if (e instanceof FileEmptyException) {result.setState(6000);} else if (e instanceof FileSizeException) {result.setState(6001);} else if (e instanceof FileTypeException) {result.setState(6002);} else if (e instanceof FileStateException) {result.setState(6003);} else if (e instanceof FileUploadIOException) {result.setState(6004);}

 在异常统一处理方法的参数列表上增加新的异常处理作为它的参数。

✨3.3设计请求

请求路径：/users/change_avatar

请求方式：POST（get请求提交数据2KB，不够清晰）

请求数据：HttpSession session，MutipartFile file

响应结果：JsonResult<String>（记录图片的路径，图片路径是一个串，即用String，如果不记录下来，再切换到其他页面就展示不出来了）

✨3.4实现请求

MultipartFile接口是SpringMVC提供一个接口，这个接口为我们包装了获取文件类型的数据（任何类型的file都可以接受），SpringBoot它又整合了SpringMVC，只需要在处理请求的方法参数列表上声明一个参数类型为MultipartFile，然后SpringBoot会自动将传递给服务的文件数据赋值给这个参数。

@RequestParam：表示请求中的参数，将请求中的参数注入请求处理方法的某个参数上，如果名称不一致则可以使用@RequestParam注解进行标记和映射。

/**** @param session* @param file* @return*/@RequestMapping("change_avatar")public JsonResult<String> changeAvatar(HttpSession session,@RequestParam("file") MultipartFile file) {
//        判断文件是否为空if(file.isEmpty()){throw new FileEmptyException("文件为空");}
//        判断文件大小是否超出限制if(file.getSize() > AVATAR_MAX_SIZE){throw new FileSizeException("文件超出限制");}
//        判断文件的类型是否为我们规定的和后缀类型String contentType = file.getContentType();if(!AVATAR_TYPE.contains(contentType)){throw new FileTypeException("文件类型不支持");}
//       上传的文件.../upload/文件.pngString parent = session.getServletContext().getRealPath("upload");
//      File对象指向这个路径，File是否存在File dir = new File(parent);if(!dir.exists()){dir.mkdir();  //创建当前的目录}
//      获取到这个文件名称，UUID工具来将生成一个新的字符串作为文件名
//        返回的只是文件名，不包含目录结构.例如：avatar01.png。
//        在后续中，前面的avatar01即名称部分可以根据uid来生成一个随机的大小写字符串保存下来，
//        后缀需要保存下来String originalFilename =file.getOriginalFilename();System.out.println("OriginalFilename"+originalFilename);int index = originalFilename.lastIndexOf(".");  //查找字符串中最后一次出现的点号（.）的位置。String suffix = originalFilename.substring(index);  //从字符串的指定索引位置开始截取字符串，直到字符串的末尾。String filename = UUID.randomUUID().toString().toUpperCase() + suffix;File dest = new File(dir,filename);  //在dir下创建一个叫filename的文件，此时它是一个空文件
//        将参数file中的数据写入到空文件当中try{file.transferTo(dest);  //将file中的数据写入到dest文件中}catch (FileStateException e){throw new FileStateException("文件状态异常");}catch (IOException e){throw new FileUploadIOException("文件读写异常");}Integer uid = getuidFromSession(session);String username = getUsernameFromSession(session);
//        返回头像路径/upload/test.png，相对路径String avatar = "/upload"+filename;userService.changeAvatar(uid,avatar,username);
//        返回用户头像的路径给前端页面，将来用于头像的展示使用return new JsonResult<>(OK,avatar);}

这里没有办法测试，数据类型模拟不出来，file每一种类型的文件编码都不一样。 

🚀4.上传头像 -前端页面

在upload页面中编写上传头像的代码。.ajax()请求它可以把一个数据解析成一个大串，来拼接在参数名的后边，但file可以直接把一个文件作为一个整体提交。表单中action可以整体提交。

说明：如果直接使用表单进行文件的上传，需要给表单显示的添加一个属性：

enctype="multipart/form-data";声明出来，不会将目标文件的数据结构做修改再上传，不同字符串。

🚀5.解决BUG

✨5.1更改默认的大小限制

SpringMVC默认为1MB文件可以进行上传，手动的去修改SpringMVC默认上传文件爱的大小。

方式一：直接可以在配置文件中进行配置：

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=15MB

✨5.2显示头像

页面中通过ajax的请求来提交文件，提交完成后返回了json串，解析出data中的数据，设置到img头像标签的src属性上就可以了。

1.在这里把submit改成button，因为submit不能够添加点击事件。

<input id="btn-change-avatar" type="button" class="btn btn-primary" value="上传" />

    2.这里原来的serialize提交的是一个串的类型，不能够解析文件，所以要换成类似一下方式：

    • serialize()：可以将表单数据自动拼接成key=value的结构进行提交给服务器，一般提交是普通控件类型中的数据(text/password/radio/checkbox)。
    • FromData类：将表单中的数据保持原有的结构进行提交。new FromData($("#form")[0]);将form表单中某一个元素的整体值作为FromData()创建对象的数据，所以这个对象的格式就放在了这个对象当中，这样格式就不会被看做其他的对象被更改或调整。
    •  ajax默认处理数据时按照字符串的形式进行处理，以及默认会采用字符串的形式进行提交数据。关闭这两个默认的功能。
    new FromData($("#form")[0])

    ✨5.3登录后显示头像

    可以更新头像成功后，将服务器返回的头像路径保存在客户端的cookie对象中，然后每次检测到用户打开上传头像页面，在这个页面中通过ready()方法来自动监测去读取cookie中的头像并设到src上。

    1.设置cookie中的值：

    导入cookie.js的文件：

    <script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script><script src="../js/autoLogin.js" type="text/javascript"></script>

    调用cookie的方法：

    $.cookie(key,value,time);  //单位：天（存活时间）

    2.在upload.html页面先引入cookie.js文件

    <script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script><script src="../js/autoLogin.js" type="text/javascript"></script>

    3.在upload.html页面通过ready()自动读取cookie中的数据。

    $(document).ready(function (){let avatar = $.cookie("avatar");// 将cookie中的值获取出来设置到头像src属性上$("#img-avatar").attr("src",avatar);});

    5.4显示最新头像

    在更改完头像后，将最新的头像地址，再次保存到cookie，同名保存会覆盖原有cookie中的值。

    $.cookie("avatar",json.data,{expires: 7});

    🎃1.新增收货地址-数据表创建

    CREATE TABLE t_address (aid INT AUTO_INCREMENT COMMENT '收货地址id',uid INT COMMENT '归属的用户id',`name` VARCHAR(20) COMMENT '收货人姓名',province_name VARCHAR(15) COMMENT '省-名称',province_code CHAR(6) COMMENT '省-行政代号',city_name VARCHAR(15) COMMENT '市-名称',city_code CHAR(6) COMMENT '市-行政代号',area_name VARCHAR(15) COMMENT '区-名称',area_code CHAR(6) COMMENT '区-行政代号',zip CHAR(6) COMMENT '邮政编码',address VARCHAR(50) COMMENT '详细地址',phone VARCHAR(20) COMMENT '手机',tel VARCHAR(20) COMMENT '固话',tag VARCHAR(6) COMMENT '标签',is_default INT COMMENT '是否默认：0-不默认，1-默认',created_user VARCHAR(20) COMMENT '创建人',created_time DATETIME COMMENT '创建时间',modified_user VARCHAR(20) COMMENT '修改人',modified_time DATETIME COMMENT '修改时间',PRIMARY KEY (aid)
) ENGINE=INNODB DEFAULT CHARSET=utf8;

     🎃2.新增收货地址-创建实体类

    创建一个类Address类，在类中定义表的相关字段，采用驼峰命名方式，最后再去继承BaseEntity类。

    //收货地址数据的实体类
public class Address extends BaseEntity {private Integer aid;private Integer uid;private String name;private String provinceName;private String provinceCode;private String cityName;private String cityCode;private String areaName;private String areaCode;private String zip;private String address;private String phone;private String tel;private String tag;private Integer isDefault;
}

    🎃3.新增收货地址-持久层

    ✨1.1各功能的开发顺序

    当前收货地址功能模块：列表的展示、修改、删除、设置默认、新增收货地址。开发顺序：新增收货地址->列表展示->设置默认收货地址->删除收货地址->修改收货地址。

    ✨1.2规划需要执行的SQL语句

    1.对应的插入语句：

    insert into t_address(除aid外的字段列表) values(字段值列表)

    2. 一个用户的收货地址最多只能有20条数据对应。在插入用户数据之前先做查询操作。收货地址逻辑控制方面的一个异常。

    select count(*) from t_address where uid=?

    ✨1.3接口与抽象方法

    1.创建一个新的接口Address，在这个接口中来定义上面两个SQL语句抽象方法定义。

    /*** 插入用户的收货地址* @param address 收货地址数据* @return 受影响的行数*/Integer insert(Address address);/*** 根据用户的id统计收货地址的数量* @param uid 用户的id* @return 当前用户的收货地址总数*/Integer count(Integer uid);

    ✨1.4配置SQL映射

    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.cy.store.mapper.AddressMapper"><resultMap id="AddressEntityMap" type="com.cy.store.entity.Address"><id column="aid" property="aid"/><result column="province_code" property="provinceCode"/><result column="province_name" property="provinceName"/><result column="city_code" property="cityCode"/><result column="city_name" property="cityName"/><result column="area_code" property="areaCode"/><result column="area_name" property="areaName"/><result column="is_delete" property="isDelete"></result><result column="created_user" property="createdUser"></result><result column="created_time" property="createdTime"></result><result column="modified_user" property="modifiedUser"></result><result column="modified_time" property="modifiedTime"></result></resultMap><insert id="insert" useGeneratedKeys="true" keyProperty="aid">insert into t_address (uid, name, province_name, province_code, city_name, city_code, area_name, area_code, zip,address, phone, tel,tag, is_default, created_user, created_time, modified_user, modified_time) values (#{uid}, #{name}, #{provinceName}, #{provinceCode}, #{cityName}, #{cityCode}, #{areaName},#{areaCode}, #{zip}, #{address}, #{phone}, #{tel}, #{tag}, #{isDefault}, #{createdUser},#{createdTime}, #{modifiedUser}, #{modifiedTime})</insert><select id="countByUid" resultType="java.lang.Integer">select count(*) from t_address where uid=#{uid}</select>
</mapper>

    2.在test下的mapper文件夹下创建一个AddressMapperTests的测试类。

    @Testpublic void insert(){Address address = new Address();address.setUid(6);address.setPhone("15374583927");address.setName("备备");addressMapper.insert(address);}@Testpublic void countByUid(){Integer count = addressMapper.countByUid(6);System.out.println(count);}

    🎃4.新增收货地址-业务层

    ✨4.1规划异常

    1.如果用户是第一次插入收货地址，规则：当用户插入的地址是第一条时，需要将当前地址作为默认收货地址，如果查询到统计总数为0，则将当前地址的is_default设置为1。查询统计的结果为0不代表异常。

    查询到的结果大于20，这时候需要抛出业务控制的异常AddressCountLimitException异常。自行创建这个异常。

    public class AddressCountLimitException extends ServiceException{public AddressCountLimitException() {super();}public AddressCountLimitException(String message) {super(message);}public AddressCountLimitException(String message, Throwable cause) {super(message, cause);}public AddressCountLimitException(Throwable cause) {super(cause);}protected AddressCountLimitException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {super(message, cause, enableSuppression, writableStackTrace);}
}

    2.插入数据时产生异常。 

    ✨4.2接口与抽象方法

    1.创建一个IAddressService接口，在里面定义业务的抽象方法。

        void addNewAddress(Integer uid,String username,Address address);

    2.创建一个AddressServiceImpl实现类，去实现接口中的抽象方法。

    在配置文件中定义数据

    #Spring读取配置文件中数据：@Value(${user.address.max-count})
user.address.max-count=20

    ✨4.3实现抽象方法 

    在实现类中实现业务控制 。

    //新增收货地址的实现类
@Service
public class AddressServiceImpl implements IAddressService {@Autowiredprivate AddressMapper addressMapper;@Value("${user.address.max-count}")private Integer count;@Overridepublic void addNewAddress(Integer uid, String username, Address address) {
//        调用收货地址统计的方法Integer count = addressMapper.countByUid(uid);if(count >= 20){throw new AddressCountLimitException("用户收货地址超出上限");}//    uid、isDeleteaddress.setUid(uid);Integer isDelete = count == 0?1:0;  //1表示默认，0表示不默认address.setIsDefault(isDelete);
//    补全4项日志address.setCreatedUser(username);address.setCreatedTime(new Date());address.setModifiedUser(username);address.setModifiedTime(new Date());//        插入收货地址的方法Integer rows = addressMapper.insert(address);if(rows != 1){throw new InsertException("插入用户地址时产生未知异常");}}}

    3.测试业务层功能是否正常。AddressServiceTests测试来测试业务功能。

        @Testpublic void addNewAddress(){Address address = new Address();address.setPhone("11874583927");address.setName("备备");addressService.addNewAddress(6,"小明",address);}

    🎃5.新增收货地址-控制层

    ✨5.1处理异常

    业务层抛出了收货地址总数超标的异常，在BaseController中进行处理。

    else if(e instanceof AddressCountLimitException) {result.setState(4003);result.setMessage("用户收货地址超出上限的异常");}

    ✨5.2设计请求

    请求路径：/addresses/add_new_address

    请求方式：POST

    请求数据：Address address，HttpSession session

    响应结果：JsonResult<Void>

    ✨5.3处理请求

    在控制层创建AddressController来处理用户收货地址的请求和响应。

     @RequestMapping("add_new_address")public JsonResult<Void> addNewAddress(Address address, HttpSession session){Integer uid = getuidFromSession(session);String username = getUsernameFromSession(session);addressService.addNewAddress(uid,username,address);return new JsonResult<>(OK);}

    先登录用户，然后再访问http://localhost:8080/address/add_new_address?name=tom&phone=1826478328 进行测试。

    🎃6.新增收货地址-前端页面

    <script>$("#btn-add-new-address").click(function (){$.ajax({url:"/addresses/add_new_address",type:"POST",data:$("#form-add-new-address").serialize(),dataType:"JSON",success:function (json){if(json.state==200){alert("新增收货地址成功");}else{alert("新增收货地址失败");}},error:function (xhr){alert("新增收货地址时产生未知的异常"+xhr.message);}});});</script>


    http://www.ppmy.cn/news/1570847.html

    相关文章

    Leetcode 3449. Maximize the Minimum Game Score

    Leetcode 3449. Maximize the Minimum Game Score

    Leetcode 3449. Maximize the Minimum Game Score 1. 解题思路2. 代码实现 题目链接&#xff1a;3449. Maximize the Minimum Game Score 1. 解题思路 这一题思路上就是一个二分法&#xff0c;尝试各个score&#xff0c;看看是否可以满足在给定的m次操作限制下&#xff0c;使…
    阅读更多...
    2025年终总结

    2025年终总结

    文章目录 前言2024年回顾1月2月4月5月6月7月8月10月12月 2025年 回顾1月2月 2025年期望 前言 最近因为一些原因&#xff0c;暂停了博客的书写。但是毕竟到年底了&#xff0c;还是简单作个总结好了。 2024年回顾 1月 回家之后。我堂哥找我聊天&#xff0c;说要一起开网店&am…
    阅读更多...
    如何使用deepseek开发一个翻译API

    如何使用deepseek开发一个翻译API

    什么是deepseek Deepseek 是一个基于人工智能技术的自然语言处理平台&#xff0c;提供了多种语言处理能力&#xff0c;包括文本翻译、语义分析、情感分析等。它通过深度学习模型和大规模语料库训练&#xff0c;能够实现高质量的文本翻译和多语言理解。Deepseek 的核心优势在于…
    阅读更多...
    Ranger 2.1.0 Admin安装

    Ranger 2.1.0 Admin安装

    个人博客地址&#xff1a;Ranger 2.1.0 Admin安装 | 一张假钞的真实世界 Creating MySQL user ranger2 failed 2021-07-01 18:44:53,480 [E] Creating MySQL user ranger2 failed.. 2021-07-01 18:44:53,496 [E] DB schema setup failed! Please contact Administrator. 原…
    阅读更多...
    leetcode_深度搜索和广度搜索 101. 对称二叉树

    leetcode_深度搜索和广度搜索 101. 对称二叉树

    101. 对称二叉树 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称思路: 1.判断根节点的左右子树是否为空, 若都为空则返回True2.根节点的左右子树其中之一为空或子树的根节点的值不同则返回False3.分别判断根节点左右子树是否相同, 判断时, 左边子树的左节点要对应…
    阅读更多...
    【Mysql】数据表的增删查改（基础）

    【Mysql】数据表的增删查改（基础）

    1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…
    阅读更多...
    MacOS 安装NVM

    MacOS 安装NVM

    MacOS 安装NVM 方法一&#xff1a;使用Homebrew安装nvm 打开终端&#xff08;Terminal&#xff09;&#xff0c;输入以下命令安装Homebrew&#xff1a; /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"安装nvm…
    阅读更多...
    解密编程语言的执行机制：从解释到编译的进化

    解密编程语言的执行机制：从解释到编译的进化

    引言 编程语言的核心是如何将开发者编写的代码转换为机器能够理解并执行的指令。随着计算机科学的不断进步&#xff0c;编程语言的执行方式也在不断演变&#xff0c;从传统的解释执行到现代的即时编译技术&#xff0c;每种机制都有其独特的应用场景和技术优势。 本文将深入探讨…
    阅读更多...
    最新文章

    Copyright @ 2022~2023