未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏
[手把手教程][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页面能进行基本的数据效验 服务器能存储用户的注册信息 注册动作完成后,返回提示页面。

一般的,我们在开发中,有了大概样子的功能模块,我们需要整理一下业务流程和程序执行流程(在企业开发中,有项目经理的话,一般这些都是他们整理出来的,我们只需要开发实现就行。)经过一番挠头,大概的流程图如下所示:


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

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文件中填写对应的代码就行了。

好的,基本的东西我们都说了,那么我们先去百度找一个登录界面(一定要能看,不能那啥太直接的粗糙的东西,毕竟我们都是有品位的人)。如下图:


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

ssm应用三-登录注册页面

上面的图中样子还不错的样子,同时他们还是同一个页面,这下就很nice了,又可以少写一个界面了。

按照前面两期我们的东西综合起来,我们需要先 把CSS、JS、图片等东西,扔到我们的静态目录中 。如下图所示:


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

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,只能对着别人写的自己来做修改==


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

蘑菇头-好伤心

好的,我们现在已经把东西都弄完了,debug开启程序,然后加入断点调试。运行结果如下:


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

ssm应用三-注册页面和调试

这样我们现在能拿到对应的数据,并且在Controller中加入了数据校验。同时,我们的web页面中也加入了js验证。

现在我们的注册页面也可以了,功能也有了。既然如此,我们应该接着把登录页面做成功,但是我们已经有了这个的思路,那么剩下的只需要依样画瓢就能完成。

具体的东西,都已经在后面的代码中贴出来了。详情请看github:

项目地址: 点击访问github

总结:

URL生成 注册登录完成 简单的前端验证(在代码包中可以看到) form表单提交 http请求 功能模块分析 流程图(使用xmind制作)

下期预告:完整的后台主页,前端使用json数据,列表数据分页。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: Java服务器数据HTML浏览器JSPChromeCSSTomcatSpring
分页:12
转载请注明
本文标题:[手把手教程][JavaWeb]优雅的SSM应用(三)
本站链接:http://www.codesec.net/view/480355.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(50)