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

1. package com.whut.work.base.dao;
2. import java.sql.SQLException;
3. import java.util.Collection;
4. import java.util.List;
5. import org.hibernate.HibernateException;
6. import com.whut.work.base.model.Page;
7. import com.whut.work.base.vo.Parameter;
8. public interface IBaseDao<T> {
9. //单个CRUD
10. public void save(final T entity) throws Exception;
11. public void delete(final T entity) throws Exception;
12. <span style="white-space:pre">  </span>public void deleteWithHql(final String hql) throws Exception;
13. public void update(final T entity) throws Exception;
14. public T getOne(final int id) throws Exception;
15. <span style="white-space:pre">  </span>//批处理
16. <span style="white-space:pre">  </span>public int batchSave(final List<T> list) throws Exception;
17. <span style="white-space:pre">  </span>public void deleteAll(final Collection entities) throws Exception;
18. //createQuery（Query）
19. public T findOne(final String hql) throws Exception;
20. public T findOne(final String hql, final Parameter parameter) throws Exception;
21. //list查询
22. public List<T> findList(final String hql) throws Exception;
23. public List<T> findList(final String hql, final Parameter parameter) throws Exception;
24. //分页查询
25. public Page<T> findPage(final int currentPage, final int pageSize, final String queryHql, final String countHql, final Object[] values)
26. throws HibernateException,SQLException;
27. public Page<T> findPage(final int currentPage, final int pageSize, final String queryHql, final String countHql)
28. throws HibernateException,SQLException;
29. //查询满足条件的记录数
30. public long findCount(final String hql);
31. public long findCount(final String hql, final Object[] values);
32. }

BaseDaoImpl.java

1. package com.whut.work.base.dao.Impl;
2. import java.sql.SQLException;
3. import java.util.Collection;
4. import java.util.List;
5. import java.util.Set;
6. import javax.annotation.Resource;
7. import org.hibernate.HibernateException;
8. import org.hibernate.Query;
9. import org.hibernate.Session;
10. import org.hibernate.SessionFactory;
11. import com.whut.work.base.dao.IBaseDao;
12. import com.whut.work.base.model.Page;
13. import com.whut.work.base.vo.Parameter;
14. public class BaseDaoImpl<T> implements IBaseDao<T> {
15. private int BATCH_MAX_ROW = 5;
16. private SessionFactory sessionFactory;
17. private Class<T> entityClass;
18. //construct methods
19. public BaseDaoImpl(){
20. }
21. public BaseDaoImpl(Class<T> entityClass){
22. this.entityClass = entityClass;
23. }
24. @Override
25. public void save(T entity) throws Exception {
26. Session session = this.getSession();
27. session.beginTransaction();
28. session.save(entity);
29. session.getTransaction().commit();
30. }
31. @Override
32. public int batchSave(List<T> list) throws Exception {
33. Session session = this.getSession();
34. session.beginTransaction();
35. for (int i = 0; i < list.size(); ++i) {
36. session.save(list.get(i));
37. if (i % BATCH_MAX_ROW == 0) {
38. session.flush();
39. session.clear();
40. }
41. }
42. session.flush();
43. session.clear();
44. session.getTransaction().commit();
45. return list.size();
46. }
47. @Override
48. public void deleteAll(Collection entities) throws Exception {
49. Session session = this.getSession();
50. session.beginTransaction();
51. for (Object entity : entities) {
52. session.delete(entity);
53. }
54. session.getTransaction().commit();
55. }
56. @Override
57. public void delete(T entity) throws Exception {
58. Session session = this.getSession();
59. session.beginTransaction();
60. session.delete(entity);
61. session.getTransaction().commit();
62. }
63. @Override
64. public void deleteWithHql(String hql) throws Exception {
65. Session session = this.getSession();
66. session.beginTransaction();
67. Query query = session.createQuery(hql);
68. query.executeUpdate();
69. session.getTransaction().commit();
70. }
71. @Override
72. public void update(T entity) throws Exception {
73. Session session = this.getSession();
74. session.beginTransaction();
75. session.update(entity);
76. session.getTransaction().commit();
77. }
78. @SuppressWarnings("unchecked")
79. @Override
80. public T getOne(int id) throws Exception {
81. Session session = this.getSession();
82. session.beginTransaction();
83. Object returnObject = session.get(entityClass, id);
84. session.getTransaction().commit();
85. return (T) returnObject;
86. }
87. @Override
88. public T findOne(String hql) throws Exception {
89. return findOne(hql,null);
90. }
91. @SuppressWarnings("unchecked")
92. @Override
93. public T findOne(final String hql, final Parameter parameter) throws Exception {
94. Session session = this.getSession();
95. session.beginTransaction();
96. Query query = session.createQuery(hql);
97. setParameter(query, parameter);
98. Object returnObject = query.setMaxResults(1).uniqueResult();
99. session.getTransaction().commit();
100. return (T) returnObject;
101. }
102. @Override
103. public List<T> findList(final String hql) throws Exception {
104. return findList(hql, null);
105. }
106. @SuppressWarnings("unchecked")
107. @Override
108. public List<T> findList(final String hql, final Parameter parameter) throws Exception {
109. Session session = this.getSession();
110. session.beginTransaction();
111. Query query = session.createQuery(hql);
112. setParameter(query, parameter);
113. List<T> returnList = query.list();
114. session.getTransaction().commit();
115. return returnList;
116. }
117. /**
118. *
119. * @param query
120. * @param parameter
121. * set sql parameters
122. */
123. private void setParameter(Query query, Parameter parameter) {
124. if (parameter != null) {
125. Set<String> keySet = parameter.keySet();
126. for (String string : keySet) {
127. Object value = parameter.get(string);
128. if (value instanceof Collection<?>) {
129. query.setParameterList(string, (Collection<?>) value);
130. } else if (value instanceof Object[]) {
131. query.setParameterList(string, (Object[]) value);
132. } else {
133. query.setParameter(string, value);
134. }
135. }
136. }
137. }
138. public SessionFactory getSessionFactory() {
139. return sessionFactory;
140. }
141. @Resource(name="sessionFactory")//在applicationContext.xml文件中有配置
142. public void setSessionFactory(SessionFactory sessionFactory) {
143. this.sessionFactory = sessionFactory;
144. }
145. /**
146. * @return session
147. */
148. private Session getSession() {
149. return sessionFactory.getCurrentSession();
150. }
151. @SuppressWarnings("unchecked")
152. @Override
153. public Page<T> findPage(int currentPage, int pageSize, String queryHql, String countHql, Object[] values)
154. throws HibernateException, SQLException {
155. Session session = this.getSession();
156. session.beginTransaction();
157. Query query = session.createQuery(queryHql);
158. if (values != null) {
159. for (int i = 0; i < values.length; i++) {
160. query.setParameter(i, values[i]);
161. }
162. }
163. // 如果pageSize<=0则查询全部，用于打印导出等...
164. if (pageSize > 0) {
165. query.setFirstResult(pageSize * (currentPage - 1));//设置要查询的结果集的开始索引位置
166. query.setMaxResults(pageSize);//设置要查询的结果集的数量
167. }
168. List<T> returnList = query.list();
169. session.getTransaction().commit();
170. long totalRecords = findCount(countHql, values);
171. return new Page<T>(returnList, totalRecords, currentPage, pageSize);
172. }
173. @Override
174. public Page<T> findPage(int currentPage, int pageSize, String queryHql, String countHql)
175. throws HibernateException, SQLException {
176. return findPage(currentPage, pageSize, queryHql, countHql, null);
177. }
178. @Override
179. public long findCount(String hql) {
180. return findCount(hql, null);
181. }
182. @Override
183. public long findCount(String hql, Object[] values) {
184. Session session = this.getSession();
185. session.beginTransaction();
186. Query query = session.createQuery(hql);
187. if (values != null) {
188. for (int i = 0; i < values.length; i++) {
189. query.setParameter(i, values[i]);
190. }
191. }
192. Long returnLong = (Long) query.setMaxResults(1).uniqueResult();
193. session.getTransaction().commit();
194. return returnLong;
195. }
196. }

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

Page.java

1. package com.whut.work.base.model;
2. import java.util.List;
3. public class Page<T> {
4. private int current = 1;
5. private int total = 0;
6. private long records = 0;
7. private int size = 10;
8. private String orderBy = "";
9. private String order = "";
10. public String getOrderBy() {
11. return orderBy;
12. }
13. public void setOrderBy(String orderBy) {
14. this.orderBy = orderBy;
15. }
16. public String getOrder() {
17. return order;
18. }
19. public void setOrder(String order) {
20. this.order = order;
21. }
22. private List<T> list = null;
23. public Page() {
24. }
25. public Page(int currentPage, int pageSize){
26. current=currentPage;
27. size=pageSize;
28. }
29. public Page(List<T> list, int current, int size) {
30. this.current = current;
31. this.size = size;
32. this.list = list;
33. }
34. public Page(List<T> list, long records, int current, int size, String orderBy, String order) {
35. this.list = list;
36. this.current = current;
37. this.records = records;
38. this.size = size;
39. this.orderBy = orderBy;
40. this.order = order;
41. this.total = records == 0 ? 1 : (int) ((records - 1) / size + 1);//分几页的计算方法
42. if (this.current > this.total) {
43. this.current = this.total;
44. }
45. if (current < 1) {
46. this.current = 1;
47. }
48. }
49. public Page(List<T> list, long records, int current, int size) {
50. this(list, records, current, size, null, null);
51. }
52. public int getCurrent() {
53. return current;
54. }
55. public void setCurrent(int current) {
56. this.current = current;
57. }
58. public int getSize() {
59. return size;
60. }
61. public void setSize(int size) {
62. this.size = size;
63. }
64. public int getTotal() {
65. return total;
66. }
67. public void setTotal(int l) {
68. this.total = l;
69. }
70. public long getRecords() {
71. return records;
72. }
73. public void setRecords(long records) {
74. this.records = records;
75. }
76. public List<T> getList() {
77. return list;
78. }
79. public void setList(List<T> list) {
80. this.list = list;
81. }
82. @Override
83. public String toString() {
84. return "Page{" +
85. "current=" + current +
86. ", size=" + size +
87. ", list=" + list +
88. '}';
89. }
90. }

Parameter.java

1. package com.whut.work.base.vo;
2. import java.util.HashMap;
3. /**
4. * 查询参数类
5. */
6. public class Parameter extends HashMap<String, Object> {
7. private static final long serialVersionUID = 1L;
8. /**
9. * 构造类，例：new Parameter(id, parentIds)
10. *
11. * @param values 参数值
12. */
13. public Parameter(Object... values) {
14. if (values != null) {
15. for (int i = 0; i < values.length; i++) {
16. put("p" + i, values[i]);
17. }
18. }
19. }
20. /**
21. * 构造类，例：new Parameter(new Object[][]{{"id", id}, {"parentIds", parentIds}})
22. *
23. * @param parameters 参数二维数组
24. */
25. public Parameter(Object[][] parameters) {
26. if (parameters != null) {
27. for (Object[] os : parameters) {
28. if (os.length == 2) {
29. put((String) os[0], os[1]);
30. }
31. }
32. }
33. }
34. }

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

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

三、用户实体（user包）

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

1. package com.whut.work.user.model;
2. import java.util.Date;
3. import javax.persistence.Column;
4. import javax.persistence.Entity;
5. import javax.persistence.GeneratedValue;
6. import javax.persistence.Id;
7. import javax.persistence.Table;
8. @Entity
9. @Table(name="user")
10. public class User {
11. @Id
12. @GeneratedValue
13. private Integer id;
14. private String username;
15. private String password;
16. <span style="white-space:pre">  </span>private String tel;
17. <span style="white-space:pre">  </span>private String email;
18. @Column(name="create_time")
19. private Date createTime;
20. @Column(name="is_delete")
21. private Boolean isDelete;
22. public Integer getId() {
23. return id;
24. }
25. public void setId(Integer id) {
26. this.id = id;
27. }
28. public String getUsername() {
29. return username;
30. }
31. public void setUsername(String username) {
32. this.username = username;
33. }
34. public String getPassword() {
35. return password;
36. }
37. public void setPassword(String password) {
38. this.password = password;
39. }
40. public Date getCreateTime() {
41. return createTime;
42. }
43. public void setCreateTime(Date createTime) {
44. this.createTime = createTime;
45. }
46. public Boolean getIsDelete() {
47. return isDelete;
48. }
49. public void setIsDelete(Boolean isDelete) {
50. this.isDelete = isDelete;
51. }
52. public String getTel() {
53. return tel;
54. }
55. public void setTel(String tel) {
56. this.tel = tel;
57. }
58. public String getEmail() {
59. return email;
60. }
61. public void setEmail(String email) {
62. this.email = email;
63. }
64. }

然后编写用户的dao层：

IUserDao.java

1. package com.whut.work.user.dao;
2. import com.whut.work.base.dao.IBaseDao;
3. import com.whut.work.user.model.User;
4. public interface IUserDao extends IBaseDao<User>{
5. }

UserDaoImpl.java

1. package com.whut.work.user.dao.impl;
2. import org.springframework.stereotype.Component;
3. import com.whut.work.base.dao.Impl.BaseDaoImpl;
4. import com.whut.work.user.dao.IUserDao;
5. import com.whut.work.user.model.User;
6. @Component
7. public class UserDaoImpl extends BaseDaoImpl<User> implements IUserDao {
8. public UserDaoImpl(){
9. super(User.class);
10. }
11. }

四、登录部分（login包）

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

ILoginService.java

1. package com.whut.work.login.service;
2. import java.util.Map;
3. public interface ILoginService {
4. //登录
5. public Map<String,Object> login(String username, String password) throws Exception;
6. //注册
7. public Map<String,Object> register(String username, String password, String tel, String email) throws Exception;
8. }

LoginServiceImpl.java

1. package com.whut.work.login.service.impl;
2. import java.util.Date;
3. import java.util.HashMap;
4. import java.util.List;
5. import java.util.Map;
6. import org.springframework.beans.factory.annotation.Autowired;
7. import org.springframework.stereotype.Component;
8. import com.whut.work.login.service.ILoginService;
9. import com.whut.work.user.dao.IUserDao;
10. import com.whut.work.user.model.User;
11. @Component
12. public class LoginServiceImpl implements ILoginService  {
13. @Autowired
14. private IUserDao userDao;
15. @Override
16. public Map<String, Object> login(String username, String password) throws Exception {
17. Map<String,Object> returnMap = new HashMap<String,Object>();
18. String hql = "from User u where u.username='"+username+"'";
19. User user = new User();
20. try {
21. user = userDao.findOne(hql);
22. } catch (Exception e) {
23. e.printStackTrace();
24. }
25. if(user != null){
26. if(user.getPassword().equals(password)){
27. returnMap.put("value", user);
28. returnMap.put("message", "登录成功");
29. returnMap.put("success", true);
30. }else{
31. returnMap.put("message", "密码错误");
32. returnMap.put("success", false);
33. }
34. }else{
35. returnMap.put("message", "该用户不存在!");
36. returnMap.put("success", false);
37. }
38. return returnMap;
39. }
40. @Override
41. public Map<String, Object> register(String username, String password,String tel,String email) throws Exception {
42. Map<String,Object> returnMap = new HashMap<String,Object>();
43. String hql = "from User u where u.username='"+username+"'";
44. User user = new User();
45. if(userDao.findOne(hql) != null){
46. returnMap.put("message", "该用户名已存在...");
47. returnMap.put("success", false);
48. return returnMap;
49. }else{
50. user.setUsername(username);
51. user.setPassword(password);
52. user.setTel(tel);
53. user.setEmail(email);
54. user.setCreateTime(new Date());
55. user.setIsDelete(false);
56. userDao.save(user);
57. returnMap.put("value", user);
58. returnMap.put("message", "注册成功");
59. returnMap.put("success", true);
60. return returnMap;
61. }
62. }
63. }

LoginCtrl.java

1. package com.whut.work.login.controller;
2. import java.util.HashMap;
3. import java.util.Map;
4. import javax.servlet.http.HttpServletRequest;
5. import javax.servlet.http.HttpSession;
6. import org.springframework.beans.factory.annotation.Autowired;
7. import org.springframework.stereotype.Controller;
8. import org.springframework.web.bind.annotation.RequestMapping;
9. import org.springframework.web.bind.annotation.RequestMethod;
10. import org.springframework.web.bind.annotation.ResponseBody;
11. import com.whut.work.base.model.Page;
12. import com.whut.work.login.service.ILoginService;
13. import com.whut.work.user.model.User;
14. import com.whut.work.user.service.IUserService;
15. @Controller
16. @RequestMapping("/login")
17. public class LoginCtrl {
18. @Autowired
19. private ILoginService loginService;
20. @RequestMapping(value="/login",method=RequestMethod.POST)
21. @ResponseBody
22. public Map<String,Object> login(HttpServletRequest request,String username,String password){
23. Map<String,Object> returnMap = new HashMap<String,Object>();
24. try {
25. Map<String,Object> map = loginService.login(username, password);
26. //获取user实体
27. Object object = map.get("value");
28. if(object != null){
29. User user = (User) object;
30. HttpSession session = request.getSession();
31. session.setAttribute("userId", user.getId());
32. }
33. returnMap.put("value", object);
34. returnMap.put("message", map.get("message"));
35. returnMap.put("success", map.get("success"));
36. } catch (Exception e) {
37. returnMap.put("message", "异常：登录失败!");
38. returnMap.put("success", false);
39. e.printStackTrace();
40. }
41. return returnMap;
42. }
43. @RequestMapping(value="/register",method=RequestMethod.POST)
44. @ResponseBody
45. public Map<String,Object> register(HttpServletRequest request,String username,String password,String tel,String email){
46. Map<String,Object> returnMap = new HashMap<String,Object>();
47. try {
48. Map<String,Object> map = loginService.register(username, password,tel,email);
49. //获取user实体
50. Object object = map.get("value");
51. if(object != null){
52. User user = (User) object;
53. HttpSession session = request.getSession();
54. session.setAttribute("userId", user.getId());
55. }
56. returnMap.put("value", object);
57. returnMap.put("message", map.get("message"));
58. returnMap.put("success", map.get("success"));
59. } catch (Exception e) {
60. returnMap.put("message", "异常：注册失败!");
61. returnMap.put("success", false);
62. e.printStackTrace();
63. }
64. return returnMap;
65. }
66. }

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

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

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

login.js

1. angular.module("mainapp",[])
2. .controller("maincontroller",function($scope){
3. $scope.inputUsername = "";
4. $scope.inputPassword = "";
5. //登录
6. $scope.login = function(){
7. if(checkFirst() != false){
8. login_ajax($scope.inputUsername,$scope.inputPassword);
9. }else{
10. alert("请将信息填写完整...");
11. };
12. };
13. function checkFirst(){
14. if($scope.inputUsername!=null && $scope.inputUsername!=""
15. && $scope.inputPassword!=null && $scope.inputPassword!=""){
16. return true;
17. }else{
18. return false;
19. }
20. };
21. function login_ajax(username,password){
22. this.username = username;
23. this.password = hex_md5(password);
24. $.ajax({
25. type:"POST",
26. url:"/login/login",
27. data:{"username":this.username,"password":this.password},
28. contentType:"application/x-www-form-urlencoded",
29. dataType:"json",
30. success:function(data){
31. console.log(data);
32. $scope.$apply(function(){
33. if(data.success == true && data.message == "登录成功"){
34. $scope.inputUsername = "";$scope.inputPassword = "";
35. //alert("登录成功1!");
36. window.location.href = "../jsp/infojsp/info.jsp?userName="+data.value.username+
37. "&userId="+data.value.id;
38. }else if(data.success == false && data.message == "密码错误"){
39. $scope.inputUsername = "";$scope.inputPassword = "";
40. alert("密码错误!");
41. }else if(data.success == false && data.message == "该用户不存在!"){
42. $scope.inputUsername = "";$scope.inputPassword = "";
43. alert("该用户不存在!");
44. }
45. });
46. }
47. });
48. };
49. })

signup.js

1. angular.module("mainapp",[])
2. .controller("maincontroller",function($scope){
3. $scope.inputUsername = "";
4. $scope.inputPassword = "";
5. $scope.inputEmail = "";
6. $scope.inputTel = "";
7. function checkFirst(){
8. if($scope.inputUsername!=null && $scope.inputUsername!=""
9. && $scope.inputPassword!=null && $scope.inputPassword!=""
10. && $scope.inputEmail!=null && $scope.inputEmail!=""
11. && $scope.inputTel!=null && $scope.inputTel!=""){
12. return true;
13. }else{
14. return false;
15. }
16. };
17. //注册
18. $scope.register = function(){
19. if(checkFirst() != false){
20. $scope.inputPassword = hex_md5($scope.inputPassword);
21. $.ajax({
22. type:"POST",
23. url:"/login/register",
24. data:{"username":$scope.inputUsername,"password":$scope.inputPassword,"tel":$scope.inputTel,"email":$scope.inputEmail},
25. contentType:"application/x-www-form-urlencoded",
26. dataType:"json",
27. success:function(data){
28. console.log(data);
29. $scope.$apply(function(){
30. if(data.success == true && data.message == "注册成功"){
31. $scope.inputUsername = "";$scope.inputPassword = "";
32. $scope.inputEmail = "";$scope.inputTel = "";
33. alert("注册成功!");
34. window.location.href = "login.html";
35. }else if(data.success == false && data.message == "该用户名已存在..."){
36. $scope.inputUsername = "";$scope.inputPassword = "";
37. $scope.inputEmail = "";$scope.inputTel = "";
38. alert("该用户名已被注册...");
39. }
40. });
41. }
42. });
43. }else{
44. alert("请将信息填写完整...");
45. };
46. };
47. })

login.html

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <title>Bootstrap Login Form Template</title>
8. <!-- CSS -->
9. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
10. <link rel="stylesheet" href="login&signup/loginassets/assets/bootstrap/css/bootstrap.min.css">
11. <link rel="stylesheet" href="login&signup/loginassets/assets/font-awesome/css/font-awesome.min.css">
12. <link rel="stylesheet" href="login&signup/loginassets/assets/css/form-elements.css">
13. <link rel="stylesheet" href="login&signup/loginassets/assets/css/style.css">
14. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
15. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
16. <!--[if lt IE 9]>
17. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
18. <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
19. <![endif]-->
20. <!-- Favicon and touch icons -->
21. <link rel="shortcut icon" href="login&signup/loginassets/assets/ico/favicon.png">
22. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="login&signup/loginassets/assets/ico/apple-touch-icon-144-precomposed.png">
23. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="login&signup/loginassets/assets/ico/apple-touch-icon-114-precomposed.png">
24. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="login&signup/loginassets/assets/ico/apple-touch-icon-72-precomposed.png">
25. <link rel="apple-touch-icon-precomposed" href="login&signup/loginassets/assets/ico/apple-touch-icon-57-precomposed.png">
26. </head>
27. <body ng-app="mainapp">
28. <!-- Top content -->
29. <div class="top-content">
30. <div class="inner-bg">
31. <div class="container">
32. <div class="row">
33. <div class="col-sm-8 col-sm-offset-2 text">
34. <h1><strong>User</strong> MS</h1>
35. <!--<div class="description">
36. <p>
37. This is a free responsive login form made with Bootstrap.
38. Download it on <a href="http://azmind.com"><strong>AZMIND</strong></a>, customize and use it as you like!
39. </p>
40. </div>-->
41. </div>
42. </div>
43. <div class="row">
44. <div class="col-sm-6 col-sm-offset-3 form-box">
45. <div class="form-top">
46. <div class="form-top-left">
47. <h3>Login to our site</h3>
48. <p>Enter your username and password to log on:</p>
49. </div>
50. <div class="form-top-right">
51. <i class="fa fa-lock"></i>
52. </div>
53. </div>
54. <div class="form-bottom" ng-controller="maincontroller">
55. <form role="form" onsubmit="return ;" class="login-form">
56. <div class="form-group">
57. <label class="sr-only" for="form-username">Username</label>
58. <input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username" ng-model="inputUsername">
59. </div>
60. <div class="form-group">
61. <label class="sr-only" for="form-password">Password</label>
62. <input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password" ng-model="inputPassword">
63. </div>
64. <button type="submit" ng-click="login()" class="btn">Log in!</button>
65. </form>
66. </div>
67. </div>
68. </div>
69. <div class="row">
70. <div class="col-sm-6 col-sm-offset-3 social-login">
71. <h3>not an account?</h3>
72. <span>click to <a href="./signup.html"><strong>sign up</strong></a></span>
73. </div>
74. </div>
75. </div>
76. </div>
77. </div>
78. <!-- Javascript -->
79. <!--<script src="login&signup/signupassets/assets/js/jquery-1.11.1.min.js"></script>-->
80. <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
81. <script src="login&signup/loginassets/assets/bootstrap/js/bootstrap.min.js"></script>
82. <script src="login&signup/loginassets/assets/js/jquery.backstretch.min.js"></script>
83. <script src="login&signup/loginassets/assets/js/scripts.js"></script>
84. <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
85. <script src="login&signup/md5.js"></script>
86. <script src="login&signup/login.js"></script>
87. <!--[if lt IE 10]>
88. <script src="login&signup/loginassets/assets/js/placeholder.js"></script>
89. <![endif]-->
90. </body>
91. </html>

signup.html

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <title>Sign up UMS</title>
8. <!-- CSS -->
9. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
10. <link rel="stylesheet" href="login&signup/signupassets/assets/bootstrap/css/bootstrap.min.css">
11. <link rel="stylesheet" href="login&signup/signupassets/assets/font-awesome/css/font-awesome.min.css">
12. <link rel="stylesheet" href="login&signup/signupassets/assets/css/form-elements.css">
13. <link rel="stylesheet" href="login&signup/signupassets/assets/css/style.css">
14. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
15. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
16. <!--[if lt IE 9]>
17. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
18. <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
19. <![endif]-->
20. <!-- Favicon and touch icons -->
21. <link rel="shortcut icon" href="login&signup/signupassets/assets/ico/favicon.png">
22. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="login&signup/signupassets/assets/ico/apple-touch-icon-144-precomposed.png">
23. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="login&signup/signupassets/assets/ico/apple-touch-icon-114-precomposed.png">
24. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="login&signup/signupassets/assets/ico/apple-touch-icon-72-precomposed.png">
25. <link rel="apple-touch-icon-precomposed" href="login&signup/signupassets/assets/ico/apple-touch-icon-57-precomposed.png">
26. </head>
27. <body ng-app="mainapp">
28. <!-- Top content -->
29. <div class="top-content">
30. <div class="inner-bg">
31. <div class="container">
32. <div class="row">
33. <div class="col-sm-8 col-sm-offset-2 text">
34. <h1><strong>User</strong> MS</h1>
35. <!--<div class="description">
36. <p>
37. This is a free responsive login form made with Bootstrap.
38. Download it on <a href="http://azmind.com"><strong>AZMIND</strong></a>, customize and use it as you like!
39. </p>
40. </div>-->
41. </div>
42. </div>
43. <div class="row">
44. <div class="col-sm-6 col-sm-offset-3 form-box">
45. <div class="form-top">
46. <div class="form-top-left">
47. <h3>Singup to our site</h3>
48. <p>Enter your information to sign up:</p>
49. </div>
50. <div class="form-top-right">
51. <i class="fa fa-book"></i>
52. </div>
53. </div>
54. <div class="form-bottom" ng-controller="maincontroller">
55. <form role="form" onsubmit="return ;" class="login-form">
56. <div class="form-group">
57. <label class="sr-only" for="form-username">Username</label>
58. <input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username" ng-model="inputUsername">
59. </div>
60. <div class="form-group">
61. <label class="sr-only" for="form-password">Password</label>
62. <input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password" ng-model="inputPassword">
63. </div>
64. <div class="form-group">
65. <label class="sr-only" for="form-email">Email</label>
66. <input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email" ng-model="inputEmail">
67. </div>
68. <div class="form-group">
69. <label class="sr-only" for="form-tel">Tel</label>
70. <input type="text" name="form-tel" placeholder="Tel..." class="form-tel form-control" id="form-tel" ng-model="inputTel">
71. </div>
72. <button type="submit" ng-click="register()" class="btn">Sign up!</button>
73. </form>
74. </div>
75. </div>
76. </div>
77. <div class="row">
78. <div class="col-sm-6 col-sm-offset-3 social-login">
79. <h3>yet have an account?</h3>
80. <span>click to <a href="./login.html"><strong>log in</strong></a></span>
81. </div>
82. </div>
83. </div>
84. </div>
85. </div>
86. <!-- Javascript -->
87. <!--<script src="login&signup/signupassets/assets/js/jquery-1.11.1.min.js"></script>-->
88. <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
89. <script src="login&signup/signupassets/assets/bootstrap/js/bootstrap.min.js"></script>
90. <script src="login&signup/signupassets/assets/js/jquery.backstretch.min.js"></script>
91. <script src="login&signup/signupassets/assets/js/scripts.js"></script>
92. <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
93. <script src="login&signup/md5.js"></script>
94. <script src="login&signup/signup.js"></script>
95. <!--[if lt IE 10]>
96. <script src="login&signup/signupassets/assets/js/placeholder.js"></script>
97. <![endif]-->
98. </body>
99. </html>

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