实习DAY5

2019年7月16日

完成SSM的增删查

添加一个新的功能时的代码实现思路：Dao层设计→mapper映射文件设计→service层接口与实现→controller层设计→jsp页面发去请求的设计.

增加

dao：考虑到新增用户没有返回值，有传值id,username,password。

void addUser(UserInfo userInfo);

mapper：传入参数parameterType是实体UserInfo的对象

<insert id="addUser" parameterType="com.zhongruan.bean.UserInfo">
    insert into tb_user(id,username,password) values(#{id},#{username},#{password})
</insert>

service:
UserServiceImpl:

    @Override
    public void addUser(UserInfo userInfo){
        userDao.addUser(userInfo);
    }

controller:
userInfo是网页表单提交传入的数据。

    @RequestMapping("/addUser.do")
    public String addUser(UserInfo userInfo){
        userService.addUser(userInfo);
        return "redirect:findAll.do";
    }

user-list.jsp:

user-add.jsp:

<form action="${pageContext.request.contextPath}/user/addUser.do"
				method="post">
				<!-- 正文区域 -->
				<section class="content"> <!--产品信息-->

				<div class="panel panel-default">
					<div class="panel-heading">用户信息</div>
					<div class="row data-type">
						<div class="col-md-2 title">id</div>
						<div class="col-md-4 data">
							<input type="text" class="form-control" name="id"
								   placeholder="id" value="">
						</div>

						<div class="col-md-2 title">用户名称</div>
						<div class="col-md-4 data">
							<input type="text" class="form-control" name="username"
								placeholder="用户名称" value="">
						</div>
						<div class="col-md-2 title">密码</div>
						<div class="col-md-4 data">
							<input type="password" class="form-control" name="password"
								placeholder="密码" value="">
						</div>


					</div>
				</div>
				<!--订单信息/--> <!--工具栏-->
				<div class="box-tools text-center">
					<button type="submit" class="btn bg-maroon">保存</button>
					<button type="button" class="btn bg-default"
						onclick="history.back(-1);">返回</button>
				</div>
				<!--工具栏/--> </section>
				<!-- 正文区域 /-->
			</form>

删除

点击用户条中的删除，将ID通过URL传值传入到controller层，id再传入service层，再传入dao层，最后到mapper文件用sql语句依靠id来删除对应行。

user-list.jsp:其中onclick调用了js中的function()，功能是删除成功会弹窗提醒。

<a href="${pageContext.request.contextPath}/user/delUser.do?id=${user.id}
" class="btn bg-olive btn-xs" onclick="del_suc()">
    删除
</a>

<%--删除用户成功--%>
<script>
    function del_suc()
    {
        alert("你删了！");
    }
</script>

依靠用户名查找用户

考虑到查找用户有返回值，List<UserInfo>，有传值用户名。同时搜索要求是模糊搜索的。
dao：

List<UserInfo> findUserByName(String username);

mapper:
因为是模糊搜索，所以sql要用以下的形式来实现：

    <select id="findUserByName" parameterType="java.lang.String" resultType="com.zhongruan.bean.UserInfo">
        select * from tb_user where username like '%' #{username} '%'
    </select>

service:
UserServiceImpl:

@Override
public List<UserInfo> findUserByName(String username){
    return userDao.findUserByName(username);
}

controller:

@RequestMapping("/findUserByName.do")                 
public ModelAndView findUserByName(String username){
    List<UserInfo> userInfoList = userService.findUserByName(username);
    ModelAndView mv = new ModelAndView();
    mv.addObject("userInfoList",userInfoList);
    mv.setViewName("user-list");
    return mv;
}

jsp:

    <form action="${pageContext.request.contextPath}/user/findUserByName.do"
          method="post">
        <div class="col-md-4 data1">
            <%--input中文会多个逗号在文本前面，--%>
            <input type="text" class="form-control" name="username"
                   placeholder="输入用户名（请）" value="">
        </div>
        <button type="submit" class="btn bg-maroon">搜索</button>
    </form>

完成登录实现在首页显示当前登陆的信息

登陆需要返回一个UserInfo对象,传入一个username的String。
dao:

    UserInfo doLogin(String username);

mapper:

<select id="doLogin" resultType="com.zhongruan.bean.UserInfo" parameterType="java.lang.String">
    select * from tb_user where username=#{username}
</select>

service:

@Override
    public UserInfo doLogin(String username){
        return userDao.doLogin(username);
    }

controller: httpsession类似浏览器的缓存。

    //登陆
    @RequestMapping("/doLogin.do")
    public String doLogin(String username, String password, HttpSession session){
        UserInfo userInfo = userService.doLogin(username);

        if(userInfo != null){
            if(userInfo.getPassword().equals(password)){
                System.out.println("登陆成功");
                session.setAttribute("userInfo",userInfo);
                return "main";
            }else{
                System.out.println("密码错误，请重新登陆！");
                session.setAttribute("message","密码错误，请重新输入！");
                return "../login";
            }
        }else {
            System.out.println("用户不存在，请重新输入！");
            session.setAttribute("message","用户不存在，请重新输入！");
            return "../login";
        }
    }

login.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>中软ETC用户管理系统</title>

<meta
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
	name="viewport">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
</head>

<body class="hold-transition login-page">
	<div class="login-box">
		<div class="login-logo">
			<a href="all-admin-index.html">中软<b>ETC</b>用户管理系统</a>
		</div>
		<!-- /.login-logo -->
		<div class="login-box-body">
			<p class="login-box-msg">登录系统</p>

			<form action="${pageContext.request.contextPath}login.do" method="post">
				<div class="form-group has-feedback">
					<input type="text" name="username" class="form-control"
						placeholder="用户名"> <span
						class="glyphicon glyphicon-envelope form-control-feedback"></span>
				</div>		<p style="color: mediumvioletred">${sessionScope.message}</p>  <%--登陆失败报错--%>
				<div class="form-group has-feedback">
					<input type="password" name="password" class="form-control"
						placeholder="密码"> <span
						class="glyphicon glyphicon-lock form-control-feedback"></span>
				</div>
				<div class="row">
					<div class="col-xs-8">
						<div class="checkbox icheck">
							<label><input type="checkbox"> 记住 下次自动登录</label>
						</div>
					</div>
					<!-- /.col -->
					<div class="col-xs-4">
						<button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
					</div>
					<!-- /.col -->
				</div>
			</form>

			<a href="#">忘记密码</a><br>


		</div>
		<!-- /.login-box-body -->
	</div>
	<!-- /.login-box -->

	<!-- jQuery 2.2.3 -->
	<!-- Bootstrap 3.3.6 -->
	<!-- iCheck -->
	<script
		src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
	<script>
		$(function() {
			$('input').iCheck({
				checkboxClass : 'icheckbox_square-blue',
				radioClass : 'iradio_square-blue',
				increaseArea : '20%' // optional
			});
		});
	</script>
</body>

</html>

完成分页

步骤：
1.导入pageHelper的包
2. 在applicationContext.xml中告诉sqlSessioniFactory要开始用pageHelper
3. 在service传当前页和页码，然后在impl中开始分页
4. 讲查询到的结果集保存到PageInfo中并保存到ModelAndView并返回
5.页面进行取值

pom.xml:

    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.2</version>
    </dependency>

applicationContext.xml:

        <!--分页-->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            <prop key="helperDialect">mysql</prop>
                            <prop key="reasonable">true</prop>
                        </props>
                    </property>

                </bean>
            </array>
        </property>

user-list.jsp:
这里因为搜索结果和查询全用户findAll.do共用一个界面，而分页功能只能实现findAll.do这个页面的分页，所以我自己设计了一个放在controller层中的为分页服务的方法，可以把搜索结果中的搜索关键字通过url中文传值来保留搜索结果的搜索关键字，通过该关键字（username）来实现分页，即下面的搜索结果之分页之首页（URL传值中文）a标签。

</div>
<!-- /.box-body -->
    <div class="box-tools pull-right">
        <ul class="pagination">
            <li><a href="javascript:encode('${keyname}')" aria-label="Previous">搜索结果之分页之首页（URL传值中文）</a></li>
            <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=1&size=5" aria-label="Previous">首页</a></li>
            <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfo.pageNum-1}&size=5">上一页</a></li>
            <c:forEach begin="1" end="${pageInfo.pages}" var="pagenum">
                <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pagenum}&size=5">${pagenum}</a></li>
            </c:forEach>
            <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfo.pageNum+1}&size=5">下一页</a></li>
            <li><a href="${pageContext.request.contextPath}/user/findAll.do?page=${pageInfo.pages}&size=5" aria-label="Next">尾页</a></li>
        </ul>
    </div>

</div>

js自己做的:

<%--URL传中文值编码解码--%>
<<script>
	function encode(url) {
	    console.log("url:"+url);
		var enUrl = encodeURI(encodeURI(url));
		console.log("enUrl:"+enUrl)
		var out = "${pageContext.request.contextPath}/user/pageSwitch.do?keyname=" +
enUrl +"&page=1&size=5";
		window.location.href=out;
	}
</script>

controller:

//    查询全部之分页查询
    @RequestMapping("/findAll.do")
    public ModelAndView findAll(@RequestParam(defaultValue = "1") int page, @RequestParam(defaultValue = "5") int size){
        List<UserInfo> userInfoList = userService.findAllUser(page,size);
//把得到的结果给到PageHelper中的内置对象PageInfo中
        PageInfo pageInfo = new PageInfo(userInfoList);

        ModelAndView mv = new ModelAndView();
        mv.addObject("pageInfo",pageInfo);
        mv.setViewName("user-list");
        return mv;
    }

自己做的controller中的pageSwitch.do

//页面下方导航栏之分页响应
@RequestMapping("pageSwitch.do")
public ModelAndView pageSwitch(String keyname,int page,int size){
    ModelAndView mv = new ModelAndView();
    try {

        keyname= URLDecoder.decode(keyname,"UTF-8");
        List<UserInfo> userInfoList = userService.findUserByName(keyname,page,size);
        PageInfo pageInfo = new PageInfo(userInfoList);
        mv.addObject("keyname",keyname);
        mv.addObject("pageInfo",pageInfo);
        mv.setViewName("user-list");
    } catch (UnsupportedEncodingException e) {
        e.printStackTrace();
    }
    return mv;
}

service: 这里用到PageHelper的方法来实现分页，page是页码，size是一页有多少项。

    @Override
    public List<UserInfo> findAllUser(int page,int size) {
        PageHelper.startPage(page,size);
        return userDao.findAllUser();
    }

完成。