[手把手教程][JavaWeb]优雅的SSM应用（三）
文章正式改名为：[手把手教程][JavaWeb]优雅的SSM应用
这几天一直在踩坑，为什么这么说呢，主要是一直自己没找到优雅的方式来实现一些东西。
虽然说前面也做了一些功能模块，但是总感觉不对劲，毕竟也是刚转做后端。
为了方便手机端用户，尽量使用简单的markdown语法和简单的页面结构。
后面朋友给了我一些他们公司同事写的demo，虽然说不上是牛逼的作品，但是确实符合我现在的需要。毕竟人家的实现方式也是经过实战项目演练出来的。
- 再次安利一波,博客地址:acheng1314.cn
工具
- IDE为idea15
- JDK环境为1.8
- maven版本为maven3
- Mysql版本为5.5.27
- Tomcat版本为7.0.52
- 流程图绘制（xmind）
本期目标
- 仓库管理系统的登录注册模块实现
- 其他一些开发细节的体现
- 功能模块分层设计的具体实现
其他
- 我这姑且算是文章吧，文章都是先用有道云笔记写的，然后在简书上面查看有没有冲突，最后再放到稀土掘金上面
- 但是稀土掘金上面文章出问题了，反馈上去也没能解决，本来想抓包看看他们的数据的，后面还是没做
- ···其他想说的就太多了，但都是不是今天的主题。
注册
首先，我们webapp要实现用户登录，必须得能新建用户。所以，我们先把注册用户放在前面。
- 预期功能：
- 打开注册页面
- 填写注册信息
- 点击注册
- 显示注册后的提示信息
有了功能后，我们就能大概明白我们是想要一个什么样子的注册模块了。
- 一个web注册页面
- web页面能进行基本的数据效验
- 服务器能存储用户的注册信息
- 注册动作完成后，返回提示页面。
一般的，我们在开发中，有了大概样子的功能模块，我们需要整理一下业务流程和程序执行流程（在企业开发中，有项目经理的话，一般这些都是他们整理出来的，我们只需要开发实现就行。）经过一番挠头，大概的流程图如下所示：
ssm应用三-注册流程
上图说明：
- 我们在web页面完成注册信息的填写后，我们需要在web页面做一些基本的数据效验。当然后面我们会演示。
- 注册信息通过基本的验证后，我们直接提交到服务器，tomact → servelt → spring 。我们的后端程序，一切都被spring接管了，所以，我们需要在spring中完成这些功能。
- spring和外界通信，我们都是在Controller中完成。所以我们在Controller中处理数据。
- 当数据通过了Controller中的校验后，我们需要在Controller中来查找数据库是否存在同样的用户名，通用的数据操作流程如：Controller → Service → Dao。
- 前面我们提到过，Service是为我们的程序提供服务的，我们尽量每个Service对应一个Dao，这样我们只需要提供单一的数据驱动，在外层进行业务组装，这样就能达到我们的目的，同样的，我们这样也能将程序解耦，以后的维护也就相对简单了。
好的，我们上面已经把思路想明白了。现在我们接着就开始实战。
- 生成注册页面的连接。
我们要生成一个连接，经过查找资料，我们知道我们需要创建一个Controller的类。代码如下：
@Controller
@RequestMapping("/mvc")
public class MainController {
/**
* 登陆页面
* @return
*/
@RequestMapping(value = "/login",method = RequestMethod.GET)
public String login(){
return "login";
}
}
在上面我们使用了@Controller和@RequestMapping("/mvc")注解。详细资料点这里。
通俗的来说，我们需要在我们前面配置的Controller路径中，建立使用@Controller的注解的类告诉Spring这是一个控制器。
在类上面的 @RequestMapping("/mvc") ，是说明这个类的访问地址是 /mvc 。
在方法上面的 @RequestMapping(value = "/login",method = RequestMethod.GET) ，是说明我这个方法的访问地址是 /mvc/login ，请求方式是http请求的get方式。
这里我的方法是String方法，则是直接返回一个web页面的名字。
当然，我们并不需要说直接去设定某个jsp文件。我们需要的是在这里指定好名称，然后使用对应的自动完成就能创建出那个jsp文件。
然后我们直接在jsp文件中填写对应的代码就行了。
好的，基本的东西我们都说了，那么我们先去百度找一个登录界面（一定要能看，不能那啥太直接的粗糙的东西，毕竟我们都是有品位的人）。如下图：
ssm应用三-登录注册页面
上面的图中样子还不错的样子，同时他们还是同一个页面，这下就很nice了，又可以少写一个界面了。
按照前面两期我们的东西综合起来，我们需要先把CSS、JS、图片等东西，扔到我们的静态目录中。如下图所示：
ssm应用三-登录注册静态资源
接着我们把登录的html的页面的东西，全部放到login.jsp中。如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%-- 上面这两行是java代码的引用 --%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script type="text/javascript" src="/static/js/jquery-3.1.1.min.js"></script>
<head>
<title>仓库管理系统→登录</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/static/js/login.js"></script>
<link href="/static/css/login2.css" rel="stylesheet" type="text/css"/>
</head>
<html>
<body>
<h1>仓库管理系统登陆注册<sup>2016</sup></h1>
<div class="login" style="margin-top:50px;">
<div class="header">
<div class="switch" id="switch"><a class="switch_btn_focus" id="switch_qlogin" href="javascript:void(0);"
tabindex="7">快速登录</a>
<a class="switch_btn" id="switch_login" href="javascript:void(0);" tabindex="8">快速注册</a>
<div class="switch_bottom" id="switch_bottom" style="position: absolute; width: 64px; left: 0px;"></div>
</div>
</div>
<div class="web_qr_login" id="web_qr_login" style="display: block; height: 235px;">
<!--登录-->
<div class="web_login" id="web_login">
<div class="login-box">
<div class="login_form">
<form action="<%=request.getContextPath()%>/userAction/login" name="loginform"
accept-charset="utf-8" id="login_form" class="loginForm"
method="post"><input type="hidden" name="did" value="0"/>
<input type="hidden" name="to" value="log"/>
<div class="uinArea" id="uinArea">
<label class="input-tips" for="u">帐号：</label>
<div class="inputOuter" id="uArea">
<input type="text" id="u" name="loginId" class="inputstyle"/>
</div>
</div>
<div class="pwdArea" id="pwdArea">
<label class="input-tips" for="p">密码：</label>
<div class="inputOuter" id="pArea">
<input type="password" id="p" name="pwd" class="inputstyle"/>
</div>
</div>
<div style="padding-left:50px;margin-top:20px;">
<input type="submit" value="登 录"
style="width:150px;"
class="button_blue"/></div>
</form>
</div>
</div>
</div>
<!--登录end-->
</div>
<!--注册-->
<div class="qlogin" id="qlogin" style="display: none; ">
<div class="web_login">
<form name="form2" id="regUser" accept-charset="utf-8" action="<%=request.getContextPath()%>/userAction/reg"
method="post">
<input type="hidden" name="to" value="reg"/>
<input type="hidden" name="did" value="0"/>
<ul class="reg_form" id="reg-ul">
<div id="userCue" class="cue">快速注册请注意格式</div>
<li>
<label for="user" class="input-tips2">用户名：</label>
<div class="inputOuter2">
<input type="text" id="user" name="loginId" maxlength="16" class="inputstyle2"/>
</div>
</li>
<li>
<label for="user" class="input-tips2">姓名：</label>
<div class="inputOuter2">
<input type="text" id="name" name="name" maxlength="16" class="inputstyle2"/>
</div>
</li>
<li>
<label for="passwd" class="input-tips2">密码：</label>
<div class="inputOuter2">
<input type="password" id="passwd" name="pwd" maxlength="16" class="inputstyle2"/>
</div>
</li>
<li>
<label for="passwd2" class="input-tips2">确认密码：</label>
<div class="inputOuter2">
<input type="password" id="passwd2" name="" maxlength="16" class="inputstyle2"/>
</div>
</li>
<li>
<label for="cellNumber" class="input-tips2">手机号：</label>
<div class="inputOuter2">
<input type="text" id="cellNumber" name="cellNumber" maxlength="18" class="inputstyle2"/>
</div>
</li>
<li>
<label for="sex" class="input-tips2">性别：</label>
<div class="inputOuter2">
<input type="text" id="sex" name="sex" maxlength="18" class="inputstyle2"/>
</div>
</li>
<li>
<label for="age" class="input-tips2">年龄：</label>
<div class="inputOuter2">
<input type="age" id="age" name="age" maxlength="18" class="inputstyle2"/>
</div>
</li>
<li>
<div class="inputArea">
<input type="button" id="reg" style="margin-top:10px;margin-left:85px;" class="button_blue"
value="同意协议并注册"/> <a href="#" class="zcxy" target="_blank">注册协议</a>
</div>
</li>
<div class="cl"></div>
</ul>
</form>
</div>
</div>
<!--注册end-->
</div>
<div class="jianyi">*推荐使用ie8或以上版本ie浏览器或Chrome内核浏览器访问本站</div>
</body>
</html>
上面的网页代码中的东西，我们也可以不求甚解，只要会调用就行。调用地址是在我们的form表单的action那里填写我们的服务器地址。这里我们甚至可以做前后端分离，用纯粹的html+js来调用Api接口实现前后端分离。
action="<%=request.getContextPath()%>/userAction/reg" method="post"
<%=request.getContextPath()%> 这是指向我们应用的根路径
mothod是说明我们请求的方式，我们这里才用了post，至于其他的方法就不一一介绍了，详细信息请百度查找“ http请求 ”
form表单中，每个input的name我们需要和后端的接口那边的字段对应。
当我们的字段对应后，spring可以自动把请求的内容转换为适应的对象。
小提示：我们可以直接debug我们的程序，只要取消断点程序就可以顺序执行，加入断点只要程序流转到那里，他就会自动调试。
当然，我们的jsp写完后，我们需要给我们的表单请求那里指定请求路径。由于上面我已经指定了路径，所以我们需要在对应的路径创建请求的接口（实际开发中都是先写好请求接口，再让程序调用。由于我这里是提前写好的，所以这里我们得照着路径写代码）。
我们在Controller目录下创建一个UserController类，代码内容如下：
package cn.acheng1314.mvc.controller;
import cn.acheng1314.domain.ResponseObj;
import cn.acheng1314.domain.User;
import cn.acheng1314.exception.*;
import cn.acheng1314.service.serviceImpl.UserServiceImpl;
import cn.acheng1314.utils.GsonUtils;
import cn.acheng1314.utils.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
/**
* 用户请求相关控制器
* <br/>Created by acheng on 2016/9/26.
*/
@Controller
@RequestMapping("/userAction")
public class UserController {
@Autowired
private UserServiceImpl userService; //自动载入Service对象
private ResponseObj responseObj; //bean对象
/**
* 为什么返回值是一个ModelAndView，ModelAndView代表一个web页面<br/>
* setViewName是设置一个jsp页面的名称
* @param req http请求
* @param user 发起请求后，spring接收到请求，然后封装的bean数据
* @return 返回一个web页面
* @throws Exception
*/
@RequestMapping(value = "/reg", method = RequestMethod.POST)
public ModelAndView reg(HttpServletRequest req, User user) throws Exception {
ModelAndView mav = new ModelAndView(); //创建一个jsp页面对象
mav.setViewName("home"); //设置JSP文件名
if (null == user) {
mav.addObject("message", "用户信息不能为空！"); //加入提示信息，在jsp中我们直接使用${对象名称}就能获取对应的内容
return mav; //返回页面
}
if (StringUtils.isEmpty(user.getName()) || StringUtils.isEmpty(user.getPwd())) {
mav.addObject("message", "用户名或密码不能为空！");
return mav;
}
if (null != userService.findUser(user)) {
mav.addObject("message", "用户已经存在！");
return mav;
}
try {
userService.add(user);
} catch (Exception e) {
e.printStackTrace();
mav.addObject("message", "错误：用户其他信息错误");
return mav;
}
mav.addObject("code", 110);
mav.addObject("message", "恭喜。注册成功");
req.getSession().setAttribute("user", user);
return mav;
}
/**
* 登录接口
* @param req
* @param user
* @return
*/
@RequestMapping(value = "/login", method = RequestMethod.POST, produces = {
"application/json; charset=utf-8"})
@ResponseBody
public ModelAndView login(HttpServletRequest req, User user) {
ModelAndView mav = new ModelAndView("home");
String result;
if (null == user) {
responseObj = new ResponseObj<User>();
responseObj.setCode(ResponseObj.EMPUTY);
responseObj.setMsg("登录信息不能为空");
result = GsonUtils.gson.toJson(responseObj); //转换的json数据
mav.addObject("result", result);
return mav; //返回页面
}
if (StringUtils.isEmpty(user.getLoginId()) || StringUtils.isEmpty(user.getPwd())) {
responseObj = new ResponseObj<User>();
responseObj.setCode(ResponseObj.FAILED);
responseObj.setMsg("用户名或密码不能为空");
result = GsonUtils.gson.toJson(responseObj);
mav.addObject("result", result);
return mav;
}
//查找用户
User user1 = userService.findUser(user);
if (null == user1) {
responseObj = new ResponseObj<User>();
responseObj.setCode(ResponseObj.EMPUTY);
responseObj.setMsg("未找到该用户");
result = GsonUtils.gson.toJson(responseObj);
} else {
if (user.getPwd().equals(user1.getPwd())) {
responseObj = new ResponseObj<User>();
responseObj.setCode(ResponseObj.OK);
responseObj.setMsg(ResponseObj.OK_STR);
result = GsonUtils.gson.toJson(responseObj);
} else {
responseObj = new ResponseObj<User>();
responseObj.setCode(ResponseObj.FAILED);
responseObj.setMsg("用户密码错误");
result = GsonUtils.gson.toJson(responseObj);
}
}
mav.addObject("result", result);
return mav;
}
}
当然很多数据效验我们不能只在后端做，我们需要将数据检查的粒度细化。
不但要在后端做，而且我们的前端页面也要做的，比如说手机号、邮箱帐号、用户名规则等等，用的最多的也就是web页面上面拿到数据用js来判断，使用正则表达式来判断是否符合标准。
具体的js我也就不写了，因为我也不是很了解JS，只能对着别人写的自己来做修改==
蘑菇头-好伤心
好的，我们现在已经把东西都弄完了，debug开启程序，然后加入断点调试。运行结果如下：
ssm应用三-注册页面和调试
这样我们现在能拿到对应的数据，并且在Controller中加入了数据校验。同时，我们的web页面中也加入了js验证。
现在我们的注册页面也可以了，功能也有了。既然如此，我们应该接着把登录页面做成功，但是我们已经有了这个的思路，那么剩下的只需要依样画瓢就能完成。
具体的东西，都已经在后面的代码中贴出来了。详情请看github：
项目地址：点击访问github
总结：
- URL生成
- 注册登录完成
- 简单的前端验证（在代码包中可以看到）
- form表单提交
- http请求
- 功能模块分析
- 流程图（使用xmind制作）
下期预告：完整的后台主页，前端使用json数据，列表数据分页。
