目录
**摘要：**本文系统介绍了四个典型的Web开发实践案例：1）用户登录功能，包括前后端接口设计、Session管理及完整的前后端实现代码；2）前端缓存处理的基本方法；3）留言板系统的完整开发流程，涵盖接口定义、数据存储和前端交互；4）企业级项目开发的标准流程。文章通过具体的代码示例和接口设计，为初学者提供了从需求分析到功能实现的完整参考。
一.用户登录
需求:用户输入账号和密码,后端进行校验密码是否正确
- 如果不正确,前端进行用户告知
- 如果正确,跳转到首页,首页显示当前登录用户
- 后续再访问首页,可以获取到登录用户信息
约定前后端交互接口
需求分析
对于后端开发人员而言,不涉及前端页面的展示,只需要提供两个功能
- 登录页面:通过账号和密码,消炎输入的账号密码是否正确,并告知前端
- 首页:告知前端当前登录用户.如果当前已有用户登录,返回登录账号,如果没用,返回空.
接口定义
首页登录
1.校验接口
- 请求路径:/user/login
- 请求方式:get/post
- 接口描述:校验账号密码是否正确
请求参数
|----------|--------|------|---------|
| 参数名 | 类型 | 是否必须 | 备注 |
| userName | String | 是 | 校验登录的账号 |
| passWord | String | 是 | 校验登录的密码 |
响应数据
- Content-Type:text/html
- 响应内容:
- true//账号密码校验成功
- false//账号密码校验失败
java
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
java
@RequestMapping("/getLoginUser")
public String getLoginUSer(HttpSession session){
return session.getAttribute("username").toString();
}测试
前端代码
login.html
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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/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>
页面跳转的三种方式:
- window.location.href="book_list.html"
- window.location.assign("book_list.html")
- window.location.replace("book_list.html)
以上写法通常把"window"省略
调整首页代码
首页代码比较简单,只显示当前登录用户即可
当前登录用户需要从后端获取,并显示到前端
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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$.ajax({
type:"get",
url:"/user/getLoginUser",
success:function(result){
$("#loginUser").text(result)
}
});
</script>
</body>
</html>Session存在内存中,如果不做任何处理,默认服务器重启.Session数据就丢失了
二.前端缓存的处理
- 强刷 ctr+F5
- 清理缓存
- 确认后端代码,清楚后端缓存 mvn clean 如果t
三.留言板
需求:
界面如下图所示
- 输入留言信息,点击提交,后端把数据存储起来
- 页面展示输入的表白墙的信息
约定前后端交互接口
需求分析
后端需要提供两个服务
1.提交留言:用户输入留言信息之后,后端需要把留言信息保存起来
2.展示留言:页面展示时,需要从后端获取到所有的留言信息
接口定义
1.获取全部留言信息
请求:
get
/message/getList
响应:JSON格式
{ "from": "⿊猫", "to": "⽩猫", "message": "喵" }, { "from": "⿊狗", "to": "⽩狗", "message": "汪" }, //...
java
@RequestMapping("/getList")
public List<message> getList(){
return list;
}2.发表新留言
请求:body也为JSON格式
- post /message/publish
- {
- "from:"黑猫",
- "to":白猫,
- "message"":"喵"
- }
响应
- true//代表接受数据成功
- false//代表接受数据失败
java
@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;
}前端代码
html
<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$.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.上线
