规划一个电子商务网站网站推广服务外包
cookie和session的关系
两者都是在客户端和服务器中进行存储数据和传递信息的工具
cookie和session的区别
Cookie是客⼾端保存⽤⼾信息的⼀种机制.
Session是服务器端保存⽤⼾信息的⼀种机制.
Cookie和Session之间主要是通过SessionId关联起来的，SessionId是Cookie和Session之间的 桥梁。
Cookie和Session经常会在⼀起配合使⽤.但是不是必须配合，完全可以⽤Cookie来保存⼀些数据在客⼾端.这些数据不⼀定是⽤⼾⾝份信息,也不⼀定是 SessionId。
获取cookie
传统的获取cookie
HttpServletRequest , HttpServletResponse 是Servlet提供的两个类,是Spring MVC⽅法的内置对象.需要时直接在⽅法中添加声明即可
HttpServletRequest:对象代表客户端的请求当客户端通过Http协议访问服务端时，Http请求中的所有信息封装在这个对象中，通过这个对象提供的方法，可以获得客户端的所有信息
HttpServletResponse 对象代表服务器的响应.HTTP响应的信息都在这个对象中
//传统的获取cookie@RequestMapping("t13")public String t13(HttpServletRequest request, HttpServletResponse response){Cookie[] cookies = request.getCookies();if(cookies!=null){for (Cookie cookie:cookies) {System.out.println(cookie.getName()+":"+cookie.getValue());}}return "返回cookie成功";}
利用注释获取cookie的方式
//利用注解获取cookie@RequestMapping("t14")public String t14(@CookieValue("java") String java){return "获取cookie中的java成功"+ java;}session的存储与获取
session的存储
//存储session@RequestMapping("/setSession")public String setSession(HttpServletRequest request){HttpSession session = request.getSession();session.setAttribute("username","zhangsan");session.setAttribute("age","17");return "设置session成功";}
session的获取
方法一：
//获取session,方法一@RequestMapping("/getSession1")public String getSession1(HttpServletRequest request){HttpSession session = request.getSession(/*true*/);if (session==null){return "获取失败";}else {String username =(String) session.getAttribute("username");// Integer age =(Integer) session.getAttribute("age");return "登录的用户为"+ username;}}
方法二：
//获取session,方法二@RequestMapping("/getSession2")public String getSession2(HttpSession session){//HttpSession session默认session中的值为true,所以可以省略session为0String username =(String) session.getAttribute("username");return "登录的用户为"+ username;}
方法三：
//获取session,方法三@RequestMapping("/getSession3")public String getSession3(@SessionAttribute("username") String username){return "登录的用户为"+ username;}
获取header
传统的获取header
@RequestMapping("/getHeader1")public String getHeader1(HttpServletRequest request){String UserAgent = request.getHeader("User-Agent");return "从header中获取User-Agent"+UserAgent;}
通过抓包，发现获取的user-agent正确
简洁的获取header
@RequestMapping("/getHeader2")public String getHeader2(@RequestHeader("User-Agent")String UserAgent){return "从header中获取User-Agent"+UserAgent;}
响应
返回静态的页面
在创建前端的页面时，注意路径
在resources包中
比如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-git.min.js"></script><script>$.ajax({url: "/user/getLoginUser",type: "get",success: function(userName){$("#loginUser").text(userName);}});</script>
</body></html>后端的代码
public class ResponseController {@RequestMapping("/t1")public String returnPage(){return "/index.html";}
返回数据
@requestBody
@RequestMapping("/t2")@ResponseBodypublic String returnData(){return "返回需要的数据";}
返回html的代码片段
@ResponseBody@RequestMapping("/t3")public String returnHTML(){return "<h1>我是一级标题</h1>";} 
返回JSON
@ResponseBody@RequestMapping(value = "/t5")public UseInfo returnJson(){UseInfo useInfo=new UseInfo("zhangsan",1,1);return useInfo;}
设置状态码
@ResponseBody@RequestMapping(value = "/t6")public UseInfo steStatus(HttpServletResponse response){response.setStatus(404);UseInfo useInfo=new UseInfo("zhangsan",1,1);return useInfo;}
用户的登录
前端代码
<!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-git.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("密码错误，请确认");}},error: function(xhr, status, error) {alert("请求失败，请稍后再试：" + error);}});}</script>
</body></html>后端代码
package com.blame.spring.demo;import ch.qos.logback.core.util.StringUtil;
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(userName,"userName");return true;}return false;}@RequestMapping("/getUserLogin")public String getUserLogin(String userName,HttpSession session){String attribute =(String) session.getAttribute("userName");return userName;}
}接口的定义
登录界面的接口定义
$.ajax({type: "POST",url: "/user/login",data: {userName: $("#userName").val(), password: $("#password").val() },success: function(result) {if (result) {location.href = "index.html"; } else {alert("密码错误，请确认");}},error: function(xhr, status, error) {alert("请求失败，请稍后再试：" + error);}});
计算器的实现
前端的代码
<!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>后端代码
@RequestMapping("/calc")
@RestController
public class CalcController {@RequestMapping("/sum")public String sum(Integer num1,Integer num2){if(num1==null || num2==null){return "输入错误，请重新输入";}Integer sum=num1+num2;return "结果是"+ sum;}
}留言板的实现
前端代码
<!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-git.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;}$.ajax({type:"post",url:"/message/publish",contentType:"application/json",data:JSON.stringify({from:from,to:to,message:say}),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>后端代码
package com.blame.spring.demo;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;import java.util.ArrayList;
import java.util.Collections;
import java.util.List;@RequestMapping("/message")
@RestController
public class MessageController {List<MessageInfo> messageInfoList=new ArrayList<>();@PostMapping(value = "/publish",produces = "application/json")public String publish(@RequestBody MessageInfo messageInfo){if(!StringUtils.hasLength(messageInfo.getMessage())|| !StringUtils.hasLength(messageInfo.getFrom())|| !StringUtils.hasLength(messageInfo.getTo())){return "{\"ok\":0}";}messageInfoList.add(messageInfo);return "{\"ok\":1}";}@GetMapping("getList")public List<MessageInfo> getList(){return messageInfoList;}
}接口的定义
lombok工具的介绍
Lombok是⼀个Java⼯具库，通过添加注解的⽅式，简化Java的开发
首先先引入其依赖
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency>@Data
public class MessageInfo {private String from;private String to;private String message;
}@Data 注解会帮助我们⾃动⼀些⽅法,包含getter/setter,equals,toString等
如下图：上面是Java程序的运行原理，下面是Lombok的作用
我们就不需要自己写getter和setter方法还有toString方法
@Data=@Getter+@Setter+@ToString+@EqualsAndHashCode+@RequiredArgsConstructor + @NoArgsConstructor
图书管理系统的实现
首先先做好前端代码的引入
前端代码仅供参考，重点看后端的代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>添加图书</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/add.css"></head><body><div class="container"><div class="form-inline"><h2 style="text-align: left; margin-left: 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="40"fill="#17a2b8" class="bi bi-book-half" viewBox="0 0 16 16"><pathd="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" /></svg><span>添加图书</span></h2></div><form id="addBook"><div class="form-group"><label for="bookName">图书名称:</label><input type="text" class="form-control" placeholder="请输入图书名称" id="bookName" name="bookName"></div><div class="form-group"><label for="bookAuthor">图书作者</label><input type="text" class="form-control" placeholder="请输入图书作者" id="bookAuthor" name="author" /></div><div class="form-group"><label for="bookStock">图书库存</label><input type="text" class="form-control" placeholder="请输入图书库存" id="bookStock" name="count"/></div><div class="form-group"><label for="bookPrice">图书定价：</label><input type="number" class="form-control" placeholder="请输入价格" id="bookPrice" name="price"></div><div class="form-group"><label for="bookPublisher">出版社</label><input type="text" id="bookPublisher" class="form-control" placeholder="请输入图书出版社" name="publish" /></div><div class="form-group"><label for="bookStatus">图书状态</label><select class="custom-select" id="bookStatus" name="status"><option value="1" selected>可借阅</option><option value="2">不可借阅</option></select></div><div class="form-group" style="text-align: right"><button type="button" class="btn btn-info btn-lg" onclick="add()">确定</button><button type="button" class="btn btn-secondary btn-lg" onclick="javascript:history.back()">返回</button></div></form></div><script type="text/javascript" src="js/jquery.min.js"></script><script>function add() {alert("添加成功");location.href = "book_list.html";}</script>
</body></html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图书列表展示</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/list.css"><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script src="js/jq-paginator.js"></script></head><body><div class="bookContainer"><h2>图书列表展示</h2><div class="navbar-justify-between"><div><button class="btn btn-outline-info" type="button" onclick="location.href='book_add.html'">添加图书</button><button class="btn btn-outline-info" type="button" onclick="batchDelete()">批量删除</button></div></div><table><thead><tr><td>选择</td><td class="width100">图书ID</td><td>书名</td><td>作者</td><td>数量</td><td>定价</td><td>出版社</td><td>状态</td><td class="width200">操作</td></tr></thead><tbody><tr><td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td><td>1</td><td>大秦帝国第一册</td><td>我是作者</td><td>23</td><td>33.00</td><td>北京出版社</td><td>可借阅</td><td><div class="op"><a href="book_update.html?bookId=1">修改</a><a href="javascript:void(0)" onclick="deleteBook(1)">删除</a></div></td></tr><tr><td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td><td>2</td><td>大秦帝国第二册</td><td>我是作者</td><td>23</td><td>33.00</td><td>北京出版社</td><td>可借阅</td><td><div class="op"><a href="book_update.html?bookId=2">修改</a><a href="javascript:void(0)" onclick="deleteBook(2)">删除</a></div></td></tr><tr><td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td><td>3</td><td>大秦帝国第三册</td><td>我是作者</td><td>23</td><td>33.00</td><td>北京出版社</td><td>可借阅</td><td><div class="op"><a href="book_update.html?bookId=3">修改</a><a href="javascript:void(0)" onclick="deleteBook(3)">删除</a></div></td></tr><tr><td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td><td>4</td><td>大秦帝国第四册</td><td>我是作者</td><td>23</td><td>33.00</td><td>北京出版社</td><td>可借阅</td><td><div class="op"><a href="book_update.html?bookId=4">修改</a><a href="javascript:void(0)" onclick="deleteBook(4)">删除</a></div></td></tr></tbody></table><div class="demo"><ul id="pageContainer" class="pagination justify-content-center"></ul></div><script>getBookList();function getBookList() {$.ajax({type: "get",url: "/book/getList",success: function(books){var finalHtml = "";for(var book of books){finalHtml += '<tr>';finalHtml += '<td><input type="checkbox" name="selectBook" value="'+book.bookId+'" id="selectBook" class="book-select"></td>';finalHtml += '<td>'+book.bookId+'</td>';finalHtml += '<td>'+book.bookName+'</td>';finalHtml += '<td>'+book.author+'</td>';finalHtml += '<td>'+book.num+'</td>';finalHtml += '<td>'+book.price+'</td>';finalHtml += '<td>'+book.publish+'</td>';finalHtml += '<td>'+book.statusCN+'</td>';finalHtml += '<td><div class="op">';finalHtml += '<a href="book_update.html?bookId='+book.bookId+'">修改</a>';finalHtml += '<a href="javascript:void(0)" onclick="deleteBook('+book.bookId+')">删除</a>';finalHtml += '</div></td></tr>';}$("tbody").html(finalHtml);}});}//翻页信息$("#pageContainer").jqPaginator({totalCounts: 100, //总记录数pageSize: 10, //每页的个数visiblePages: 5, //可视页数currentPage: 1, //当前页码first: '<li class="page-item"><a class="page-link">首页</a></li>',prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',//页面初始化和页码点击时都会执行onPageChange: function (page, type) {console.log("第"+page+"页, 类型:"+type);}});function deleteBook(id) {var isDelete = confirm("确认删除?");if (isDelete) {//删除图书alert("删除成功");}}function batchDelete() {var isDelete = confirm("确认批量删除?");if (isDelete) {//获取复选框的idvar ids = [];$("input:checkbox[name='selectBook']:checked").each(function () {ids.push($(this).val());});console.log(ids);alert("批量删除成功");}}</script></div>
</body></html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>修改图书</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/add.css">
</head><body><div class="container"><div class="form-inline"><h2 style="text-align: left; margin-left: 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="40"fill="#17a2b8" class="bi bi-book-half" viewBox="0 0 16 16"><pathd="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" /></svg><span>修改图书</span></h2></div><form id="updateBook"><input type="hidden" class="form-control" id="bookId" name="id"><div class="form-group"><label for="bookName">图书名称:</label><input type="text" class="form-control" id="bookName" name="bookName"></div><div class="form-group"><label for="bookAuthor">图书作者</label><input type="text" class="form-control" id="bookAuthor" name="author"/></div><div class="form-group"><label for="bookStock">图书库存</label><input type="text" class="form-control" id="bookStock" name="count"/></div><div class="form-group"><label for="bookPrice">图书定价：</label><input type="number" class="form-control" id="bookPrice" name="price"></div><div class="form-group"><label for="bookPublisher">出版社</label><input type="text" id="bookPublisher" class="form-control" name="publish"/></div><div class="form-group"><label for="bookStatus">图书状态</label><select class="custom-select" id="bookStatus" name="status"><option value="1" selected>可借阅</option><option value="2">不可借阅</option></select></div><div class="form-group" style="text-align: right"><button type="button" class="btn btn-info btn-lg" onclick="update()">确定</button><button type="button" class="btn btn-secondary btn-lg" onclick="javascript:history.back()">返回</button></div></form></div><script type="text/javascript" src="js/jquery.min.js"></script><script>function update() {alert("更新成功");location.href = "book_list.html"}</script>
</body></html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/login.css"><script type="text/javascript" src="js/jquery.min.js"></script>
</head><body><div class="container-login"><div class="container-pic"><img src="pic/computer.png" width="350px"></div><div class="login-dialog"><h3>登陆</h3><div class="row"><span>用户名</span><input type="text" name="userName" id="userName" class="form-control"></div><div class="row"><span>密码</span><input type="password" name="password" id="password" class="form-control"></div><div class="row"><button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button></div></div></div><script src="js/jquery.min.js"></script><script>function login() {$.ajax({type:"POST",URL:"/user/login",data:{name: $("#userName").val(),password: $("#password").val()},success:function(result){if(result){//账号密码正确location.href = "book_list.html";}else {alert("账号或密码错误");}}});//location.href = "book_list.html";}</script>
</body></html>后端代码：
首先我们创建图书类BookInfo
@Data
public class BookInfo {private Integer bookId;private String bookName;private String author;private Integer num;private BigDecimal price;private Integer status;private String publish;private String statusCN;}创建UserController实现登录验证接口
@RequestMapping("/user")
@RestController
public class userController {@RequestMapping("/login")public boolean login(String name, String password, HttpSession session){if(!StringUtils.hasLength(name) || !StringUtils.hasLength(password)){return false;}if("admin".equals(name) && "admin".equals(password)){session.setAttribute("userName",name);return true;}return false;}
}创建BookController，来调用bookService，再调用BookDao，来实现图书列表
@RequestMapping("/book")
@RestController
public class BookController {@Autowiredprivate BookService bookService;@RequestMapping("/getList")public List<BookInfo> getList(){return bookService.getList();}@Service
public class bookService {//bookDao是数据库访问中的一个对象，现在我们对status这个对象进行修改@Autowiredprivate BookDao bookDao;public static List<BookInfo> getList(){List<BookInfo> bookInfos=new ArrayList<>();for (BookInfo bookInfo:bookInfos) {if(bookInfo.getStatus()==1){bookInfo.setStatusCN("可借阅");}else {bookInfo.setStatusCN("已借出");}}return bookInfos;}
}@Repository
public class BookDao {public List<BookInfo> macData(){//创建一个储存图书List<BookInfo> bookInfos=new ArrayList<>();for (int i = 1; i <=15 ; i++) {//找图书BookInfo bookInfo=new BookInfo();bookInfo.setBookId(i);bookInfo.setBookName("图书名称"+i);bookInfo.setAuthor("图书作者"+i);bookInfo.setNum(new Random().nextInt(100));bookInfo.setPrice(new BigDecimal(new Random().nextInt(100)));bookInfo.setStatus(i%2==0?2:1);bookInfo.setPublish("出版社"+i);bookInfos.add(bookInfo);}return bookInfos;}
}最后调用前端页面的代码
应用分层
三层架构
把整体架构分为表现层、业务逻辑层和数据层.这种分层 ⽅式也称之为"三层架构".
1.表现层:就是展⽰数据结果和接受⽤⼾指令的，是最靠近⽤⼾的⼀层；
2. 业务逻辑层:负责处理业务逻辑, ⾥⾯有复杂业务的具体实现；
3. 数据层: 负责存储和管理与应⽤程序相关的数据
这三个部分，在Spring中体现为：
应用分层的好处
1.降低层与层之间的依赖，使结构更加的明确，利于各层逻辑的复用
2.开发人员可以只关注某一层，极大地降低了开发成本和维护时间
3.更容易用新的实现替换原有的层次的实现
希望能对大家有所帮助！
