JavaWeb基础(4)：实现简单的注册登录模块

（一）项目框架

练习Servlet使用时，实现一个简单的用户注册登录模块（不考虑SQL注入等问题）
源码地址：https://github.com/mio4/Learn-Java/tree/master/Head First Java Web/BasicDemo5

（1）技术分析

• 前端
  • BootStrap
• 后端
  • JavaWeb：Servlet
  • 数据库：MySQL

（1）项目结构

在命令行下使用tree导出项目的树结构：

│  BasicDemo5.iml
│  
│  
├─.idea
│  │  junitgenerator-prj-settings.xml
│  │  misc.xml
│  │  modules.xml
│  │  workspace.xml
│  │  
│  └─artifacts
│          BasicDemo5_war_exploded.xml
│          
├─out
│  └─artifacts
│      └─BasicDemo5_war_exploded
│          │  index.html
│          │  index.jsp
│          │  login.html
│          │  register.html
│          │  
│          ├─css
│          │      bootstrap.css
│          │      component.css
│          │      demo.css
│          │      normalize_login.css
│          │      normalize_register.css
│          │      
│          ├─Html
│          ├─img
│          │      demo-1-bg.jpg
│          │      login_ico.png
│          │      
│          ├─js
│          │      bootstrap.js
│          │      demo-1.js
│          │      EasePack.min.js
│          │      html5.js
│          │      jquery-1.11.0.js
│          │      jquery-1.8.3.js
│          │      rAF.js
│          │      TweenLite.min.js
│          │      
│          ├─loginReg
│          ├─test
│          └─WEB-INF
│              │  web.xml
│              │  
│              ├─classes
│              │  │  c3p0-config.xml
│              │  │  
│              │  └─com
│              │      └─mio4
│              │          ├─dao
│              │          │      UserDao.class
│              │          │      
│              │          ├─domain
│              │          │      User.class
│              │          │      
│              │          ├─request
│              │          ├─service
│              │          │      UserService.class
│              │          │      
│              │          ├─utils
│              │          │      DataSourceUtils.class
│              │          │      
│              │          └─web
│              │              └─servlet
│              │                      LoginServlet.class
│              │                      msgServlet.class
│              │                      RegisterServlet.class
│              │                      
│              └─lib
│                      c3p0-0.9.1.2.jar
│                      commons-beanutils-1.9.3.jar
│                      commons-dbutils-1.4.jar
│                      commons-logging-1.1.1.jar
│                      mysql-connector-java-5.1.39-bin.jar
│                      
├─src
│  │  c3p0-config.xml
│  │  
│  └─com
│      └─mio4
│          ├─dao
│          │      UserDao.java
│          │      
│          ├─domain
│          │      User.java
│          │      
│          ├─service
│          │      UserService.java
│          │      
│          ├─utils
│          │      DataSourceUtils.java
│          │      
│          └─web
│              └─servlet
│                      LoginServlet.java
│                      msgServlet.java
│                      RegisterServlet.java
│                      
└─web
    │  index.html
    │  index.jsp
    │  login.html
    │  register.html
    │  
    ├─css
    │      bootstrap.css
    │      component.css
    │      demo.css
    │      normalize_login.css
    │      normalize_register.css
    │      
    ├─img
    │      demo-1-bg.jpg
    │      login_ico.png
    │      
    ├─js
    │      bootstrap.js
    │      demo-1.js
    │      EasePack.min.js
    │      html5.js
    │      jquery-1.11.0.js
    │      jquery-1.8.3.js
    │      rAF.js
    │      TweenLite.min.js
    │      
    └─WEB-INF
        │  web.xml
        │  
        ├─classes
        │  │  c3p0-config.xml
        │  │  
        │  └─com
        │      └─mio4
        │          ├─dao
        │          │      UserDao.class
        │          │      
        │          ├─domain
        │          │      User.class
        │          │      
        │          ├─service
        │          │      UserService.class
        │          │      
        │          ├─utils
        │          │      DataSourceUtils.class
        │          │      
        │          └─web
        │              └─servlet
        │                      LoginServlet.class
        │                      msgServlet.class
        │                      RegisterServlet.class
        │                      
        └─lib
                c3p0-0.9.1.2.jar
                commons-beanutils-1.9.3.jar
                commons-dbutils-1.4.jar
                commons-logging-1.1.1.jar
                mysql-connector-java-5.1.39-bin.jar

（二）具体实现

（1）前端

    <body>
        <div class="container">
            <a href="login.html">
                <button type="button" class="btn btn-default pull-left">登录button>
            a>

            <a href="register.html">
                <button type="button" class="btn btn-primary pull-left">注册button>
            a>
        div>
    body>

（2）后端

（0）表示图

（1）Servlet

以注册时为例

• 得到前端传递来的参数，使用BeanUtils工具类进行封装
  • msgServlet：专门用于显示操作是否成功
  • 将参数传递转发给msgServlet

		//0.设置编码
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		//1.封装数据
		User user =new User();
		try {
			BeanUtils.populate(user, request.getParameterMap());
			//2.调用UserService
			int i = new UserService().regist(user);
			//3.判断返回的int值，将结果转发到msgServlet
			if(i == 1){
				request.setAttribute("msg","注册成功");
				request.getRequestDispatcher("/msg").forward(request,response);
			} else{
				request.setAttribute("/msg","注册失败");
				request.getRequestDispatcher("/msg").forward(request,response);
			}
		} catch(Exception e){
			e.printStackTrace();
			throw new RuntimeException("Runtime Exception...");
		}

（2）UserService

• 创建UserDao对象，并且直接返回dao的addUser方法

	public static int regist(User user){
		UserDao dao = new UserDao();
		return dao.addUser(user);
	}

（3）UserDao

• Dao（Data Access Object）：用于实现Java和数据库之间的连接
  • 使用c3p0数据库连接池
  • 更新user表的数据

	/**
	 * 注册用户
	 * @param user 用户
	 * @return 注册是否成功
	 */
	public int addUser(User user){
		QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
		String sql = "insert into user(username,password,email,name,sex,birthday,hobby) values(?,?,?,?,?,?,?)";
		try{
			return qr.update(sql,user.getUsername(),user.getPassword(),user.getEmail(),
					user.getName(),user.getSex(),user.getBirthday(),
					user.getHobby());
		} catch (Exception e){
			e.printStackTrace();
		}
		return 0;
	}

（4）MySQL

• 数据库使用SQLyog动态查看数据是否添加成功

（三）效果

（1）主页

（2）登录界面

（3）注册界面

（4）不足之处

• Demo只是简单的实现了注册和登陆的功能，但是有很多问题并没有考虑和代码实现
  • 预防SQL注入的风险
  • 注册时没有对数据库中的内容进行查重
  • 注册和登陆时没有使用jQuery进行表单校验
• 这些问题将在下一次Demo中补充实现