IntelliJ IDEA14.0.3+Maven+SpringMVC+Spring+Hibernate光速构建Java权限管理系统(三)

注册登录

--利用简单的编写注册登录系统来打通从前端到后台的数据传输路径。

一、建立数据库、基本表

基本环境：mysql5,7、Navicat for MySQL11.0.9企业版。

我们在本地mysql服务器中新建名为work的数据库，然后建立名为user的表，详细如下图所示：

二、hibernate与dao

hibernate是比较成熟的重量级ORM框架，利用它可以大大简化我们对数据库的操作（基本的操作数据库方式就是增删改查）。

在大型项目中我们通常会有个base包来存放最基础的公共类，其中的dao层存放可复用性强的数据库操作，比如对单个实体的增删改查，批量保存，批量删除，分页查询等等。这样，其他功能包中的dao层可以从base包中的dao层进行继承，从而使我们在编程时可以花更多时间在业务逻辑上。

为了照顾编程的规范性，base/dao层中先编写接口，再编写实现类。

这里先给出IBaseDao.java和BaseDaoImpl.java两个文件的代码：

IBaseDao.java

package com.whut.work.base.dao;

import java.sql.SQLException;
import java.util.Collection;
import java.util.List;

import org.hibernate.HibernateException;

import com.whut.work.base.model.Page;
import com.whut.work.base.vo.Parameter;

public interface IBaseDao<T> {

	//单个CRUD
	public void save(final T entity) throws Exception;
	public void delete(final T entity) throws Exception;
     public void deleteWithHql(final String hql) throws Exception;
	public void update(final T entity) throws Exception;
	public T getOne(final int id) throws Exception;

     //批处理
     public int batchSave(final List<T> list) throws Exception;
     public void deleteAll(final Collection entities) throws Exception;

	//createQuery（Query）
	public T findOne(final String hql) throws Exception;
	public T findOne(final String hql, final Parameter parameter) throws Exception;
	
	//list查询
	public List<T> findList(final String hql) throws Exception;
	public List<T> findList(final String hql, final Parameter parameter) throws Exception;
	
	//分页查询
	public Page<T> findPage(final int currentPage, final int pageSize, final String queryHql, final String countHql, final Object[] values)
			throws HibernateException,SQLException;
	public Page<T> findPage(final int currentPage, final int pageSize, final String queryHql, final String countHql)
			throws HibernateException,SQLException;
	
	//查询满足条件的记录数
	public long findCount(final String hql);
	public long findCount(final String hql, final Object[] values);
}

BaseDaoImpl.java

package com.whut.work.base.dao.Impl;

import java.sql.SQLException;
import java.util.Collection;
import java.util.List;
import java.util.Set;

import javax.annotation.Resource;

import org.hibernate.HibernateException;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;

import com.whut.work.base.dao.IBaseDao;
import com.whut.work.base.model.Page;
import com.whut.work.base.vo.Parameter;

public class BaseDaoImpl<T> implements IBaseDao<T> {

    private int BATCH_MAX_ROW = 5;

	private SessionFactory sessionFactory;	
	private Class<T> entityClass;
	
	//construct methods
	public BaseDaoImpl(){
}

    public BaseDaoImpl(Class<T> entityClass){
        this.entityClass = entityClass;
    }


    @Override
    public void save(T entity) throws Exception {
        Session session = this.getSession();
        session.beginTransaction();
        session.save(entity);
        session.getTransaction().commit();
    }

    @Override
    public int batchSave(List<T> list) throws Exception {
        Session session = this.getSession();
        session.beginTransaction();
        for (int i = 0; i < list.size(); ++i) {
            session.save(list.get(i));
            if (i % BATCH_MAX_ROW == 0) {
                session.flush();
                session.clear();
            }
        }
        session.flush();
        session.clear();
        session.getTransaction().commit();
        return list.size();
    }

    @Override
    public void deleteAll(Collection entities) throws Exception {
        Session session = this.getSession();
        session.beginTransaction();
        for (Object entity : entities) {
            session.delete(entity);
        }
        session.getTransaction().commit();
    }

    @Override
    public void delete(T entity) throws Exception {
        Session session = this.getSession();
        session.beginTransaction();
        session.delete(entity);
        session.getTransaction().commit();
    }

    @Override
    public void deleteWithHql(String hql) throws Exception {
        Session session = this.getSession();
        session.beginTransaction();
        Query query = session.createQuery(hql);
        query.executeUpdate();
        session.getTransaction().commit();
    }

    @Override
    public void update(T entity) throws Exception {
        Session session = this.getSession();
        session.beginTransaction();
        session.update(entity);
        session.getTransaction().commit();
    }

    @SuppressWarnings("unchecked")
    @Override
    public T getOne(int id) throws Exception {
        Session session = this.getSession();
        session.beginTransaction();
        Object returnObject = session.get(entityClass, id);
        session.getTransaction().commit();

        return (T) returnObject;
    }

    @Override
    public T findOne(String hql) throws Exception {
        return findOne(hql,null);
    }

    @SuppressWarnings("unchecked")
    @Override
    public T findOne(final String hql, final Parameter parameter) throws Exception {
        Session session = this.getSession();
        session.beginTransaction();
        Query query = session.createQuery(hql);
        setParameter(query, parameter);
        Object returnObject = query.setMaxResults(1).uniqueResult();
        session.getTransaction().commit();

        return (T) returnObject;
    }

    @Override
    public List<T> findList(final String hql) throws Exception {
        return findList(hql, null);
    }

    @SuppressWarnings("unchecked")
    @Override
    public List<T> findList(final String hql, final Parameter parameter) throws Exception {
        Session session = this.getSession();
        session.beginTransaction();
        Query query = session.createQuery(hql);
        setParameter(query, parameter);
        List<T> returnList = query.list();
        session.getTransaction().commit();

        return returnList;
    }

    /**
     *
     * @param query
     * @param parameter
     * set sql parameters
     */
    private void setParameter(Query query, Parameter parameter) {
        if (parameter != null) {
            Set<String> keySet = parameter.keySet();
            for (String string : keySet) {
                Object value = parameter.get(string);
                if (value instanceof Collection<?>) {
                    query.setParameterList(string, (Collection<?>) value);
                } else if (value instanceof Object[]) {
                    query.setParameterList(string, (Object[]) value);
                } else {
                    query.setParameter(string, value);
                }
            }
        }
    }

    public SessionFactory getSessionFactory() {
		return sessionFactory;
	}

	@Resource(name="sessionFactory")//在applicationContext.xml文件中有配置
	public void setSessionFactory(SessionFactory sessionFactory) {
		this.sessionFactory = sessionFactory;
	}

	 /**
     * @return session
     */
    private Session getSession() {
        return sessionFactory.getCurrentSession();
    }

	@SuppressWarnings("unchecked")
	@Override
	public Page<T> findPage(int currentPage, int pageSize, String queryHql, String countHql, Object[] values)
			throws HibernateException, SQLException {
		Session session = this.getSession();
		session.beginTransaction();
		Query query = session.createQuery(queryHql);
        if (values != null) {
            for (int i = 0; i < values.length; i++) {
                query.setParameter(i, values[i]);
            }
        }
        // 如果pageSize<=0则查询全部，用于打印导出等...
        if (pageSize > 0) {
            query.setFirstResult(pageSize * (currentPage - 1));//设置要查询的结果集的开始索引位置
            query.setMaxResults(pageSize);//设置要查询的结果集的数量
        }
        List<T> returnList = query.list();
        session.getTransaction().commit();
        long totalRecords = findCount(countHql, values);
        
        return new Page<T>(returnList, totalRecords, currentPage, pageSize);
	}

	@Override
	public Page<T> findPage(int currentPage, int pageSize, String queryHql, String countHql)
			throws HibernateException, SQLException {
		return findPage(currentPage, pageSize, queryHql, countHql, null);
	}

	@Override
	public long findCount(String hql) {
		return findCount(hql, null);
	}

	@Override
	public long findCount(String hql, Object[] values) {
		Session session = this.getSession();
		session.beginTransaction();
		Query query = session.createQuery(hql);
        if (values != null) {
            for (int i = 0; i < values.length; i++) {
                query.setParameter(i, values[i]);
            }
        }
        Long returnLong = (Long) query.setMaxResults(1).uniqueResult();
        session.getTransaction().commit();
        
        return returnLong;
	}
	
}

通过以上代码我们可以发现，在分页查询以及设置hql参数的操作中还需要用到两个类：Page.java和Parameter.java。

Page.java

package com.whut.work.base.model;

import java.util.List;

public class Page<T> {

    private int current = 1;
    private int total = 0;
    private long records = 0;
    private int size = 10;
    private String orderBy = "";
    private String order = "";

    public String getOrderBy() {
        return orderBy;
    }

    public void setOrderBy(String orderBy) {
        this.orderBy = orderBy;
    }

    public String getOrder() {
        return order;
    }

    public void setOrder(String order) {
        this.order = order;
    }

    private List<T> list = null;

    public Page() {

    }

    public Page(int currentPage, int pageSize){
    	current=currentPage;
    	size=pageSize;
	}

    public Page(List<T> list, int current, int size) {
        this.current = current;
        this.size = size;
        this.list = list;
    }
    
    public Page(List<T> list, long records, int current, int size, String orderBy, String order) {
        this.list = list;
        this.current = current;
        this.records = records;
        this.size = size;
        this.orderBy = orderBy;
        this.order = order;
        this.total = records == 0 ? 1 : (int) ((records - 1) / size + 1);//分几页的计算方法

        if (this.current > this.total) {
            this.current = this.total;
        }
        if (current < 1) {
            this.current = 1;
        }
    }

    public Page(List<T> list, long records, int current, int size) {
        this(list, records, current, size, null, null);
    }

    public int getCurrent() {
        return current;
    }

    public void setCurrent(int current) {
        this.current = current;
    }

    public int getSize() {
        return size;
    }

    public void setSize(int size) {
        this.size = size;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int l) {
        this.total = l;
    }

    public long getRecords() {
        return records;
    }

    public void setRecords(long records) {
        this.records = records;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }

    @Override
    public String toString() {
        return "Page{" +
                "current=" + current +
                ", size=" + size +
                ", list=" + list +
                '}';
    }
}

Parameter.java

package com.whut.work.base.vo;

import java.util.HashMap;

/**
 * 查询参数类
 */
public class Parameter extends HashMap<String, Object> {

    private static final long serialVersionUID = 1L;

    /**
     * 构造类，例：new Parameter(id, parentIds)
     *
     * @param values 参数值
     */
    public Parameter(Object... values) {
        if (values != null) {
            for (int i = 0; i < values.length; i++) {
                put("p" + i, values[i]);
            }
        }
    }

    /**
     * 构造类，例：new Parameter(new Object[][]{{"id", id}, {"parentIds", parentIds}})
     *
     * @param parameters 参数二维数组
     */
    public Parameter(Object[][] parameters) {
        if (parameters != null) {
            for (Object[] os : parameters) {
                if (os.length == 2) {
                    put((String) os[0], os[1]);
                }
            }
        }
    }

}

至此，我们先给出项目结构图，关于那个util包，以后我们遇到相应问题时再来讨论它（暂时不用建立它）。

当然，关于各种的包的命名大家完全可以根据自己喜好来进行。

三、用户实体（user包）

之前我们已经建立了数据库中的user表，现在我们来编写用户model层代码，并用注解配置。

package com.whut.work.user.model;

import java.util.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name="user")
public class User {

	@Id
	@GeneratedValue
	private Integer id;
	private String username;
	private String password;
     private String tel;
     private String email;
	@Column(name="create_time")
	private Date createTime;
	@Column(name="is_delete")
	private Boolean isDelete;
	
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public Date getCreateTime() {
		return createTime;
	}
	public void setCreateTime(Date createTime) {
		this.createTime = createTime;
	}
	public Boolean getIsDelete() {
		return isDelete;
	}
	public void setIsDelete(Boolean isDelete) {
		this.isDelete = isDelete;
	}

    public String getTel() {
        return tel;
    }

    public void setTel(String tel) {
        this.tel = tel;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

然后编写用户的dao层：

IUserDao.java

package com.whut.work.user.dao;

import com.whut.work.base.dao.IBaseDao;
import com.whut.work.user.model.User;

public interface IUserDao extends IBaseDao<User>{

}

UserDaoImpl.java

package com.whut.work.user.dao.impl;

import org.springframework.stereotype.Component;

import com.whut.work.base.dao.Impl.BaseDaoImpl;
import com.whut.work.user.dao.IUserDao;
import com.whut.work.user.model.User;

@Component
public class UserDaoImpl extends BaseDaoImpl<User> implements IUserDao {

	public UserDaoImpl(){
		super(User.class);
	}

}

四、登录部分（login包）

我们暂时只需编写登录部分的controller层和service层。调用过程为：login下的controller接收到前台传送过来的用户登录信息，调用login下的service，接着通过user下的dao与数据库进行交互。login包中包含注册和登录功能。

ILoginService.java

package com.whut.work.login.service;

import java.util.Map;

public interface ILoginService {

	//登录
	public Map<String,Object> login(String username, String password) throws Exception;
	
	//注册
	public Map<String,Object> register(String username, String password, String tel, String email) throws Exception;
	
}

LoginServiceImpl.java

package com.whut.work.login.service.impl;

import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import com.whut.work.login.service.ILoginService;
import com.whut.work.user.dao.IUserDao;
import com.whut.work.user.model.User;

@Component
public class LoginServiceImpl implements ILoginService  {

	@Autowired
	private IUserDao userDao;
	
	@Override
	public Map<String, Object> login(String username, String password) throws Exception {
		Map<String,Object> returnMap = new HashMap<String,Object>();
		
		String hql = "from User u where u.username='"+username+"'";
		User user = new User();
		try {
			user = userDao.findOne(hql);
		} catch (Exception e) {
			e.printStackTrace();
		}
		if(user != null){
			if(user.getPassword().equals(password)){
				returnMap.put("value", user);
				returnMap.put("message", "登录成功");
				returnMap.put("success", true);
			}else{
				returnMap.put("message", "密码错误");
				returnMap.put("success", false);
			}
		}else{
			returnMap.put("message", "该用户不存在!");
			returnMap.put("success", false);
		}
		return returnMap;
	}

	@Override
	public Map<String, Object> register(String username, String password,String tel,String email) throws Exception {
		Map<String,Object> returnMap = new HashMap<String,Object>();
		
		String hql = "from User u where u.username='"+username+"'";
		User user = new User();
		if(userDao.findOne(hql) != null){
			returnMap.put("message", "该用户名已存在...");
			returnMap.put("success", false);
			return returnMap;
		}else{
			user.setUsername(username);
			user.setPassword(password);
            user.setTel(tel);
            user.setEmail(email);
			user.setCreateTime(new Date());
			user.setIsDelete(false);
			userDao.save(user);
			returnMap.put("value", user);
			returnMap.put("message", "注册成功");
			returnMap.put("success", true);
			return returnMap;
		}
	}

}

LoginCtrl.java

package com.whut.work.login.controller;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.whut.work.base.model.Page;
import com.whut.work.login.service.ILoginService;
import com.whut.work.user.model.User;
import com.whut.work.user.service.IUserService;

@Controller
@RequestMapping("/login")
public class LoginCtrl {
	
	@Autowired
	private ILoginService loginService;

	@RequestMapping(value="/login",method=RequestMethod.POST)
	@ResponseBody
	public Map<String,Object> login(HttpServletRequest request,String username,String password){
		Map<String,Object> returnMap = new HashMap<String,Object>();
		
		try {
			Map<String,Object> map = loginService.login(username, password);
			//获取user实体
			Object object = map.get("value");
			if(object != null){
				User user = (User) object;
				HttpSession session = request.getSession();
				session.setAttribute("userId", user.getId());
			}
			returnMap.put("value", object);
			returnMap.put("message", map.get("message"));
			returnMap.put("success", map.get("success"));
		} catch (Exception e) {
			returnMap.put("message", "异常：登录失败!");
			returnMap.put("success", false);
			e.printStackTrace();
		}
		return returnMap;
	}

    @RequestMapping(value="/register",method=RequestMethod.POST)
	@ResponseBody
	public Map<String,Object> register(HttpServletRequest request,String username,String password,String tel,String email){
		Map<String,Object> returnMap = new HashMap<String,Object>();
		
		try {
			Map<String,Object> map = loginService.register(username, password,tel,email);
			//获取user实体
			Object object = map.get("value");
			if(object != null){
				User user = (User) object;
				HttpSession session = request.getSession();
				session.setAttribute("userId", user.getId());
			}
			returnMap.put("value", object);
			returnMap.put("message", map.get("message"));
			returnMap.put("success", map.get("success"));
		} catch (Exception e) {
			returnMap.put("message", "异常：注册失败!");
			returnMap.put("success", false);
			e.printStackTrace();
		}
		return returnMap;
	}

}

至此，项目的结构如下图所示：

关于user包下的controller、service以及vo我们以后会遇到的，这里先忽略。
五、前端页面

前端页面效果部分我就不多讲了，代码也只贴部分重点的。前端css框架为bootstrap，js框架为angularjs。

login.js

angular.module("mainapp",[])
    .controller("maincontroller",function($scope){
        $scope.inputUsername = "";
        $scope.inputPassword = "";
        //登录
        $scope.login = function(){
            if(checkFirst() != false){
                login_ajax($scope.inputUsername,$scope.inputPassword);
            }else{
                alert("请将信息填写完整...");
            };
        };
        function checkFirst(){
            if($scope.inputUsername!=null && $scope.inputUsername!=""
                && $scope.inputPassword!=null && $scope.inputPassword!=""){
                return true;
            }else{
                return false;
            }
        };
        function login_ajax(username,password){
            this.username = username;
            this.password = hex_md5(password);
            $.ajax({
                type:"POST",
                url:"/login/login",
                data:{"username":this.username,"password":this.password},
                contentType:"application/x-www-form-urlencoded",
                dataType:"json",
                success:function(data){
                    console.log(data);
                    $scope.$apply(function(){
                        if(data.success == true && data.message == "登录成功"){
                            $scope.inputUsername = "";$scope.inputPassword = "";
                            //alert("登录成功1!");
                            window.location.href = "../jsp/infojsp/info.jsp?userName="+data.value.username+
                                "&userId="+data.value.id;
                        }else if(data.success == false && data.message == "密码错误"){
                            $scope.inputUsername = "";$scope.inputPassword = "";
                            alert("密码错误!");
                        }else if(data.success == false && data.message == "该用户不存在!"){
                            $scope.inputUsername = "";$scope.inputPassword = "";
                            alert("该用户不存在!");
                        }
                    });
                }
            });
        };
    })

signup.js

angular.module("mainapp",[])
    .controller("maincontroller",function($scope){
        $scope.inputUsername = "";
        $scope.inputPassword = "";
        $scope.inputEmail = "";
        $scope.inputTel = "";
        function checkFirst(){
            if($scope.inputUsername!=null && $scope.inputUsername!=""
                && $scope.inputPassword!=null && $scope.inputPassword!=""
                && $scope.inputEmail!=null && $scope.inputEmail!=""
                && $scope.inputTel!=null && $scope.inputTel!=""){
                return true;
            }else{
                return false;
            }
        };
        //注册
        $scope.register = function(){
            if(checkFirst() != false){
                $scope.inputPassword = hex_md5($scope.inputPassword);
                $.ajax({
                    type:"POST",
                    url:"/login/register",
                    data:{"username":$scope.inputUsername,"password":$scope.inputPassword,"tel":$scope.inputTel,"email":$scope.inputEmail},
                    contentType:"application/x-www-form-urlencoded",
                    dataType:"json",
                    success:function(data){
                        console.log(data);
                        $scope.$apply(function(){
                            if(data.success == true && data.message == "注册成功"){
                                $scope.inputUsername = "";$scope.inputPassword = "";
                                $scope.inputEmail = "";$scope.inputTel = "";
                                alert("注册成功!");
                                window.location.href = "login.html";
                            }else if(data.success == false && data.message == "该用户名已存在..."){
                                $scope.inputUsername = "";$scope.inputPassword = "";
                                $scope.inputEmail = "";$scope.inputTel = "";
                                alert("该用户名已被注册...");
                            }
                        });
                    }
                });
            }else{
                alert("请将信息填写完整...");
            };
        };
    })

login.html

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap Login Form Template</title>

        <!-- CSS -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
        <link rel="stylesheet" href="login&signup/loginassets/assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="login&signup/loginassets/assets/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="login&signup/loginassets/assets/css/form-elements.css">
        <link rel="stylesheet" href="login&signup/loginassets/assets/css/style.css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicon and touch icons -->
        <link rel="shortcut icon" href="login&signup/loginassets/assets/ico/favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="login&signup/loginassets/assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="login&signup/loginassets/assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="login&signup/loginassets/assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="login&signup/loginassets/assets/ico/apple-touch-icon-57-precomposed.png">

    </head>

    <body ng-app="mainapp">

        <!-- Top content -->
        <div class="top-content">
        	
            <div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2 text">
                            <h1><strong>User</strong> MS</h1>
                            <!--<div class="description">
                            	<p>
	                            	This is a free responsive login form made with Bootstrap. 
	                            	Download it on <a href="http://azmind.com"><strong>AZMIND</strong></a>, customize and use it as you like!
                            	</p>
                            </div>-->
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 form-box">
                        	<div class="form-top">
                        		<div class="form-top-left">
                        			<h3>Login to our site</h3>
                            		<p>Enter your username and password to log on:</p>
                        		</div>
                        		<div class="form-top-right">
                        			<i class="fa fa-lock"></i>
                        		</div>
                            </div>
                            <div class="form-bottom" ng-controller="maincontroller">
			                    <form role="form" οnsubmit="return ;" class="login-form">
			                    	<div class="form-group">
			                    		<label class="sr-only" for="form-username">Username</label>
			                        	<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username" ng-model="inputUsername">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="form-password">Password</label>
			                        	<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password" ng-model="inputPassword">
			                        </div>
			                        <button type="submit" ng-click="login()" class="btn">Log in!</button>
			                    </form>
		                    </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 social-login">
                        	<h3>not an account?</h3>
                        	<span>click to <a href="./signup.html"><strong>sign up</strong></a></span>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>


        <!-- Javascript -->
        <!--<script src="login&signup/signupassets/assets/js/jquery-1.11.1.min.js"></script>-->
        <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="login&signup/loginassets/assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="login&signup/loginassets/assets/js/jquery.backstretch.min.js"></script>
        <script src="login&signup/loginassets/assets/js/scripts.js"></script>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="login&signup/md5.js"></script>
        <script src="login&signup/login.js"></script>
        
        <!--[if lt IE 10]>
            <script src="login&signup/loginassets/assets/js/placeholder.js"></script>
        <![endif]-->

    </body>

</html>

signup.html

<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sign up UMS</title>

        <!-- CSS -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
        <link rel="stylesheet" href="login&signup/signupassets/assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="login&signup/signupassets/assets/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="login&signup/signupassets/assets/css/form-elements.css">
        <link rel="stylesheet" href="login&signup/signupassets/assets/css/style.css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicon and touch icons -->
        <link rel="shortcut icon" href="login&signup/signupassets/assets/ico/favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="login&signup/signupassets/assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="login&signup/signupassets/assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="login&signup/signupassets/assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="login&signup/signupassets/assets/ico/apple-touch-icon-57-precomposed.png">

    </head>

    <body ng-app="mainapp">

        <!-- Top content -->
        <div class="top-content">
        	
            <div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2 text">
                            <h1><strong>User</strong> MS</h1>
                            <!--<div class="description">
                            	<p>
	                            	This is a free responsive login form made with Bootstrap. 
	                            	Download it on <a href="http://azmind.com"><strong>AZMIND</strong></a>, customize and use it as you like!
                            	</p>
                            </div>-->
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 form-box">
                        	<div class="form-top">
                        		<div class="form-top-left">
                        			<h3>Singup to our site</h3>
                            		<p>Enter your information to sign up:</p>
                        		</div>
                        		<div class="form-top-right">
                        			<i class="fa fa-book"></i>
                        		</div>
                            </div>
                            <div class="form-bottom" ng-controller="maincontroller">
			                    <form role="form" οnsubmit="return ;" class="login-form">
			                    	<div class="form-group">
			                    		<label class="sr-only" for="form-username">Username</label>
			                        	<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username" ng-model="inputUsername">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="form-password">Password</label>
			                        	<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password" ng-model="inputPassword">
			                        </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="form-email">Email</label>
                                        <input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email" ng-model="inputEmail">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="form-tel">Tel</label>
                                        <input type="text" name="form-tel" placeholder="Tel..." class="form-tel form-control" id="form-tel" ng-model="inputTel">
                                    </div>
			                        <button type="submit" ng-click="register()" class="btn">Sign up!</button>
			                    </form>
		                    </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 social-login">
                        	<h3>yet have an account?</h3>
                        	<span>click to <a href="./login.html"><strong>log in</strong></a></span>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>


        <!-- Javascript -->
        <!--<script src="login&signup/signupassets/assets/js/jquery-1.11.1.min.js"></script>-->
        <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="login&signup/signupassets/assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="login&signup/signupassets/assets/js/jquery.backstretch.min.js"></script>
        <script src="login&signup/signupassets/assets/js/scripts.js"></script>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="login&signup/md5.js"></script>
        <script src="login&signup/signup.js"></script>

        
        <!--[if lt IE 10]>
        <script src="login&signup/signupassets/assets/js/placeholder.js"></script>
        <![endif]-->

    </body>

</html>

到这里，本文已经很长了，项目的演示就放在下一篇博客中啦。