一个简单完整的WEB系统

本文涉及的产品
云数据库 RDS MySQL Serverless,0.5-2RCU 50GB
简介: 【2月更文挑战第1篇】


一、功能描述
用户通过表单提交数据,存入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

  1. 编写资源类,对应数据库的表的数据。
    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,这样不要自己校验,极大增加我们的开发效率。

  1. 新建UserRepository接口,继承CrudRepository接口
    import org.springframework.data.repository.CrudRepository;

public interface UserRepository extends CrudRepository{

}

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

  1. 编写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 iterable = userRepository.findAll();

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

Iterator iterator = iterable.iterator();

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

    while(iterator.hasNext()){

        list.add(iterator.next());

    }

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

model.addAttribute("list", list);

  1. 编写输入页面
    <!DOCTYPE html>



 <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>



这里用到了Thmeleaf 的th,用于替换原来标签对应的属性。
  • 输出页面
    <!DOCTYPE html>









  • Show All Users




    记录条数
    用户id
    用户名
    用户邮箱









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

    1. 编写程序入口
      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);
    }
    

    }
    五、实现效果

    image.png
    image.png

    六、考核要点

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

    相关实践学习
    基于CentOS快速搭建LAMP环境
    本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
    全面了解阿里云能为你做什么
    阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
    相关文章
    |
    2月前
    |
    SQL 分布式计算 Hadoop
    Azkaban【基础 01】核心概念+特点+Web界面+架构+Job类型(一篇即可入门Azkaban工作流调度系统)
    【2月更文挑战第6天】Azkaban【基础 01】核心概念+特点+Web界面+架构+Job类型(一篇即可入门Azkaban工作流调度系统)
    82 0
    |
    1月前
    |
    SQL 存储 数据库
    基于Web技术的在线考试系统的设计与实现(论文+源码)_kaic
    基于Web技术的在线考试系统的设计与实现(论文+源码)_kaic
    |
    3月前
    |
    存储 关系型数据库 MySQL
    失物招领|基于Web的校园失物招领系统的设计与实现(一)
    失物招领|基于Web的校园失物招领系统的设计与实现
    158 0
    |
    17天前
    |
    资源调度 JavaScript 安全
    Linux系统之部署web-check网站分析工具
    【4月更文挑战第3天】Linux系统之部署web-check网站分析工具
    64 9
    |
    20天前
    |
    Java
    销售业务管理系统【Web系统】(Java课设)
    销售业务管理系统【Web系统】(Java课设)
    13 5
    |
    1月前
    |
    存储 安全 Java
    274基于web的电影院购票系统
    274基于web的电影院购票系统
    |
    1月前
    |
    存储 安全 Java
    基于web的电影院购票系统
    基于web的电影院购票系统
    |
    1月前
    |
    搜索推荐 Java 数据库
    springboot基于Web的社区医院管理服务系统
    springboot基于Web的社区医院管理服务系统
    |
    1月前
    |
    Java 关系型数据库 MySQL
    基于Web的停车场管理系统的设计与实现(论文+源码)_kaic
    基于Web的停车场管理系统的设计与实现(论文+源码)_kaic
    |
    2月前
    |
    前端开发 JavaScript Java
    利用Java Web技术实现实时通信系统的案例分析
    利用Java Web技术实现实时通信系统的案例分析