zoukankan      html  css  js  c++  java

  • 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 页面。
  • 相关阅读:
    我的公众号：WebHub
    The Qt Resource System
    Node.js Streams：你需要知道的一切
    2019春招前端面试预测题!
    BeamNG.drive物理引擎评鉴
    EcmaScript对象克隆之谜
    死锁与囚徒困境的辩证关系
    停止学习框架
    qt5android
    opencvKmeans图像分割根据颜色
  • 原文地址：https://www.cnblogs.com/ainyi/p/8605802.html
Copyright © 2011-2022 走看看