Spring MVC (三) —— 实战演练

项目设计

我们会将前端的代码放入 static 包下:

在这里插入图片描述

高内聚,低耦合

这是我们在实现项目的设计思想,一个项目里存在很多个模块,每一个模块内部的要求类与类、方法与方法要相互配合紧密联系,这就是高内聚,低耦合追求的是不同模块之间的联系不能太高,即使一个模块崩溃了,也不会影响其他模块的正常运行。

Lombok

通过在 MAVEN 中添加 Lombok 依赖,我们可以使用 Lombok 的注解实现对类自动添加 Getter、Setter、toString、equals、hasCode等可以自动由 IDEA 创建的方法,使用注解,提高了代码的美观度,也提高了开发效率。

在这里插入图片描述

@Data = @Getter + @Setter + @ToString + @EqualsAndHashCode + @RequiredArgsConstructor + @NoArgsConstructor

举个例子:
这是你代码要添加的方法:

public class UserInfo {String name;int gender;int age;public UserInfo() {}public UserInfo(String name, int gender, int age) {this.name = name;this.gender = gender;this.age = age;}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getGender() {return gender;}public void setGender(int gender) {this.gender = gender;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}@Overridepublic String toString() {return "UserInfo{" +"name='" + name + '\'' +", gender=" + gender +", age=" + age +'}';}
}

通过使用 Lombok 注解:就可以实现和上面一样的效果

import lombok.Data;@Data
public class UserInfo {String name;int gender;int age;
}

我们来看一下注解的源码:
在这里插入图片描述
@Data 是类注解


在这里插入图片描述
在这里插入图片描述
Getter 和 Setter 可以添加到类上方,这样就是该类下所有的属性都添加 Getter 和 Setter 方法。

也可以单独添加到某些属性上,这样就只对这些指定的属性添加 Getter 和 Setter 方法。

Lombok 的所有的注解都是作用在 源码阶段,一旦经过了编译生成了 .class 文件之后,就会将注解删掉,取而代之的是对应的方法。

EditStarters 插件

EditStarters 插件可以导入 Spring 项目需要的依赖。

安装方式:首先 点击 File ,点击 Setting ,然后安装下图的点击,搜索 EditStarters ,然后点击 Installed 下载安装即可。

在这里插入图片描述

添加对应的依赖也很简单:
找到 pom 文件,在文件内容下,右键然后点击 Generate
在这里插入图片描述

三层架构

下图是 MVC 架构:

在这里插入图片描述

view 是视图,现在视图不交给后端做,一般是前端处理,Controller 就是后端提供的接口,Model 就是业务处理和数据查询


除此之外,在Java 后端中,我们还有一种新的分层架构:分别是 表现层、业务逻辑层、数据层

  1. 表现层: 就是展示数据结果和接受用户指令的,是最靠近用户的⼀层;
  2. 业务逻辑层: 负责处理业务逻辑 , 里面有复杂业务的具体实现;
  3. 数据层: 负责存储和管理与应用程序相关的数据

根据这新三层架构,我们一般会创建三个包与之对应,分别是 controller(类名以 Controller 为结尾,主要是提供给前端的接口)、service (类名以 Service 结尾,存放的是业务逻辑的代码)、dao (类名 以 Dao 为结尾,主要存放查询数据的代码),最后我们会再创建一个包【model、pojo、entity】来存放其他类(例如图书馆里系统有个图书类,包含图书的属性…)

Controller:控制层。接收前端发送的请求,对请求进行处理,并响应数据。
Service:业务逻辑层。处理具体的业务逻辑。
Dao:数据访问层,也称为持久层。负责数据访问操作,包括数据的增、删、改、查。

在这里插入图片描述

MVC 与 新三层架构对应如下图所示:
在这里插入图片描述

加法计算器

在这里插入图片描述

前端代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="calc/sum" method="post"><h1>计算器</h1>数字1:<input name="num1" type="text"><br>数字2:<input name="num2" type="text"><br><input type="submit" value=" 点击相加 "></form>
</body></html>

后端代码:

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RequestMapping("/calc")
@RestController
public class CalcController {@RequestMapping("/sum")public String sum(Integer num1, Integer num2) {if(num1 == null || num2 == null) {return "<h1>参数输入有误,请重新检查后再输入</h1>";}int sum = num1 + num2;return "<h1>计算结果为 " + sum + "</h1>";}
}

用户登录

在这里插入图片描述
前端代码:这里使用 JQuery 封装的 ajax 来写前端接口
index.html:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户登录首页</title>
</head><body>登录人: <span id="loginUser"></span><script src="js/jquery.min.js"></script><script>$.ajax({type: "get",url: "/user/getLoginUser",success: function (userName) {$("#loginUser").text(userName);}});</script>
</body></html>

login.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登录页面</title>
</head><body><h1>用户登录</h1>用户名:<input name="userName" type="text" id="userName"><br>密码:<input name="password" type="password" id="password"><br><input type="button" value="登录" onclick="login()"><script src="js/jquery.min.js"></script><script>function login() {$.ajax({type: "post",url: "/user/login",data: {userName: $("#userName").val(),password: $("#password").val()},success: function (result) {if(result) {location.href = "index.html";} else {alert("账号或者密码错误,请重新输入");}}});}</script>
</body></html>

后端代码:

import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RequestMapping("/user")
@RestController
public class UserController {@RequestMapping("/login")public boolean login(String userName, String password, HttpSession session) {if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {return false;}if("admin".equals(userName) && "admin".equals(password)) {session.setAttribute("name","admin");return true;}return false;}@RequestMapping("/getLoginUser")public String getLoginUserName(HttpSession session) {return (String) session.getAttribute("name");}
}

留言墙

在这里插入图片描述

前端代码:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body>
<div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"><!-- <div>A 对 B 说: hello</div> -->
</div><script src="js/jquery.min.js"></script>
<script>load();function load() {$.ajax({type: "get",url: "/message/getList",success: function (messages) {if (messages != null && messages.length > 0) {var finalHtml = "";for (var m of messages) {finalHtml += "<div>" + m.from + "对" + m.to + "说:" + m.message + "</div>";}$(".container").append(finalHtml);}}});}function submit() {//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from == '' || to == '' || say == '') {return;}var data = {from: from,to: to,message: say};$.ajax({type: "post",url: "/message/publish",contentType: "application/json",data: JSON.stringify(data),success: function (result) {var jsonObj = JSON.parse(result);if (jsonObj.ok == 1) {//成功//2. 构造节点var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";//3. 把节点添加到页面上$(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");} else {//失败alert("留言发布失败");}}});}</script>
</body></html>

后端代码:

import org.example.springbootdemo.test2.model.MessageInfo;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RequestMapping("/message")
@RestController
public class MessageController {private List<MessageInfo> messageInfoList = new ArrayList<>();@RequestMapping(value = "/publish",produces = "text/json")public String publish(@RequestBody MessageInfo messageInfo) {if(!StringUtils.hasLength(messageInfo.getFrom()) || !StringUtils.hasLength(messageInfo.getTo()) ||!StringUtils.hasLength(messageInfo.getMessage())) {return "{\"err\": 0}";}messageInfoList.add(messageInfo);return "{\"ok\": 1}";}@RequestMapping("/getList")public List<MessageInfo> getList() {return messageInfoList;}
}
import lombok.Data;@Data
public class MessageInfo {private String from;private String to;String message;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/68181.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Typescript泛型类详细解读

代码示例 (() > {// 定义一个类,类中的属性值的类型是不确定,方法中的参数及返回值的类型也是不确定// 定义一个泛型类class GenericNumber<T>{// 默认的属性的值的类型是泛型类型defaultValue: Tadd: (x: T, y: T) > Tconstructor(defaultValue: T) {this.defaul…

OpenCV:图像处理中的低通滤波

目录 简述 什么是低通滤波&#xff1f; 各种滤波器简介与实现 方盒滤波 均值滤波 中值滤波 高斯滤波 双边滤波 各种滤波的对比与应用场景 相关阅读 OpenCV基础&#xff1a;图像变换-CSDN博客 OpenCV&#xff1a;图像滤波、卷积与卷积核-CSDN博客 简述 低通滤波是一…

Vivado生成X1或X4位宽mcs文件并固化到flash

1.生成mcs文件 01.在vivado里的菜单栏选择"tools"工具栏 02.在"tools"里选择"生成内存配置文件" 03.配置参数 按照FPGA板上的flash型号进行选型&#xff0c;相关配置步骤可参考下图。 注意&#xff1a;Flash数据传输位宽如果需要选择X4位宽&am…

rust学习-rust中的保留字

rust学习-rust中的保留字 已使用的保留字未来可能使用的保留字 保留字是语言中预定义的标识符&#xff0c;不能用作变量名、函数名或其他自定义标识符&#xff0c;Rust的保留字大致可以分为两类&#xff1a;已使用的保留字和未来可能使用的保留字 已使用的保留字 as&#xff1…

【第七天】零基础入门刷题Python-算法篇-数据结构与算法的介绍-一种常见的分治算法(持续更新)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Python数据结构与算法的详细介绍1.Python中的常用的分治算法2. 分治算法3.详细的分治代码1&#xff09;一种常见的分治算法 总结 前言 提示&#xff1a;这…

奖励模型:解析大语言模型的关键工具

标题&#xff1a;奖励模型&#xff1a;解析大语言模型的关键工具 文章信息摘要&#xff1a; 奖励模型是理解和审核大语言模型(LLM)的重要工具&#xff0c;通过简单的评估方式提供了模型内部表征和性能的深入洞察。它不仅能静态比较模型表现&#xff0c;还可帮助诊断训练问题&a…

[Linux]el8安全配置faillock:登录失败达阈值自动锁定账户配置

前言 本篇文章的配置仅使用于el8版本的Linux&#xff0c;目前已在centos8、BCLinux8上验证成功&#xff0c;其他版本系统是否可行还得考查。 el8中管理用户登录失败锁定账户所用的模块是faillock.so&#xff0c;如果想要将配置应用与其他版本的Linux&#xff0c;建议确认Linux…

【nnUNetv2进阶】二十七、nnUNetv2 魔改网络-小试牛刀-引入FMB模块

nnunet使用及改进教程。 【nnUNetv2实践】一、nnUNetv2安装 【nnUNetv2实践】二、nnUNetv2快速入门-训练验证推理集成一条龙教程 【nnUNe

vue3中自定一个组件并且能够用v-model对自定义组件进行数据的双向绑定

1. 基础用法 在 Vue3 中&#xff0c;v-model 在组件上的使用有了更灵活的方式。默认情况下&#xff0c;v-model 使用 modelValue 作为 prop&#xff0c;update:modelValue 作为事件。 1.1 基本示例 <!-- CustomInput.vue --> <template><input:value"mo…

TCP协议(网络)

目录 TCP协议 TCP协议段格式(报文首部) 原理图​编辑 确认应答(ACK)机制 报头介绍 超时重传机制​编辑 连接管理机制 为什么要三次握手 服务端状态转化: 客户端状态转化: 理解TIME_WAIT状态 解决TIME_WAIT状态引起的bind失败的方法(可以立即链接端口号) setsockop…

【JS|第29期】JavaScript中的事件类型

日期&#xff1a;2025年1月25日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…

基于Java+socket实现多线程聊天室-控制台版

基于Javasocket实现多线程聊天室-控制台版 一、系统介绍二、功能展示1.运行效果 三、代码展示四、其它1.其他系统实现2.获取源码 一、系统介绍 首先启动server端&#xff0c;然后启动client端。任意一个client发送给server的消息都将会被转发给所有在线的client&#xff0c;实…

Redis-缓存

1.缓存 1.1 什么是缓存&#xff1f; 越野车,山地自行车,都拥有"避震器",防止车体加速后因惯性,在酷似"U"字母的地形上飞跃,硬着陆导致的损害,像个弹簧一样;同样,实际开发中,系统也需要"避震器",防止过高的数据访问猛冲系统,导致其操作线程无法…

群晖docker获取私有化镜像http: server gave HTTP response to HTTPS client].

群晖docker获取私有化镜像提示http: server gave HTTP response to HTTPS clien 问题描述 层级时间用户事件Information2023/07/08 12:47:45cxlogeAdd image from xx.xx.31.240:1923/go-gitea/gitea:1.19.3Error2023/07/08 12:47:48cxlogeFailed to pull image [Get "http…

MySQL日志详解——日志分类、二进制日志bin log、回滚日志undo log、重做日志redo log

文章目录 一、前言1.1 MySQL体系结构1.2 MySQL日志分类1.3 其他几种日志1.3.1 查询日志1.3.2 慢查询日志1.3.3 错误日志 二、bin log 二进制日志2.1 bin log简介2.2 binlog日志格式2.3 日志删除2.4 写入/刷盘机制 三、undo log 回滚日志3.1 undo log简介3.2 隐藏字段 —— 事务…

算法中的移动窗帘——C++滑动窗口算法详解

1. 滑动窗口简介 滑动窗口是一种在算法中常用的技巧&#xff0c;主要用来处理具有连续性的子数组或子序列问题。通过滑动窗口&#xff0c;可以在一维数组或字符串上维护一个固定或可变长度的窗口&#xff0c;逐步移动窗口&#xff0c;避免重复计算&#xff0c;从而提升效率。常…

亚博microros小车-原生ubuntu支持系列:11手指控制与手势识别

识别框架还是沿用之前的了MediaPipe Hand。 背景知识不摘重复&#xff0c;参见之前的&#xff1a;亚博microros小车-原生ubuntu支持系列&#xff1a;10-画笔-CSDN博客 手指控制 src/yahboom_esp32_mediapipe/yahboom_esp32_mediapipe/目录下新建文件10_HandCtrl.py&#xff…

LabVIEW太阳能照明监控系统

在公共照明领域&#xff0c;传统的电力照明系统存在高能耗和维护不便等问题。利用LabVIEW开发太阳能照明监控系统&#xff0c;通过智能控制和实时监测&#xff0c;提高能源利用效率&#xff0c;降低维护成本&#xff0c;实现照明系统的可持续发展。 ​ 项目背景 随着能源危机…

今何在:“思索答案就是一种对虚无的战斗”

今何在&#xff08;网络文学作家、编剧&#xff09; 白惠元&#xff08;北京师范大学文学院副教授&#xff09; 网络文学发展二十余年来&#xff0c;其创作生态虽历经迭代&#xff0c;同时也为当代文学版图留下了一些经典性长篇作品。本栏目邀请北京大学网络文学研究团队&…

Linux的权限和一些shell原理

目录 shell的原理 Linux权限 sudo命令提权 权限 文件的属性 ⽂件类型&#xff1a; 基本权限&#xff1a; chmod改权限 umask chown 该拥有者 chgrp 改所属组 最后&#xff1a; 目录权限 粘滞位 shell的原理 我们广义上的Linux系统 Linux内核Linux外壳 Linux严格…