[手把手教程][JavaWeb] 优雅的 SSM 应用(三)

阅读 1442
收藏 80
2016-11-15
原文链接:www.jianshu.com

[手把手教程][JavaWeb]优雅的SSM应用(三)

文章正式改名为:[手把手教程][JavaWeb]优雅的SSM应用

这几天一直在踩坑,为什么这么说呢,主要是一直自己没找到优雅的方式来实现一些东西。

虽然说前面也做了一些功能模块,但是总感觉不对劲,毕竟也是刚转做后端。

为了方便手机端用户,尽量使用简单的markdown语法和简单的页面结构。

后面朋友给了我一些他们公司同事写的demo,虽然说不上是牛逼的作品,但是确实符合我现在的需要。毕竟人家的实现方式也是经过实战项目演练出来的。

工具

  • 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代码的引用="" --%="">





    仓库管理系统→登录

    
    
    




仓库管理系统登陆注册2016
快速登录 快速注册
帐号:
密码:
    快速注册请注意格式
  • 用户名:
  • 姓名:
  • 密码:
  • 确认密码:
  • 手机号:
  • 性别:
  • 年龄:
  • 注册协议
    *推荐使用ie8或以上版本ie浏览器或Chrome内核浏览器访问本站

    上面的网页代码中的东西,我们也可以不求甚解,只要会调用就行。调用地址是在我们的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;
    
    /**
     * 用户请求相关控制器
     * 
    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页面
    * 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(); 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(); 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(); responseObj.setCode(ResponseObj.EMPUTY); responseObj.setMsg("未找到该用户"); result = GsonUtils.gson.toJson(responseObj); } else { if (user.getPwd().equals(user1.getPwd())) { responseObj = new ResponseObj(); responseObj.setCode(ResponseObj.OK); responseObj.setMsg(ResponseObj.OK_STR); result = GsonUtils.gson.toJson(responseObj); } else { responseObj = new ResponseObj(); 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数据,列表数据分页。

    评论