springboot 整合 MongoDB 实现登录注册，html 页面获取后台参数的方法

springboot简介：

Spring Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者。

MongoDB的简介：

MongoDB 是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。

它是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。他支持的数据结构非常松散，是类似json的bson格式，因此可以存储比较复杂的数据类型。Mongo最大的特点是他支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。

做完这一个小练习，发现 springboot 对 html 要求十分严格，稍不注意就会出现某个标签必须加上结束标签才不会报错，但是有些标签即使加上了结束标签，仍然报错。

只能做一个springboot对html的不严格检查的处理：

在pom.xml配置上：

1 <!--启用不严格检查html-->
2      <dependency>
3         <groupId>net.sourceforge.nekohtml</groupId>
4         <artifactId>nekohtml</artifactId>
5      </dependency>

还要在application.properties配置：

1 #对html检查不那么严格
2 spring.thymeleaf.mode = LEGACYHTML5

spring boot建议不要使用JSP，建议使用Thymeleaf来做动态页面传递参数到html页面，也就是html页面

在pom.xml中启用themleaf模板依赖：

注意的是：在controller层中配置 @Controller 才能在controller层中 return 到 html 页面，

因为使用 @Controller 才可以返回html页面，使用@ResController 返回的是字符串

1 <!-- themleaf模板依赖-->
2     <dependency>
3         <groupId>org.springframework.boot</groupId>
4         <artifactId>spring-boot-starter-thymeleaf</artifactId>
5     </dependency>

使用的是 MongoDB数据库，所以需要增加mongodb支持：

1 <!-- 增加mongodb支持 -->  
2     <dependency>  
3        <groupId>org.springframework.boot</groupId>  
4        <artifactId>spring-boot-starter-data-mongodb</artifactId>  
5     </dependency>

因为MongoDB默认是没有用户名密码，所以在 application.properties 对 MongoDB 的只需要配置上：选择要操作的数据库名称

当要选择操作数据库的某个集合（表）的时候，就是定义的实体类的名称，所以实体类的名称一定要与你选择的数据库里面的集合（表）名相对应，如果不存在，就会自动创建该集合（表）

1 # 选择数据库名称
2 spring.data.mongodb.database=krry_test

springboot框架，html 页面要想从后台接收参数，需要这样子：

后台可使用 model 存放数据，注意的是 Model 是 request 级别的

1     @RequestMapping(value="/index")
2     public String index(Model model){  
3         
4         User usero = new User("##errors##","1234");
5         model.addAttribute("user", usero);
6         
7         return "index";
8     }

在 html 标签设置：<html xmlns:th="http://www.thymeleaf.org">

在标签内部用 th:text="${user.username}" 获取

 1 <!DOCTYPE HTML>
 2 <html xmlns:th="http://www.thymeleaf.org">
 3   <head>
 4         <title>首页</title>
 5   </head>
 6   <body>
 7   
 8     <span class="username" th:text="${user.username}"></span>
 9 
10   </body>
11 </html>

话不多少，先看看目录结构：

pom.xml

 1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 2   <modelVersion>4.0.0</modelVersion>
 3   <groupId>com.krry</groupId>
 4   <artifactId>springboot_mongodb</artifactId>
 5   <version>0.0.1-SNAPSHOT</version>
 6   <!--  
 7        spring boot 父节点依赖,  
 8        引入这个之后相关的引入就不需要添加version配置，  
 9        spring boot会自动选择最合适的版本进行添加。  
10      -->  
11    <parent>  
12        <groupId>org.springframework.boot</groupId>  
13        <artifactId>spring-boot-starter-parent</artifactId>  
14        <version>1.5.2.RELEASE</version>  
15     </parent>    
16     
17     <!-- spring boot web支持：mvc,aop... -->  
18     <dependencies>
19     
20     <dependency>
21         <groupId>org.springframework.boot</groupId>
22         <artifactId>spring-boot-starter-web</artifactId>
23     </dependency>
24     <!-- themleaf模板依赖-->
25     <dependency>
26         <groupId>org.springframework.boot</groupId>
27         <artifactId>spring-boot-starter-thymeleaf</artifactId>
28     </dependency>
29     
30     <!--启用不严格检查html-->
31      <dependency>
32         <groupId>net.sourceforge.nekohtml</groupId>
33         <artifactId>nekohtml</artifactId>
34      </dependency>
35          
36     <!-- 增加mongodb支持 -->  
37     <dependency>  
38        <groupId>org.springframework.boot</groupId>  
39        <artifactId>spring-boot-starter-data-mongodb</artifactId>  
40     </dependency>  
41     
42     </dependencies>
43     
44 </project>

application.properties

 1 # MongoDB 默认是无密码，这里配置一下要操作的数据库名称就行
 2 #spring.data.mongodb.authentication-database= # Authentication database name.
 3 # 选择数据库名称
 4 spring.data.mongodb.database=krry_test
 5 #对html检查不那么严格
 6 spring.thymeleaf.mode = LEGACYHTML5
 7 #spring.data.mongodb.field-naming-strategy= # Fully qualified name of the FieldNamingStrategy to use.
 8 #spring.data.mongodb.grid-fs-database= # GridFS database name.
 9 #spring.data.mongodb.host=localhost # Mongo server host.
10 #spring.data.mongodb.password= # Login password of the mongo server.
11 #spring.data.mongodb.port=27017 # Mongo server port.
12 #spring.data.mongodb.repositories.enabled=true # Enable Mongo repositories.
13 #spring.data.mongodb.uri=mongodb://localhost/test # Mongo database URI. When set, host and port are ignored.
14 #spring.data.mongodb.username= # Login user of the mongo server.

实体类：User.java

 1 package com.krry.entity;
 2 
 3 import org.springframework.data.annotation.Id;
 4 
 5 /**
 6  * 实体类，类名对应的是MongoDB的集合名（表名），若没有，则自动创建
 7  * @author asusaad
 8  *
 9  */
10 public class User {
11     
12     /**
13      *  cid：该字段用于mongodb的“_id"索引
14      *  1 需要    @Id的注解
15      *  2定义为String类型  ，如果定义为Integer可能索引只会是0
16      *  会出现key重复导致数据库插不进去的情况
17      *  3该类型也是MongoRepository泛型类主键的ID
18      * 
19      */
20     @Id
21     private String cid;
22     private String username;
23     private String password;
24     
25     public User(){
26         
27     }
28     
29     public User(String username, String password) {
30         this.username = username;
31         this.password = password;
32     }
33     
34     public String getCid() {
35         return cid;
36     }
37     public void setCid(String cid) {
38         this.cid = cid;
39     }
40     public String getUsername() {
41         return username;
42     }
43     public void setUsername(String username) {
44         this.username = username;
45     }
46     public String getPassword() {
47         return password;
48     }
49     public void setPassword(String password) {
50         this.password = password;
51     }
52     
53     
54 }

数据库操作的接口：UserRepository.java

 1 package com.krry.repository;
 2 
 3 import org.springframework.data.mongodb.repository.MongoRepository;
 4 
 5 import com.krry.entity.User;
 6 
 7 
 8 public interface UserRepository extends MongoRepository<User, String> {
 9 /**
10  * 
11  * findByUsername 命名有研究，比如 findBy后面的名称是实体类属性名称
12  * Username
13  * 
14  */
15     public User findByUsername(String username);
16 }

控制层：UserController.java

  1 package com.krry.controller;
  2 
  3 import java.util.List;
  4 
  5 import javax.servlet.http.HttpServletRequest;
  6 
  7 import org.springframework.beans.factory.annotation.Autowired;
  8 import org.springframework.data.mongodb.core.MongoTemplate;
  9 import org.springframework.stereotype.Controller;
 10 import org.springframework.ui.Model;
 11 import org.springframework.web.bind.annotation.RequestMapping;
 12 import org.springframework.web.bind.annotation.ResponseBody;
 13 
 14 import com.krry.entity.User;
 15 import com.krry.repository.UserRepository;
 16 
 17 //使用@Controller 才可以返回html页面，使用@ResController 返回的是字符串
 18 @Controller
 19 @RequestMapping(value="/index")
 20 public class UserController {
 21     
 22     @Autowired
 23     private UserRepository userRepository;
 24     
 25     @Autowired  
 26     private MongoTemplate mongoTemplate;  
 27 
 28     //spring boot建议不要使用JSP，默认使用Thymeleaf来做动态页面传递参数到html页面
 29     //Model是request级别的
 30     /**
 31      * 首页
 32      * @param request
 33      * @return
 34      */
 35     @RequestMapping(value="/index")
 36     public String index(Model model,HttpServletRequest request){  
 37         
 38         User user = (User) request.getAttribute("user");
 39         
 40         if(user == null){
 41 //            System.out.println(user);
 42             User usero = new User("##errors##","1234");
 43             model.addAttribute("user", usero);
 44         }
 45         
 46         return "index";
 47     }
 48     
 49     /**
 50      * 打开登录界面
 51      * @return
 52      */
 53     @RequestMapping(value="/oplogin")
 54     public String oplogin(){
 55         
 56         return "login";
 57     }
 58     
 59     /**
 60      * 登录
 61      * @param model
 62      * @return
 63      */
 64     @RequestMapping(value="/login")
 65     public String login(HttpServletRequest request){
 66         //获取用户和密码
 67         String username = request.getParameter("username");
 68         String password = request.getParameter("password");
 69         
 70         
 71         //根据用户名查询，用户是否存在
 72         User user = userRepository.findByUsername(username);
 73 
 74         //如果存在
 75         if(user!=null){
 76             
 77             if(password.equals(user.getPassword())){
 78                 //如果密码正确
 79                 //将用户信息放入到会话中...
 80                 request.setAttribute("user", user);
 81                 
 82                 return "index";
 83                 
 84             }else{
 85                 //如果密码错误
 86                 System.out.println("密码错误");
 87                 return "ferror";
 88             }
 89         }else{
 90             //如果不存在，代码邮箱和密码输入有误
 91             System.out.println("用户不存在");
 92             return "ferror";
 93         }
 94     }
 95     
 96     
 97     
 98     /**
 99      * 打开注册界面
100      * @return
101      */
102     @RequestMapping("/resgi")  
103     public String resgi(){  
104         
105         return "resgi";  
106     }
107     
108     
109     /**
110      * 注册控制层
111      * @param request
112      * @return
113      */
114     @RequestMapping(value="/rege")
115     public String resig(HttpServletRequest request){
116         //获取用户和密码
117         String username = request.getParameter("username");
118         String password = request.getParameter("password");
119         
120         //根据昵称查询，用户是否存在
121         User user = userRepository.findByUsername(username);
122         
123         //若存在
124         if(user != null){ //昵称重复
125             return "ferror";
126         }
127         
128         //若不存在
129         User newUser = new User(username,password);
130         //注册
131         userRepository.save(newUser);
132         
133         //将信息设置session作用域
134         request.setAttribute("user", newUser);
135 
136         return "index";
137     }
138     
139     @ResponseBody
140     @RequestMapping("/findByName")  
141     public User findByName(){  
142         
143         return userRepository.findByUsername("krryxq");  
144     }  
145      
146     @ResponseBody
147     @RequestMapping("/find")  
148     public List<User> find(){  
149         
150         return mongoTemplate.findAll(User.class);  
151     }  
152 }

启动类：MongoDBApllication.java

 1 package com.krry;
 2 
 3 import org.springframework.boot.SpringApplication;
 4 import org.springframework.boot.autoconfigure.SpringBootApplication;
 5 
 6 @SpringBootApplication
 7 public class MongoDBApllication {
 8 
 9     public static void main(String[] args) {
10         SpringApplication.run(MongoDBApllication.class, args);
11     } 
12 }

首页 index.html：

 1 <!DOCTYPE HTML>
 2 <html xmlns:th="http://www.thymeleaf.org">
 3   <head>
 4         <title>首页</title>
 5   </head>
 6   <body>
 7   
 8     <p class="title">用户名：<span class="username" th:text="${user.username}"></span>已登录</p>
 9     <a href="/index/logout" id="login"></a>
10 
11     <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
12        <script type="text/javascript">
13            if($(".username").text() == "##errors##"){
14             $(".title").text("未登录");
15             $("#login").attr("href","/index/oplogin");
16             $("#login").text("点击登陆");
17         }
18         /**
19          * 判断非空
20          * 
21          * @param val
22          * @returns {Boolean}
23          */
24         function isEmpty(val) {
25             val = $.trim(val);
26             if (val == null)
27                 return true;
28             if (val == undefined || val == 'undefined')
29                 return true;
30             if (val == "")
31                 return true;
32             if (val.length == 0)
33                 return true;
34             if (!/[^(^\s*)|(\s*$)]/.test(val))
35                 return true;
36             return false;
37         }
38        </script>
39   </body>
40 </html>

登录界面 login.html：

 1 <!DOCTYPE HTML>
 2 <html>
 3   <head>
 4     
 5     <title>登录界面</title>
 6   </head>
 7   <body>
 8       <form action="/index/login" method="post">
 9           用户名：<input type="text" name="username"></input><br/>
10           密&nbsp;码：<input type="password" name="password"/></input>
11           <input type="submit"></input><br/><br/>
12       </form>
13       <a href="/index/resgi">点我注册</a>
14   </body>
15 </html>

注册界面 resgi.html：

 1 <!DOCTYPE HTML>
 2 <html>
 3   <head>
 4     
 5     <title>注册界面</title>
 6 
 7   </head>
 8   
 9   <body>
10     <form action="/index/rege" method="post">
11           用户名：<input type="text" name="username"/></input><br/>
12           密&nbsp;码：<input type="password" name="password"/></input><br/>
13           <input type="submit">
14       </form>
15   </body>
16 </html>

错误界面 ferror.html：

 1 <!DOCTYPE HTML>
 2 <html>
 3   <head>
 4     
 5     <title>错误</title>
 6 
 7   </head>
 8   
 9   <body>
10         登录时：用户名或密码错误<br/>或<br/>注册时：用户名已存在
11         <a href="/index/oplogin">返回登录</a>
12   </body>
13 </html>

这里说一下，如果错误界面命名为 error.html 的话，那么 springboot 报错时跳转的页面就是默认跳转到你定义的 error.html 页面。

posted @ 2018-03-19 23:11 筱月阅读(4300) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

艾涵

krryblog 博客：https://ainyi.com
道之所存，师之所存

springboot 整合 MongoDB 实现登录注册，html 页面获取后台参数的方法

springboot简介：

MongoDB的简介：

在pom.xml配置上：

还要在application.properties配置：

springboot框架，html 页面要想从后台接收参数，需要这样子：

话不多少，先看看目录结构：

pom.xml

application.properties

实体类：User.java

数据库操作的接口：UserRepository.java

控制层：UserController.java

启动类：MongoDBApllication.java

首页 index.html：

登录界面 login.html：

注册界面 resgi.html：

错误界面 ferror.html：

公告

艾涵

krryblog 博客：https://ainyi.com 道之所存，师之所存

springboot 整合 MongoDB 实现登录注册，html 页面获取后台参数的方法

springboot简介：

MongoDB的简介：

在pom.xml配置上：

还要在application.properties配置：

springboot框架，html 页面要想从后台接收参数，需要这样子：

话不多少，先看看目录结构：

pom.xml

application.properties

实体类：User.java

数据库操作的接口：UserRepository.java

控制层：UserController.java

启动类：MongoDBApllication.java

首页 index.html：

登录界面 login.html：

注册界面 resgi.html：

错误界面 ferror.html：

公告

krryblog 博客：https://ainyi.com
道之所存，师之所存