每日小记_2019-10-21_day02

今日项目复盘

1.今日所做,完成商城项目的展示收货地址,完善新增收获地址功能
1.1.新增添加省名,市名,区县名,选择后作为数据发送到后端完成数据库信息存入
1.2页面加载完成,下拉选框为—请选择—
1.3添加改变事件,当省市名字发生改变时,区县名刷新,展现当前省所包含市名,区县同理.

业务规划

#1.sql语句
//1.根据上级id查询详细信息,按照下级id排序

select *from t_dict_district where parent=#{parent} order by code;

//2.根据id查询省市区信息

select *from t_dict_district where code=#{code};

#2.配置mapper文件

根据 Mapper文件的抽象方法在xml配置文件中配置相应Sql语句

#3.规划业务层IDistrictService接口和实现类IDistrictServiceImpl
根据Mapper中的方法来规划业务层方法

List<District> findByParent(String parent);
District findByCode(String code);

因根据parent查询结果时返回的集合中,District对象中的id和parent属性没有必要返回给前端页面,所以在此将它设置为null;

#4. 回到之前所写的IAddressService接口中添加新抽象方法 District getByUid(Integer uid) ,此方法是将用户的收货地址查询出来返回给页面.
#4.1 在IAddressServiceImpl中添加 String getDistrict(String code)方法,此方法用于根据code值查询省/市/县名,调用service.getByCode(code)得到District对象,判断此对象是否为null,若为null.返回null,不为null则使用District.getName()方法返回名字!
#4.2重写getUid(Integer uid)方法,并将不需要的值设为null

#4.3在此前添加收获地址方法中,新增添加省/市/区县名功能,再插入数据前,调用getByCode(Integer code)方法 address.getProvinceCode()/CityCode/AreaCode()传入分别得到省/市/区名,再执行插入操作!

#5.规划控制器层
#5.1建立新控制器类 DistrictController并添加@RestController注解,@RequestMapping(“district”)注解并自动装配(使用@Autowired)业务层对象service.
#5.2创建新方法getParent(Integer parent)添加@RequestMapping("/")注解,调用service.getByParent(parent)方法,返回查询结果和OK状态描述!

#5.3新建AddressController并添加RestController注解与@RequestMapping()注解,与上述方法一致.此处需要调用addNew()方法实现插入数据功能和getByUid()方法实现查找用户收货地址.

#6.来到前端页面,通过AJAX技术实现异步请求!实现前后端数据交互!

<script type="text/javascript">
	//声明全局变量defaultOption为省/市/区县状态栏默认状态
	var defaultOption="<option value='0'>"+"---请选择---"+"</option>";
	$(document).ready(function () {
	//页面加载完成后调用展示省份方法
		showProvinceList();
		//当省份下拉框发生改变时,调用展示城市方法
		$("#province-list").change(function () {
			showCityList();
		});
		//当城市下拉选发生改变时,调用展示区县方法
		$("#city-list").change(function () {
			showAreaList();
		});
		//将默认状态栏显示文本设置到城市框
		$("#city-list").append(defaultOption);
		//将默认状态栏显示文本设置到区县框
		$("#area-list").append(defaultOption);
	});
	//展示省份方法
	function showProvinceList(){
	//设置为请选择状态
		$("#province-list").append(defaultOption);
		$.ajax({
			"url":"/districts/",
			"data":"parent=86",//86为全国所有省份
			"type":"get",
			"dataType":"json",
			"success":function(json) {
				let list=json.data;
				console.log(list.length)
				for (var i = 0; i < list.length; i++) {
					let op="<option value='"+list[i].code+"'>"+list[i].name+"</option>";
					$("#province-list").append(op);
				}
		}
	});
	}
	
	//展示城市列表方法
	function showCityList(){
	//得到省份id
		let provinceCode=$("#province-list").val();
		//清空上一次城市列表
		$("#city-list").empty();
		//重新选定状态
		$("#city-list").append(defaultOption);
		//清空上一次区县列表
		$("#area-list").empty();
		//重新选定状态
		$("#area-list").append(defaultOption);
		//如果id为0,说明没有找到,终止方法
		if(provinceCode==0){
			return;
		}
		
		$.ajax({
			"url":"/districts/",
			"data":"parent="+provinceCode,
			"type":"get",
			"dataType":"json",
			"success":function (json) {
				let list=json.data;
				for (var i = 0; i <list.length ; i++) {
					let op="<option value='"+list[i].code+"'>"+list[i].name+"</option>";
					$("#city-list").append(op);
				}
			}
		});
	}
	
	//展示区县列表方法
	function showAreaList(){
		let cityCode=$("#city-list").val();
		$("#area-list").empty();
		$("#area-list").append(defaultOption);
		if(cityCode==0){
			return;
		}
		$.ajax({
			"url":"/districts/",
			"data":"parent="+cityCode,
			"type":"get",
			"dataType":"json",
			"success":function (json) {
				let list=json.data;
				for (var i = 0; i < list.length; i++) {
					let op="<option value='"+list[i].code+"'>"+list[i].name+"</option>";
					$("#area-list").append(op);
				}
			}
		});

	}
	
	//为添加按钮绑定点击事件,提交数据!
	$("#btn-addnew").click(function() {
		$.ajax({
			"url":"/addresses/addnew",
			"data":$("#form-addnew").serialize(),
			"type":"post",
			"dataType":"json",
			"success":function(json) {
				if (json.state == 200) {
					alert("增加收货地址成功！");
					// 还原表单控件为默认状态
					// $("#form-addnew")[0].reset();
				} else {
					alert("增加收货地址失败！" + json.message + "！");
				}
			},
			"error":function() {
				alert("您的登录信息已经过期！请重新登录！");
				// location.href = "login.html";
			}
		});
	});
</script>