本文所用到的技术点
- HTML/CSS:用于构建用户界面。
- JavaScript/jQuery:用于处理前端逻辑和异步数据交换。
- Ajax:用于在不刷新页面的情况下与服务器进行数据交换。
- Spring MVC:用于处理后端请求和响应。
- 文件上传:处理用户上传的文件,并保存到服务器。
- 会话管理:使用 HTTP 会话来存储用户信息。
1.登陆界面(login.html)
简单的网页表单和后端处理逻辑的组合,用于实现用户登录并上传头像的功能
前端部分 (HTML + JavaScript+jQuery)
- HTML 表单:
-
- 包含三个输入字段:姓名、密码和一个文件上传控件。
- 一个按钮用于触发登录和图片上传的操作。
- JavaScript 脚本:
-
- 使用 jQuery 库来处理表单提交。
- 当用户点击“登录并上传图片”按钮时,脚本会检查是否选择了文件。
- 如果选择了文件,它会创建一个
FormData
对象,将文件和其他表单数据附加到这个对象中。 - 使用
$.ajax
方法发送一个 POST 请求到后端的login
URL。 - 如果后端响应成功(
response.code == 200
),则显示用户信息并重定向到另一个页面(advInfo.html
)。 - 如果登录失败或发生错误,会显示相应的错误消息。
<script type="text/javascript">
$(function(){
$(document).ready(function() {
$("#sub").click(function (){
// 检查是否有文件被选择
var fileInput = $('#image')[0];
if (fileInput.files.length === 0) {
alert('请选择一个图片文件!');
return;
}
// 创建FormData对象
var formData = new FormData();
formData.append('uploadFile', fileInput.files[0]);
formData.append('name', $('#name').val());
formData.append('pass', $('#pass').val());
$.ajax({
url: 'login', // 后端处理登录的URL
type: 'post',
data:formData,
processData: false, // 告诉jQuery不要处理发送的数据
contentType: false, // 告诉jQuery不要设置内容类型
success: function(response) {
if(response.code==200){
alert(response.code)
alert(""+response.user.name)
alert(""+response.user.url)
// 处理成功响应
location.href="advInfo.html"
}else {
$("#msg").html(result.message);
}
},
error: function() {
alert("登陆失败")
}
});
});
});
});
</script>
<form id="loginForm" >
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<label for="pass">密码:</label>
<input type="password" id="pass" name="pass" required><br>
<label for="image">上传图片:</label>
文件1<input type="file" id="image" name="uploadFile"><br/>
<button type="button" id="sub">登录并上传图片</button>
</form>
<div id="msg"></div>
后端部分 (Java Spring MVC)
- @RequestMapping 注解:
-
- 定义了一个处理
/login
请求的方法。
- 定义了一个处理
- 参数接收:
-
- 通过
@RequestParam
注解接收前端传来的姓名、密码和上传的文件。
- 通过
- 文件处理:
-
- 检查上传的文件是否为空。
- 如果不为空,获取文件的原始文件名,并在服务器上创建一个新文件。
- 使用
file.transferTo(serverFile)
方法将文件保存到服务器。
- 用户处理:
-
- 创建一个
User
对象,并调用advService.login(user)
方法进行用户验证。 - 如果用户验证成功,并且文件上传成功,更新用户的 URL 并存储用户信息到会话中。
- 创建一个
- 响应构建:
-
- 根据操作结果构建响应,包括用户信息、状态码和消息。
- 如果文件上传成功,返回状态码 200 和成功消息。
- 如果未选择图片,返回状态码 500 和错误消息。
@RequestMapping("login")
public Map<String, Object> login(@RequestParam("name") String name, @RequestParam("pass") String pass, @RequestParam("uploadFile") MultipartFile file,
HttpServletRequest request) throws IOException {
Map<String, Object> map = new HashMap<>();
String realPath = request.getSession().getServletContext().getRealPath("");
HttpSession session = request.getSession();
System.out.println("=========="+file);
User user = new User(name, pass, "");
User user1 = advService.login(user);
if (!file.isEmpty()) {
// 获取原始文件名
String originalFilename = file.getOriginalFilename();
// 创建保存文件的目标路径
File serverFile = new File(realPath + originalFilename);
// 保存文件
file.transferTo(serverFile);
user1.setName(name);
user1.setPass(pass);
user1.setUrl(file.getOriginalFilename());
advService.updateUrl(user1);
map.put("user", user1);
map.put("code", 200);
map.put("msg", "图片上传成功");
// 将用户信息存储在会话中
session.setAttribute("user", user1);
} else {
map.put("user", user);
map.put("code", 500);
map.put("msg", "未选择图片");
}
return map;
}
2.登陆成功页面展示
2. 前端JavaScript与jQuery的实现
2.1 页面初始化与广告信息加载
- 功能:页面加载完成后,自动调用
loadAdvInfo
函数加载第一页的广告信息。 - 方法:使用jQuery的AJAX方法请求后端接口,获取数据并动态生成表格行。
2.2 分页控制
- 功能:实现广告信息的分页显示和导航。
- 方法:根据从后端获取的总页数动态生成页码按钮,允许用户通过点击页码按钮跳转到对应页面。
2.3 搜索与重置
- 功能:提供搜索和重置功能,用户可以根据广告标题和分类进行搜索,或重置搜索条件。
- 方法:通过按钮点击事件触发搜索或重置操作,重新加载广告信息。
2.4 编辑与删除操作
- 功能:在广告信息列表中提供编辑和删除按钮。
- 方法:为每个按钮绑定事件处理函数,点击时执行相应的操作。
<script type="text/javascript">
$(function () {
let currentPage = 1;
let totalPages;
loadAdvInfo(currentPage);
function loadAdvInfo(pageIndex) {
console.log("loadAdvInfo运行,页码:" + pageIndex)
var categoryName=$("#category").val();
var title=$("#title").val();
$.ajax({
url: "advInfo.action",
type: "get",
data: {
categoryName:categoryName,
title:title,
pageIndex: pageIndex,
pageCount: 5// 假设每页5条数据
},
success: function (data) {
$('#userInfo').text(data.user.name);
var elementById = document.getElementById("im");
elementById.setAttribute('src',data.user.url);
var myTbody = document.getElementById("myTbody");
myTbody.innerHTML = "";
for (var i = 0; i < data.advInfoList.length; i++) {
var advjson = data.advInfoList[i];
addRow(advjson);
}
totalPages = data.totalPages; // 更新总页数
updatePagination();
},
error: function () {
alert("加载失败")
},
dataType: "json"
});
}
function updatePagination() {
var prevButton = document.getElementById('prevPage');
var nextButton = document.getElementById('nextPage');
var pageInfo = document.getElementById('pageInfo');
// 设置上一页按钮状态
if (currentPage > 1) {
prevButton.disabled = false; // 确保按钮可用
prevButton.onclick = function () { // 设置点击事件
currentPage--; // 当前页码减一
loadAdvInfo(currentPage); // 加载上一页的数据
};
} else {
prevButton.disabled = true; // 如果已经是第一页,禁用按钮
}
// 设置下一页按钮状态
if (currentPage < totalPages) {
nextButton.disabled = false; // 确保按钮可用
nextButton.onclick = function () { // 设置点击事件
currentPage++; // 当前页码加一
loadAdvInfo(currentPage); // 加载下一页的数据
};
} else {
nextButton.disabled = true; // 如果已经是最后一页,禁用按钮
}
// 更新页面信息
pageInfo.innerText = "当前页: " + currentPage + " / 总页数: " + totalPages;
// 清除现有的页数链接
var pagesDiv = document.getElementById('pages');
pagesDiv.innerHTML = '';
// 生成新的页数链接
for (var i = 1; i <= totalPages; i++) {
var pageLink = document.createElement('button');
pageLink.innerText = i;
pageLink.className = 'page-link';
if (i === currentPage) {
pageLink.disabled = true; // 当前页码的按钮应被禁用
}
pageLink.onclick = function () {
currentPage = parseInt(this.innerText);
loadAdvInfo(currentPage);
};
pagesDiv.appendChild(pageLink);
}
}
// 绑定搜索按钮事件
$("#search").click(function () {
currentPage = 1; // 重置为第一页
loadAdvInfo(currentPage);
});
// 返回首页事件
$("#selectAll").click(function (){
// 清空select元素的值
document.getElementById('category').selectedIndex = 0; // 设置为第一个选项,通常是"请选择"
// 清空input元素的值
document.getElementById('title').value = '';
currentPage = 1; // 重置为第一页
loadAdvInfo(currentPage);
});
function addRow(advjson) {
var myTbody = document.getElementById("myTbody");
var row = document.createElement("tr");
var td5 = document.createElement("td");
td5.innerText = advjson.advId;
var td1 = document.createElement("td");
td1.innerText = advjson.advTitle;
var td2 = document.createElement("td");
td2.innerText = advjson.clickCount;
var td3 = document.createElement("td");
td3.innerText = advjson.expiredTime;
var td4 = document.createElement("td");
td4.innerText = advjson.advCategory.categoryName;
var td6 = document.createElement("td");
var updatebtn = document.createElement("input");
updatebtn.type = "button";
updatebtn.value = "修改";
updatebtn.id = advjson.advId;
updatebtn.onclick = editRow;
var td7 = document.createElement("td");
var deletebtn = document.createElement("input");
deletebtn.type = "button";
deletebtn.value = "删除";
deletebtn.id = advjson.advId;
deletebtn.onclick = delRow;
/* deletebtn.onclick = function (){if(confirm("确认删除吗?")){
delRow();
}};*/
td6.appendChild(updatebtn);
td6.appendChild(deletebtn);
row.appendChild(td5);
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td6);
row.appendChild(td7);
myTbody.appendChild(row);
}
function editRow() {
//将id在本地存储 this:当前按钮对象
localStorage.setItem("advId", this.id);
//打开修改页面
window.location.href = "update.html";
}
function delRow() {
localStorage.setItem("advId", this.id);
var advId = localStorage.getItem("advId");
if(confirm("确认删除吗?")){
$(function () {
$.ajax({
url: "delAdvInfo.action",
type: "post",
data: {advId: advId},
success: function (data) {
location.href = "advInfo.html";
if (response.code == 200) {
alert("删除成功: " + response.message);
location.href = "advInfo.html";
} else {
alert("删除失败:" + response.message);
}
},
error: function () {
alert("请求失败");
}
})
})
}
}
});
</script>
</head>
<body>
<div id="userInfo"></div>
<div id="user-img">
<img src="image_path.jpg" id="im" alt="用户头像">
</div>
<h2>广告信息查询</h2>
<form method="post" id="sreachForm">
<label>广告分类:</label>
<select id="category" name="categoryName">
<option value="用户未选择">请选择</option>
<option value="电子产品">电子产品</option>
<option value="汽车">汽车</option>
<option value="房地产">房地产</option>
</select><br>
<label>广告标题:</label>
<input type="text" id="title" name="title">
<p><input type="button" id="search" value="检索"/></p>
<p><input type="button" id="selectAll" value="返回首页"/></p>
</form>
<table id="myTable">
<thead>
<tr>
<th>编号</th>
<th>广告标题</th>
<th>点击数量</th>
<th>过期时间</th>
<th>广告分类</th>
<th>操作</th>
</tr>
</thead>
<tbody id="myTbody">
</tbody>
</table>
<div>
<button id="prevPage">上一页</button>
<span id="pageInfo"></span>
<div id="pages"></div>
<button id="nextPage">下一页</button>
</div>
<br>
<!--显示是否删除成功的提示信息-->
<p id="str"></p>
<a href="advadd.html">新增广告</a>
2. 后端Spring框架的处理
2.1 删除广告信息
- 功能:通过
delAdvInfo.action
接口,用户可以删除指定的广告信息。 - 方法:接收广告ID,调用服务层方法
delAdvMation
进行删除操作。 - 响应:根据操作结果返回状态码和消息,成功则返回200和"delYes",失败则返回500和"delNo"。
2.2 显示编辑广告信息
- 功能:通过
showUpdateAdv.action
接口,系统提供编辑广告的界面,并加载广告的详细信息。 - 方法:根据广告ID查询广告信息,并获取所有广告分类的名称。
- 响应:将广告信息和分类名称打包返回给前端。
2.3 更新广告信息
- 功能:通过
updateAdvInfo.action
接口,用户可以更新广告信息。 - 方法:接收更新后的广告信息对象,更新数据库中的记录。
- 响应:根据更新操作的结果返回相应的状态码和消息。
2.4 广告信息查询
- 功能:通过
advInfo.action
接口,用户可以根据分类和标题搜索广告信息,并进行分页显示。 - 方法:根据用户输入的条件查询广告信息,并处理分页逻辑。
- 响应:返回当前页的广告信息列表、用户信息以及分页信息。
@RestController
@ResponseBody
public class AdvController {
@Resource
private AdvService advService;
@RequestMapping("delAdvInfo.action")
@ResponseBody
public Map<String, Object> delAdvInfo(@RequestParam("advId") int advId) throws Exception {
Map<String, Object> result = new HashMap<>();
System.out.println(advId);
int i = advService.delAdvMation(advId);
if (i > 0) {
result.put("message", "delYes");
result.put("code", 200);
} else {
result.put("message", "delNo");
result.put("code", 500);
}
return result;
}
@RequestMapping("advInfo.action")
public Map<String, Object> method15(Condition condition, String categoryName, HttpServletRequest request) throws Exception {
System.out.println("当前页码"+condition.getPageIndex());
int offset=(condition.getPageIndex()-1)*condition.getPageCount();
condition.setOffset(offset);
Map<String, Object> map = new HashMap<>();
User user = (User) request.getSession().getAttribute("user");
System.out.println(user);
System.out.println("456+++++++++" + user);
map.put("user", user);
if (condition.getTitle() != "" && categoryName != "用户未选择") {
int i = advService.queryIdByName(categoryName);
condition.setCategoryId(i);
PageResult<AdvInfo> byAdvAll = advService.findPagenated(condition);
List<AdvInfo> advInfoList = byAdvAll.getData();
//一个map就等同与一个json对象
map.put("advInfoList", advInfoList); // 存储广告列表
map.put("currentPage", byAdvAll.getCurrentPage());
map.put("totalPages", byAdvAll.getTotalPages());
map.put("totalItems", byAdvAll.getTotalItems());
} else {
PageResult<AdvInfo> byAdvAll = advService.findByAdvAll(condition);
List<AdvInfo> advInfoList = byAdvAll.getData();
//一个map就等同与一个json对象
map.put("advInfoList", advInfoList); // 存储广告列表
map.put("currentPage", byAdvAll.getCurrentPage());
map.put("totalPages", byAdvAll.getTotalPages());
map.put("totalItems", byAdvAll.getTotalItems());
}
return map;
}
}
3.修改页面
这段代码展示了一个广告信息管理系统中的编辑广告信息功能。它包括前端的JavaScript代码和后端的Spring框架控制器方法。以下是对这些代码的详细功能、方法和技术描述:
前端JavaScript代码
功能
- 在页面加载完成后,从本地存储中获取广告ID,并使用该ID从服务器获取广告的详细信息。
- 将获取的广告信息填充到表单中,以便用户可以编辑。
- 提供一个表单,让用户可以修改广告信息,并通过AJAX请求将修改后的信息发送到服务器。
方法和技术
- 使用jQuery的
$(document).ready
方法确保DOM完全加载后再执行脚本。 - 使用
localStorage
获取保存的广告ID。 - 使用AJAX的
$.ajax
方法从后端获取广告信息,并在成功获取后使用回调函数填充表单。 - 使用
$.each
遍历从服务器获取的广告分类列表,动态生成下拉菜单选项。 - 为提交按钮绑定点击事件,当点击时,阻止默认的表单提交行为,并通过AJAX发送修改后的广告信息。
- 使用
JSON.stringify
将JavaScript对象转换为JSON字符串,以便作为AJAX请求的数据发送。 - 在AJAX请求成功后,根据返回的代码判断操作是否成功,并给出相应的提示。
<script>
$(document).ready(function () {
let advId = localStorage.getItem("advId");
$.ajax({
url: "showUpdateAdv.action",
type: "get",
data: {id: advId},
success: function (data) {
console.log("" + data);
$("#advId").val(data.advInfo.advId);
$("#advTitle").val(data.advInfo.advTitle);
$("#expiredTime").val(data.advInfo.expiredTime);
$("#advContent").val(data.advInfo.advContent);
$("#remark").val(data.advInfo.remark);
let names = data.names;
let selectedName = data.advInfo.advCategory.categoryName;
// 填充分类下拉菜单
var categorySelect = $("#categoryName");
$.each(names, function (index, name) {
var selected = (name === selectedName) ? "selected" : "";
categorySelect.append('<option value="' + name + '" ' + selected + '>' + name + '</option>');
});
},
error: function () {
console.log("数据显示出错");
}
});
// 处理表单提交
$("#sub").click(function () {
var advId = $('#advId').val();
var advTitle = $('#advTitle').val();
var expiredTime = $('#expiredTime').val();
var categoryName = $('#categoryName').val();
var advContent = $('#advContent').val();
var remark = $('#remark').val();
let information = {
advId: advId,
advTitle: advTitle,
expiredTime: expiredTime,
advContent: advContent,
remark: remark,
advCategory: {
categoryName: categoryName
}
};
alert("" + JSON.stringify(information))
$.ajax({
type: "post",
url: "updateAdvInfo.action", // 你的服务器端URL
contentType: "application/json",
data: JSON.stringify(information),
success: function (data) {
alert(data.code);
if (data.code == 200) {
location.href = "advInfo.html";
} else {
console.log("" + data.message)
}
},
error: function (xhr, status, error) {
alert("更新失败:" + error);
},
dataType: "json"
});
});
});
</script>
</head>
<body>
<form action="updateAdvInfo.action" method="post">
<input type="hidden" id="advId" name="advId"/>
<p>广告标题: <input type="text" id="advTitle" name="advTitle"/></p>
<p>过期时间: <input type="text" id="expiredTime" name="expiredTime"/></p>
<p>广告内容: <input type="text" id="advContent" name="advContent"/></p>
<p>广告分类:
<select id="categoryName" name="categoryName">
<option value="用户未选择">请选择</option>
<option value="电子产品">电子产品</option>
<option value="汽车">汽车</option>
<option value="房地产">房地产</option>
</select>
</p>
<p>备注: <input type="text" id="remark" name="remark"/></p>
<p><input type="button" id="sub" value="修改广告"/></p>
</form>
</body>
</html>
后端Spring框架控制器
功能
showUpdateAdv
方法:根据广告ID查询广告的详细信息,包括广告分类的名称列表。updateAdvInfo
方法:接收修改后的广告信息,更新数据库中的记录,并返回操作结果。
方法和技术
- 使用
@RestController
和@ResponseBody
注解定义REST风格的控制器和方法。 - 使用
@Resource
注解注入AdvService
服务,用于数据库操作。 showUpdateAdv
方法:
-
- 接收请求参数
id
,表示要编辑的广告ID。 - 调用
advService.queryAdvOne(id)
查询广告信息。 - 调用
advService.queryAllName()
获取所有广告分类的名称列表。 - 将广告信息和分类名称列表打包成Map对象返回给前端。
- 接收请求参数
updateAdvInfo
方法:
-
- 使用
@RequestBody
注解接收前端发送的JSON格式的广告信息。 - 根据广告分类名称查询对应的ID,并设置到广告信息对象中。
- 调用
advService.updateAdvInfo(advInfo)
更新数据库中的广告信息。 - 根据更新操作的结果,返回包含状态码和消息的Map对象。
- 使用
@RequestMapping("showUpdateAdv.action")
public Map<String, Object> showUpdateAdv(@RequestParam("id") int id) throws Exception {
AdvInfo advInfo = advService.queryAdvOne(id);
HashMap<String, Object> map = new HashMap<>();
map.put("advInfo", advInfo);
List<String> strings = advService.queryAllName();
map.put("names", strings);
return map;
}
@RequestMapping("updateAdvInfo.action")
public Map<String, Object> updateAdv(@RequestBody AdvInfo advInfo) throws Exception {
HashMap<String, Object> map = new HashMap<>();
String categoryName = advInfo.getAdvCategory().getCategoryName();
System.out.println("sagdjk:" + categoryName);
int id = advService.queryIdByName(categoryName);
advInfo.getAdvCategory().setCategoryId(id);
advInfo.setCategoryId(id);
System.out.println("============" + advInfo);
int i = advService.updateAdvInfo(advInfo);
if (i > 0) {
map.put("code", 200);
map.put("message", "success");
} else {
map.put("code", 300);
map.put("message", "fail");
}
return map;
}
4.添加页面
这段代码展示了一个广告信息管理系统中的新增广告信息功能。它包括前端的JavaScript代码和后端的Spring框架控制器方法。以下是对这些代码的详细功能、方法和技术描述:
前端JavaScript代码
功能
- 在页面加载完成后,为“新增广告”按钮绑定点击事件。
- 当点击按钮时,收集表单中的数据,包括广告标题、过期时间、广告分类、广告内容和备注。
- 将收集到的数据封装成一个JavaScript对象,然后转换为JSON字符串。
- 使用AJAX请求将JSON数据发送到服务器的
addAdvInfo.action
接口。 - 根据服务器的响应,判断操作是否成功,并进行相应的页面跳转或错误提示。
方法和技术
- 使用jQuery的
$(function() {...})
方法确保DOM完全加载后再执行脚本。 - 使用
$("#elementId").val()
方法获取表单元素的值。 - 创建一个JavaScript对象
information
来存储表单数据,并设置一个嵌套对象advCategory
来存储广告分类信息。 - 使用
JSON.stringify(information)
将JavaScript对象转换为JSON字符串。 - 使用
$.ajax
方法发送AJAX请求,其中包含请求的URL、请求类型、内容类型、数据和成功回调函数。 - 在成功回调函数中,根据返回的响应判断操作结果,并执行页面跳转或显示错误提示。
<script type="text/javascript">
$(function (){
$("#sub").click(function (){
var advTitle = $("#title").val();
var expiredTime = $("#expireTime").val();
var categoryName = $("#category").val();
var advContent = $("#content").val();
var remark = $("#remark").val();
var information={advTitle:advTitle,expiredTime:expiredTime,advContent:advContent,
remark:remark, advCategory: {
categoryName: categoryName
}};
$.ajax({
url: "addAdvInfo.action", // 服务器端处理脚本的路径
type: "post",
contentType: "application/json",
data: JSON.stringify(information),
success: function(response) {
if (response === "yes") {
location.href="advInfo.html"
} else {
alert("操作失败:" + response);
}
}
});
});
});
</script>
<h2>新增广告信息</h2>
<form >
<label for="title">广告标题:</label><br>
<input type="text" id="title" name="advTitle" required><br>
<label for="expireTime">过期时间:</label><br>
<input type="date" id="expireTime" name="expiredTime" required><br>
<label for="category">广告分类:</label><br>
<select id="category" name="categoryName">
<option value="用户未选择">请选择</option>
<option value="电子产品">电子产品</option>
<option value="汽车">汽车</option>
<option value="房地产">房地产</option>
</select>
<br>
<label for="content">广告内容:</label><br>
<textarea id="content" name="advContent" rows="4" cols="50" required></textarea><br>
<label for="remark">备注:</label><br>
<textarea id="remark" name="remark" rows="2" cols="50"></textarea><br>
<input type="button" id="sub" value="新增广告">
</form>
</body>
后端Spring框架控制器
功能
addAdvNation
方法:接收前端发送的广告信息,将其添加到数据库中,并返回操作结果。
方法和技术
- 使用
@RequestMapping
注解定义处理新增广告信息请求的路径。 - 使用
@ResponseBody
注解表示方法的返回值将作为HTTP响应的正文返回。 - 使用
@RequestBody
注解接收前端发送的JSON格式的广告信息,并将其自动转换为AdvInfo
对象。 - 使用
HttpServletResponse
设置响应的内容类型为"application/json"。 - 调用
advService.queryIdByName
方法根据广告分类名称查询对应的ID,并设置到广告信息对象中。 - 调用
advService.addAdvInfo
方法将广告信息添加到数据库中。 - 根据添加操作的结果返回字符串"yes"或"no",表示操作成功或失败。
@RequestMapping("addAdvInfo.action")
@ResponseBody
public String addAdvNation(@RequestBody AdvInfo advInfo, HttpServletResponse response) throws Exception {
response.setContentType("application/json");
System.out.println("===============" + advInfo);
int id = advService.queryIdByName(advInfo.getAdvCategory().getCategoryName());
advInfo.setCategoryId(id);
int i = advService.addAdvInfo(advInfo);
if (i > 0) {
return "yes";
} else {
return "no";
}
}
5.总结
在本广告信息管理系统中,我们实现了一个全面的功能集,包括用户登录、广告信息的增删改查以及分页显示,涵盖了前端和后端的多个关键技术点。以下是对整个系统的详细总结:
技术栈
- HTML/CSS:用于构建用户界面,提供基本的页面结构和样式。
- JavaScript/jQuery:处理前端逻辑,包括事件处理、数据收集和异步数据交换。
- Ajax:实现与服务器的异步数据交换,无需刷新页面即可更新数据。
- Spring MVC:后端框架,处理HTTP请求、业务逻辑和数据库操作。
- 文件上传:处理用户上传的文件,如头像图片,并保存到服务器。
- 会话管理:使用HTTP会话来存储和管理用户信息。
前端实现
- 表单处理:使用HTML表单收集用户输入,如广告标题、过期时间、内容、分类和备注。
- Ajax请求:通过jQuery的
$.ajax
方法发送POST请求,实现与后端的数据交互。 - FormData对象:用于构建一组键值对,表示表单字段和它们的值,特别用于文件上传。
- JSON数据处理:将JavaScript对象转换为JSON格式,以便作为HTTP请求的载荷发送。
- 用户交互:通过弹窗和页面跳转提供用户反馈,如操作成功或失败的提示。
后端实现
- 请求映射:使用
@RequestMapping
注解定义路由,将HTTP请求映射到特定的处理方法。 - 参数接收:通过
@RequestParam
和@RequestBody
注解接收前端传递的参数和JSON数据。 - 业务逻辑:调用服务层方法执行具体的业务操作,如用户验证、文件处理和数据库操作。
- 响应构建:根据操作结果构建响应对象,包括状态码、消息和数据,返回给前端。
- 异常处理:处理可能的异常情况,如文件上传失败或数据库操作错误,并返回相应的错误信息。
功能描述
- 用户登录:用户可以通过填写姓名、密码和上传头像来登录系统。系统会验证用户信息并处理文件上传。
- 广告信息管理:用户可以添加、查询、编辑和删除广告信息。系统提供了分页显示功能,使用户能够浏览大量数据。
- 数据验证:系统在前端和后端都进行了数据验证,确保数据的完整性和准确性。
- 安全性:通过会话管理和适当的错误处理,系统确保了用户数据的安全和操作的可靠性。