SpringBoot+MyBatis+MYSQL项目实战五（获取省市区列表）

项目源码地址:电脑商城实战
由于现在的省市列表是读取的js文件中的数据，现在需要获取数据库中的数据
在这里插入图片描述

一：获取省市区列表

1.使用该数据库：

DROP TABLE IF EXISTS t_dict_district;

CREATE TABLE t_dict_district (
  id int(11) NOT NULL AUTO_INCREMENT,
  parent varchar(6) DEFAULT NULL,
  code varchar(6) DEFAULT NULL,
  name varchar(16) DEFAULT NULL,
  PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2.向数据库中导入省/市/区数据t_dict_district.sql文件，执行以下指令：（sql文件在gitee上，麻烦给个三连支持）

mysql> source C:/Users/yuanxin/t_dict_district.sql

parent属性表示的是父区域代码号，省的代码号+86

二：获取省市区列表——实体类、持久层

/**
 * 省市区的数据实体类
 */
@ApiModel("省市区的实体类")
@Data
@AllArgsConstructor
@NoArgsConstructor
public class District extends BaseEntity{
    private Integer id;
    private String code;
    private String parent;
    private String name;
}

DistrictMapper

public interface DistrictMapper {

    /**
     * 根据父代号查询区域信息
     * @param parent 父代号
     * @return 某个父区域下的所有区域列表
     */
    List<District> findByParent(String parent);
}

DistrictMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.example.store.mapper.DistrictMapper">
    <select id="findByParent" resultType="com.example.store.entity.District">
        SELECT  * FROM t_dict_district WHERE parent = #{parent} ORDER BY code ASC
    </select>

</mapper>

编写测试类

// @SpringBootTest表示标注当前的类是一个测试类，不会随项目一起打包
@SpringBootTest
//  @RunWith表示启动这个单元测试类（不写的话，单元测试类是不能运行的），需要传递一个参数，必须是SpringRunner的实例
@RunWith(SpringRunner.class)
public class DistrictMapperTests {
    // idea有检测的功能，接口是不能够直接创建Bean的（动态代理技术解决）在UserMapper增加@Repository
    @Autowired
    private DistrictMapper districtMapper;


    @Test
    public void countByUid(){
        List<District> list = districtMapper.findByParent("210100");
        for (District d : list){
            System.out.println(d);
        }
    }
}

三：获取省市区列表——业务层

接口创建

public interface IDistrictService {
    /**
     * 根据父代号来查询区域信息
     * @param parent
     * @return 多个区域的信息
     */
    List<District> getParent(String parent);
}

IDistrictServiceImpl

@Service
public class IDistrictServiceImpl implements IDistrictService {

    @Autowired
    private DistrictMapper districtMapper;

    @Override
    public List<District> getByParent(String parent) {
        System.out.println(parent);
        List<District> list = districtMapper.findByParent(parent);
        /**
         * 在进行网络数据传输是，为了尽量避免无效数据的产地吧，可以将无效数据设置为null
         * 可以节省流量，另一方面提升了效率
         */
        for(District d : list){
            d.setId(null);
            d.setParent(null);
        }
        return list;
    }
}

单元测试

    @Test
    public void addNewAddress(){
        //
        List<District> list = districtService.getByParent("210100");
        for (District d : list){
            System.out.println(d);
        }
    }

四：获取省市区列表——控制层

添加一个DistrictController控制类

@Controller
@RequestMapping("/districts")
public class DistrictController extends BaseController{

    @Autowired
    private IDistrictService districtService;


    @RequestMapping(value = {"/",""},method = RequestMethod.GET)
    @ResponseBody
    public JsonResult<List<District>> getByParent(String parent){
        List<District> result = districtService.getByParent(parent);
        return new JsonResult<>(OK,result);
    }

}

如果你想要不登陆也可以访问该接口，需要将/districts添加到白名单中，在LoginInterceptorConfig中

在这里插入图片描述

五：获取省市区列表——前端页面

将addAddress.html中下面两个注释

<!--		<script type="text/javascript" src="../../static/js/distpicker.data.js"></script>-->
<!--		<script type="text/javascript" src="../../static/js/distpicker.js"></script>-->

六：获取省市区名称——持久层

DistrictMapper.java

/**
     * 通过编码来查询出省市区的名称
     * @param code
     * @return
     */
    String findNameByCode(String code);

 <select id="findNameByCode" resultType="java.lang.String">
        SELECT name FROM  t_dict_district WHERE code = #{code}
    </select>

七：获取`省市区列表`——业务层（补全）

 // 在添加用户的收货地址的业务层依赖于IDistrictService层接口
    @Autowired
    private IDistrictService districtService;

 String provinceName = districtService.getNameByCode(address.getProvinceCode());
        String cityName = districtService.getNameByCode(address.getCityName());
        String areaName = districtService.getNameByCode(address.getAreaName());

        address.setProvinceName(provinceName);
        address.setCityName(cityName);
        address.setAreaName(areaName);

在这里插入图片描述

八：获取省市区——前端页面

1.addAddress.html页面中编写对应的省市区展示及根据用户的不同选择来限制对应标签中的内容
2.编写相关事件代码。

<script>
		$(document).ready(function () {
			let avatar = $.cookie("avatar");
			$("#img-avatar").attr("src",avatar);
		})
		$("#btn-change-avatar").click(function () {
			$.ajax({
				url: "/users/change_avatar",
				type: "POST",
				data : new FormData($("#form-change-avatar")[0]),
				processData: false, //关闭处理数据
				contentType: false, //提交数据的形式
				dataType: "JSON",
				success: function (json) {
					if(json.state == 200){
						alert("头像修改成功")
						// attr(s属性，属性值）：给某个属性设置某个值
						$("#img-avatar").attr("src",json.data);
						$.cookie("avatar",json.data,
								{expires: 7});
						location.href = "/upload";


					}
					else{
						alert("头像修改失败")
					}
				},
				error: function (xhr) {
					alert("修改头像时产生位置的异常"+xhr.message);
				}
			})
		})
	</script>