释放双眼，带上耳机，听听看~！
注册登录
–利用简单的编写注册登录系统来打通从前端到后台的数据传输路径。
一、建立数据库、基本表
基本环境：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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3import java.sql.SQLException;
4import java.util.Collection;
5import java.util.List;
6
7import org.hibernate.HibernateException;
8
9import com.whut.work.base.model.Page;
10import com.whut.work.base.vo.Parameter;
11
12public interface IBaseDao<T> {
13
14 //单个CRUD
15 public void save(final T entity) throws Exception;
16 public void delete(final T entity) throws Exception;
17 public void deleteWithHql(final String hql) throws Exception;
18 public void update(final T entity) throws Exception;
19 public T getOne(final int id) throws Exception;
20
21 //批处理
22 public int batchSave(final List<T> list) throws Exception;
23 public void deleteAll(final Collection entities) throws Exception;
24
25 //createQuery（Query）
26 public T findOne(final String hql) throws Exception;
27 public T findOne(final String hql, final Parameter parameter) throws Exception;
28
29 //list查询
30 public List<T> findList(final String hql) throws Exception;
31 public List<T> findList(final String hql, final Parameter parameter) throws Exception;
32
33 //分页查询
34 public Page<T> findPage(final int currentPage, final int pageSize, final String queryHql, final String countHql, final Object[] values)
35 throws HibernateException,SQLException;
36 public Page<T> findPage(final int currentPage, final int pageSize, final String queryHql, final String countHql)
37 throws HibernateException,SQLException;
38
39 //查询满足条件的记录数
40 public long findCount(final String hql);
41 public long findCount(final String hql, final Object[] values);
42}
43
44
2
2
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
2
3import java.sql.SQLException;
4import java.util.Collection;
5import java.util.List;
6import java.util.Set;
7
8import javax.annotation.Resource;
9
10import org.hibernate.HibernateException;
11import org.hibernate.Query;
12import org.hibernate.Session;
13import org.hibernate.SessionFactory;
14
15import com.whut.work.base.dao.IBaseDao;
16import com.whut.work.base.model.Page;
17import com.whut.work.base.vo.Parameter;
18
19public class BaseDaoImpl<T> implements IBaseDao<T> {
20
21 private int BATCH_MAX_ROW = 5;
22
23 private SessionFactory sessionFactory;
24 private Class<T> entityClass;
25
26 //construct methods
27 public BaseDaoImpl(){
28}
29
30 public BaseDaoImpl(Class<T> entityClass){
31 this.entityClass = entityClass;
32 }
33
34
35 @Override
36 public void save(T entity) throws Exception {
37 Session session = this.getSession();
38 session.beginTransaction();
39 session.save(entity);
40 session.getTransaction().commit();
41 }
42
43 @Override
44 public int batchSave(List<T> list) throws Exception {
45 Session session = this.getSession();
46 session.beginTransaction();
47 for (int i = 0; i < list.size(); ++i) {
48 session.save(list.get(i));
49 if (i % BATCH_MAX_ROW == 0) {
50 session.flush();
51 session.clear();
52 }
53 }
54 session.flush();
55 session.clear();
56 session.getTransaction().commit();
57 return list.size();
58 }
59
60 @Override
61 public void deleteAll(Collection entities) throws Exception {
62 Session session = this.getSession();
63 session.beginTransaction();
64 for (Object entity : entities) {
65 session.delete(entity);
66 }
67 session.getTransaction().commit();
68 }
69
70 @Override
71 public void delete(T entity) throws Exception {
72 Session session = this.getSession();
73 session.beginTransaction();
74 session.delete(entity);
75 session.getTransaction().commit();
76 }
77
78 @Override
79 public void deleteWithHql(String hql) throws Exception {
80 Session session = this.getSession();
81 session.beginTransaction();
82 Query query = session.createQuery(hql);
83 query.executeUpdate();
84 session.getTransaction().commit();
85 }
86
87 @Override
88 public void update(T entity) throws Exception {
89 Session session = this.getSession();
90 session.beginTransaction();
91 session.update(entity);
92 session.getTransaction().commit();
93 }
94
95 @SuppressWarnings("unchecked")
96 @Override
97 public T getOne(int id) throws Exception {
98 Session session = this.getSession();
99 session.beginTransaction();
100 Object returnObject = session.get(entityClass, id);
101 session.getTransaction().commit();
102
103 return (T) returnObject;
104 }
105
106 @Override
107 public T findOne(String hql) throws Exception {
108 return findOne(hql,null);
109 }
110
111 @SuppressWarnings("unchecked")
112 @Override
113 public T findOne(final String hql, final Parameter parameter) throws Exception {
114 Session session = this.getSession();
115 session.beginTransaction();
116 Query query = session.createQuery(hql);
117 setParameter(query, parameter);
118 Object returnObject = query.setMaxResults(1).uniqueResult();
119 session.getTransaction().commit();
120
121 return (T) returnObject;
122 }
123
124 @Override
125 public List<T> findList(final String hql) throws Exception {
126 return findList(hql, null);
127 }
128
129 @SuppressWarnings("unchecked")
130 @Override
131 public List<T> findList(final String hql, final Parameter parameter) throws Exception {
132 Session session = this.getSession();
133 session.beginTransaction();
134 Query query = session.createQuery(hql);
135 setParameter(query, parameter);
136 List<T> returnList = query.list();
137 session.getTransaction().commit();
138
139 return returnList;
140 }
141
142 /**
143 *
144 * @param query
145 * @param parameter
146 * set sql parameters
147 */
148 private void setParameter(Query query, Parameter parameter) {
149 if (parameter != null) {
150 Set<String> keySet = parameter.keySet();
151 for (String string : keySet) {
152 Object value = parameter.get(string);
153 if (value instanceof Collection<?>) {
154 query.setParameterList(string, (Collection<?>) value);
155 } else if (value instanceof Object[]) {
156 query.setParameterList(string, (Object[]) value);
157 } else {
158 query.setParameter(string, value);
159 }
160 }
161 }
162 }
163
164 public SessionFactory getSessionFactory() {
165 return sessionFactory;
166 }
167
168 @Resource(name="sessionFactory")//在applicationContext.xml文件中有配置
169 public void setSessionFactory(SessionFactory sessionFactory) {
170 this.sessionFactory = sessionFactory;
171 }
172
173 /**
174 * @return session
175 */
176 private Session getSession() {
177 return sessionFactory.getCurrentSession();
178 }
179
180 @SuppressWarnings("unchecked")
181 @Override
182 public Page<T> findPage(int currentPage, int pageSize, String queryHql, String countHql, Object[] values)
183 throws HibernateException, SQLException {
184 Session session = this.getSession();
185 session.beginTransaction();
186 Query query = session.createQuery(queryHql);
187 if (values != null) {
188 for (int i = 0; i < values.length; i++) {
189 query.setParameter(i, values[i]);
190 }
191 }
192 // 如果pageSize<=0则查询全部，用于打印导出等...
193 if (pageSize > 0) {
194 query.setFirstResult(pageSize * (currentPage - 1));//设置要查询的结果集的开始索引位置
195 query.setMaxResults(pageSize);//设置要查询的结果集的数量
196 }
197 List<T> returnList = query.list();
198 session.getTransaction().commit();
199 long totalRecords = findCount(countHql, values);
200
201 return new Page<T>(returnList, totalRecords, currentPage, pageSize);
202 }
203
204 @Override
205 public Page<T> findPage(int currentPage, int pageSize, String queryHql, String countHql)
206 throws HibernateException, SQLException {
207 return findPage(currentPage, pageSize, queryHql, countHql, null);
208 }
209
210 @Override
211 public long findCount(String hql) {
212 return findCount(hql, null);
213 }
214
215 @Override
216 public long findCount(String hql, Object[] values) {
217 Session session = this.getSession();
218 session.beginTransaction();
219 Query query = session.createQuery(hql);
220 if (values != null) {
221 for (int i = 0; i < values.length; i++) {
222 query.setParameter(i, values[i]);
223 }
224 }
225 Long returnLong = (Long) query.setMaxResults(1).uniqueResult();
226 session.getTransaction().commit();
227
228 return returnLong;
229 }
230
231}
232
233
通过以上代码我们可以发现，在分页查询以及设置hql参数的操作中还需要用到两个类：Page.java和Parameter.java。
Page.java
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
2
3import java.util.List;
4
5public class Page<T> {
6
7 private int current = 1;
8 private int total = 0;
9 private long records = 0;
10 private int size = 10;
11 private String orderBy = "";
12 private String order = "";
13
14 public String getOrderBy() {
15 return orderBy;
16 }
17
18 public void setOrderBy(String orderBy) {
19 this.orderBy = orderBy;
20 }
21
22 public String getOrder() {
23 return order;
24 }
25
26 public void setOrder(String order) {
27 this.order = order;
28 }
29
30 private List<T> list = null;
31
32 public Page() {
33
34 }
35
36 public Page(int currentPage, int pageSize){
37 current=currentPage;
38 size=pageSize;
39 }
40
41 public Page(List<T> list, int current, int size) {
42 this.current = current;
43 this.size = size;
44 this.list = list;
45 }
46
47 public Page(List<T> list, long records, int current, int size, String orderBy, String order) {
48 this.list = list;
49 this.current = current;
50 this.records = records;
51 this.size = size;
52 this.orderBy = orderBy;
53 this.order = order;
54 this.total = records == 0 ? 1 : (int) ((records - 1) / size + 1);//分几页的计算方法
55
56 if (this.current > this.total) {
57 this.current = this.total;
58 }
59 if (current < 1) {
60 this.current = 1;
61 }
62 }
63
64 public Page(List<T> list, long records, int current, int size) {
65 this(list, records, current, size, null, null);
66 }
67
68 public int getCurrent() {
69 return current;
70 }
71
72 public void setCurrent(int current) {
73 this.current = current;
74 }
75
76 public int getSize() {
77 return size;
78 }
79
80 public void setSize(int size) {
81 this.size = size;
82 }
83
84 public int getTotal() {
85 return total;
86 }
87
88 public void setTotal(int l) {
89 this.total = l;
90 }
91
92 public long getRecords() {
93 return records;
94 }
95
96 public void setRecords(long records) {
97 this.records = records;
98 }
99
100 public List<T> getList() {
101 return list;
102 }
103
104 public void setList(List<T> list) {
105 this.list = list;
106 }
107
108 @Override
109 public String toString() {
110 return "Page{" +
111 "current=" + current +
112 ", size=" + size +
113 ", list=" + list +
114 '}';
115 }
116}
117
118
Parameter.java
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3import java.util.HashMap;
4
5/**
6 * 查询参数类
7 */
8public class Parameter extends HashMap<String, Object> {
9
10 private static final long serialVersionUID = 1L;
11
12 /**
13 * 构造类，例：new Parameter(id, parentIds)
14 *
15 * @param values 参数值
16 */
17 public Parameter(Object... values) {
18 if (values != null) {
19 for (int i = 0; i < values.length; i++) {
20 put("p" + i, values[i]);
21 }
22 }
23 }
24
25 /**
26 * 构造类，例：new Parameter(new Object[][]{{"id", id}, {"parentIds", parentIds}})
27 *
28 * @param parameters 参数二维数组
29 */
30 public Parameter(Object[][] parameters) {
31 if (parameters != null) {
32 for (Object[] os : parameters) {
33 if (os.length == 2) {
34 put((String) os[0], os[1]);
35 }
36 }
37 }
38 }
39
40}
41
至此，我们先给出项目结构图，关于那个util包，以后我们遇到相应问题时再来讨论它（暂时不用建立它）。
当然，关于各种的包的命名大家完全可以根据自己喜好来进行。
三、用户实体（user包）
之前我们已经建立了数据库中的user表，现在我们来编写用户model层代码，并用注解配置。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3import java.util.Date;
4
5import javax.persistence.Column;
6import javax.persistence.Entity;
7import javax.persistence.GeneratedValue;
8import javax.persistence.Id;
9import javax.persistence.Table;
10
11@Entity
12@Table(name="user")
13public class User {
14
15 @Id
16 @GeneratedValue
17 private Integer id;
18 private String username;
19 private String password;
20 private String tel;
21 private String email;
22 @Column(name="create_time")
23 private Date createTime;
24 @Column(name="is_delete")
25 private Boolean isDelete;
26
27 public Integer getId() {
28 return id;
29 }
30 public void setId(Integer id) {
31 this.id = id;
32 }
33 public String getUsername() {
34 return username;
35 }
36 public void setUsername(String username) {
37 this.username = username;
38 }
39 public String getPassword() {
40 return password;
41 }
42 public void setPassword(String password) {
43 this.password = password;
44 }
45 public Date getCreateTime() {
46 return createTime;
47 }
48 public void setCreateTime(Date createTime) {
49 this.createTime = createTime;
50 }
51 public Boolean getIsDelete() {
52 return isDelete;
53 }
54 public void setIsDelete(Boolean isDelete) {
55 this.isDelete = isDelete;
56 }
57
58 public String getTel() {
59 return tel;
60 }
61
62 public void setTel(String tel) {
63 this.tel = tel;
64 }
65
66 public String getEmail() {
67 return email;
68 }
69
70 public void setEmail(String email) {
71 this.email = email;
72 }
73}
74
75
然后编写用户的dao层：
IUserDao.java
2
3
4
5
6
7
8
9
10
2
3import com.whut.work.base.dao.IBaseDao;
4import com.whut.work.user.model.User;
5
6public interface IUserDao extends IBaseDao<User>{
7
8}
9
10
2
2
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3import org.springframework.stereotype.Component;
4
5import com.whut.work.base.dao.Impl.BaseDaoImpl;
6import com.whut.work.user.dao.IUserDao;
7import com.whut.work.user.model.User;
8
9@Component
10public class UserDaoImpl extends BaseDaoImpl<User> implements IUserDao {
11
12 public UserDaoImpl(){
13 super(User.class);
14 }
15
16}
17
18
四、登录部分（login包）
我们暂时只需编写登录部分的controller层和service层。调用过程为：login下的controller接收到前台传送过来的用户登录信息，调用login下的service，接着通过user下的dao与数据库进行交互。login包中包含注册和登录功能。
ILoginService.java
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3import java.util.Map;
4
5public interface ILoginService {
6
7 //登录
8 public Map<String,Object> login(String username, String password) throws Exception;
9
10 //注册
11 public Map<String,Object> register(String username, String password, String tel, String email) throws Exception;
12
13}
14
15
LoginServiceImpl.java
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
2
3import java.util.Date;
4import java.util.HashMap;
5import java.util.List;
6import java.util.Map;
7
8import org.springframework.beans.factory.annotation.Autowired;
9import org.springframework.stereotype.Component;
10
11import com.whut.work.login.service.ILoginService;
12import com.whut.work.user.dao.IUserDao;
13import com.whut.work.user.model.User;
14
15@Component
16public class LoginServiceImpl implements ILoginService {
17
18 @Autowired
19 private IUserDao userDao;
20
21 @Override
22 public Map<String, Object> login(String username, String password) throws Exception {
23 Map<String,Object> returnMap = new HashMap<String,Object>();
24
25 String hql = "from User u where u.username='"+username+"'";
26 User user = new User();
27 try {
28 user = userDao.findOne(hql);
29 } catch (Exception e) {
30 e.printStackTrace();
31 }
32 if(user != null){
33 if(user.getPassword().equals(password)){
34 returnMap.put("value", user);
35 returnMap.put("message", "登录成功");
36 returnMap.put("success", true);
37 }else{
38 returnMap.put("message", "密码错误");
39 returnMap.put("success", false);
40 }
41 }else{
42 returnMap.put("message", "该用户不存在!");
43 returnMap.put("success", false);
44 }
45 return returnMap;
46 }
47
48 @Override
49 public Map<String, Object> register(String username, String password,String tel,String email) throws Exception {
50 Map<String,Object> returnMap = new HashMap<String,Object>();
51
52 String hql = "from User u where u.username='"+username+"'";
53 User user = new User();
54 if(userDao.findOne(hql) != null){
55 returnMap.put("message", "该用户名已存在...");
56 returnMap.put("success", false);
57 return returnMap;
58 }else{
59 user.setUsername(username);
60 user.setPassword(password);
61 user.setTel(tel);
62 user.setEmail(email);
63 user.setCreateTime(new Date());
64 user.setIsDelete(false);
65 userDao.save(user);
66 returnMap.put("value", user);
67 returnMap.put("message", "注册成功");
68 returnMap.put("success", true);
69 return returnMap;
70 }
71 }
72
73}
74
LoginCtrl.java
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2
3import java.util.HashMap;
4import java.util.Map;
5
6import javax.servlet.http.HttpServletRequest;
7import javax.servlet.http.HttpSession;
8
9import org.springframework.beans.factory.annotation.Autowired;
10import org.springframework.stereotype.Controller;
11import org.springframework.web.bind.annotation.RequestMapping;
12import org.springframework.web.bind.annotation.RequestMethod;
13import org.springframework.web.bind.annotation.ResponseBody;
14
15import com.whut.work.base.model.Page;
16import com.whut.work.login.service.ILoginService;
17import com.whut.work.user.model.User;
18import com.whut.work.user.service.IUserService;
19
20@Controller
21@RequestMapping("/login")
22public class LoginCtrl {
23
24 @Autowired
25 private ILoginService loginService;
26
27 @RequestMapping(value="/login",method=RequestMethod.POST)
28 @ResponseBody
29 public Map<String,Object> login(HttpServletRequest request,String username,String password){
30 Map<String,Object> returnMap = new HashMap<String,Object>();
31
32 try {
33 Map<String,Object> map = loginService.login(username, password);
34 //获取user实体
35 Object object = map.get("value");
36 if(object != null){
37 User user = (User) object;
38 HttpSession session = request.getSession();
39 session.setAttribute("userId", user.getId());
40 }
41 returnMap.put("value", object);
42 returnMap.put("message", map.get("message"));
43 returnMap.put("success", map.get("success"));
44 } catch (Exception e) {
45 returnMap.put("message", "异常：登录失败!");
46 returnMap.put("success", false);
47 e.printStackTrace();
48 }
49 return returnMap;
50 }
51
52 @RequestMapping(value="/register",method=RequestMethod.POST)
53 @ResponseBody
54 public Map<String,Object> register(HttpServletRequest request,String username,String password,String tel,String email){
55 Map<String,Object> returnMap = new HashMap<String,Object>();
56
57 try {
58 Map<String,Object> map = loginService.register(username, password,tel,email);
59 //获取user实体
60 Object object = map.get("value");
61 if(object != null){
62 User user = (User) object;
63 HttpSession session = request.getSession();
64 session.setAttribute("userId", user.getId());
65 }
66 returnMap.put("value", object);
67 returnMap.put("message", map.get("message"));
68 returnMap.put("success", map.get("success"));
69 } catch (Exception e) {
70 returnMap.put("message", "异常：注册失败!");
71 returnMap.put("success", false);
72 e.printStackTrace();
73 }
74 return returnMap;
75 }
76
77}
78
79
至此，项目的结构如下图所示：
关于user包下的controller、service以及vo我们以后会遇到的，这里先忽略。
五、前端页面
前端页面效果部分我就不多讲了，代码也只贴部分重点的。前端css框架为bootstrap，js框架为angularjs。
login.js
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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 })
50
51
52
signup.js
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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 })
48
49
50
51
login.html
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
2<html lang="en">
3
4 <head>
5
6 <meta charset="utf-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <title>Bootstrap Login Form Template</title>
10
11 <!-- CSS -->
12 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
13 <link rel="stylesheet" href="login&signup/loginassets/assets/bootstrap/css/bootstrap.min.css">
14 <link rel="stylesheet" href="login&signup/loginassets/assets/font-awesome/css/font-awesome.min.css">
15 <link rel="stylesheet" href="login&signup/loginassets/assets/css/form-elements.css">
16 <link rel="stylesheet" href="login&signup/loginassets/assets/css/style.css">
17
18 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
19 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
20 <!--[if lt IE 9]>
21 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
22 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
23 <![endif]-->
24
25 <!-- Favicon and touch icons -->
26 <link rel="shortcut icon" href="login&signup/loginassets/assets/ico/favicon.png">
27 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="login&signup/loginassets/assets/ico/apple-touch-icon-144-precomposed.png">
28 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="login&signup/loginassets/assets/ico/apple-touch-icon-114-precomposed.png">
29 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="login&signup/loginassets/assets/ico/apple-touch-icon-72-precomposed.png">
30 <link rel="apple-touch-icon-precomposed" href="login&signup/loginassets/assets/ico/apple-touch-icon-57-precomposed.png">
31
32 </head>
33
34 <body ng-app="mainapp">
35
36 <!-- Top content -->
37 <div class="top-content">
38
39 <div class="inner-bg">
40 <div class="container">
41 <div class="row">
42 <div class="col-sm-8 col-sm-offset-2 text">
43 <h1><strong>User</strong> MS</h1>
44 <!--<div class="description">
45 <p>
46 This is a free responsive login form made with Bootstrap.
47 Download it on <a href="http://azmind.com"><strong>AZMIND</strong></a>, customize and use it as you like!
48 </p>
49 </div>-->
50 </div>
51 </div>
52 <div class="row">
53 <div class="col-sm-6 col-sm-offset-3 form-box">
54 <div class="form-top">
55 <div class="form-top-left">
56 <h3>Login to our site</h3>
57 <p>Enter your username and password to log on:</p>
58 </div>
59 <div class="form-top-right">
60 <i class="fa fa-lock"></i>
61 </div>
62 </div>
63 <div class="form-bottom" ng-controller="maincontroller">
64 <form role="form" οnsubmit="return ;" class="login-form">
65 <div class="form-group">
66 <label class="sr-only" for="form-username">Username</label>
67 <input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username" ng-model="inputUsername">
68 </div>
69 <div class="form-group">
70 <label class="sr-only" for="form-password">Password</label>
71 <input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password" ng-model="inputPassword">
72 </div>
73 <button type="submit" ng-click="login()" class="btn">Log in!</button>
74 </form>
75 </div>
76 </div>
77 </div>
78 <div class="row">
79 <div class="col-sm-6 col-sm-offset-3 social-login">
80 <h3>not an account?</h3>
81 <span>click to <a href="./signup.html"><strong>sign up</strong></a></span>
82 </div>
83 </div>
84 </div>
85 </div>
86
87 </div>
88
89
90 <!-- Javascript -->
91 <!--<script src="login&signup/signupassets/assets/js/jquery-1.11.1.min.js"></script>-->
92 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
93 <script src="login&signup/loginassets/assets/bootstrap/js/bootstrap.min.js"></script>
94 <script src="login&signup/loginassets/assets/js/jquery.backstretch.min.js"></script>
95 <script src="login&signup/loginassets/assets/js/scripts.js"></script>
96 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
97 <script src="login&signup/md5.js"></script>
98 <script src="login&signup/login.js"></script>
99
100 <!--[if lt IE 10]>
101 <script src="login&signup/loginassets/assets/js/placeholder.js"></script>
102 <![endif]-->
103
104 </body>
105
106</html>
107
signup.html
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
2<html lang="en">
3
4 <head>
5
6 <meta charset="utf-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <title>Sign up UMS</title>
10
11 <!-- CSS -->
12 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
13 <link rel="stylesheet" href="login&signup/signupassets/assets/bootstrap/css/bootstrap.min.css">
14 <link rel="stylesheet" href="login&signup/signupassets/assets/font-awesome/css/font-awesome.min.css">
15 <link rel="stylesheet" href="login&signup/signupassets/assets/css/form-elements.css">
16 <link rel="stylesheet" href="login&signup/signupassets/assets/css/style.css">
17
18 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
19 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
20 <!--[if lt IE 9]>
21 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
22 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
23 <![endif]-->
24
25 <!-- Favicon and touch icons -->
26 <link rel="shortcut icon" href="login&signup/signupassets/assets/ico/favicon.png">
27 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="login&signup/signupassets/assets/ico/apple-touch-icon-144-precomposed.png">
28 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="login&signup/signupassets/assets/ico/apple-touch-icon-114-precomposed.png">
29 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="login&signup/signupassets/assets/ico/apple-touch-icon-72-precomposed.png">
30 <link rel="apple-touch-icon-precomposed" href="login&signup/signupassets/assets/ico/apple-touch-icon-57-precomposed.png">
31
32 </head>
33
34 <body ng-app="mainapp">
35
36 <!-- Top content -->
37 <div class="top-content">
38
39 <div class="inner-bg">
40 <div class="container">
41 <div class="row">
42 <div class="col-sm-8 col-sm-offset-2 text">
43 <h1><strong>User</strong> MS</h1>
44 <!--<div class="description">
45 <p>
46 This is a free responsive login form made with Bootstrap.
47 Download it on <a href="http://azmind.com"><strong>AZMIND</strong></a>, customize and use it as you like!
48 </p>
49 </div>-->
50 </div>
51 </div>
52 <div class="row">
53 <div class="col-sm-6 col-sm-offset-3 form-box">
54 <div class="form-top">
55 <div class="form-top-left">
56 <h3>Singup to our site</h3>
57 <p>Enter your information to sign up:</p>
58 </div>
59 <div class="form-top-right">
60 <i class="fa fa-book"></i>
61 </div>
62 </div>
63 <div class="form-bottom" ng-controller="maincontroller">
64 <form role="form" οnsubmit="return ;" class="login-form">
65 <div class="form-group">
66 <label class="sr-only" for="form-username">Username</label>
67 <input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username" ng-model="inputUsername">
68 </div>
69 <div class="form-group">
70 <label class="sr-only" for="form-password">Password</label>
71 <input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password" ng-model="inputPassword">
72 </div>
73 <div class="form-group">
74 <label class="sr-only" for="form-email">Email</label>
75 <input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email" ng-model="inputEmail">
76 </div>
77 <div class="form-group">
78 <label class="sr-only" for="form-tel">Tel</label>
79 <input type="text" name="form-tel" placeholder="Tel..." class="form-tel form-control" id="form-tel" ng-model="inputTel">
80 </div>
81 <button type="submit" ng-click="register()" class="btn">Sign up!</button>
82 </form>
83 </div>
84 </div>
85 </div>
86 <div class="row">
87 <div class="col-sm-6 col-sm-offset-3 social-login">
88 <h3>yet have an account?</h3>
89 <span>click to <a href="./login.html"><strong>log in</strong></a></span>
90 </div>
91 </div>
92 </div>
93 </div>
94
95 </div>
96
97
98 <!-- Javascript -->
99 <!--<script src="login&signup/signupassets/assets/js/jquery-1.11.1.min.js"></script>-->
100 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
101 <script src="login&signup/signupassets/assets/bootstrap/js/bootstrap.min.js"></script>
102 <script src="login&signup/signupassets/assets/js/jquery.backstretch.min.js"></script>
103 <script src="login&signup/signupassets/assets/js/scripts.js"></script>
104 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
105 <script src="login&signup/md5.js"></script>
106 <script src="login&signup/signup.js"></script>
107
108
109 <!--[if lt IE 10]>
110 <script src="login&signup/signupassets/assets/js/placeholder.js"></script>
111 <![endif]-->
112
113 </body>
114
115</html>
116
到这里，本文已经很长了，项目的演示就放在下一篇博客中啦。
