一个简单完整的WEB系统

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: 【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. 不能乱定义数据。

    相关实践学习
    如何在云端创建MySQL数据库
    开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
    全面了解阿里云能为你做什么
    阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
    相关文章
    |
    3月前
    |
    前端开发 JavaScript Java
    计算机Java项目|基于web的铁路订票管理系统
    计算机Java项目|基于web的铁路订票管理系统
    |
    1月前
    |
    数据采集 机器学习/深度学习 数据可视化
    【优秀python web系统毕设】基于python的全国招聘数据分析可视化系统,包括随机森林算法
    本文介绍了一个基于Python的全国招聘数据分析可视化系统,该系统利用数据挖掘技术、随机森林算法和数据可视化技术,从招聘网站抓取数据,进行处理、分析和预测,帮助用户洞察招聘市场,为求职者和企业提供决策支持。
    |
    1月前
    |
    JSON API 数据处理
    Winform管理系统新飞跃:无缝集成SqlSugar与Web API,实现数据云端同步的革新之路!
    【8月更文挑战第3天】在企业应用开发中,常需将Winform桌面应用扩展至支持Web API调用,实现数据云端同步。本文通过实例展示如何在已有SqlSugar为基础的Winform系统中集成HTTP客户端调用Web API。采用.NET的`HttpClient`处理请求,支持异步操作。示例包括创建HTTP辅助类封装请求逻辑及在Winform界面调用API更新UI。此外,还讨论了跨域与安全性的处理策略。这种方法提高了系统的灵活性与扩展性,便于未来的技术演进。
    143 2
    |
    1月前
    |
    开发框架 缓存 前端开发
    基于SqlSugar的开发框架循序渐进介绍(23)-- Winform端管理系统中平滑增加对Web API对接的需求
    基于SqlSugar的开发框架循序渐进介绍(23)-- Winform端管理系统中平滑增加对Web API对接的需求
    |
    3月前
    |
    传感器 小程序 搜索推荐
    (源码)java开发的一套(智慧校园系统源码、电子班牌、原生小程序开发)多端展示:web端、saas端、家长端、教师端
    通过电子班牌设备和智慧校园数据平台的统一管理,在电子班牌上,班牌展示、学生上课刷卡考勤、考勤状况汇总展示,课表展示,考场管理,请假管理,成绩查询,考试优秀标兵展示、校园通知展示,班级文化各片展示等多种化展示。
    72 0
    (源码)java开发的一套(智慧校园系统源码、电子班牌、原生小程序开发)多端展示:web端、saas端、家长端、教师端
    |
    3月前
    |
    前端开发 JavaScript Java
    计算机Java项目|基于Web的足球青训俱乐部管理后台系统的设计与开发
    计算机Java项目|基于Web的足球青训俱乐部管理后台系统的设计与开发
    |
    23天前
    |
    缓存 NoSQL 数据库
    Web服务器与数据库优化:提升系统性能的最佳实践
    【8月更文第28天】在现代的Web应用中,Web服务器与后端数据库之间的交互是至关重要的部分。优化这些组件及其相互作用可以显著提高系统的响应速度、吞吐量和可扩展性。本文将探讨几种常见的优化策略,并提供一些具体的代码示例。
    34 1
    |
    26天前
    |
    前端开发 开发者 容器
    【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
    【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
    49 1
    |
    26天前
    |
    关系型数据库 MySQL Linux
    【Azure 应用服务】在创建Web App Service的时候,选Linux系统后无法使用Mysql in App
    【Azure 应用服务】在创建Web App Service的时候,选Linux系统后无法使用Mysql in App
    【Azure 应用服务】在创建Web App Service的时候,选Linux系统后无法使用Mysql in App
    |
    1月前
    |
    Java Docker 微服务
    微服务架构已成为Java Web开发的新趋势,它通过将应用分解为独立、可部署的服务单元,提升了系统的灵活性与可维护性。
    微服务架构已成为Java Web开发的新趋势,它通过将应用分解为独立、可部署的服务单元,提升了系统的灵活性与可维护性。每个服务负责特定功能,通过轻量通信机制协作。利用Spring Boot与Spring Cloud等框架可简化开发流程,支持模块化设计、独立部署、技术多样性和容错性,适应快速迭代的需求。
    63 1