目录
一、呈现效果
二、数据展示功能
1.实现功能分析
实现的功能分析
如上图所示我们针对于所要实现的功能进行以下操作分析，有利于之后我们思路清晰的完成我们的业务
i.首先要将所有的用户显示在页面中，能够将用户数据查询出来，做好JSP中的页面展示格式，以及后台Servlet层、service、dao层以及工具类的配置
ii.在展示所用用户数据的同时就要完成分页功能的查询，在此过程中要导入bootstrap的包完页面样式的美化
ii.完成删除功能的
iii.完成添加功能以及前端页面的美化
iv.添加修改功能，测试前端模态框的正常使用，以及把删除与添加和修改的数据显示到当前页面中
v.完成以用户名为依据的模糊查询
vi.完成以性别为依据的模糊查询
2.展示所有用户
前端jsp页面
这里采用EL表达式的形式进行展示，要先进行环境配置
jsp中的展示所有数据的代码
<form class="container" style="margin-top: 20px">
<table border="1px" class="table table-striped table-hover table-bordered container">
<tr>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>性别</th>
<th>生日</th>
<th>操作</th>
</tr>
<c:forEach items="${page.list}" var="p">
<tr>
<td>${p.id}</td>
<td>${p.username}</td>
<td>${p.password}</td>
<td>${p.sex}</td>
<%----%>
<td ><f:formatDate value="${p.birthday}" pattern="yyyy-MM-dd HH-mm-ss"></f:formatDate> </td>
<td>
<a onclick="deleteStu(${p.id},${param.currentPage})" class="btn btn-danger btn-sm">删除</a>
|
<a class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal${p.id}" >修改</a></td>
</tr>
</c:forEach>
</table>工具类的相关配置
BaseServlet代码，能够帮助我们完成各种反射对象的获取，前端访问谁就能够获取谁，不必每个服务器都要完成一遍映射，极大程度的简化了我们后续带代码工程，以及在这里做好之后反射异常的报错提示，在这之后写项目的过程中，如果出现路径问题的，报的错能够极大程度的帮助我们修改bug
处理相关的映射以及对返回数据与路径的封装
public class BaseServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String action = req.getParameter(ServletUtils.ACTION);
if (action==null){
action="index";
}
String data = req.getParameter("data");
if (data!=null){
if (data.contains(":")){
}
}
//1.获取反射对象：用this不用类名是为了方便维护与封装，谁访问就获取谁
Class cla=this.getClass();
//2.根据反射对象调取getMethod方法
try {
Method method = cla.getMethod(action, HttpServletRequest.class, HttpServletResponse.class);
Object object=method.invoke(this,req,resp);
if (object!=null){
String res= (String) object;
String prefix=null;
String path=null;
if (res.contains(":")){
prefix=res.split(":")[0];
path=res.split(":")[1];
}
if (ServletUtils.REDIRECT.equals(prefix)){
resp.sendRedirect(path);
}else if (ServletUtils.FORWARD.equals(prefix)){
req.getRequestDispatcher(path).forward(req,resp);
}else {
resp.getWriter().write(res);
}
}
} catch (Exception e) {
e.printStackTrace();
System.out.println("反射异常");
index(req,resp);
}
}
}处理乱码
拦截器中设置输入与输出的乱码处理，这样就不用每个输出与输入的资料都要处理一遍乱码了
@WebFilter("/*")
public class EncodingFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
filterChain.doFilter(request,response);
}
@Override
public void destroy() {
}
}
处理日期的工具类
因为显示的数据需要我们去处理日期格式，完成日期格式的转化，所以导入一个日期的工具类可以帮助我们处理好由前端传给后台数据的日期格式，方便我们后续的项目进行
private static final SimpleDateFormat SDF=new SimpleDateFormat("yyyy-MM-dd");
public static java.sql.Date utilToSQL(Date date){
return new java.sql.Date(date.getTime());
}
public static String utilToString(Date date){
return SDF.format(date);
}
public static Date stringToDate(String s) throws ParseException {
return SDF.parse(s);
}处理路径相关的工具类
可以对后台传给前端的路径以及前端的路径进行处理与获取
public static final String ACTION = "method";
public static final String REDIRECT = "redirect";
public static final String FORWARD = "forward";展示所有数据的服务层
在这里我们所作的功能是获取前端传过来的数据，完成业务层的调用，以及完成分页功能的展示，并将从数据库中查询到的数据返回给前端
@WebServlet("/student")
public class StudentServlet extends BaseServlet{
private StudentService studentService=new StudentServiceImpl();
public String showAll(HttpServletRequest req, HttpServletResponse resp)throws ServletException{
StudentDao studentDao = MyBatisUtils.getMapper(StudentDao.class);
int current = Integer.parseInt(req.getParameter("currentPage"));
List<Student> students = studentService.selectAll(current);
PageInfo page=new PageInfo(students);
System.out.println("展示所有："+students);
req.setAttribute("page",page);
req.setAttribute("st",students);
MyBatisUtils.commit();
return ServletUtils.FORWARD + ":/student.jsp";
}
}展示所有数据的业务层
@Override
public List<Student> selectAll(int current) {
StudentDao studentDao = MyBatisUtils.getMapper(StudentDao.class);
int currentPage=1;
if (current!=0){
currentPage=current;
}
PageHelper.startPage(current,5);
List<Student> students = studentDao.selectAll();
System.out.println(students);
MyBatisUtils.commit();
return students;
}展示所有数据的dao层
@Select("select * from t_student")
public List<Student> selectAll();分页功能的jsp页面
<%--整个分页功能--%>
<div class="text-center">
<nav aria-label="Page navigation">
<ul class="pagination" >
<c:if test="${page.pageNum!=1}">
<li><%-- ${param.tid}: 从参数中获取;类似调getParameter方法--%>
<a href="/student?method=showAll¤tPage=${page.pageNum-1}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<c:forEach begin="1" end="${page.pages}" varStatus="vs">
<c:if test="${page.pageNum==vs.index}">
<li class="active"><a href="/student?method=showAll¤tPage=${vs.index}">${vs.index}</a></li>
</c:if>
<c:if test="${page.pageNum!=vs.index}">
<li><a href="/student?method=showAll¤tPage=${vs.index}">${vs.index}</a></li>
</c:if>
</c:forEach>
<c:if test="${page.pageNum!=page.pages}">
<li>
<a href="/student?method=showAll¤tPage=${page.pageNum+1}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
</ul>
</nav>
</div>三、增删改功能
1.添加
添加功能的jsp
在这里去bootstrap的官网中去找到关于输入框的格式的的代码，拿过来直接用即可
<form action="/student">
<div style="margin-left: 300px">
<div class="input-group" style="width: 300px">
<span class="input-group-addon" id="sizing-addon1">用户名</span>
<input type="hidden" name="method" value="addStudent">
<input type="hidden" name="currentPage" value="${param.currentPage}">
<input type="text" name="username" class="form-control" placeholder="username" aria-describedby="sizing-addon2">
</div>
<div class="input-group" style="width: 300px">
<span class="input-group-addon" id="sizing-addon2">密码</span>
<input type="text" name="password" class="form-control" placeholder="password" aria-describedby="sizing-addon2">
</div>
<div class="input-group" style="width: 300px">
<span class="input-group-addon" id="sizing-addon3">生日</span>
<input type="date" name="birthday" class="form-control" placeholder="birthday" aria-describedby="sizing-addon2">
</div>
<div class="input-group" style="width: 300px">
<span class="input-group-addon" id="sizing-addon4">性别</span>
<input type="text" name="sex" class="form-control" placeholder="sex" aria-describedby="sizing-addon2">
</div>
<div>
<input type="submit" value="添加" style="margin-left: 300px">
</div>
</div>
</form>服务器层
public String addStudent(HttpServletRequest req,HttpServletResponse resp){
StudentDao studentDao = MyBatisUtils.getMapper(StudentDao.class);
String current = req.getParameter("currentPage");
String username = req.getParameter("username");
String password = req.getParameter("password");
String sex = req.getParameter("sex");
String birthday = req.getParameter("birthday");
Student student=new Student();
//student.setId(id);
student.setUsername(username);
Date birthday1=null;
try {
birthday1= DateUtils.stringToDate(birthday);
} catch (ParseException e) {
e.printStackTrace();
}
student.setBirthday(birthday1);
student.setSex(sex);
student.setPassword(password);
int res=studentDao.addStudent(student);
MyBatisUtils.commit();
System.out.println("添加"+res);
return ServletUtils.REDIRECT + ":/student?method=showAll¤tPage="+current;
}dao层
@Insert("insert into t_student(username,password,sex,birthday) values(#{username},#{password},#{sex},#{birthday})")
int addStudent(Student student);2.修改
修改时我们要在当前页面下以模态框的形式完成我们的修改功能，点击修改按钮就能够对当前用户的信息进行修改
展示效果
jsp
<a class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal${p.id}" >修改</a></td>注意模态框代码的位置要与修改这个按钮一起放入表格中，不然就无法获取到datat-target，触发模态弹出窗元素的中data，这里我们是使用以用户id为关键点去获取信息，所以模态框的位置也很重要，不然前端页面就无法将模态框显示出来
<div class="modal fade" tabindex="-1" role="dialog" id="myModal${p.id}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">修改用户</h4>
</div>
<form action="/student" class="form-horizontal">
<div class="motal-body">
<div class="form-group">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="hidden" name="method" value="updateStudent">
<input type="hidden" name="id" value="${p.id}">
<input type="hidden" name="currentPage" value="${param.currentPage}">
<input type="text" name="username" class="form-control" value="${p.username}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="text" name="password" class="form-control" value="${p.password}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">生日</label>
<div class="col-sm-10">
<input type="date" name="birthday" class="form-control" value="<f:formatDate value="${p.birthday}" pattern="yyyy-MM-dd HH:mm:ss"></f:formatDate>">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<input type="text" name="sex" class="form-control" value="${p.sex}">
</div>
</div>
</div>
<div class="motal-footer" style="text-align:right">
<button type="submit" class="btn btn-primary" >修改</button>
</div>
</form>
</div>
</div>
</div>服务层
public String updateStudent(HttpServletRequest req,HttpServletResponse resp){
StudentDao studentDao = MyBatisUtils.getMapper(StudentDao.class);
int id = Integer.parseInt(req.getParameter("id"));
String current = req.getParameter("currentPage");
String username = req.getParameter("username");
String password = req.getParameter("password");
String sex = req.getParameter("sex");
String birthday = req.getParameter("birthday");
Student student=new Student();
student.setId(id);
student.setUsername(username);
Date birthday1=null;
try {
birthday1= DateUtils.stringToDate(birthday);
} catch (ParseException e) {
e.printStackTrace();
}
student.setBirthday(birthday1);
student.setSex(sex);
student.setPassword(password);
int res = studentDao.updateStudent(student);
MyBatisUtils.commit();
System.out.println("修改："+res);
req.getSession().setAttribute("up",student);
MyBatisUtils.commit();
return ServletUtils.REDIRECT + ":/student?method=showAll¤tPage="+current;
}dao层
之前我们采用的是用注解sql语句的方式完成添加，有其缺点，因此这里我们采用mapper.xml的方式来完成用户数据的修改
public int updateStudent(Student student);SQL注解用于替代配置文件的SQL执行
好处：简化SQL查询，去除了Mapper文件的繁琐配置
弊端：方便简洁的SQL语句的执行；不适合复杂的SQL执行，例如：关联查询，结果映射等
mapper.xml
<mapper namespace="com.yj.dao.StudentDao">
<update id="updateStudent" parameterType="student">
update t_student set username=#{username},password=#{password},sex=#{sex},birthday=#{birthday} where id=#{id}
</update>
</mapper>3.删除
jsp
<a onclick="deleteStu(${p.id},${param.currentPage})" class="btn btn-danger btn-sm">删除</a>function deleteStu(id,currentPage){
var res = confirm("是否删除");
if(res==true){
window.location.href="/student?method=delStudent&id="+id+"¤tPage="+currentPage;
}
}服务层
服务层是根据用户的id对用户数据信息删除
public String delStudent(HttpServletRequest req,HttpServletResponse resp){
StudentDao studentDao = MyBatisUtils.getMapper(StudentDao.class);
String current = req.getParameter("currentPage");
int id = Integer.parseInt(req.getParameter("id"));
System.out.println("删除："+id);
int i = studentDao.delStudent(id);
try{
MyBatisUtils.commit();
}catch (Exception e){
e.printStackTrace();
System.out.println("事务的回滚");
MyBatisUtils.rollback();
}
return ServletUtils.FORWARD + ":/student?method=showAll¤tPage="+current;
}dao层
@Delete("delete from t_student where id=#{id}")
public int delStudent(int id);四、模糊查询
1.根据用户名进行模糊查询
展示效果
jsp
<div class="row container" style="margin-top: 30px">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="form-group form-inline">
<span>用户姓名</span>
<input type="text" name="username" class="form-control" id="name">
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="form-group form-inline">
<span>性别</span>
<label class="radio-inline" onclick="selectBySex(${param.currentPage})">
<input type="radio" name="gender" value="男" class="gender"> 男
</label>
<label class="radio-inline" onclick="selectBySex(${param.currentPage})">
<input type="radio"name="gender" value="女" class="gender" > 女
</label>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<button type="button" class="btn btn-primary" onclick="selectByLikeUsername(${param.currentPage})"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>JavaScript
function selectByLikeUsername(currentPage){
var name=document.getElementById("name").value;
window.location.href="/student?method=selectByLikeUsername¤tPage="+currentPage+"&username="+name;
}j服务层
public String selectByLikeUsername(HttpServletRequest req,HttpServletResponse resp){
StudentDao studentDao = MyBatisUtils.getMapper(StudentDao.class);
String name = req.getParameter("username");
int current = Integer.parseInt(req.getParameter("currentPage"));
List<Student> student = studentService.selectOne(name,current);
PageInfo page=new PageInfo(student);
System.out.println("展示所有："+student);
req.setAttribute("page",page);
req.setAttribute("st",student);
MyBatisUtils.commit();
System.out.println("查询单个："+student);
return ServletUtils.FORWARD + ":/student.jsp";
}dao层
@Select("select * from t_student where username like concat('%',#{name},'%')")
public List<Student> selectOne(String name);2.根据用户性别进行模糊查询
jsp
function selectBySex(currentPage){
var sex=$('input:radio:checked').val();
// var sex= document.getElementsByClassName("gender").value;
console.log(sex);
window.location.href="/student?method=selectByLikeSex¤tPage="+currentPage+"&sex="+sex;
}服务层
public String selectByLikeSex(HttpServletRequest req,HttpServletResponse resp){
StudentDao studentDao = MyBatisUtils.getMapper(StudentDao.class);
String sex = req.getParameter("sex");
System.out.println("性别："+sex);
int current = Integer.parseInt(req.getParameter("currentPage"));
List<Student> student = studentService.selectByLikeSex(sex,current);
PageInfo page=new PageInfo(student);
System.out.println("展示所有："+student);
req.setAttribute("page",page);
req.setAttribute("st",student);
MyBatisUtils.commit();
System.out.println("查询单个："+student);
return ServletUtils.FORWARD + ":/student.jsp";
}业务层
@Override
public List<Student> selectByLikeSex(String sex, int current) {
StudentDao studentDao = MyBatisUtils.getMapper(StudentDao.class);
int currentPage=1;
if (current!=0){
currentPage=current;
}
PageHelper.startPage(current,5);
List<Student> students = studentDao.selectByLikeSex(sex);
MyBatisUtils.commit();
return students;
}dao层
@Select("select * from t_student where sex like concat('%',#{sex},'%')")
List<Student> selectByLikeSex( String sex);
2442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
