电子商城会员注册登录模块的设计与实现

四川工商学院

二○一七年六月

电子商城会员注册登录模块的设计与实现

内容摘要：注册登录模块几乎是每一个web程序必须拥有的功能，虽然注册和录模块并不复杂，但却拥有一个完整系统的必要功能，如验证客户端输入、数据库访问等。本文阐述了电子商城的会员注册登录模块的开发，内容包括模块的需求分析，概要设计，详细设计和实现，此模块基于Spring、Spring MVC和Mybatis框架开发，功能、性能、安全性、模块架构都比较成熟，本文详细介绍了数据库的设计，框架的搭建过程以及登录注册模块的开发过程，有较强的可读性、实用性和参考性。

关键字：商城 注册登录JSP 框架

电子商城会员注册登录模块的设计与实现

1 会员注册登录模块描述

注册、登录是一个网站的门户，它的设计姿态就是对待客人的态度。虽然用户可能每次都只花极少的时间在注册、登录页面互动，但是这个“瞬间”却举足轻重，用户与注册、登录之间的交互关系是承上启下的一个节点。注册、登录所有的细节影响了能否完成产品战略定位所设定的最基本任务去吸纳其所希望的用户的使命。

1.1 会员注册登录模块在电子商城购物中的作用

会员注册、登录是电子商城必备的模块和功能,作为电子商务网站，会员量是网站运营的保障，网站的很多功能都需要会员才能使用，另外，电子商务网站严格要求系统的安全性，这就需要会员在注册的时候填写详细的个人信息。因此，设计出可靠易用的注册登录功能在电商网站中尤为重要。

1.2 开发工具和技术

1.2.1技术方案选择

电子商务网站是一种B/S结构的系统，系统开发采用Java语言，为了系统开发安全、快捷、高效，系统采用经典的MVC开发模式，并且使用开源框架Spring，Spring MVC，Mybatis开源框架，本模块也遵循系统开发要求的技术。

1.2.2 开发工具

Eclipse、SQLyog、Mysql、Dreamweaver

1.2.3 开发技术

JSP技术、数据库连接池、html+css、JQuery

2 会员注册登录模块分析

2.1 功能需求分析

2.1.1 功能分析

①用户访问网站首页，点击登录，跳转到登录页面，登录页面要求用户输入用户名，密码，以及验证码，点击登录，跳转至网站首页。

②若用户未注册会员，在网站首页以及会员登录页面提供会员注册入口，用户点击会员注册，跳转到会员注册页面，用户提交注册表单，跳转至登录页面。

③会员注册表单需要实时验证用户输入数据合法性。

2.1.2 用例模型

图2.1.2 会员注册登录模块用例图

2.2 数据需求分析

本模块实体为用户，主要属性为用户名、密码、姓名、证件类型、证件号码、邮箱、电话、收货地址，以下是本模块实体属性图：

图2.2-1 会员注册登录模块实体-属性图

2.3 其它需求分析

2.3.1技术需求

用户注册页面数据采用JQuery Validator实时验证，用户注册表单提交数据用Mysql数据库存储，用户登录采用session技术存储。

2.3.2 性能需求

从实用、好用的角度出发开发电子商城会员注册模块，在设计过程中主要考虑以下原则：

(1) 可操作性

系统模块应尽量减少用户的数据录入量，避免许多录入异常现象的发生。数据输入的格式应符合业务习惯，并且直观、方便。要求系统处理的数据能准确无误，同时输出信息要求直观、简洁。

(2) 可靠性

系统模块运行具有较高的可靠性，提供严格的并发控制，确保数据的一致性和正确性。

(3) 实用性

从用户的实际需要出发进行系统模块开发，不盲目追求高新技术的应用。

(4) 安全性

系统模块安全措施可靠、高效、可维护性好，有权限控制，其中口令录入界面便于系统识别登录用户。

(5) 可维护性

为了保证系统模块的可维护性，要求具有详细的文档资料，同时，要求系统在功能设计上考虑可扩展性，以满足业务变动的需求。

(6) 可移植性

系统模块开发完成后，要能运行于任何由Windows操作系统所构成的计算机网络环境下。

2.4 流程分析

主要的流程：

图2.4-1 会员登录流程图

图2.4-2 会员注册流程图

3 会员注册登录模块设计

3.1 数据库设计

3.1.1 表结构和约束设计

user_reginfo表

3.2 会员登录注册模块设计

3.2.1功能总体结构设计

图3.2.1-1 会员注册登录模块功能结构图

3.2.2 模块详细设计

登录模块：用户输入用户名，密码及验证码，点击登录按钮，系统后台判断用户输入数据与数据库数据是否匹配，若匹配，则登录成功，跳转至系统首页，若匹配失败，则重新跳转至登录界面。

注册模块：用户填写注册表单，表单通过JQuery validator实时验证数据输入的合法性，用户输入完成，点击注册按钮，提交表单，后台自动添加数据到数据库。

3.3界面设计

3.3.1 登录界面设计

图3.3.1-1 会员登录界面设计

3.3.2 注册界面设计

图3.3.2-1 会员注册界面设计

3.4 类设计

3.4.1 实体类设计

User实体类设计及主要属性

3.4.2 持久层设计

持久层接口设计：

接口IUserDao有两个方法，addUser（）方法将用户注册数据保存到数据库中，findPassword（）方法用于用户登录模块从数据库查询已知用户名的密码。

3.4.3 业务层设计：

业务层接口设计：

接口IUserService有两个方法，addUser方法将用户注册数据保存到数据库中，findPassword（）方法用于用户登录模块从数据库查询已知用户名的密码。

4 用户注册登录模块实现

4.1 开发环境配置

为了提高开发的效率，本模块使用eclipse集成环境进行开发。另外需安装Jdk 1.8，mysql数据库，Tomcat服务器。

4.2 创建数据库和数据表

4.3 创建软件架构

4.3.1 创建项目及系统文件目录

src 目录存放源程序

build 目录存放应用编译的文件

WEB-INF目录存放web应用配置文件

lib目录存放项目引用的相关Jar包

图4.3.1-1 项目文件目录结构

4.3.2 创建Java 类的包结构

缺省src：存放Spring、Spring MVC配置文件和日志支持配置文件

entity：存放实体类的对象。

dao：持久层相关接口及Mybatis实体映射文件。

dao.impl：存放持久层实现类相关类文件。

service：业务层相关接口。

service.impl：存放业务层实现类相关类文件。

control：存放相关action类文件。

util：存放应用的工具类。

图4.3.2-1 项目模块包结构

4.3.3 导入所需要的包

图4.3.3-1 项目模块相关jar包

4.3.4搭建项目模块框架

Spring配置文件：

xmlversion="1.0"encoding="UTF-8"?>

<beansxmlns="http://www.springframework.org/schema/beans"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns:p="http://www.springframework.org/schema/p"

xmlns:context="http://www.springframework.org/schema/context"

xmlns:aop="http://www.springframework.org/schema/aop"

xmlns:tx="http://www.springframework.org/schema/tx"

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans.xsd

http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context.xsd

http://www.springframework.org/schema/aop

http://www.springframework.org/schema/aop/spring-aop.xsd

http://www.springframework.org/schema/tx

http://www.springframework.org/schema/tx/spring-tx.xsd">

<beanid="dataSource"

class="org.springframework.jdbc.datasource.DriverManagerDataSource">

<propertyname="driverClassName"value="com.mysql.jdbc.Driver"/>

<propertyname="url"value="jdbc:mysql://localhost:3306/myuserinfo"/>

<propertyname="username"value="root"/>

<propertyname="password"value="root"/>

bean>

<beanid="sqlSessionFactory"class="org.mybatis.spring.SqlSessionFactoryBean">

<propertyname="dataSource"ref="dataSource">property>

<propertyname="typeAliasesPackage"value="entity"/>

bean>

<beanid="sqlSessionTemplate"class="org.mybatis.spring.SqlSessionTemplate">

<constructor-argref="sqlSessionFactory"/>

bean>

<beanclass="org.mybatis.spring.mapper.MapperScannerConfigurer">

<propertyname="basePackage"value="dao">property>

bean>

<beanid="txManager"

class="org.springframework.jdbc.datasource.DataSourceTransactionManager">

<propertyname="dataSource"ref="dataSource">property>

bean>

<tx:annotation-driventransaction-manager="txManager"/>

beans>

Spring MVC配置文件：

xmlversion="1.0"encoding="UTF-8"?>

<beansxmlns="http://www.springframework.org/schema/beans"

xmlns:p="http://www.springframework.org/schema/p"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns:mvc="http://www.springframework.org/schema/mvc"

xmlns:context="http://www.springframework.org/schema/context"

xsi:schemaLocation="http://www.springframework.org/schema/mvc

http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd

http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans-3.0.xsd

http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context.xsd">

<context:component-scanbase-package="dao">context:component-scan>

<context:component-scanbase-package="service">context:component-scan>

<context:component-scanbase-package="control"/>

<mvc:annotation-driven/>

<mvc:resourcesmapping="/images/**"location="/images/"/>

<mvc:resourcesmapping="/js/**"location="/js/"/>

<mvc:resourcesmapping="/css/**"location="/css/"/>

<mvc:resourcesmapping="/html/**"location="/html/"/>

<mvc:resourceslocation="/SpryAssets/"mapping="/SpryAssets/**"/>

<beanid="viewResolver"

class="org.springframework.web.servlet.view.InternalResourceViewResolver">

<propertyname="prefix"value="/"/>

<propertyname="suffix"value=".jsp"/>

bean>

beans>

web.xml文件：

xmlversion="1.0"encoding="UTF-8"?>

<web-appxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"id="WebApp_ID"version="3.0">

<display-name>userLogdisplay-name>

<welcome-file-list>

<welcome-file>index.htmlwelcome-file>

<welcome-file>index.htmwelcome-file>

<welcome-file>index.jspwelcome-file>

<welcome-file>default.htmlwelcome-file>

<welcome-file>default.htmwelcome-file>

<welcome-file>default.jspwelcome-file>

welcome-file-list>

<context-param>

<param-name>contextConfigLocationparam-name>

<param-value>

/WEB-INF/classes/applicationContext.xml

param-value>

context-param>

<listener>

<listener-class>

org.springframework.web.context.ContextLoaderListener

listener-class>

listener>

<servlet>

<servlet-name>springMVCservlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>

<init-param>

<param-name>contextConfigLocationparam-name>

<param-value>classpath:spring-mvc.xmlparam-value>

init-param>

<load-on-startup>1load-on-startup>

servlet>

<servlet-mapping>

<servlet-name>springMVCservlet-name>

<url-pattern>/url-pattern>

servlet-mapping>

<listener>

<listener-class>org.springframework.web.util.IntrospectorCleanupListenerlistener-class>

listener>

<filter>

<filter-name>encodingFilterfilter-name>

<filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>

<init-param>

<param-name>encodingparam-name>

<param-value>UTF-8param-value>

init-param>

<init-param>

<param-name>forceEncodingparam-name>

<param-value>trueparam-value>

init-param>

filter>

<filter-mapping>

<filter-name>encodingFilterfilter-name>

<url-pattern>/*url-pattern>

filter-mapping>

<error-page>

<error-code>404error-code>

<location>/html/404.htmllocation>

error-page>

<error-page>

<error-code>500error-code>

<location>/html/500.htmllocation>

error-page>

web-app>

4.4 实现会员注册登录模块

4.4.1 持久层实现

持久层Mybatis映射文件：

xmlversion="1.0"encoding="UTF-8"?>

DOCTYPEmapperPUBLIC"-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mappernamespace="dao.IUserDao">

<selectid="findPassword"parameterType="java.lang.String"resultType="java.lang.String">

select password from user_reginfo where username =#{username}

select>

<insertid="addUser"parameterType="entity.User">

insert into user_reginfo(id,username,password,qrpassword,uname,cardtype,cardnum,useremail,userphone,useraddress) values (#{id},#{username},#{password},#{qrpassword},#{uname},#{cardtype},#{cardnum},#{useremail},#{userphone},#{useraddress})

insert>

mapper>

持久层实现类：

package dao.impl;

import org.springframework.stereotype.Repository;

import dao.IUserDao;

import entity.User;

@Repository("userDao")

public class UserDaoImpl extends BaseDaoSurport implements IUserDao {

@Override

public int addUser(User user) {

// TODO Auto-generated method stub

return this.getSqlSession().insert("addUser", user);

}

@Override

public String findPassword(String username) {

// TODO Auto-generated method stub

return this.getSqlSession().selectOne("findPassword", username);

}

}

4.4.2 业务层实现

package service.impl;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import dao.IUserDao;

import entity.User;

import service.IUserService;

@Service("userService")

public class UserServiceImpl implements IUserService {

@Resource(name="userDao")

private IUserDao userdao;//依赖注入当前字段

public void setUserdao(IUserDao userdao) {//注入属性

this.userdao = userdao;

}

@Override

public int addUser(User user) {

// TODO Auto-generated method stub

return userdao.addUser(user);

}

@Override

public String findPassword(String username) {

// TODO Auto-generated method stub

return userdao.findPassword(username);

}

}

4.4.3 控制层实现

package control;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import entity.User;

import service.IUserService;

@Controller

public class MyHandler {

@Resource(name="userService")

private IUserService userservice;

public void setUserservice(IUserService userservice) {

this.userservice = userservice;

}

@RequestMapping(value="/registering")

Public String reg(@RequestParam("username") String username,@RequestParam("password") String password,

@RequestParam("qrpassword") String qrpassword,@RequestParam("uname") String uname,

@RequestParam("cardtype") String cardtype,@RequestParam("cardnum") String cardnum,

@RequestParam("useremail") String useremail,@RequestParam("userphone") String userphone,

@RequestParam("useraddress") String useraddress,@RequestParam("radio") String radio){

if(radio.equals("yesread")){

User user=new User();

user.setId(null);

user.setUsername(username);

user.setPassword(password);

user.setQrpassword(qrpassword);

user.setUname(uname);

user.setCardtype(cardtype);

user.setCardnum(cardnum);

user.setUseremail(useremail);

user.setUserphone(userphone);

user.setUseraddress(useraddress);

int i=userservice.addUser(user);

if(i==1){

return "/registersuc";

}

//return "/register";

}

return "/register";

}

@RequestMapping(value="/logining")

public String login(@RequestParam("username") String username,@RequestParam("password") String password,@RequestParam("yzm") String yzm) {

if(yzm.equals("dtef")||yzm.equals("DTEF")){

//String ss=userservice.findPassword(username);

//Boolean sss=password.equals(ss);

if(password.equals(userservice.findPassword(username))){

return "/loginsuc";

}

}

return "/index";

}

}

4.4.4 视图层实现

会员登录页面index.jsp：

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

DOCTYPEhtmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>登录页面title>

<linkhref="css/login.css"rel="stylesheet"rev="stylesheet"type="text/css"media="all"/>

<linkhref="css/demo.css"rel="stylesheet"rev="stylesheet"type="text/css"media="all"/>

<scripttype="text/javascript"src="js/jquery1.42.min.js">script>

<scripttype="text/javascript"src="js/jquery.SuperSlide.js">script>

<scripttype="text/javascript"src="js/Validform_v5.3.2_min.js">script>

<script>

$(function(){

$(".i-text").focus(function(){

$(this).addClass('h-light');

});

$(".i-text").focusout(function(){

$(this).removeClass('h-light');

});

$("#username").focus(function(){

var username = $(this).val();

if(username=='输入用户名'){

$(this).val('');

}

});

$("#username").focusout(function(){

var username = $(this).val();

if(username==''){

$(this).val('输入用户名');

}

});

$("#yzm").focus(function(){

var username = $(this).val();

if(username=='输入验证码'){

$(this).val('');

}

});

$("#yzm").focusout(function(){

var username = $(this).val();

if(username==''){

$(this).val('输入验证码');

}

});

});

script>

head>

<body>

<divclass="header">

<h1class="headerLogo"><atitle="贵美商城"target="_blank"href="loginsuc.jsp"><imgalt="logo"src="images/xx.jpg">a>h1>

<divclass="headerNav">

<atarget="_blank"href="#"><imgsrc="images/adv.jpg"/><fontsize="+1">"登陆页面"改进建议font>a>

div>

div>

<divclass="banner">

<divclass="login-aside">

<divid="o-box-up">div>

<divid="o-box-down"style="table-layout:fixed;">

<divclass="error-box">div>

<formclass="registerform"action="logining"method="post">

<divclass="fm-item">

<labelfor="logonId"class="form-label">用户名：label>

<inputtype="text"value="输入用户名"maxlength="100"name="username"id="username"class="i-text"datatype="s6-18"errormsg="用户名至少6个字符,最多18个字符！">

<divclass="ui-form-explain">div>

div>

<divclass="fm-item">

<labelfor="logonId"class="form-label">密&nbsp; 码：label>

<inputtype="password"value=""maxlength="100"name="password"id="password"class="i-text"datatype="*6-16"nullmsg="请设置密码！"errormsg="密码范围在6~16位之间！">

<divclass="ui-form-explain">div>

div>

<divclass="fm-item pos-r">

<labelfor="logonId"class="form-label">验证码label>

<inputtype="text"value="输入验证码"maxlength="100"name="yzm"id="yzm"class="i-text yzm"nullmsg="请输入验证码！">

<divclass="ui-form-explain"><imgsrc="images/yzm.jpg"class="yzm-img"/>div>

div>

<divclass="fm-item">

<labelfor="logonId"class="form-label">label>

<inputtype="submit"value=""tabindex="4"id="send-btn"class="btn-login">

<div>

<divclass="ui-form-explain">

<ahref="#">忘记密码？a>  

<ahref="register.jsp">免费注册a>

div>

div>

div>

form>

div>

div>

<divclass="bd">

<ul>

<listyle="background:url(images/bkg1.jpg) #CCE1F3 center 0 no-repeat;"><atarget="_blank"href="#">a>li>

<listyle="background:url(images/bkg2.jpg) #BCE0FF center 0 no-repeat;"><atarget="_blank"href="#">a>li>

ul>

div>

<divclass="hd"><ul>ul>div>

div>

<scripttype="text/javascript">jQuery(".banner").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"fold", autoPlay:true, autoPage:true, trigger:"click" });script>

<divclass="banner-shadow">div>

<divclass="footer">

<p>Copyright © 2017.Company name All rights reserved.贵美商城p>

div>

body>

html>

会员注册页面register.jsp：

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

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>用户注册title>

<linkhref="css/register.css"rel="stylesheet"rev="stylesheet"type="text/css"media="all"/>

<linkhref="css/demo.css"rel="stylesheet"rev="stylesheet"type="text/css"media="all"/>

<linkhref="SpryAssets/SpryValidationTextField.css"rev="stylesheet"rel="stylesheet"type="text/css"media="all"/>

<linkhref="SpryAssets/SpryValidationPassword.css"rev="stylesheet"rel="stylesheet"type="text/css"media="all"/>

<linkhref="SpryAssets/SpryValidationConfirm.css"rev="stylesheet"rel="stylesheet"type="text/css"media="all"/>

<scripttype="text/javascript"src="js/jquery1.42.min.js">script>

<scripttype="text/javascript"src="js/jquery.SuperSlide.js">script>

<scripttype="text/javascript"src="js/Validform_v5.3.2_min.js">script>

<scriptsrc="SpryAssets/SpryValidationTextField.js"type="text/javascript">script>

<scriptsrc="SpryAssets/SpryValidationPassword.js"type="text/javascript">script>

<scriptsrc="SpryAssets/SpryValidationConfirm.js"type="text/javascript">script>

<script>

$(function(){

$("#username").focus(function(){

var username = $(this).val();

if(username=='用户名设置成功后不可修改'){

$(this).val('');

}

});

$("#username").focusout(function(){

var username = $(this).val();

if(username==''){

$(this).val('用户名设置成功后不可修改');

}

});

$("#uname").focus(function(){

var username = $(this).val();

if(username=='请输入姓名'){

$(this).val('');

}

});

$("#uname").focusout(function(){

var username = $(this).val();

if(username==''){

$(this).val('请输入姓名');

}

});

$("#cardnum").focus(function(){

var username = $(this).val();

if(username=='请输入证件号码'){

$(this).val('');

}

});

$("#cardnum").focusout(function(){

var username = $(this).val();

if(username==''){

$(this).val('请输入证件号码');

}

});

$("#useremail").focus(function(){

var username = $(this).val();

if(username=='请正确输入电子邮箱'){

$(this).val('');

}

});

$("#useremail").focusout(function(){

var username = $(this).val();

if(username==''){

$(this).val('请正确输入电子邮箱');

}

});

$("#userphone").focus(function(){

var username = $(this).val();

if(username=='请输入电话号码'){

$(this).val('');

}

});

$("#userphone").focusout(function(){

var username = $(this).val();

if(username==''){

$(this).val('请输入电话号码');

}

});

$("#useraddress").focus(function(){

var username = $(this).val();

if(username=='请输入收货地址'){

$(this).val('');

}

});

$("#useraddress").focusout(function(){

var username = $(this).val();

if(username==''){

$(this).val('请输入收货地址');

}

});

});

script>

head>

<body>

<divclass="header">

<h1class="headerLogo"><atitle="贵美商城"target="_blank"href="loginsuc.jsp/"><imgalt="logo"src="images/xx.jpg">a>h1>

div><hrsize="3"/>

<divclass="nov">

<divclass="novtext">

<font>您现在的位置：首页 > 用户注册font>

div>

div>

<divclass="reg">

<tableheight="550"width="800"border="1"style="margin-left:0px; margin-top:10px; border-color:#00F">

<tr>

<tdheight="30"bgcolor="#FFCC99"><h3>用户信息h3>td>

tr>

<tr>

<td><formaction="registering"method="post"><tableclass="regtable"width="580"border="1"style="margin-left:180px; margin-top:20px;"height="300">

<tr>

<tdwidth="10"><fontcolor="#FF0000">*font>用 户 名：td>

<td><spanid="sprytextfield1">

<inputid="username"name="username"type="text"value="用户名设置成功后不可修改"size="30"maxlength="35"/>

<spanclass="textfieldRequiredMsg">请输入用户名！span><spanclass="textfieldMinCharsMsg">用户名长度必须为6-18位span><spanclass="textfieldMaxCharsMsg">用户名长度不能大于18位span>span>td>

tr>

<tr>

<td><fontcolor="#FF0000">*font>密    码：td>

<td><spanid="sprypassword1">

<inputid="password"name="password"type="password"size="30"maxlength="35"/>

<spanclass="passwordRequiredMsg">请输入密码！span><spanclass="passwordMinCharsMsg">密码长度必须为6-16位span><spanclass="passwordMaxCharsMsg">密码长度不能大于16位span><spanclass="passwordInvalidStrengthMsg">密码必须包含字母和数字span>span>td>

tr>

<tr>

<td><fontcolor="#FF0000">*font>确认密码：td>

<td><spanid="spryconfirm1">

<inputid=qrpasswordname="qrpassword"type="password"size="30"maxlength="35"/>

<spanclass="confirmRequiredMsg">请确认密码span><spanclass="confirmInvalidMsg">确认密码输入与密码不匹配。span>span>td>

tr>

<tr>

<td><fontcolor="#FF0000">*font>姓    名：td>

<td><spanid="sprytextfield2">

<inputname="uname"id="uname"type="text"size="30"maxlength="35"value="请输入姓名"/>

<spanclass="textfieldRequiredMsg">请输入姓名！span><spanclass="textfieldMinCharsMsg">请输入姓名！span>span>td>

tr>

<tr>

<td><fontcolor="#FF0000">*font>证件类型：td>

<td><selectname="cardtype"id="cardType"style="width:244px;"><optionvalue="A">二代身份证

option>

<optionvalue="B">港澳通行证

option>

<optionvalue="C">台湾通行证

option>

<optionvalue="D">护照

option>

select>td>

tr>

<tr>

<td><fontcolor="#FF0000">*font>证件号码：td>

<td><spanid="sprytextfield3">

<inputname="cardnum"id="cardnum"type="text"size="30"maxlength="35"value="请输入证件号码"/>

<spanclass="textfieldRequiredMsg">请输入证件号码

<h1>h1>

span><spanclass="textfieldMinCharsMsg">省份证必须为15位或18位span><spanclass="textfieldMaxCharsMsg">省份证必须为15位或18位span>span>td>

tr>

<tr>

<td><fontcolor="#FF0000">*font>邮    箱：td>

<td><spanid="sprytextfield4">

<inputname="useremail"id="useremail"type="text"size="30"maxlength="35"value="请正确输入电子邮箱"/>

<spanclass="textfieldRequiredMsg">请正确输入电子邮箱！span><spanclass="textfieldInvalidFormatMsg">邮箱格式错误span>span>td>

tr>

<tr>

<td><fontcolor="#FF0000">*font>电话号码：td>

<td><spanid="sprytextfield5">

<inputname="userphone"id="userphone"type="text"size="30"maxlength="35"value="请输入电话号码"/>

<spanclass="textfieldRequiredMsg">请输入电话号码<h1>h1>span><spanclass="textfieldMinCharsMsg">电话号码格式错误span><spanclass="textfieldMaxCharsMsg">电话号码格式错误span>span>td>

tr>

<tr>

<td><fontcolor="#FF0000">*font>收货地址：td>

<td><spanid="sprytextfield6">

<inputname="useraddress"id="useraddress"type="text"size="30"maxlength="35"value="请输入收货地址"/>

<spanclass="textfieldRequiredMsg">请输入收货地址span><spanclass="textfieldMinCharsMsg">请输入收货地址span><spanclass="textfieldMaxCharsMsg">地址格式错误span>span>td>

tr>

<tr>

<tdcolspan="2">      <inputtype="radio"name="radio"id="radio"value="yesread"/><font>我已阅读并遵守font><ahref="#">《贵美商城注册协议》a>td>

tr>

<tr>

<tdcolspan="2">     &nbsp;           <inputtype="submit"name="zhuce"value="确认注册"style="border-color:#FFCC99; background-color:#FFCC99;"/>td>

tr>

table>

form>

td>

tr>

table>

div>

<hrsize="3"/><br/>

<divclass="footer">

<p>Copyright © 2017.Company name All rights reserved.贵美商城p>

div>

<scripttype="text/javascript">

var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur"], minChars:6, maxChars:18});

var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1", {minChars:6, maxChars:16, minAlphaChars:1, minNumbers:1, validateOn:["blur"]});

var spryconfirm1 = new Spry.Widget.ValidationConfirm("spryconfirm1", "password", {validateOn:["blur"]});

var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {validateOn:["blur"], minChars:1});

var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "none", {validateOn:["blur"], minChars:15, maxChars:18});

var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "email", {validateOn:["blur"]});

var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "none", {validateOn:["blur"], minChars:7, maxChars:11});

var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6", "none", {validateOn:["blur"], minChars:1, maxChars:30});

script>

body>

html>

5 测试

5.1 会员登录测试

输入用户名、密码和验证码，点击登录，成功跳转到系统首页：

5.2 会员注册测试

填写注册表单，点击确认注册，成功注册了用户：

结论：经测试，用户注册登录模块得到了很好的实现，但任然有一些不完美的地方，例如系统的高并发没有解决，后续我们将进行系统的性能调优，数据的存储也可找更好的解决方案。

6 总结

6.1 程序设计总结

这个项目基本上实现了系统的需求，但仍存在着其它的问题。

界面方面：整个系统的整体风格大致统一，但还有很大的改进空间。

性能方面：系统模块性能还可得到优化，例如数据存储的优化，高并发的优化等。

测试方面：测试还不够全面。

安全方面：数据的安全性有待进一步优化。

6.2 个人总结

本次项目模块的开发，我参与了项目模块的需求分析，架构，和集成，主要负责此项目模块的设计与开发，测试及文档编写，在开发过程中，遇到了很多挑战，例如SSM框架的整合等，但在老师的指导以及自己的学习中，一一解决了这些难题，我很高兴我从此次项目开发中学到了很多新的知识，积累了经验，提高了我的软件设计和开发能力。此次项目虽然主要功能都得以实现，但项目还有很多不足之处，希望自己能巩固知识，不断学习新技术，争取尽快解决这些问题。

参考文献

[1]刘志成，JSP程序设计实例教程（第2版），人民邮电出版社，2015.4 ，P27-38，P41，P160-170

[2]冯燕奎, 赵德奎. JSP实用案例教程[M] 清华大学出版社, 2004.

[3]林信良 spring2.0技术手册[M]电子工业出版社,2006年6月

[4]孙鑫编著．Java Web开发详解［M］．电子工业出版社，2006

[5]李贤华，基于JSP技术的大型网上购物系统的设计与实现[J]. 计算机与现代化. 2008

本文来源：https://www.2haoxitong.net/k/doc/ee61ab1de97101f69e3143323968011ca300f76f.html