企业网站建设资金预算表,网站服务器端口设置,大庆建设银行网站首页,wordpress 上传图片500错误项目设计
我们会将前端的代码放入 static 包下#xff1a; 高内聚#xff0c;低耦合
这是我们在实现项目的设计思想#xff0c;一个项目里存在很多个模块#xff0c;每一个模块内部的要求类与类、方法与方法要相互配合紧密联系#xff0c;这就是高内聚#xff0c;低耦合…项目设计
我们会将前端的代码放入 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 后端中我们还有一种新的分层架构分别是 表现层、业务逻辑层、数据层
表现层: 就是展示数据结果和接受用户指令的是最靠近用户的⼀层业务逻辑层: 负责处理业务逻辑 , 里面有复杂业务的具体实现数据层: 负责存储和管理与应用程序相关的数据
根据这新三层架构我们一般会创建三个包与之对应分别是 controller类名以 Controller 为结尾主要是提供给前端的接口、service (类名以 Service 结尾存放的是业务逻辑的代码)、dao (类名 以 Dao 为结尾主要存放查询数据的代码)最后我们会再创建一个包【model、pojo、entity】来存放其他类例如图书馆里系统有个图书类包含图书的属性… Controller控制层。接收前端发送的请求对请求进行处理并响应数据。 Service业务逻辑层。处理具体的业务逻辑。 Dao数据访问层也称为持久层。负责数据访问操作包括数据的增、删、改、查。 MVC 与 新三层架构对应如下图所示
加法计算器 前端代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform actioncalc/sum methodposth1计算器/h1数字1input namenum1 typetextbr数字2input namenum2 typetextbrinput typesubmit 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 langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitle用户登录首页/title
/headbody登录人: span idloginUser/spanscript srcjs/jquery.min.js/scriptscript$.ajax({type: get,url: /user/getLoginUser,success: function (userName) {$(#loginUser).text(userName);}});/script
/body/htmllogin.html:
!DOCTYPE html
html langenheadmeta charsetUTF-8title登录页面/title
/headbodyh1用户登录/h1用户名input nameuserName typetext iduserNamebr密码input namepassword typepassword idpasswordbrinput typebutton value登录 onclicklogin()script srcjs/jquery.min.js/scriptscriptfunction 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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title留言板/titlestyle.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
/headbody
div classcontainerh1留言板/h1p classgrey输入后点击提交, 会将信息显示下方空白处/pdiv classrowspan谁:/span input typetext name idfrom/divdiv classrowspan对谁:/span input typetext name idto/divdiv classrowspan说什么:/span input typetext name idsay/divinput typebutton value提交 idsubmit onclicksubmit()!-- divA 对 B 说: hello/div --
/divscript srcjs/jquery.min.js/script
scriptload();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 ListMessageInfo 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 ListMessageInfo getList() {return messageInfoList;}
}import lombok.Data;Data
public class MessageInfo {private String from;private String to;String message;
}
