一个简单完整的WEB系统

目录

一、功能描述

二、数据描述

三、参考示例

四、个人理解

1. 配置application.properites文件：

2. 编写资源类，对应数据库的表的数据。

3. 新建UserRepository接口，继承CrudRepository接口

4. 编写Controller类，处理页面请求和响应

5. 编写输入页面

6. 输出页面

7. 编写程序入口

五、实现效果

 六、考核要点

---

一、功能描述

用户通过表单提交数据，存入MySQL数据库，提交成功后显示数据库中所有数据的列表。

二、数据描述

姓名，Email。

三、参考示例

Validating Form Input：
Handling Form Submission
Accessing data with MySQL

四、个人理解

1. 配置application.properites文件：

spring.jpa.hibernate.ddl-auto=update

//配置数据源的路径后面加粗的字体是所用到的数据库名

spring.datasource.url=jdbc:mysql://${MYSQL_HOST:localhost}:3306/db_example

// 用户名

spring.datasource.username=springuser

//用户密码

spring.datasource.password=ThePassword

//自从mysql5.0版本之后就要加上cj了

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

#spring.jpa.show-sql: true

2. 编写资源类，对应数据库的表的数据。

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.validation.constraints.Email;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.Size;

@Entity // This tells Hibernate to make a table out of this class
public class Users {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Integer id;

    @NotBlank(message = "名字不能为空！")
    @Size(min = 2,max = 30,message = "名字长度要在2-30之间！")
    private String name;

    @Email(message = "邮箱格式不正确！")
    private String email;


    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

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

    public String toString(){
        return "User[ id = " + this.getId() + ", name = "+this.getName()+", email = "+this.getEmail()+" ]";
    }

}

注解@Id，@GeneratedValue(strategy = GenerationType.AUTO)修饰属性id，因为表中字段id是主键，用户无法修改，只能自动加一。

注解@NotBlank(message = "名字不能为空！")，@Size(min = 2,max = 30,message = "名字长度要在2-30之间！")修饰属性name，message属性是自定义异常信息，min,max是说明改名字的长度要在2-30之间。

注解@Email(message = "邮箱格式不正确！")修饰属性email，说明该属性的格式是Email，这样不要自己校验，极大增加我们的开发效率。

3. 新建UserRepository接口，继承CrudRepository接口

import org.springframework.data.repository.CrudRepository;

public interface UserRepository extends CrudRepository<Users,Integer>{
    
}

这个的作用我也不是理解的很透彻，我感觉应该就是相当于表中的一条记录和对应的id。

4. 编写Controller类，处理页面请求和响应

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import javax.validation.Valid;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Controller // This means that this class is a COntroller
public class workWebController implements WebMvcConfigurer{
    @Autowired // this means to get the ean called userRepository
        // Which is auto-generated by Spring, we will use it to handle the data
    private UserRepository userRepository;

    @GetMapping("/") // Map ONLY POST Requests
    public String inputForm(@ModelAttribute(value = "user") Users users) {
        return "input";
      }

    @PostMapping("/")
    public String getAllUsers(Model model,@ModelAttribute(value = "user") @Valid Users users,BindingResult bindingResult){

        if(bindingResult.hasErrors()){
            return "input";
        }
    
        userRepository.save(users);
        Iterable<Users> iterable =  userRepository.findAll();
        Iterator<Users> iterator = iterable.iterator();
        List<Users> list = new ArrayList<Users>();

        while(iterator.hasNext()){
            list.add(iterator.next());
        }

        model.addAttribute("list", list);

        return "showAll";
    }
}

注解@GetMapping("/") 说明请求的路径无上下文，直接就是localhost:8080

@ModelAttribute(value = "user") Users users，这个参数就是将数据传到视图对象中。

注意，有可能Users users一定要明命名为资源类类名的首字母小写格式，否则可能报错，博主就是在这个地方纠结了4个小时，最终看到一篇文章才解决问题所在，具体是那篇文章没保存到一大可惜。

Model model,@ModelAttribute(value = "user") @Valid Users users,BindingResult bindingResult

这个就很重要了，这里的@ModelAttribute(value = "user") @Valid Users users是指参数users同时注入注解@Valid是对users进行校验。

BindingResult bindingResult就是如果输入的参数类型不符合注解的类型就把错误信息放到bindingResult，然后通过bindingResult.hasErrors()判断是否有错误即可，如果有错误就返回输入页面，并且出现提示信息。否则执行下面代码。

接下来的代码就是

//保存用户，将改数据添加到表中

userRepository.save(users);

//查找表的所有记录，放到Iterable对象里面去。由于html不知道如何遍历该对象，所以要通过该对象获取到对应的迭代器。

Iterable<Users> iterable =  userRepository.findAll(); 

//获取迭代器，由于使用迭代器遍历和得不到我想要的输出格式，所以我又把他转化为一个集合对象,以便更加容易得到我想要的输出格式。

Iterator<Users> iterator = iterable.iterator();

        List<Users> list = new ArrayList<Users>();

        while(iterator.hasNext()){

            list.add(iterator.next());

        }

//把得到list集合添加到前台数据中去。

model.addAttribute("list", list);

5. 编写输入页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

    <head>
        <title>添加用户</title>
    </head>

    <body>
        <h1>Add Users</h1>
        <form action="#" th:action="@{/}" th:object="${user}" method="post">
            <table>
                <tr>
                    <td>Name:</td>
                    <td><input type="text" th:field="*{name}"/></td>
                    <td th:if="${#fields.hasErrors('name')}" th:errors="*{name}" style="color: red;">Name errors</td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" th:field="*{email}"/></td>
                    <td th:if="${#fields.hasErrors('email')}" th:errors="*{email}" style="color: red;">Age errors</td>
                </tr>
                <tr>
                    <td><input type="submit" value="Submit"/></td>
                </tr>
            </table>
        </form>
    </body>
</html>

这里用到了Thmeleaf 的th，用于替换原来标签对应的属性。

6. 输出页面

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">

    <head>
        <title>用户表单</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>

    <body>
        <h1>Show All Users</h1>
        <table border="1" align="center" cellspacing="0" cellpadding="0" width="60%">
            <tr>
                <th>记录条数</th>
                <th>用户id</th>
                <th>用户名</th>
                <th>用户邮箱</th>
            </tr>
            <tr th:each="user,Started:${list}">
                <td th:text="(${Started.index})+1"></td>
                <td th:text="${user.id}"></td>
                <td th:text="${user.name}"></td>
                <td th:text="${user.email}"></td>
            </tr>
        </table>
    </body>
</html>

循环遍历list对象获得对应的数据输出即可。

7. 编写程序入口

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class work3Application {
    
    public static void main(String[] args) throws Exception{
        SpringApplication.run(work3Application.class, args);
    }

}

五、实现效果

 六、考核要点

1. 用到参考案列的主要技术，包括：表单数据检验，Thymeleaf，MySQL。
2. 有自定义检验提示信息，邮箱校验用@Email。
3. 必须有前端页面（视图）。
4. 必须使用MySQL，不能用内存数据库H2。
5. 不能乱定义数据。