关于车辆派遣系统的总结(0804)
关于车辆派遣系统的总结(0804)
因为上周组织培训，项目在上周没有过多的进展。燃尽图：
通过上周的培训，也重新熟悉了前端的一部分内容。关于车辆派遣系统，实质上是重新又熟悉了一次半成品，另外再加上培训是，觉得有用的知识点，重新对项目进行了调整，特别是前端。因为前端页面的实现方式，不断的更换，使得每一个功能页面的代码，没有比较标准的规范统一。虽然不利于代码的复用性，但是，就当做是对前端的再次学习巩固。
再次熟悉车辆派遣系统后，添加了2个功能模块：业务员管理模块和车辆派遣单模块。
车辆派遣单模块：
前端页面：主要分为上下两部分，下面部分是管理员信息展示列表的DIV，上面部分是负责回显要修改的原有信息和修改后的新信息的input标签区域。
代码：
<body>
<div class="d1" >
<form action="" method="post" id="form">
<div class="d12 dheader">
<p>业务员信息修改</p>
</div>
<div class="d12">
<label>业务员姓名:</label>
<input class="in" name="cname" id="cname" value="${clerk.cname }" placeholder="业务员姓名">
</div>
<div class="d12">
<label>登录密码:</label>
<input class="in" name="cpwd" id="cpwd" value="${clerk.cpwd }" placeholder="业务员登录密码">
</div>
<div class="d12">
<label>身份证号码:</label>
<input class="in" name="cIDnum" id="cIDnum" value="${clerk.cIDnum }" placeholder="业务员身份证号码">
</div>
<div class="d12">
<label>职务:</label>
<input class="in" name="cjob" id="cjob" value="${clerk.cjob }" placeholder="职务">
</div>
<div class="d12">
<label>联系电话:</label>
<input class="in" name="cphone" id="cphone" value="${clerk.cphone }" placeholder="业务员联系方式">
</div>
<div class="d12">
<input type="hidden" class="in" name="cid" id="cid" value="${clerk.cid }">
</div>
<div class="d12">
<label></label>
<input type="button" name="button" id="button" value="修改">
</div>
</form>
</div>
<div class="d2" align="center">
<table class="tb" border="1px" cellspacing="0">
<!-- th是表头的单元格，theader是表头行的意思，和tr的作用是一样的，但是theader里面可以有多个tr构成 -->
<!-- 这里没有出效果是因为把theader当做th使用了 -->
<tr>
<th>业务员姓名</th>
<th>登录密码</th>
<th>身份证号码</th>
<th>职务</th>
<th>联系电话</th>
<th>操作</th>
</tr>
<tr>
<td>admin</td>
<td>123456</td>
<td>18x</td>
<td>临时管理</td>
<td>11012345678</td>
<td><a href="#">修改</a><a>删除</a> </td>
</tr>
</table>
</div>
</body>
通过js和jstl渲染，展示所有管理员信息的列表。
script：
$(function() {
getAllClerk();
});
function getAllClerk() {
$.ajax({
url:webName+"/clerk/getAllClerk.do",
data:"",
type:"get",
dataType:"json",
success:function(obj){
//alert(obj.message);
if (obj.state==1) {
$(".tb").html("");
var s =
'<tr>'+
'<th>业务员姓名</th>'+
'<th>登录密码</th>'+
'<th>身份证号码</th>'+
'<th>职务</th>'+
'<th>联系电话</th>'+
'<th>操作</th>'+
'</tr>';
$(".tb").append(s);
for (var i = 0; i < obj.data.length; i++) {
var str =
'<tr>'+
'<td>'+obj.data[i].cname+'</td>'+
'<td>'+obj.data[i].cpwd+'</td>'+
'<td>'+obj.data[i].cIDnum+'</td>'+
'<td>'+obj.data[i].cjob+'</td>'+
'<td>'+obj.data[i].cphone+'</td>'+
'<td><a href="${pageContext.request.contextPath}/clerk/getClerkByCid.do?cid='+obj.data[i].cid+'">修改</a> | <a class="remove" href="${pageContext.request.contextPath}/clerk/remove.do?cid='+obj.data[i].cid+'">删除</a> </td>'+
'</tr>';
$(".tb").append(str);
}
}
}
});
}
$("#button").click(function() {
$.ajax({
url:"${pageContext.request.contextPath}/clerk/change.do",
data:$("#form").serialize(),
type:"post",
dataType:"json",
success:function(obj){
alert(obj.message);
}
});
});
后端实现：
controller：
1.管理员列表展示，需要获得clerkList。
@RequestMapping("/getAllClerk.do")
@ResponseBody
public ResponseResult<List<Clerk>> getAllClerk(){
ResponseResult<List<Clerk>> rr = new ResponseResult<List<Clerk>>();
List<Clerk> clerkList = clerkService.getAllClerk();
rr.setData(clerkList);
rr.setMessage("获取clerk列表成功");
rr.setState(1);
return rr;
}
可以看出，这里获取list是通过异步实现的，通过和上面的script结合，异步加载渲染数据到业务员管理页面。
同时，可以发现，删除和修改在table的操作列中，删除比较容易，超链接访问对应的后端，并携带对应的cid参数即可。
//根据cid删除对应的clerk信息
@RequestMapping("/remove.do")
public String remove(Integer cid){
ResponseResult<Void> rr = new ResponseResult<Void>();
System.out.println("cid="+cid+",class="+cid.getClass());
int count = clerkService.remove(cid);
System.out.println("couont="+count);
return "redirect:../clerk/showManage.do";//重定向一个请求，这样会让页面重新发送一个请求，请求列表页面
//return "manage-clerk";//只跳转页面，重新刷新页面，不会改变地址栏的a链接地址
}
修改分为2部分，第一，点击修改后，拿到对应的clerk数据，并且异步加载到上面的input标签对应的位置。第二，对对应的input标签的数据，根绝需要修改，提交修改后，修改数据库数据，同时刷新管理页面。
//根据cid修改clerk信息，分为2步
//1.根据cid获取要修改的clerk信息，方便数据回显页面
@RequestMapping("/getClerkByCid.do")
public String getClerkByCid(Integer cid,ModelMap map) {
Clerk clerk = clerkService.getClerkByCid(cid);
System.out.println(clerk);
map.addAttribute("clerk", clerk);
return "manage-clerk";
}
//2.页面回显的数据，经过修改后，提交后台，修改数据库数据
@RequestMapping("/change.do")
@ResponseBody
public ResponseResult<Void> change(Integer cid,String cname,String cpwd,String cIDnum,String cjob,String cphone){
System.out.println("-->/clerk/change.do");
ResponseResult<Void> rr = new ResponseResult<Void>();
Clerk clerk = new Clerk(cid, cname, cpwd, cIDnum, cjob, cphone);
System.out.println(clerk);
Integer count = clerkService.change(clerk);
System.out.println("count="+count);
rr.setState(1);
rr.setMessage("修改clerk成功");
System.out.println("<--/clerk/change.do");
return rr;
}
业务员管理模块的页面和controller层以贴出，由controller类调用的方法，生成匹配的service类和DAO类，即可完成该业务员管理模块。
百度网盘：
链接：https://pan.baidu.com/s/1tVwh-96ed8he9X7paf-gJg
提取码：o2s7
浙公网安备 33010602011771号