Spring MVC(五)-171主机测评

一.用户登录

需求:用户输入账号和密码,后端进行校验密码是否正确

约定前后端交互接口

接口定义

首页登录

查询登录用户接口

二.前端缓存的处理

三.留言板

约定前后端交互接口

接口定义

1.获取全部留言信息

2.发表新留言

前端代码

3.发生问题如何排除故障

四.企业项目开发流程

摘要：本文系统介绍了四个典型的Web开发实践案例：1）用户登录功能，包括前后端接口设计、Session管理及完整的前后端实现代码；2）前端缓存处理的基本方法；3）留言板系统的完整开发流程，涵盖接口定义、数据存储和前端交互；4）企业级项目开发的标准流程。文章通过具体的代码示例和接口设计，为初学者提供了从需求分析到功能实现的完整参考。

一.用户登录

需求:用户输入账号和密码,后端进行校验密码是否正确

如果不正确,前端进行用户告知

如果正确,跳转到首页,首页显示当前登录用户

后续再访问首页,可以获取到登录用户信息

约定前后端交互接口

需求分析

对于后端开发人员而言,不涉及前端页面的展示,只需要提供两个功能

登录页面:通过账号和密码,消炎输入的账号密码是否正确,并告知前端

首页:告知前端当前登录用户.如果当前已有用户登录,返回登录账号,如果没用,返回空.

接口定义

首页登录

1.校验接口

请求路径:/user/login

请求方式:get/post

接口描述:校验账号密码是否正确

请求参数

参数名	类型	是否必须	备注
userName	String	是	校验登录的账号
passWord	String	是	校验登录的密码

响应数据

Content-Type:text/html

响应内容:

true//账号密码校验成功

false//账号密码校验失败

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/user")
public class UserController {
@RequestMapping("/login")
public Boolean login(String userName,String passWord){
if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(passWord)){
return false;
}
if("admin".equals(userName)&&"admin".equals(passWord)){
return true;
}
return false;
}
}

测试接口

查询登录用户接口

请求路径:/user/getLoginUser

请求方式:get

接口描述:查询当前登录的用户

请求参数:

无

响应数据:

Contet-Type:text/html

响应的内容:

admin

@RequestMapping("/getLoginUser")
public String getLoginUSer(HttpSession session){
return session.getAttribute("username").toString();
}

测试

前端代码

<!DOCTYPE html>
<html lang="en">

},
success:function(result){
if(result){
location.href="/index.html"
}else{
alert("账号或密码错误")
}
}
});

}

</script>
</body>

</html>

页面跳转的三种方式:

window.location.href="book_list.html"

window.location.assign("book_list.html")

window.location.replace("book_list.html)

以上写法通常把"window"省略

调整首页代码

首页代码比较简单,只显示当前登录用户即可

当前登录用户需要从后端获取,并显示到前端

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

</html>

Session存在内存中,如果不做任何处理,默认服务器重启.Session数据就丢失了

二.前端缓存的处理

强刷 ctr+F5

清理缓存

确认后端代码,清楚后端缓存 mvn clean 如果t

三.留言板

需求:

界面如下图所示

输入留言信息,点击提交,后端把数据存储起来

页面展示输入的表白墙的信息

约定前后端交互接口

需求分析

后端需要提供两个服务

1.提交留言:用户输入留言信息之后,后端需要把留言信息保存起来

2.展示留言:页面展示时,需要从后端获取到所有的留言信息

接口定义

1.获取全部留言信息

请求:

get

/message/getList

响应:JSON格式

[

{ "from": "⿊猫",

"to": "⽩猫",

"message": "喵" },

{ "from": "⿊狗",

"to": "⽩狗",

"message": "汪" },

//… ]

@RequestMapping("/getList")
public List<message> getList(){
return list;
}

2.发表新留言

请求:body也为JSON格式

post /message/publish

{

"from:"黑猫",

"to":白猫,

"message"":"喵"

}

响应

true//代表接受数据成功

false//代表接受数据失败

@RequestMapping("/publish")
public Boolean publish(@RequestBody message data){
if(StringUtils.hasLength(data.getMessage())
&&StringUtils.hasLength(data.getTo())
&&StringUtils.hasLength(data.getFrom())){
list.add(data);
return true;
}
return false;
}

前端代码

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

$.ajax({
type: "get",
url: "/message/getList",
success: function (messages) {
// for (let index = 0; index < messages.length; index++) {
// const element = messages[index];

// }
for (let msg of messages) {
let divE = "<div>" + msg.from + "对" + msg.to + "说:" + msg.message + "</div>";
//3. 把节点添加到页面上
$(".container").append(divE);
}
}
});

function submit() {
//1. 获取留言的内容
var from = $('#from').val();
var to = $('#to').val();
var say = $('#say').val();
if (from == '' || to == '' || say == '') {
return;
}
//调用后端, 存储信息
$.ajax({
type: "post",
url: "/message/publish",
contentType: "application/json",
data: JSON.stringify({
from: from,
to: to,
message: say
}),
success: function (result) {
if (result) {
//2. 构造节点
var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";
//3. 把节点添加到页面上
$(".container").append(divE);

//4. 清空输入框的值
$('#from').val("");
$('#to').val("");
$('#say').val("");
} else {
alert("添加留言失败");
}
}
});

}

</script>
</body>

</html>

3.发生问题如何排除故障

四.企业项目开发流程

需求说明会:需求评审会(PM,产品经理) 需求文档(背景,目标,需要做的事情,项目有哪些功能,逻辑是啥么)

分工干活

1)方案设计(概要设计,详细设计,数据库设计,接口设计)

2)方案review

3)开发

4)自测

3.提测

4.联调

5.上线

Spring MVC(五)