实战项目（二）汽车保养管家系统

一、实现技术

前端技术：html、javascript(jquery、ajax、json)、css、layui

后端技术：java、mysql、servlet

开发工具：eclipse、vscode

二、项目描述

基于web的汽车保养管家系统的设计与实现

一、功能需求

1．用户功能

1.1登录和注册：用户进入我们的网页后，首先会看到我们首页展示的一些公告信息，如果需要用到车辆管理、保养管理等具体的功能，需要注册或登录。

1.2管理车辆信息：

1.2.1 添加车辆信息：可以添加多辆车辆信息，用户填写自己车辆的型号（品牌+系列 eg:奔驰s600）、里程数(公里)、发动机排量（1.5T、2T）、生产年份和购买日期等信息。

1.2.2 修改车辆信息：用户如果填错了信息，可以修改自己的车辆信息。

1.2.3 删除车辆信息：用户可以删除自己的车辆信息，同时删除该车辆信息的保养记录。

1.2.4 查看车辆信息：用户添加了自己的车辆信息后，可以查看车辆信息以及该车辆的保养记录。

1.3 管理保养记录：

1.3.1添加保养记录：用户填写保养记录。

1.3.2 修改保养记录：用户修改保养记录。

1.3.3 删除保养记录：用户删除保养记录。

1.3.4 查看保养记录：用户可以查看保养记录。

1.4 查看保养建议：可以查看管家对于不同车辆的保养建议

1.5 联系管理员：用户在使用过程中遇到的问题，或者一些建议，都可以以留言的方式发送给管理员，并查看管理的回复。

2.管理员功能

2.1 能够查看所有用户的所有车辆信息的所有保养信息

2.2 针对车辆已经做的保养记录给出保养建议

2.3公告管理：发布用户在首页看到的公告，修改公告、删除公告

2.4 公告栏目管理：公告栏目添加、删除、修改

2.5 查看用户留言：查看用户的反馈和遇到的问题并回复

三、页面展示

①首页页面home.html

②栏目内容 more+，采用layui框架中的页面弹出

③单个内容详情

④登录成功页面login.html，注册页面和忘记密码页面相似

⑤管理员车辆保养管理信息页面maintenance_advice.html

建议，能查看对应的车辆信息和保养信息并给出建议

⑥管理员公告管理页面announcement.html

修改，弹出页面，回显相应公告信息，公告栏目从数据库中查出来的，不是写死的，每个栏目及内容发布后在首页能显示，并根据数据库中的修改首页内容相应发生修改

发布，发布后能在首页面展示，如果已发布，发布按钮无效；如果未发布，停止发布按钮无效

删除

⑦管理员用户留言管理页面user_message.html

查看详情

⑧用户车辆保养记录管理页面maintenance_records.html

查看保养建议

查看车辆信息

⑨用户车辆信息管理页面vehicle_information.html

⑩用户联系管理员页面contact_admin.html

四、关键代码展示

①首页home.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="resource/css/home.css"><link rel="stylesheet" href="resource/layui/css/layui.css"><script src="resource/js/jquery.js"></script><script src="resource/js/jquery.cookie.js"></script><script src="resource/layui/layui.js"></script><script src="resource/js/home.js" defer></script>
</head>
<body><a name="top"></a><!-- 页面头部开始 --><div class="top"><div class="left"><h3>汽车保养管家中心</h3></div><div class="right"><a href="login.html">登录</a> |<a href="register.html">注册</a></div></div><!-- 页面头部结束 --><!-- 页面菜单开始 --><div class="menubox"><ul><li><a href="#top">首页</a></li></ul></div><!-- 页面菜单结束 --><!-- 轮播图开始 --><div class="lunbo"><div class="layui-carousel" id="ID-carousel-demo-1"><div carousel-item><img src="resource/images/lunbo1.jpg" alt="" style="object-fit:cover"><img src="resource/images/lunbo2.jpg" alt="" style="object-fit:cover"><img src="resource/images/lunbo3.jpg" alt="" style="object-fit:cover"><img src="resource/images/lunbo4.jpg" alt="" style="object-fit:cover"><img src="resource/images/lunbo5.jpg" alt="" style="object-fit:cover"></div></div> <script>layui.use(function(){var carousel = layui.carousel;// 渲染 - 常规轮播carousel.render({elem: '#ID-carousel-demo-1',anim: 'fade',width: '100%',height: '360px'});});</script></div><!-- 轮播图结束 --><!-- 页面主体开始 --><div class="main"></div><!-- 页面主体结束 --><!-- 页面底部开始 --><div class="bottom"><span>系统创建时间：2024.1.13&nbsp;&nbsp;&nbsp;    联系方式：1750502120@qq.com</span></div><!-- 页面底部结束 --><!-- 返回顶部开始--><a href="#top" class="backTop"><span>TOP</span><img src="resource/images/top.png" alt=""></a><!-- 返回顶部结束 -->
</body>
</html>

home.css

/* 公共样式开始 */
*{padding: 0;margin: 0;
}ul {list-style: none;
}a {text-decoration: none;
}
/* 公共样式结束 *//* 页面头部样式开始 */.top {display: flex;height: 60px;justify-content: space-between;align-items: center;background: linear-gradient(30deg, rgb(12,72,184), rgb(11,63,79), rgb(0,74,221));
}.top .left {display: flex;align-items: center;margin-left: 45%;
}.top .left h3 {font-size: 20px;font-weight: 700;color: white;
}.top .right {margin-right: 50px;color: white;
}.top .right a {color: rgb(190, 200, 225);font-size: 16px;
}.top .right a:hover{color: palevioletred;
}/* 页面头部样式结束 *//* 页面菜单样式开始 */.menubox ul {display: flex;width: 80%;margin: 0 auto;justify-content: space-between;
}.menubox ul li a {padding: 10px;display: block;color: gray;font-size: 18px;cursor: pointer;
}.menubox ul li a:hover {background: #fff;color: rgb(62, 234, 219);border-bottom: 5px solid;
}/* 页面菜单样式结束 *//* 页面轮播样式开始 */
.lunbo{margin-bottom: 50px;
}
/* 页面轮播样式结束 *//* 页面主体开始 */.main .colums{display: flex;justify-content: space-between;margin: 5px 40px;
}.main h5{display: flex;margin-top: 50px;border-bottom: 1px solid rgb(126, 128, 128);padding-bottom: 7px;justify-content: space-between;margin: 50px 30px;
}.main h5 span{font-size: 23px;color: gray;margin-left: 45%;
}.main h5 a{color: gray;margin-top: 13px;
}.main h5 a:hover{color: plum;
}.main .left,
.main .right{width: 48.5%;
}.main .left ul li,
.main .right ul li{border-bottom: 1px solid gainsboro;
}.main .left a,
.main .right a{display: flex;margin-bottom: 5px;margin-top: 5px;
}.main .left a:hover,
.main .right a:hover{color: rgb(62, 234, 219);
}.main .left a .le,
.main .right a .le{margin-right: 8px;
}.main .left a .le h3,
.main .right a .le h3{text-align: center;font-size: 20px;
}.main .left a .ri,
.main .right a .ri{font-size: 15px;padding-top: 3px;padding-bottom: 6px;
}/* 页面主体结束 */.backTop {position: fixed;bottom: 10px;right: 10px;width: 50px;height: 50px;display: block;text-align: center;background: rgb(86, 141, 230);color: #fff;padding-top: 5px;
}/* 页面底部开始 */.bottom{height: 100px;margin-top: 50px;background: linear-gradient(30deg, rgb(12,72,184), rgb(11,63,79), rgb(0,74,221));display: flex;justify-content: center; /* 水平居中 */  align-items: center; /* 垂直居中 */  
}.bottom span{ color: white;font-size: 16px;/* display: block; /* 将span设为块级元素 */  /*margin-left: auto; /* 向左外边距自动 */  /*margin-right: auto; /* 向右外边距自动 */  /*width: fit-content; /* 让宽度等于内容宽度 */   
}/* 页面底部结束 */

home,js

//剪裁方法
function cut_str(str,len){if(str.length>len){str=str.substring(0,len)+"..."}return str
}//加载页面菜单
$.ajax({url:"Home?action=getMenu",type:"get",success:function(value){//$(".menubox ul").empty()var arr = value.datafor(var i=0; i<arr.length;i++){$(".menubox ul").append("<li><a href='#"+arr[i].id+"'>"+arr[i].column+"</a></li>")$(".main").append("<a name='"+arr[i].id+"'></a>"+"<h5>"+"<span>"+arr[i].column+"</span>"+"<a href='#' index='"+arr[i].id+"' class='more'>more+</a>"+"</h5>")loadContent(arr[i].id)}	},error:function(){console.log("加载页面菜单失败")}
})//加载公告
function loadContent(id){$.ajax({url:"Home?action=getContent&colum_id="+id,type:"get",async:false, success:function(value){var arr = value.datafor(var i=0; i<arr.length;i++){if(i==0){$(".main").append("<div class='colums' id='"+id+"'><div class='right'><ul></ul></div><div class='left'><ul></ul></div></div>")}if(i%2==0){$("#"+id).find(".right ul").append("<li>"+"<a href='#' num='"+arr[i].id+"' class='detail'>"+"<div class='le'>"+"<h3>"+arr[i].createtime.substring(8,10)+"</h3>"+"<p>"+arr[i].createtime.substring(0,7)+"</p>"+"</div>"+"<div class='ri'>"+"<h4>"+cut_str(arr[i].title,10)+"</h4>"+"<p>"+cut_str(arr[i].content,25)+"</p>"+"</div>"+"</a>"+"</li>")}else{$("#"+id).find(".left ul").append("<li>"+"<a href='#' num='"+arr[i].id+"' class='detail'>"+"<div class='le'>"+"<h3>"+arr[i].createtime.substring(8,10)+"</h3>"+"<p>"+arr[i].createtime.substring(0,7)+"</p>"+"</div>"+"<div class='ri'>"+"<h4>"+cut_str(arr[i].title,10)+"</h4>"+"<p>"+cut_str(arr[i].content,25)+"</p>"+"</div>"+"</a>"+"</li>")}}	},error:function(){console.log("加载通知公告失败")}})
}//加载more+
$(".main").on("click",".more",function(){var more_id = $(this).attr("index")$.ajax({url:"Home?action=getMore&more_id="+more_id,type:"get",success:function(value){var arr = value.datavar content = "<div style='margin: 5%;'>";for(var i=0; i<arr.length;i++){content = content+"<h3>标题："+arr[i].title+"</h3>"+"<p style='font-size: 18px;'>内容："+arr[i].content+"</p>"+"<p style='font-size: 15px;color: burlywood;'>创建时间："+arr[i].createtime+"</p><br>"}content = content + "</div>"layer.open({  type: 1, // page 层类型area: ['500px', '400px'],title: arr[0].column,title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content,});     },error:function(){layer.alert("加载more+失败啦")}})
})//加载公告详细信息
$(".main").on("click",".detail",function(){var detail_id = $(this).attr("num")$.ajax({url:"Home?action=getDetail&detail_id="+detail_id,type:"get",success:function(value){var arr = value.datavar content = "<div style='margin: 5%;'>";for(var i=0; i<arr.length;i++){content = content+"<h4>标题："+arr[i].title+"</h4>"+"<p style='font-size: 16px;'>内容："+arr[i].content+"</p>"+"<p style='font-size: 14px;color: burlywood;'>创建时间："+arr[i].createtime+"</p><br>"}content = content + "</div>"layer.open({  type: 1, // page 层类型area: ['500px', '400px'],title: arr[0].column,title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content,});     },error:function(){layer.alert("加载详细信息失败啦")}})
})

HomeServlet.java

package servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import db.MysqlUtil;/*** Servlet implementation class HomeServlet*/
@WebServlet("/Home")
public class HomeServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public HomeServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/json;charset=utf-8");String action = request.getParameter("action");String[] colums = {"id","column"};String[] content = {"id","colum_id","title","content","createtime"};String[] more = {"id","column","title","content","createtime"};String res = "";switch(action) {//查找页面菜单case "getMenu":String sql = "select * from menu";res = MysqlUtil.getJsonBySql(sql, colums);break;//查找公告内容case "getContent":String colum_id = request.getParameter("colum_id");sql = "select * from content where available=1 and colum_id="+colum_id+" order by createtime desc";res = MysqlUtil.getJsonBySql(sql, content);break;//加载more+case "getMore":String more_id = request.getParameter("more_id");sql = "select menu.column,content.* from menu,content where menu.id=content.colum_id and content.available=1 and colum_id='"+more_id+"' order by createtime desc";res = MysqlUtil.getJsonBySql(sql, more);break;//加载more+case "getDetail":String detail_id = request.getParameter("detail_id");sql = "select menu.column,content.* from menu,content where menu.id=content.colum_id and content.id="+detail_id;res = MysqlUtil.getJsonBySql(sql, more);break;default:break;}response.getWriter().write(res);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

②后台管理主页面 main.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="resource/css/main.css"><script src="resource/js/jquery.js"></script><script src="resource/js/jquery.cookie.js"></script><script src="resource/layer/layer.js"></script><script type="text/javascript">$(function(){var role = $.cookie("role")var account = $.cookie("account")//加载用户或管理员if(role==="0"){var str = "欢迎管理员："+account$("span").text(str)$(".bottom ul").append("<li><a href='maintenance_advice.html' target='aa'>车辆保养信息管理</a></li>"+"<li><a href='announcement.html' target='aa'>公告管理</a></li>"+
//                "<li><a href='announcement_column.html?a=2' target='aa'>公告栏目管理</a></li>"+"<li><a href='user_message.html' target='aa'>用户留言管理</a></li>")$(".bottom iframe").attr("src","maintenance_advice.html")}if(role==="1"){var str = "欢迎用户："+account$("span").text(str)$(".bottom ul").append("<li><a href='maintenance_records.html?"+account+"' target='aa'>车辆保养记录管理</a></li>"+"<li><a href='vehicle_information.html?"+account+"' target='aa'>车辆信息管理</a></li>"+"<li><a href='contact_admin.html?"+account+"' target='aa'>联系管理员</a></li>")$(".bottom iframe").attr("src","maintenance_records.html?"+account)}$(".top .logout").on("click",function(){$.ajax({url:"Login?action=logout",type:"get",success:function(){location.href="home.html"},error:function(){alert("登出出错啦")}})})})</script>
</head>
<body><div class="container"><div class="top"><h1>汽车保养管理系统</h1><span></span><a href="#" class="logout">登出</a></div><div class="bottom"><ul></ul><iframe src="" frameborder="0" name="aa"></iframe></div></div>
</body>
</html>

main.css

* {padding: 0;margin: 0;
}.top{border:3px solid rgb(117, 175, 236);display: flex;justify-content: space-between;align-items: center;padding: 20px 30px;
}.top h1{font-size:36px;color: rgb(108, 159, 241);margin-left: 38%;
}.top span{color: gray;margin-left: 12%;
}.top a{text-decoration: none;background: linear-gradient(30deg,rgb(121, 216, 237),rgb(163, 122, 233));padding: 4px 8px;font-size: 15px;color:white
}.top a:hover{box-shadow: 2px 2px 2px pink;
}.bottom{display: flex;height: 650px;justify-content: space-between;border-right: 3px solid rgb(117, 175, 236);border-bottom: 3px solid rgb(117, 175, 236);
}.bottom ul{background: linear-gradient(30deg,  rgb(162, 235, 206),rgb(137, 194, 237), rgb(186, 186, 230));width: 15%;
}.bottom iframe{width: 86%;
}.bottom ul li{list-style: none;text-align: center;width: 80%;padding: 4px 0;margin: 30px auto;border: 2px solid white;
}.bottom ul li:first-child{margin-top: 50px;
}.bottom ul li a{text-decoration: none;color: white;font-size: 16px;
}.bottom ul li:hover{box-shadow: inset 2px 2px 2px rgb(230, 100, 71);background: rgb(186, 244, 244);
}.bottom ul li a:hover{color: rgb(241, 152, 152);cursor: pointer;
}

AdminServlet.java

package servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import db.MysqlUtil;/*** Servlet implementation class AdminServlet*/
@WebServlet("/Admin")
public class AdminServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public AdminServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/json;charset=utf-8");String action = request.getParameter("action");String username = request.getParameter("username");String carname = request.getParameter("carname");String page = request.getParameter("page");String pageSize = request.getParameter("pageSize");String[] colums = {"id","username","carname","type","mantaincetime","updatetime"};String[] colums_all = {"id","column","title","content","createtime","available","colum_id"};String[] advice = {"id","username","carname","model","mileage","displace","producetime","buytime","img","other","type","body","inner","renovate","engine","component","clear","others","mantaincetime","advice"};String[] menus = {"id","column"};String[] messages = {"id","username","title","message","answer","updatetime"};String res = "{\"msg\":\"查找失败\",\"code\":0}";switch(action) {//加载保养信息case "getAdvice":String sql="select records.id,user.username,vehicle.carname,records.type,records.mantaincetime,records.updatetime from user,vehicle,records where vehicle.available=1 and records.available=1 and user.id=vehicle.user_id and vehicle.id=records.car_id and username like '%"+username+"%' and carname like '%"+carname+"%' order by records.updatetime desc limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;res = MysqlUtil.getJsonBySql(sql, colums);break;//加载保养信息分页case "getCount":username = request.getParameter("username");carname = request.getParameter("carname");sql="select count(*) from user,vehicle,records where vehicle.available=1 and records.available=1 and user.id=vehicle.user_id and vehicle.id=records.car_id and username like '%"+username+"%' and carname like '%"+carname+"%'";int count = MysqlUtil.getCount(sql);res = "{\"msg\":\""+count+"\",\"code\":0}";break;//加载公告信息case "getColum":String title = request.getParameter("title");String content = request.getParameter("content");String colum_id = request.getParameter("colum_id");sql="select menu.column,content.* from menu,content where content.available>0 and menu.id=content.colum_id and title like '%"+title+"%'and content like '%"+content+"%'";if(!"0".equals(colum_id)) {sql +=" and colum_id="+colum_id;}sql +=" order by createtime desc limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;res = MysqlUtil.getJsonBySql(sql, colums_all);break;//根据Id加载公告信息case "getColumId":String id = request.getParameter("id");sql="select content.*,menu.column from content,menu where content.colum_id=menu.id and content.id="+id;res = MysqlUtil.getJsonBySql(sql, colums_all);break;//加载公告信息分页case "getPage":title = request.getParameter("title");content = request.getParameter("content");colum_id = request.getParameter("colum_id");sql="select count(*) from menu,content where content.available>0 and menu.id=content.colum_id and title like '%"+title+"%'and content like '%"+content+"%'";if(!"0".equals(colum_id)) {sql +=" and colum_id="+colum_id;}count = MysqlUtil.getCount(sql);res = "{\"msg\":\""+count+"\",\"code\":0}";break;//加载公告栏目case "getMenu":sql="select * from menu";res = MysqlUtil.getJsonBySql(sql, menus);break;//加载用户留言case "getMessage":String uname = request.getParameter("username");String message = request.getParameter("message");sql="select user.username,contact.* from user,contact where user.id=contact.user_id and username like '%"+uname+"%' and message like '%"+message+"%' order by updatetime desc limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;res = MysqlUtil.getJsonBySql(sql, messages);break;//加载用户留言分页case "getMecount":uname = request.getParameter("username");message = request.getParameter("message");sql="select count(*) from user,contact where user.id=contact.user_id and username like '%"+uname+"%' and message like '%"+message+"%'";count = MysqlUtil.getCount(sql);res = "{\"msg\":\""+count+"\",\"code\":0}";break;//根据id加载建议case "getAdviceId":id = request.getParameter("id");sql="select records.*,vehicle.carname,vehicle.model,vehicle.mileage,vehicle.displace,vehicle.buytime,vehicle.producetime,vehicle.img,vehicle.other,user.username from records,vehicle,user where records.car_id=vehicle.id and vehicle.user_id=user.id and records.id='"+id+"'";res = MysqlUtil.getJsonBySql(sql, advice);break;case "getMedetail":id = request.getParameter("id");sql="select contact.*,user.username from contact,user where contact.id='"+id+"' and user.id=contact.user_id";res = MysqlUtil.getJsonBySql(sql, messages);break;default:break;}response.getWriter().write(res);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/json;charset=utf-8");String action = request.getParameter("action");String res = "{\"msg\":\"删除失败\",\"code\":0}";String id = request.getParameter("id");switch(action) {//单个删除case "delete_id":String sql="update content set available=0 where id="+id;int num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"删除成功\",\"code\":1}";}break;//批量删除case "deleteAll":String ids = request.getParameter("ids");sql="update content set available=0 where id in("+ids+")";num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"批量删除成功\",\"code\":1}";}break;case "advice":String suggestion = request.getParameter("suggestion");id = request.getParameter("id");sql="update records set advice='"+suggestion+"' where id='"+id+"'";res = "{\"msg\":\"建议信息失败\",\"code\":0}";num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"建议信息成功\",\"code\":1}";}break;case "answer":String answer = request.getParameter("answer");id = request.getParameter("id");sql="update contact set answer='"+answer+"' where id='"+id+"'";res = "{\"msg\":\"回复信息失败\",\"code\":0}";num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"回复信息成功\",\"code\":1}";}break;case "add":String title = request.getParameter("title");String colum_id = request.getParameter("colum_id");String content = request.getParameter("content");content = content.replaceAll("\"", "\'");sql="insert into content(colum_id,title,content,available) values('"+colum_id+"','"+title+"','"+content+"','2')";res = "{\"msg\":\"添加公告信息失败\",\"code\":0}";num = MysqlUtil.add(sql);if(num>0) {res = "{\"msg\":\"添加公告信息成功\",\"code\":1}";}break;//修改公告信息case "update":id = request.getParameter("id");colum_id = request.getParameter("colum_id");title = request.getParameter("title");content = request.getParameter("content");sql="update content set title='"+title+"',content='"+content+"',colum_id='"+colum_id+"' where id = "+id;res = "{\"msg\":\"修改信息失败\",\"code\":0}";num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"修改信息成功\",\"code\":1}";}break;//发布公告信息case "publish":id = request.getParameter("id");sql="update content set available='1' where id = "+id;res = "{\"msg\":\"发布公告信息失败\",\"code\":0}";num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"发布公告信息成功\",\"code\":1}";}break;//停止发布公告信息case "no_publish":id = request.getParameter("id");sql="update content set available='2' where id = "+id;res = "{\"msg\":\"停止发布公告信息失败\",\"code\":0}";num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"停止发布公告信息成功\",\"code\":1}";}break;default:break;}response.getWriter().write(res);}}

UserServlet.java

package servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.json.JSONArray;
import org.json.JSONObject;import db.MysqlUtil;/*** Servlet implementation class UserServlet*/
@WebServlet("/User")
public class UserServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public UserServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/json;charset=utf-8");String action = request.getParameter("action");String page = request.getParameter("page");String pageSize = request.getParameter("pageSize");String username = request.getParameter("username");String[] records = {"id","carname","type","body","inner","renovate","engine","component","clear","others","mantaincetime","car_id"};String[] vehicle = {"id","carname","model","mileage","displace","producetime","buytime","img","other"};String[] messages = {"id","title","message","answer","updatetime"};String[] reinform = {"id","type","body","inner","renovate","engine","component","clear","others","mantaincetime","advice"};String[] car = {"id","carname"};String res = "{\"msg\":\"查找失败\",\"code\":0}";switch(action) {//加载保养信息case "getRecords":String carname = request.getParameter("carname");String sql="select vehicle.carname,records.* from records,user,vehicle where records.car_id=vehicle.id and vehicle.user_id=user.id and vehicle.available=1 and records.available=1 and username='"+username+"' and carname like '%"+carname+"%' order by updatetime desc limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;res = MysqlUtil.getJsonBySql(sql, records);break;//加载保养信息分页case "getRpage":carname = request.getParameter("carname");sql="select count(*) from records,user,vehicle where records.car_id=vehicle.id and vehicle.user_id=user.id and vehicle.available=1 and records.available=1 and username='"+username+"' and carname like '%"+carname+"%'";int count = MysqlUtil.getCount(sql);res = "{\"msg\":\""+count+"\",\"code\":0}";break;//加载车辆信息case "getVehicle":carname = request.getParameter("carname");sql="select vehicle.* from vehicle,user where vehicle.available=1 and user.id=vehicle.user_id and username='"+username+"' and carname like '%"+carname+"%' limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;res = MysqlUtil.getJsonBySql(sql, vehicle);break;//加载公告信息分页case "getVpage":carname = request.getParameter("carname");sql="select count(*) from vehicle,user where vehicle.available=1 and user.id=vehicle.user_id and username='lala' and carname like '%%' ";count = MysqlUtil.getCount(sql);res = "{\"msg\":\""+count+"\",\"code\":0}";break;//加载用户留言case "getMessage":String title = request.getParameter("title");String message = request.getParameter("message");sql="select user.username,contact.* from user,contact where user.id=contact.user_id and title like '%"+title+"%' and message like '%"+message+"%' and username='"+username+"' order by updatetime desc limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;res = MysqlUtil.getJsonBySql(sql, messages);break;//加载用户留言分页case "getMecount":title = request.getParameter("title");message = request.getParameter("message");sql="select count(*) from user,contact where user.id=contact.user_id and title like '%"+title+"%' and message like '%"+message+"%' and username='"+username+"'";count = MysqlUtil.getCount(sql);res = "{\"msg\":\""+count+"\",\"code\":0}";break;//根据车辆信息查看保养信息case "getReinform":String id = request.getParameter("id");sql="select * from records where car_id='"+id+"'";res = MysqlUtil.getJsonBySql(sql, reinform);break;//根据保养信息查看保养建议case "getReadvice":id = request.getParameter("id");sql="select * from records where id='"+id+"'";res = MysqlUtil.getJsonBySql(sql, reinform);break;//根据保养信息查看车辆信息case "getVeinform":id = request.getParameter("id");sql="select vehicle.* from records,vehicle where records.id='"+id+"' and records.car_id=vehicle.id";res = MysqlUtil.getJsonBySql(sql, vehicle);break;	//根据保养信息查看车辆信息case "getVeById":id = request.getParameter("id");sql = "select * from vehicle where id="+id;res = MysqlUtil.getJsonBySql(sql, vehicle);break;//根据保养信息查看车辆信息case "getReById":id = request.getParameter("id");sql = "select vehicle.carname,records.* from records,vehicle where vehicle.id=records.car_id and records.id="+id;res = MysqlUtil.getJsonBySql(sql, records);break;case "getCarId":sql = "select distinct vehicle.id,vehicle.carname from user,vehicle,records where user.id=vehicle.user_id and records.car_id=vehicle.id and username='"+username+"'";res = MysqlUtil.getJsonBySql(sql, car);break;default:break;}response.getWriter().write(res);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/json;charset=utf-8");String action = request.getParameter("action");String res = "{\"msg\":\"删除失败\",\"code\":0}";String id = request.getParameter("id");String[] user = {"id","username"};switch(action) {//车辆保养单个删除case "del_id":String sql="update records set available=0 where id="+id;int num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"删除成功\",\"code\":1}";}break;//车辆保养批量删除case "delAll":String ids = request.getParameter("ids");sql="update records set available=0 where id in("+ids+")";num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"批量删除成功\",\"code\":1}";}break;//车辆信息单个删除case "delete_id":sql="update vehicle set available=0 where id="+id;num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"删除成功\",\"code\":1}";}break;//车辆信息批量删除case "deleteAll":ids = request.getParameter("ids");sql="update vehicle set available=0 where id in("+ids+")";num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"批量删除成功\",\"code\":1}";}break;//添加车辆保养信息case "addRe":String car_id = request.getParameter("car_id");String type = request.getParameter("type");String body = request.getParameter("body");String inner = request.getParameter("inner");String renovate = request.getParameter("renovate");String engine = request.getParameter("engine");String component = request.getParameter("component");String clear = request.getParameter("clear");String others = request.getParameter("others");String mantaincetime = request.getParameter("mantaincetime");sql = "insert into records(car_id, type, body, `inner`, renovate, `engine`, component, clear, others, mantaincetime, available) values ('" + car_id + "', '" + type + "', '" + body + "', '" + inner + "', '" + renovate + "', '" + engine + "', '" + component + "', '" + clear + "', '" + others + "', '" + mantaincetime + "', '1')";res = "{\"msg\":\"添加车辆保养信息失败\",\"code\":0}";num = MysqlUtil.add(sql);if(num>0) {res = "{\"msg\":\"添加车辆保养信息成功\",\"code\":1}";}break;//修改车辆保养信息case "updateRe":id = request.getParameter("id");car_id = request.getParameter("car_id");type = request.getParameter("type");body = request.getParameter("body");inner = request.getParameter("inner");renovate = request.getParameter("renovate");engine = request.getParameter("engine");component = request.getParameter("component");clear = request.getParameter("clear");others = request.getParameter("others");mantaincetime = request.getParameter("mantaincetime");sql = "update records set car_id='"+car_id+"', type='"+type+"', body='"+body+"', `inner`='"+inner+"', renovate='"+renovate+"', `engine`='"+engine+"', component='"+component+"', clear='"+clear+"', others='"+others+"', mantaincetime='"+mantaincetime+"' where id="+id;res = "{\"msg\":\"修改车辆保养信息失败\",\"code\":0}";num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"修改车辆保养信息成功\",\"code\":1}";}break;//添加车辆信息case "addVe":String carname = request.getParameter("carname");String model = request.getParameter("model");String mileage = request.getParameter("mileage");String displace = request.getParameter("displace");String producetime = request.getParameter("producetime");String buytime = request.getParameter("buytime");String img = request.getParameter("img");String other = request.getParameter("other");String account = request.getParameter("account");String find_user = "select * from user where username='"+account+"'";String res_user = MysqlUtil.getJsonBySql(find_user, user);JSONObject jsonObject = new JSONObject(res_user);  JSONArray data = jsonObject.getJSONArray("data");  JSONObject dataObj = data.getJSONObject(0); // 获取第一个数据对象，索引从0开始  String user_id = dataObj.getString("id"); // 获取username的值  sql="insert into vehicle(user_id,carname,model,mileage,displace,producetime,buytime,img,other,available) values('"+user_id+"','"+carname+"','"+model+"','"+mileage+"','"+displace+"','"+producetime+"','"+buytime+"','"+img+"','"+other+"','1')";res = "{\"msg\":\"添加车辆信息失败\",\"code\":0}";num = MysqlUtil.add(sql);if(num>0) {res = "{\"msg\":\"添加车辆信息成功\",\"code\":1}";}break;//修改车辆信息case "updateVe":id = request.getParameter("id");carname = request.getParameter("carname");model = request.getParameter("model");mileage = request.getParameter("mileage");displace = request.getParameter("displace");producetime = request.getParameter("producetime");buytime = request.getParameter("buytime");img = request.getParameter("img");other = request.getParameter("other");sql="update vehicle set carname='"+carname+"',model='"+model+"',mileage='"+mileage+"',displace='"+displace+"',producetime='"+producetime+"',buytime='"+buytime+"',img='"+img+"',other='"+other+"' where id = "+id;res = "{\"msg\":\"修改车辆信息失败\",\"code\":0}";num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"修改车辆信息成功\",\"code\":1}";}break;//留言case "leave":String title = request.getParameter("title");String message = request.getParameter("message");message = message.replaceAll("\"", "\'");account = request.getParameter("account");find_user = "select * from user where username='"+account+"'";res_user = MysqlUtil.getJsonBySql(find_user, user);jsonObject = new JSONObject(res_user);  data = jsonObject.getJSONArray("data");  dataObj = data.getJSONObject(0); // 获取第一个数据对象，索引从0开始  user_id = dataObj.getString("id"); // 获取username的值  sql="insert into contact(user_id,title,message) values('"+user_id+"','"+title+"','"+account+"')";res = "{\"msg\":\"留言失败\",\"code\":0}";num = MysqlUtil.add(sql);if(num>0) {res = "{\"msg\":\"留言成功\",\"code\":1}";}break;default:break;}response.getWriter().write(res);}}

③管理员车辆保养管理信息页面maintenance_advice.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="resource/css/manage.css"><script src="resource/js/jquery.js"></script><script src="resource/js/jquery.cookie.js"></script><script src="resource/layer/layer.js"></script><script src="resource/js/advice.js" defer></script>
</head>
<body><div class="container"><div class="search_box"><div class="search"><input type="text" placeholder="请输入车主" class="username"><input type="text" placeholder="请车辆名称" class="carname"><input type="button" value="查找" class="search_btn"></div></div></div><table border="1" ><thead><tr><th>序号</th><th>车主</th><th>车辆名称</th><th>保养类型</th><th>上次保养时间</th><th>更新时间</th><th>操作</th></tr></thead><tbody></tbody></table><ul class="page"></ul>
</body>
</html>

manage.css

*{padding: 0;margin: 0;
}.container{width: 98%;margin: 20px auto;
}.container .search_box{display: flex;justify-content: space-between;margin-bottom: 20px;
}.container .search_box .search{display: flex;align-items: center;
}.container .search_box .search select,
.container .search_box .search input{padding: 3px 3px;margin-right: 10px;font-size: 13px;
}.container .search_box .search select,
.container .search_box .search input[type=text]{border: 1.5px solid rgb(126, 173, 240);outline: none;padding: 8px 10px;
}.container .search_box .search select:focus,
.container .search_box .search input[type=text]:focus{border: 3px solid rgb(64, 182, 237); 
}.container .search_box .search input[type=button]{background: linear-gradient(30deg, rgb(160, 209, 221), rgb(171, 171, 237));color: white;border: none;font-size: 15px;padding: 6px 8px;cursor: pointer;
}.container .search_box .search input:hover{box-shadow: 1px 1px 2px plum;
}.container .search_box .btns input{background: rgb(119, 184, 237);font-size: 15px;color: rgb(250, 247, 247);padding: 5px 5px;border: none;margin-right: 15px;margin-top: 5px;cursor: pointer;
}.container .search_box .btns input:hover{background: rgb(237, 160, 160);
}table{width: 98%;margin: 20px auto;border: 1px solid wheat;
}table thead tr{background: rgb(151, 190, 234);color: white;font-size: 15px;
}table th tr th{padding: 3px 0;
}table tr td,
table tr th{border: 1px solid white;text-align: center;
}table tr td{color: gray;
}table tbody tr:nth-child(odd){background: rgb(227, 246, 249);
}
table tbody tr:nth-child(even){background: rgb(203, 234, 234);
}table tbody input[type=button]{background: none;border: none;font-size: 14px;margin-left: 5px;padding: 2px 3px;color: rgb(14, 32, 231);
}table tbody input[type=button]:hover{cursor: pointer;color: red;
}.page{display: flex;justify-content: center;
}.page li{list-style: none;margin: 5px;border: 1px solid rgb(37, 156, 248);padding: 3px 6px;font-size: 13px;color: rgb(70, 72, 72);cursor: pointer;
}.page .current{background: rgb(217, 183, 236);
}

advice.js

//剪裁方法
function cut_str(str,len){if(str.length>len){str=str.substring(0,len)+"..."}return str
}//页面大小
var pageSize=4function loadData(page){var username = $(".username").val().trim()var carname = $(".carname").val().trim()$.ajax({url:"Admin?action=getAdvice&username="+username+"&carname="+carname+"&page="+page+"&pageSize="+pageSize,type:"get",success:function(value){var arr = value.data$("tbody").empty()for(var i=0; i<arr.length;i++){$("tbody").append("<tr>"+"<td>"+arr[i].id+"</td>"+"<td>"+arr[i].username+"</td>"+"<td>"+arr[i].carname+"</td>"+"<td>"+arr[i].type+"</td>"+"<td>"+arr[i].mantaincetime.substring(0,10)+"</td>"+"<td>"+arr[i].updatetime.substring(0,10)+"</td>"+"<td><input type='button' value='建议' class='advice' index='"+arr[i].id+"'></td>"+"</tr>")}},error:function(){layer.alert("查找失败")}
})
}//加载分页
function loadPage(){var username = $(".username").val().trim()var carname = $(".carname").val().trim()$.ajax({url:"Admin?action=getCount&username="+username+"&carname="+carname,type:"get",success:function(value){var count = value.msg$(".page").empty()$(".page").append("<li class='first'>首页</li>")$(".page").append("<li class='prev'>上一页</li>")for(var i=0;i<Math.ceil(count/pageSize);i++){if(i==0){$(".page").append("<li class='current item'>"+(i+1)+"</li>")}else{$(".page").append("<li class='item'>"+(i+1)+"</li>")}}$(".page").append("<li class='next'>下一页</li>")$(".page").append("<li class='last'>尾页</li>")},error:function(){layer.alert("查找失败")}
})
}//加载数据
loadData(1)
loadPage()//搜索框搜索
$(".search_btn").on("click",function(){loadData(1)	loadPage()
})//指定页码加载
$(".page").on("click",".item",function(){//数据切换loadData($(this).text())//样式切换$(this).addClass("current").siblings().removeClass("current")$(".checkAll").prop("checked",false)
})//首页切换
$(".page").on("click",".first",function(){//数据切换loadData(1)//样式切换$(".item").removeClass("current").first().addClass("current")
})//尾页切换
$(".page").on("click",".last",function(){//数据切换loadData($(".item").length)//样式切换$(".item").removeClass("current").last().addClass("current")$(".checkAll").prop("checked",false)
})//上一页切换
$(".page").on("click",".prev",function(){if($("li.current").text()==1){layer.alert("当前已经是第一页啦")return}//数据切换loadData($("li.current").text()-1)//样式切换$("li.current").removeClass("current").prev().addClass("current")$(".checkAll").prop("checked",false)
})//下一页切换
$(".page").on("click",".next",function(){if($("li.current").text()==$(".item").length){layer.alert("当前已经是最后页啦")return}//数据切换loadData(parseInt($("li.current").text())+1)//样式切换$("li.current").removeClass("current").next().addClass("current")$(".checkAll").prop("checked",false)
})//建议
$("tbody").on("click",".advice",function(){var index = $(this).attr("index")$.ajax({url:"Admin?action=getAdviceId&id="+index,type:"get",success:function(value){var arr = value.datavar content = "<div style='display: flex;margin: 5%;justify-content: space-between;'>"+"<div style='width: 45%;'>"+"<h3 style='text-align: center;'>车辆信息</h3>"+"<p>车主："+arr[0].username+"</p>"+"<p>汽车名称："+arr[0].carname+"</p>"+"<p>车辆型号："+arr[0].model+"</p>"+"<p>里程数："+arr[0].mileage+"</p>"+"<p>发动机排量："+arr[0].displace+"</p>"+"<p>生产年份："+arr[0].producetime.substring(0,10)+"</p>"+"<p>购买日期："+arr[0].buytime.substring(0,10)+"</p>"+"<p>车辆图：<img src='upload/"+arr[0].img+"' style='width: 60%;height: auto;object-fit: cover;'></p>"+"<p>备注："+arr[0].other+"</p>"+"</div>"+"<div style='width: 45%;'>"+"<h3 style='text-align: center;'>保养信息</h3>"+"<p>保养类型："+arr[0].type+"</p>"+"<p>车体保养："+arr[0].body+"</p>"+"<p>车内保养："+arr[0].inner+"</p>"+"<p>车体翻新："+arr[0].renovate+"</p>"+"<p>发动机保养："+arr[0].engine+"</p>"+"<p>零部件更换："+arr[0].component+"</p>"+"<p>清洗和维护："+arr[0].clear+"</p>"+"<p>其它："+arr[0].others+"</p>"+"<p>上次保养时间："+arr[0].mantaincetime.substring(0,10)+"</p>"+"</div>"+"</div>"+"<div style='margin: 0% 10% 5% 10%;width: 80%;'>"+"<h4>建议</h4>"+"<div style='width: 90%;'>"+"<textarea name='' id='' cols='70' rows='10' class='content'>"+arr[0].advice+"</textarea>"+"</div>"+    "</div>"+"<div style='margin:0% 35% 5%;'>"+"<input type='button' value='建议' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;'><input type='button' value='取消' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);'>"+"</div>"layer.open({  type: 1, // page 层类型area: ['700px', '500px'],title: arr[0].column,title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content,success: function(layero) {var textarea = layero.find('textarea');  var adviceBtn = layero.find('input[value="建议"]');  var cancelBtn = layero.find('input[value="取消"]'); adviceBtn.on('click', function() {  var suggestion = textarea.val(); // 获取建议内容  $.ajax({url:"Admin",type:"post",data:{id:index,suggestion,action:"advice"},success:function(value){layer.msg(value.msg,function(){layer.closeAll(); // 关闭当前弹窗			})				},error:function(){alert("建议信息提交失败啦")}})   });  // 处理取消操作  cancelBtn.on('click', function() {  layer.closeAll(); // 关闭当前弹窗  });   }  });  	},error:function(){layer.alert("查找失败")},})
})

④管理员公告管理页面announcement.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="resource/css/manage.css"><script src="resource/js/jquery.js"></script><script src="resource/js/jquery.cookie.js"></script><script src="resource/layer/layer.js"></script><script src="resource/js/announce.js" defer></script>
</head>
<body><div class="container"><div class="search_box"><div class="search"><select class='colum'></select><input type="text" placeholder="请输入标题" class="title"><input type="text" placeholder="请输入内容关键字" class="content"><input type="button" value="查找" class="search_btn"></div><div class="btns"><input type="button" value="批量删除" class="deleteAll"><input type="button" value="添加" class="add"></div></div></div><table border="1" ><thead><tr><th style="width: 4%;"><input type="checkbox" name="" id="" class="checkAll"></th><th style="width: 6%;">序号</th><th>公告栏目</th><th>标题</th><th>内容</th><th style="width: 12%;">创建时间</th><th style="width: 15%;">操作</th></tr></thead><tbody></tbody></table><ul class="page"></ul>
</body>
</html>

announce.js

//剪裁方法
function cut_str(str,len){if(str.length>len){str=str.substring(0,len)+"..."}return str
}//页面大小
var pageSize=4// 获取查询字符串  
var param = window.location.search;  //?a=1 
// 提取参数a的值  
//var a = param.split('=')[1];   function loadData(page){var title = $(".title").val().trim()var content = $(".content").val().trim()var colum_id = $(".colum").val()$.ajax({url:"Admin?action=getColum&title="+title+"&content="+content+"&page="+page+"&pageSize="+pageSize+"&colum_id="+colum_id,type:"get",success:function(value){var arr = value.data$("tbody").empty()for(var i=0; i<arr.length;i++){$("tbody").append("<tr>"+"<td><input type='checkbox' index='"+arr[i].id+"' class='option'></td>"+"<td>"+arr[i].id+"</td>"+"<td>"+arr[i].column+"</td>"+"<td>"+arr[i].title+"</td>"+"<td>"+cut_str(arr[i].content,18)+"</td>"+"<td>"+arr[i].createtime.substring(0,10)+"</td>"+"<td><input type='button' value='修改'' class='update' index='"+arr[i].id+"'><input type='button' value='删除' class='delete' index='"+arr[i].id+"'><input type='button' value='发布' class='publish' index='"+arr[i].id+"'></td>"+"</tr>")}},error:function(){alert("查找失败")}
})
}//加载分页
function loadPage(){var title = $(".title").val().trim()var content = $(".content").val().trim()var colum_id = $(".colum").val()$.ajax({url:"Admin?action=getPage&title="+title+"&content="+content+"&colum_id="+colum_id,type:"get",success:function(value){var count = value.msg$(".page").empty()$(".page").append("<li class='first'>首页</li>")$(".page").append("<li class='prev'>上一页</li>")for(var i=0;i<Math.ceil(count/pageSize);i++){if(i==0){$(".page").append("<li class='current item'>"+(i+1)+"</li>")}else{$(".page").append("<li class='item'>"+(i+1)+"</li>")}}$(".page").append("<li class='next'>下一页</li>")$(".page").append("<li class='last'>尾页</li>")},error:function(){alert("查找失败")}
})
}//加载栏目
function loadMenu(){$.ajax({url:"Admin?action=getMenu",type:"get",async:false,     //默认为异步请求，设置为同步success:function(value){var arr = value.data$(".colum").append("<option value='0'>全部</option>")for(var i=0; i<arr.length;i++){$(".colum").append("<option value='"+arr[i].id+"'>"+arr[i].column+"</option>")}},error:function(){alert("栏目加载失败")}})
}
loadMenu()
//加载数据
loadData(1)
loadPage()//搜索框搜索
$(".search_btn").on("click",function(){loadData(1)	loadPage()
})//指定页码加载
$(".page").on("click",".item",function(){//数据切换loadData($(this).text())//样式切换$(this).addClass("current").siblings().removeClass("current")$(".checkAll").prop("checked",false)
})//首页切换
$(".page").on("click",".first",function(){//数据切换loadData(1)//样式切换$(".item").removeClass("current").first().addClass("current")
})//尾页切换
$(".page").on("click",".last",function(){//数据切换loadData($(".item").length)//样式切换$(".item").removeClass("current").last().addClass("current")$(".checkAll").prop("checked",false)
})//上一页切换
$(".page").on("click",".prev",function(){if($("li.current").text()==1){layer.alert("当前已经是第一页啦")return}//数据切换loadData($("li.current").text()-1)//样式切换$("li.current").removeClass("current").prev().addClass("current")$(".checkAll").prop("checked",false)
})//下一页切换
$(".page").on("click",".next",function(){if($("li.current").text()==$(".item").length){layer.alert("当前已经是最后页啦")return}//数据切换loadData(parseInt($("li.current").text())+1)//样式切换$("li.current").removeClass("current").next().addClass("current")$(".checkAll").prop("checked",false)
})//单个删除
$("tbody").on("click",".delete",function(){var id = $(this).attr("index")layer.confirm('确定要删除吗?', function(){$.ajax({url:"Admin",type:"post",data:{id,action:"delete_id"},success:function(value){				layer.msg(value.msg,{icon: 2,time: 2000 // 设置 2 秒后自动关闭},function(){location.reload()	``})		},error:function(){layer.msg("删除信息失败啦")}})}, function(){layer.msg("感谢手下留情")})
})//批量删除
$(".deleteAll").on("click",function(){var ids=""for(var i=0;i<$(".option:checked").length;i++){//$(".option:checked")[i].getAttribute("index")   //js方法ids +=$(".option:checked").eq(i).attr("index")+","}ids=ids.slice(0,-1)    //slice(start,end)  不包含end,支持负数截取if(ids.length==0){layer.msg("请至少选择一项")return}layer.confirm('确定要删除吗?', function(){$.ajax({url:"Admin",type:"post",data:{ids,action:"deleteAll"},success:function(value){				layer.msg(value.msg,function(){location.reload()	})},error:function(){layer.msg("批量删除信息失败啦")}})}, function(){layer.msg("感谢手下留情",function(){location.reload()	})})
})//全选
$(".checkAll").on("change",function(){if($(".checkAll").prop("checked")){$(".option").prop("checked",true)}else{$(".option").prop("checked",false)}})$("tbody").on("click",".option",function(){var flag = truefor(var i=0;i<$(".option").length;i++){flag &= $(".option").eq(i).prop("checked")}if(flag){$(".checkAll").prop("checked",true)}else{$(".checkAll").prop("checked",false)}
})//添加
$(".add").on("click",function(){var content = "<div style='margin: 5%;'>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>公告栏目： </span>"+"<select class='colum' style='padding: 5px;'></select>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>标题： </span>"+"<input type='text' class='title' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>内容： </span>"+"<textarea name='' id='' cols='40' rows='10' class='content'></textarea>"+"</div>"+"<div style='margin: 1%;'>"+"<input type='button' value='添加' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;''><input type='button' value='取消' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);'>"+"</div>""</div>"layer.open({  type: 1, // page 层类型area: ['700px', '500px'],title: '公告添加',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, success: function(layero) {$.ajax({url:"Admin?action=getMenu",type:"get",async:false,     //默认为异步请求，设置为同步success:function(value){var arr = value.datafor(var i=0; i<arr.length;i++){$(".colum").append("<option value='"+arr[i].id+"'>"+arr[i].column+"</option>")}},error:function(){alert("添加栏目内容失败啦")}})var addBtn = layero.find('input[value="添加"]');  var cancelBtn = layero.find('input[value="取消"]'); addBtn.on('click', function() {   var colum_id = layero.find('.colum').val()var title = layero.find('.title').val() var content = layero.find('.content').val() $.ajax({url:"Admin",type:"post",data:{colum_id,title,content,	action:"add"},success:function(value){layer.msg(value.msg,function(){layer.closeAll(); // 关闭当前弹窗			})	location.reload()				},error:function(){alert("添加公告信息失败啦")}})   })  // 处理取消操作  cancelBtn.on('click', function() {  layer.closeAll(); // 关闭当前弹窗  });   }  });  
})//修改
$("tbody").on("click",".update",function(){var id = $(this).attr("index")if(id){$.ajax({url:"Admin?action=getColumId&id="+id,type:"get",success:function(value){var obj = value.data[0]var content = "<div style='margin: 5%;'>"+"<div style='margin: 2%;'>"+"<span style='font-size:20px'>公告"+obj.id+"</span>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>公告栏目： </span>"+"<select class='colum' style='padding: 5px;'></select>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>标题： </span>"+"<input type='text' class='title' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>内容： </span>"+"<textarea name='' id='' cols='40' rows='10' class='content'>"+obj.content+"</textarea>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:15px;color: rgb(171, 39, 9);'>创建时间:"+obj.createtime+"</span>"+"</div>"+"<div style='margin: 1%;'>"+"<input type='button' value='修改' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;''><input type='button' value='取消' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);'>"+"</div>""</div>"layer.open({  type: 1, // page 层类型area: ['700px', '500px'],title: '公告修改',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, success: function(layero) {$.ajax({url:"Admin?action=getMenu",type:"get",async:false,     //默认为异步请求，设置为同步success:function(value){var arr = value.datafor(var i=0; i<arr.length;i++){$(".colum").append("<option value='"+arr[i].id+"'>"+arr[i].column+"</option>")}},error:function(){alert("栏目加载失败啦")}})layero.find('.colum').val(obj.colum_id)layero.find('.title').val(obj.title)layero.find('.createtime').val(obj.createtime)var updateBtn = layero.find('input[value="修改"]');  var cancelBtn = layero.find('input[value="取消"]'); updateBtn.on('click', function() {  var id = obj.id  var colum_id = layero.find('.colum').val()var title = layero.find('.title').val() var content = layero.find('.content').val() $.ajax({url:"Admin",type:"post",data:{id,colum_id,title,content,	action:"update"},success:function(value){layer.msg(value.msg,function(){layer.closeAll(); // 关闭当前弹窗			})				},error:function(){alert("修改公告信息失败啦")}})   })  // 处理取消操作  cancelBtn.on('click', function() {  layer.closeAll(); // 关闭当前弹窗  });   }  });  },error:function(){layer.msg("单个加载公告信息失败啦")}})}
})//单个发布
$("tbody").on("click",".publish",function(){var id = $(this).attr("index")if(id){$.ajax({url:"Admin?action=getColumId&id="+id,type:"get",success:function(value){var obj = value.data[0]var str = '未发布'if(obj.available==='1'){str = '已发布'}var content = "<div style='margin: 5%;'>"+"<div style='margin: 2%;'>"+"<span style='font-size:20px'>公告"+obj.id+"</span>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>公告栏目： "+obj.column+"</span>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>标题： "+obj.title+"</span>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>内容： "+obj.content+"</span>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>发布情况： "+str+"</span>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:15px;color: rgb(171, 39, 9);'>创建时间:"+obj.createtime+"</span>"+"</div>"+"<div style='margin: 1%;'>"+"<input type='button' value='发布' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(225, 138, 201);'><input type='button' value='停止发布' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;'><input type='button' value='取消' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);'>"+"</div>""</div>"layer.open({  type: 1, // page 层类型area: ['700px', '500px'],title: '公告发布',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, success: function(layero) {var publishBtn = layero.find('input[value="发布"]');  var noBtn = layero.find('input[value="停止发布"]');  var cancelBtn = layero.find('input[value="取消"]'); if(obj.available==='2'){publishBtn.on('click', function() {  var id = obj.id  $.ajax({url:"Admin",type:"post",data:{id,	action:"publish"},success:function(value){layer.msg(value.msg,function(){layer.closeAll(); // 关闭当前弹窗			})				},error:function(){alert("公告信息发布失败啦")}})   })  }else{noBtn.on('click', function() {  var id = obj.id  $.ajax({url:"Admin",type:"post",data:{id,	action:"no_publish"},success:function(value){layer.msg(value.msg,function(){layer.closeAll(); // 关闭当前弹窗			})				},error:function(){alert("公告信息发布失败啦")}})   })  }// 处理取消操作  cancelBtn.on('click', function() {  layer.closeAll(); // 关闭当前弹窗  });   }  });  },error:function(){layer.msg("单个加载公告信息失败啦")}})}
})

⑤管理员用户留言管理页面user_message.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="resource/css/manage.css"><script src="resource/js/jquery.js"></script><script src="resource/js/jquery.cookie.js"></script><script src="resource/layer/layer.js"></script><script src="resource/js/message.js" defer></script>
</head>
<body><div class="container"><div class="search_box"><div class="search"><input type="text" placeholder="请输入留言关键字" class="message"><input type="text" placeholder="请输入用户名" class="username"><input type="button" value="查找" class="search_btn"></div></div></div><table border="1" ><thead><tr><th style="width: 5%;">序号</th><th style="width: 10%;">用户</th><th>标题</th><th>留言</th><th style="width: 10%;">留言时间</th><th>回复</th><th style="width: 10%;">操作</th></tr></thead><tbody></tbody></table><ul class="page"></ul>
</body>
</html>

message.js

//剪裁方法
function cut_str(str,len){if(str.length>len){str=str.substring(0,len)+"..."}return str
}//页面大小
var pageSize=4function loadData(page){var message = $(".message").val().trim()var username = $(".username").val().trim()$.ajax({url:"Admin?action=getMessage&username="+username+"&message="+message+"&page="+page+"&pageSize="+pageSize,type:"get",success:function(value){var arr = value.data$("tbody").empty()for(var i=0; i<arr.length;i++){$("tbody").append("<tr>"+"<td>"+arr[i].id+"</td>"+"<td>"+arr[i].username+"</td>"+"<td>"+arr[i].title+"</td>"+"<td>"+cut_str(arr[i].message,16)+"</td>"+"<td>"+arr[i].updatetime.substring(0,10)+"</td>"+"<td>"+cut_str(arr[i].answer,16)+"</td>"+"<td><input type='button' value='查看详情' class='detail' index='"+arr[i].id+"'></td>"+"</tr>")}},error:function(){alert("查找失败")}
})
}//加载分页
function loadPage(){var message = $(".message").val().trim()var username = $(".username").val().trim()$.ajax({url:"Admin?action=getMecount&username="+username+"&message="+message,type:"get",success:function(value){var count = value.msg$(".page").empty()$(".page").append("<li class='first'>首页</li>")$(".page").append("<li class='prev'>上一页</li>")for(var i=0;i<Math.ceil(count/pageSize);i++){if(i==0){$(".page").append("<li class='current item'>"+(i+1)+"</li>")}else{$(".page").append("<li class='item'>"+(i+1)+"</li>")}}$(".page").append("<li class='next'>下一页</li>")$(".page").append("<li class='last'>尾页</li>")},error:function(){alert("查找失败")}
})
}//加载数据
loadData(1)
loadPage()//搜索框搜索
$(".search_btn").on("click",function(){loadData(1)	loadPage()
})//指定页码加载
$(".page").on("click",".item",function(){//数据切换loadData($(this).text())//样式切换$(this).addClass("current").siblings().removeClass("current")$(".checkAll").prop("checked",false)
})//首页切换
$(".page").on("click",".first",function(){//数据切换loadData(1)//样式切换$(".item").removeClass("current").first().addClass("current")
})//尾页切换
$(".page").on("click",".last",function(){//数据切换loadData($(".item").length)//样式切换$(".item").removeClass("current").last().addClass("current")$(".checkAll").prop("checked",false)
})//上一页切换
$(".page").on("click",".prev",function(){if($("li.current").text()==1){layer.alert("当前已经是第一页啦")return}//数据切换loadData($("li.current").text()-1)//样式切换$("li.current").removeClass("current").prev().addClass("current")$(".checkAll").prop("checked",false)
})//下一页切换
$(".page").on("click",".next",function(){if($("li.current").text()==$(".item").length){layer.alert("当前已经是最后页啦")return}//数据切换loadData(parseInt($("li.current").text())+1)//样式切换$("li.current").removeClass("current").next().addClass("current")$(".checkAll").prop("checked",false)
})//查看详情
$("tbody").on("click",".detail",function(){var index = $(this).attr("index")$.ajax({url:"Admin?action=getMedetail&id="+index,type:"get",success:function(value){var arr = value.datavar content = "<div style='margin: 5%;'>"+"<h3>标题："+arr[0].title+"</h3>"+"<p>用户："+arr[0].username+"</p>"+"<p style='font-size: 16px;'>留言："+arr[0].message+"</p>"+"<p style='font-size: 14px;color: burlywood;'>留言时间："+arr[0].updatetime+"</p>"+"回复：<textarea name='' id='' cols='40' rows='10' class='content'>"+arr[0].answer+"</textarea><br>"+"<input type='button' value='回复' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;''><input type='button' value='取消' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);'>"+"</div>"layer.open({  type: 1, // page 层类型area: ['500px', '400px'],title: '留言信息',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content,success: function(layero) {var textarea = layero.find('textarea');  var answerBtn = layero.find('input[value="回复"]');  var cancelBtn = layero.find('input[value="取消"]'); answerBtn.on('click', function() {  var answer = textarea.val(); // 获取建议内容  $.ajax({url:"Admin",type:"post",data:{id:index,answer,action:"answer"},success:function(value){layer.msg(value.msg,function(){layer.closeAll(); // 关闭当前弹窗			})location.reload()				},error:function(){alert("回复信息提交失败啦")}})   });  // 处理取消操作  cancelBtn.on('click', function() {  layer.closeAll(); // 关闭当前弹窗  });   }  });     },error:function(){layer.alert("加载详细信息失败啦")}})
})

⑥用户车辆保养记录管理页面maintenance_records.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="resource/css/manage.css"><script src="resource/js/jquery.js"></script><script src="resource/js/jquery.cookie.js"></script><script src="resource/layer/layer.js"></script><script src="resource/js/records.js" defer></script>
</head>
<body><div class="container"><div class="search_box"><div class="search"><input type="text" placeholder="请输入汽车名称" class="carname"><input type="button" value="查找" class="search_btn"></div><div class="btns"><input type="button" value="批量删除" class="deleteAll"><input type="button" value="添加" class="add"></div></div></div><table border="1" ><thead><tr><th><input type="checkbox" name="" id="" class="checkAll"></th><th>序号</th><th>车辆名称</th><th>保养类型</th><th>车体保养</th><th>车内保养</th><th>车体翻新</th><th>发动机保养</th><th>零部件更换</th><th>清洗和维护</th><th>其它</th><th>上次保养时间</th><th style="width: 8%;">编辑操作</th><th style="width: 10%;">查看操作</th></tr></thead><tbody></tbody></table><ul class="page"></ul>
</body>
</html>

records.js

//剪裁方法
function cut_str(str,len){if(str.length>len){str=str.substring(0,len)+"..."}return str
}//页面大小
var pageSize=4var param = window.location.search;   
var account = param.split('?')[1];   function loadData(page){var carname = $(".carname").val().trim()$.ajax({url:"User?action=getRecords&carname="+carname+"&username="+account+"&page="+page+"&pageSize="+pageSize,type:"get",success:function(value){var arr = value.data$("tbody").empty()for(var i=0; i<arr.length;i++){$("tbody").append("<tr>"+"<td><input type='checkbox' index='"+arr[i].id+"' class='option'></td>"+"<td>"+arr[i].id+"</td>"+"<td>"+arr[i].carname+"</td>"+"<td>"+arr[i].type+"</td>"+"<td>"+arr[i].body+"</td>"+"<td>"+arr[i].inner+"</td>"+"<td>"+arr[i].renovate+"</td>"+"<td>"+arr[i].engine+"</td>"+"<td>"+arr[i].component+"</td>"+"<td>"+arr[i].clear+"</td>"+"<td>"+arr[i].others+"</td>"+"<td>"+arr[i].mantaincetime.substring(0,10)+"</td>"+"<td><input type='button' value='修改' class='update' index='"+arr[i].id+"'><input type='button' value='删除' class='delete' index='"+arr[i].id+"'></td>"+"<td><input type='button' value='查看保养建议' class='advice' kid='"+arr[i].id+"'><input type='button' value='查看车辆信息' class='vehicle' kid='"+arr[i].id+"'></td>"+"</tr>")}},error:function(){alert("查找失败")}
})
}//加载分页
function loadPage(){var carname = $(".carname").val().trim()$.ajax({url:"User?action=getRpage&carname="+carname+"&username="+account,type:"get",success:function(value){var count = value.msg$(".page").empty()$(".page").append("<li class='first'>首页</li>")$(".page").append("<li class='prev'>上一页</li>")for(var i=0;i<Math.ceil(count/pageSize);i++){if(i==0){$(".page").append("<li class='current item'>"+(i+1)+"</li>")}else{$(".page").append("<li class='item'>"+(i+1)+"</li>")}}$(".page").append("<li class='next'>下一页</li>")$(".page").append("<li class='last'>尾页</li>")},error:function(){alert("查找失败")}
})
}//加载数据
loadData(1)
loadPage()//搜索框搜索
$(".search_btn").on("click",function(){loadData(1)	loadPage()
})//指定页码加载
$(".page").on("click",".item",function(){//数据切换loadData($(this).text())//样式切换$(this).addClass("current").siblings().removeClass("current")$(".checkAll").prop("checked",false)
})//首页切换
$(".page").on("click",".first",function(){//数据切换loadData(1)//样式切换$(".item").removeClass("current").first().addClass("current")
})//尾页切换
$(".page").on("click",".last",function(){//数据切换loadData($(".item").length)//样式切换$(".item").removeClass("current").last().addClass("current")$(".checkAll").prop("checked",false)
})//上一页切换
$(".page").on("click",".prev",function(){if($("li.current").text()==1){layer.alert("当前已经是第一页啦")return}//数据切换loadData($("li.current").text()-1)//样式切换$("li.current").removeClass("current").prev().addClass("current")$(".checkAll").prop("checked",false)
})//下一页切换
$(".page").on("click",".next",function(){if($("li.current").text()==$(".item").length){layer.alert("当前已经是最后页啦")return}//数据切换loadData(parseInt($("li.current").text())+1)//样式切换$("li.current").removeClass("current").next().addClass("current")$(".checkAll").prop("checked",false)
})//单个删除
$("tbody").on("click",".delete",function(){var id = $(this).attr("index")console.log(id)layer.confirm('确定要删除吗?', function(){$.ajax({url:"User",type:"post",data:{id,action:"del_id"},success:function(value){				layer.msg(value.msg,{icon: 2,time: 2000 // 设置 2 秒后自动关闭},function(){location.reload()	``})		},error:function(){layer.msg("删除信息失败啦")}})}, function(){layer.msg("感谢手下留情")})
})//批量删除
$(".deleteAll").on("click",function(){var ids=""for(var i=0;i<$(".option:checked").length;i++){//$(".option:checked")[i].getAttribute("index")   //js方法ids +=$(".option:checked").eq(i).attr("index")+","}ids=ids.slice(0,-1)    //slice(start,end)  不包含end,支持负数截取if(ids.length==0){layer.msg("请至少选择一项")return}layer.confirm('确定要删除吗?', function(){$.ajax({url:"User",type:"post",data:{ids,action:"delAll"},success:function(value){				layer.msg(value.msg,function(){location.reload()	})},error:function(){layer.msg("批量删除信息失败啦")}})}, function(){layer.msg("感谢手下留情",function(){location.reload()	})})
})//全选
$(".checkAll").on("change",function(){if($(".checkAll").prop("checked")){$(".option").prop("checked",true)}else{$(".option").prop("checked",false)}})$("tbody").on("click",".option",function(){var flag = truefor(var i=0;i<$(".option").length;i++){flag &= $(".option").eq(i).prop("checked")}if(flag){$(".checkAll").prop("checked",true)}else{$(".checkAll").prop("checked",false)}
})//查看车辆信息
$("tbody").on("click",".vehicle",function(){var id = $(this).attr("kid")$.ajax({url:"User?action=getVeinform&id="+id,type:"get",success:function(value){var arr = value.datavar	content = "<div style='margin: 5%;'>"+"<h3>车辆信息</h3>"+"<p>汽车名称："+arr[0].carname+"</p>"+"<p>车辆型号："+arr[0].model+"</p>"+"<p>里程数："+arr[0].mileage+"</p>"+"<p>发动机排量："+arr[0].displace+"</p>"+"<p>生产年份："+arr[0].producetime.substring(0,10)+"</p>"+"<p>购买日期："+arr[0].buytime.substring(0,10)+"</p>"+"<p>车辆图：<img src='upload/"+arr[0].img+"' style='width:60%;height:auto;object-fit:cover'></p>"+"<p>备注："+arr[0].other+"</p></div>"layer.open({  type: 1, // page 层类型area: ['600px', '500px'],title: '车辆信息',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, });     },error:function(){layer.alert("加载车辆信息失败啦")}})
})//查看保养建议
$("tbody").on("click",".advice",function(){var id = $(this).attr("kid")$.ajax({url:"User?action=getReadvice&id="+id,type:"get",success:function(value){var arr = value.datavar content = "<div style='margin: 5%;'>"for(var i=0;i<arr.length;i++){if(arr[i].advice==""){content = content + "<h3>保养信息"+id+"</h3>"+"<p style='font-size: 18px;'>暂时没有建议</p>"+"<p style='font-size: 16px;color: rgb(171, 39, 9);'>上次保养时间："+arr[i].mantaincetime.substring(0,10)+"</p><hr>"}else{content = content + "<h3>保养信息"+(i+1)+"</h3>"+"<p style='font-size: 18px;'>建议："+arr[i].advice+"</p>"+"<p style='font-size: 16px;color: rgb(171, 39, 9);'>上次保养时间："+arr[i].mantaincetime.substring(0,10)+"</p><hr>"}}content = content + "</div>"layer.open({  type: 1, // page 层类型area: ['500px', '300px'],title: '保养建议',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, });     },error:function(){layer.alert("加载保养建议失败啦")}})
})//添加
$(".add").on("click",function(){var content = "<div style='margin: 5%;'>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>汽车名称： </span>"+"<select class='carname' style='padding:5px;'></select>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>保养类型： </span>"+"<input type='text' class='type' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>车体保养： </span>"+"<input type='text' class='body' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>车内保养： </span>"+"<input type='text' class='inner' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>车体翻新： </span>"+"<input type='text' class='renovate' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>发动机保养： </span>"+"<input type='text' class='engine' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>零部件更换： </span>"+"<input type='text' class='component' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>清洗和维护： </span>"+"<input type='text' class='clear' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>其它： </span>"+"<input type='text' class='others' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>上次保养时间： </span>"+"<input type='datetime-local' class='mantaincetime'>"+"</div>"+"<div style='margin: 1%;'>"+"<input type='button' value='添加' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;''><input type='button' value='取消' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);'>"+"</div>""</div>"layer.open({  type: 1, // page 层类型area: ['700px', '500px'],title: '保养信息添加',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, success: function(layero) {$.ajax({url:"User?action=getCarId&username="+account,type:"get",async:false,     //默认为异步请求，设置为同步success:function(value){var arr = value.datafor(var i=0; i<arr.length;i++){$(".carname").append("<option value='"+arr[i].id+"'>"+arr[i].carname+"</option>")}},error:function(){alert("保养信息加载失败啦")}})var addBtn = layero.find('input[value="添加"]');  var cancelBtn = layero.find('input[value="取消"]'); addBtn.on('click', function() {   var car_id = layero.find('.carname').val()var type = layero.find('.type').val() var body = layero.find('.body').val() var inner = layero.find('.inner').val() var renovate = layero.find('.renovate').val() var engine = layero.find('.engine').val() var component = layero.find('.component').val() var clear = layero.find('.clear').val() var others = layero.find('.others').val() var mantaincetime = layero.find('.mantaincetime').val() $.ajax({url:"User",type:"post",data:{car_id,type,body,inner,renovate,engine,component,clear,others,	mantaincetime,action:"addRe"},success:function(value){console.log(value.msg)layer.msg(value.msg,{icon: 1,time: 2000 // 设置 2 秒后自动关闭},function(){layer.closeAll(); // 关闭当前弹窗			})location.reload()				},error:function(){alert("添加车辆信息失败啦")}})   })  // 处理取消操作  cancelBtn.on('click', function() {  layer.closeAll(); // 关闭当前弹窗  });   } })  
})//修改
$("tbody").on("click",".update",function(){var id = $(this).attr("index")if(id){$.ajax({url:"User?action=getReById&id="+id,type:"get",success:function(value){var obj = value.data[0]var content = "<div style='margin: 5%;'>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>汽车名称： </span>"+"<select class='carname' style='padding:5px;'></select>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>保养类型： </span>"+"<input type='text' class='type' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>车体保养： </span>"+"<input type='text' class='body' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>车内保养： </span>"+"<input type='text' class='inner' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>车体翻新： </span>"+"<input type='text' class='renovate' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>发动机保养： </span>"+"<input type='text' class='engine' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>零部件更换： </span>"+"<input type='text' class='component' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>清洗和维护： </span>"+"<input type='text' class='clear' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>其它： </span>"+"<input type='text' class='others' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>上次保养时间： </span>"+"<input type='datetime-local' class='mantaincetime'>"+"</div>"+"<div style='margin: 1%;'>"+"<input type='button' value='修改' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;''><input type='button' value='取消' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);'>"+"</div>""</div>"layer.open({  type: 1, // page 层类型area: ['700px', '500px'],title: '车辆保养信息修改',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, success: function(layero) {$.ajax({url:"User?action=getCarId&username="+account,type:"get",async:false,     //默认为异步请求，设置为同步success:function(value){var arr = value.datafor(var i=0; i<arr.length;i++){$(".carname").append("<option value='"+arr[i].id+"'>"+arr[i].carname+"</option>")}},error:function(){alert("保养信息加载失败啦")}})layero.find('.carname').val(obj.car_id)layero.find('.type').val(obj.type)layero.find('.body').val(obj.body)layero.find('.inner').val(obj.inner)layero.find('.renovate').val(obj.renovate)layero.find('.engine').val(obj.engine)layero.find('.component').val(obj.component)layero.find('.clear').val(obj.clear)layero.find('.others').val(obj.others)layero.find('.mantaincetime').val(obj.mantaincetime)var updateBtn = layero.find('input[value="修改"]');  var cancelBtn = layero.find('input[value="取消"]'); updateBtn.on('click', function() {  var id = obj.id  var car_id = layero.find('.carname').val()var type = layero.find('.type').val() var body = layero.find('.body').val() var inner = layero.find('.inner').val() var renovate = layero.find('.renovate').val() var engine = layero.find('.engine').val() var component = layero.find('.component').val() var clear = layero.find('.clear').val() var others = layero.find('.others').val() var mantaincetime = layero.find('.mantaincetime').val() $.ajax({url:"User",type:"post",data:{id,car_id,type,body,inner,renovate,engine,component,clear,others,	mantaincetime,	action:"updateRe",},success:function(value){console.log(value.msg)layer.msg(value.msg,{icon: 1,time: 2000 // 设置 2 秒后自动关闭},function(){layer.closeAll(); // 关闭当前弹窗			})location.reload()				},error:function(){alert("修改公告信息失败啦")}})   })  // 处理取消操作  cancelBtn.on('click', function() {  layer.closeAll(); // 关闭当前弹窗  });   }  });  },error:function(){layer.msg("修改车辆保养信息失败啦")}})}
})

⑦用户车辆信息管理页面vehicle_information.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="resource/css/manage.css"><script src="resource/js/jquery.js"></script><script src="resource/js/jquery.cookie.js"></script><script src="resource/layer/layer.js"></script><script src="resource/js/vehicle.js" defer></script>
</head>
<body><div class="container"><div class="search_box"><div class="search"><input type="text" placeholder="请输入汽车名称" class="carname"><input type="button" value="查找" class="search_btn"></div><div class="btns"><input type="button" value="批量删除" class="deleteAll"><input type="button" value="添加" class="add"></div></div></div><table border="1" ><thead><tr><th><input type="checkbox" name="" id="" class="checkAll"></th><th>序号</th><th>汽车名称</th><th>车辆型号</th><th>里程数</th><th>发动机排量</th><th>生产年份</th><th>购买日期</th><th>车辆图片</th><th>备注</th><th style="width: 8%;">编辑操作</th><th style="width: 10%;">查看操作</th></tr></thead><tbody></tbody></table><ul class="page"></ul>
</body>
</html>

vehicle.js

//剪裁方法
function cut_str(str,len){if(str.length>len){str=str.substring(0,len)+"..."}return str
}//页面大小
var pageSize=4var param = window.location.search;   
var account = param.split('?')[1];   function loadData(page){var car = $(".carname").val().trim()$.ajax({url:"User?action=getVehicle&carname="+car+"&username="+account+"&page="+page+"&pageSize="+pageSize,type:"get",success:function(value){var arr = value.data$("tbody").empty()for(var i=0; i<arr.length;i++){$("tbody").append("<tr>"+"<td><input type='checkbox' index='"+arr[i].id+"' class='option'></td>"+"<td>"+arr[i].id+"</td>"+"<td>"+arr[i].carname+"</td>"+"<td>"+arr[i].model+"</td>"+"<td>"+arr[i].mileage+"</td>"+"<td>"+arr[i].displace+"</td>"+"<td>"+arr[i].producetime.substring(0,10)+"</td>"+"<td>"+arr[i].buytime.substring(0,10)+"</td>"+"<td><img src='upload/"+arr[i].img+"' style='width:70px;height:55px;object-fit:cover'></td>"+"<td>"+arr[i].other+"</td>"+"<td><input type='button' value='修改' class='update' index='"+arr[i].id+"'><input type='button' value='删除' class='delete' index='"+arr[i].id+"'></td>"+"<td><input type='button' value='查看保养信息' class='inform' kid='"+arr[i].id+"'><input type='button' value='查看保养建议' class='advice' kid='"+arr[i].id+"'></td>"+"</tr>")}},error:function(){alert("查找失败")}
})
}//加载分页
function loadPage(){var carname = $(".carname").val().trim()$.ajax({url:"User?action=getVpage&carname="+carname+"&username="+account,type:"get",success:function(value){var count = value.msg$(".page").empty()$(".page").append("<li class='first'>首页</li>")$(".page").append("<li class='prev'>上一页</li>")for(var i=0;i<Math.ceil(count/pageSize);i++){if(i==0){$(".page").append("<li class='current item'>"+(i+1)+"</li>")}else{$(".page").append("<li class='item'>"+(i+1)+"</li>")}}$(".page").append("<li class='next'>下一页</li>")$(".page").append("<li class='last'>尾页</li>")},error:function(){alert("查找失败")}
})
}//加载数据
loadData(1)
loadPage()//搜索框搜索
$(".search_btn").on("click",function(){loadData(1)	loadPage()
})//指定页码加载
$(".page").on("click",".item",function(){//数据切换loadData($(this).text())//样式切换$(this).addClass("current").siblings().removeClass("current")$(".checkAll").prop("checked",false)
})//首页切换
$(".page").on("click",".first",function(){//数据切换loadData(1)//样式切换$(".item").removeClass("current").first().addClass("current")
})//尾页切换
$(".page").on("click",".last",function(){//数据切换loadData($(".item").length)//样式切换$(".item").removeClass("current").last().addClass("current")$(".checkAll").prop("checked",false)
})//上一页切换
$(".page").on("click",".prev",function(){if($("li.current").text()==1){layer.alert("当前已经是第一页啦")return}//数据切换loadData($("li.current").text()-1)//样式切换$("li.current").removeClass("current").prev().addClass("current")$(".checkAll").prop("checked",false)
})//下一页切换
$(".page").on("click",".next",function(){if($("li.current").text()==$(".item").length){layer.alert("当前已经是最后页啦")return}//数据切换loadData(parseInt($("li.current").text())+1)//样式切换$("li.current").removeClass("current").next().addClass("current")$(".checkAll").prop("checked",false)
})//单个删除
$("tbody").on("click",".delete",function(){var id = $(this).attr("index")layer.confirm('确定要删除吗?', function(){$.ajax({url:"User",type:"post",data:{id,action:"delete_id"},success:function(value){				layer.msg(value.msg,{icon: 2,time: 2000 // 设置 2 秒后自动关闭},function(){location.reload()	``})		},error:function(){layer.msg("删除信息失败啦")}})}, function(){layer.msg("感谢手下留情")})
})//批量删除
$(".deleteAll").on("click",function(){var ids=""for(var i=0;i<$(".option:checked").length;i++){//$(".option:checked")[i].getAttribute("index")   //js方法ids +=$(".option:checked").eq(i).attr("index")+","}ids=ids.slice(0,-1)    //slice(start,end)  不包含end,支持负数截取if(ids.length==0){layer.msg("请至少选择一项")return}layer.confirm('确定要删除吗?', function(){$.ajax({url:"User",type:"post",data:{ids,action:"deleteAll"},success:function(value){				layer.msg(value.msg,function(){location.reload()	})},error:function(){layer.msg("批量删除信息失败啦")}})}, function(){layer.msg("感谢手下留情",function(){location.reload()	})})
})//全选
$(".checkAll").on("change",function(){if($(".checkAll").prop("checked")){$(".option").prop("checked",true)}else{$(".option").prop("checked",false)}})$("tbody").on("click",".option",function(){var flag = truefor(var i=0;i<$(".option").length;i++){flag &= $(".option").eq(i).prop("checked")}if(flag){$(".checkAll").prop("checked",true)}else{$(".checkAll").prop("checked",false)}
})//查看保养信息
$("tbody").on("click",".inform",function(){var id = $(this).attr("kid")$.ajax({url:"User?action=getReinform&id="+id,type:"get",success:function(value){var arr = value.datavar content = "<div style='margin: 5%;'>"for(var i=0;i<arr.length;i++){content = content + "<h3>保养信息"+(i+1)+"</h3>"+"<p>保养类型："+arr[i].type+"</p>"+"<p>车体保养："+arr[i].body+"</p>"+"<p>车内保养："+arr[i].inner+"</p>"+"<p>车体翻新："+arr[i].renovate+"</p>"+"<p>发动机保养："+arr[i].engine+"</p>"+"<p>零部件更换："+arr[i].component+"</p>"+"<p>清洗和维护："+arr[i].clear+"</p>"+"<p>其它："+arr[i].others+"</p>"+"<p style='font-size: 15px;color: rgb(171, 39, 9);'>上次保养时间："+arr[i].mantaincetime.substring(0,10)+"</p><hr>"}content = content + "</div>"layer.open({  type: 1, // page 层类型area: ['500px', '300px'],title: '保养信息',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, });     },error:function(){layer.alert("加载保养信息失败啦")}})
})//查看保养建议
$("tbody").on("click",".advice",function(){var id = $(this).attr("kid")$.ajax({url:"User?action=getReinform&id="+id,type:"get",success:function(value){var arr = value.datavar content = "<div style='margin: 5%;'>"for(var i=0;i<arr.length;i++){if(arr[i].advice==""){content = content + "<h3>保养信息"+(i+1)+"</h3>"+"<p style='font-size: 18px;'>暂时没有建议</p>"+"<p style='font-size: 16px;color: rgb(171, 39, 9);'>上次保养时间："+arr[i].mantaincetime.substring(0,10)+"</p><hr>"}else{content = content + "<h3>保养信息"+(i+1)+"</h3>"+"<p style='font-size: 18px;'>建议："+arr[i].advice+"</p>"+"<p style='font-size: 16px;color: rgb(171, 39, 9);'>上次保养时间："+arr[i].mantaincetime.substring(0,10)+"</p><hr>"}}content = content + "</div>"layer.open({  type: 1, // page 层类型area: ['500px', '300px'],title: '保养建议',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, });     },error:function(){layer.alert("加载保养建议失败啦")}})
})//添加
$(".add").on("click",function(){var content = "<div style='margin: 5%;'>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>汽车名称： </span>"+"<input type='text' class='carname' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>车辆型号： </span>"+"<input type='text' class='model' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>里程数： </span>"+"<input type='text' class='mileage' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>发动机排量： </span>"+"<input type='text' class='displace' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>生产年份： </span>"+"<input type='datetime-local' class='producetime'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>购买日期： </span>"+"<input type='datetime-local' class='buytime'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>车辆图片： </span>"+"<form class='imgbox'>"+"<input type='file' class='img' name='img'>"+"<input type='hidden' class='file_value'>"+"</form>"+"<div class='img_display'></div>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>备注： </span>"+"<textarea name='' id='' cols='40' rows='5' class='other'></textarea>"+"</div>"+"<div style='margin: 1%;'>"+"<input type='button' value='添加' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;''><input type='button' value='取消' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);'>"+"</div>""</div>"layer.open({  type: 1, // page 层类型area: ['700px', '500px'],title: '车辆信息添加',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, success: function(layero) {//上传图片$(".img").on("change",function(){if($(".img").val()){//对图片进行序列化console.log($(".imgbox")[0])var data = new FormData($(".imgbox")[0])  //把表单数据序列化console.log(data.get("img").name)$.ajax({url:"Upload",type:"post",data:data,contentType:false,       //发送的数据格式，默认是文本processData:false,       //处理数据，以对象形式上传的数据会被转化成字符串的形式上传success:function(value){console.log(value)$(".img_display").empty()$(".img_display").append("<img src='upload/"+value.img+"' style='width:60px;height:auto;'>")//给隐藏域设置值$(".file_value").val(value.img)},error:function(){layer.alert("上传图像出错啦！")}})}else{$("file_value").val("")$(".img_display").empty()layer.alert("请上传图片")}})var addBtn = layero.find('input[value="添加"]');  var cancelBtn = layero.find('input[value="取消"]'); addBtn.on('click', function() {   var carname = layero.find('.carname').val()var model = layero.find('.model').val() var mileage = layero.find('.mileage').val() var displace = layero.find('.displace').val() var producetime = layero.find('.producetime').val() var buytime = layero.find('.buytime').val() var img = layero.find('.file_value').val() var other = layero.find('.other').val()$.ajax({url:"User",type:"post",data:{account:decodeURIComponent(account),carname,model,mileage,displace,producetime,buytime,img,other,	action:"addVe"},success:function(value){console.log(value.msg)layer.msg(value.msg,{icon: 1,time: 2000 // 设置 2 秒后自动关闭},function(){layer.closeAll(); // 关闭当前弹窗			})location.reload()				},error:function(){alert("添加车辆信息失败啦")}})   })  // 处理取消操作  cancelBtn.on('click', function() {  layer.closeAll(); // 关闭当前弹窗  });   } })  
})//修改
$("tbody").on("click",".update",function(){var id = $(this).attr("index")if(id){$.ajax({url:"User?action=getVeById&id="+id,type:"get",success:function(value){var obj = value.data[0]var content = "<div style='margin: 5%;'>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>汽车名称： </span>"+"<input type='text' class='carname' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>车辆型号： </span>"+"<input type='text' class='model' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>里程数： </span>"+"<input type='text' class='mileage' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>发动机排量： </span>"+"<input type='text' class='displace' style='padding: 5px;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>生产年份： </span>"+"<input type='datetime-local' class='producetime'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>购买日期： </span>"+"<input type='datetime-local' class='buytime'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>车辆图片： </span>"+"<form class='imgbox'>"+"<input type='file' class='img' name='img'>"+"<input type='hidden' class='file_value'>"+"</form>"+"<div class='img_display'></div>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>备注： </span>"+"<textarea name='' id='' cols='40' rows='5' class='other'></textarea>"+"</div>"+"<div style='margin: 1%;'>"+"<input type='button' value='修改' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;''><input type='button' value='取消' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);'>"+"</div>""</div>"layer.open({  type: 1, // page 层类型area: ['700px', '500px'],title: '车辆信息修改',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, success: function(layero) {layero.find('.carname').val(obj.carname)layero.find('.model').val(obj.model)layero.find('.mileage').val(obj.mileage)layero.find('.displace').val(obj.displace)layero.find('.producetime').val(obj.producetime)layero.find('.buytime').val(obj.buytime)//隐藏域设置值layero.find(".file_value").val(obj.img)//缩略图回显layero.find(".img_display").append("<img src='upload/"+obj.img+"' style='width:80px;height:60px;object-fit:cover'>")//layero.find('.img').val(obj.img)layero.find('.other').val(obj.other)var updateBtn = layero.find('input[value="修改"]');  var cancelBtn = layero.find('input[value="取消"]'); //上传图片$(".img").on("change",function(){if($(".img").val()){//对图片进行序列化console.log($(".imgbox")[0])var data = new FormData($(".imgbox")[0])  //把表单数据序列化console.log(data.get("img").name)$.ajax({url:"Upload",type:"post",data:data,contentType:false,       //发送的数据格式，默认是文本processData:false,       //处理数据，以对象形式上传的数据会被转化成字符串的形式上传success:function(value){console.log(value)$(".img_display").empty()$(".img_display").append("<img src='upload/"+value.img+"' style='width:60px;height:auto;'>")//给隐藏域设置值$(".file_value").val(value.img)},error:function(){layer.alert("上传图像出错啦！")}})}else{$("file_value").val("")$(".img_display").empty()layer.alert("请上传图片")}})updateBtn.on('click', function() {  	var id = obj.id  var carname = layero.find('.carname').val()var model = layero.find('.model').val() var mileage = layero.find('.mileage').val() var displace = layero.find('.displace').val() var producetime = layero.find('.producetime').val() var buytime = layero.find('.buytime').val() var img = layero.find('.file_value').val() var other = layero.find('.other').val() $.ajax({url:"User",type:"post",data:{id,carname,model,mileage,displace,producetime,buytime,img,other,	action:"updateVe",},success:function(value){console.log(value.msg)layer.msg(value.msg,{icon: 1,time: 2000 // 设置 2 秒后自动关闭},function(){layer.closeAll(); // 关闭当前弹窗			})location.reload()				},error:function(){alert("修改公告信息失败啦")}})   })  // 处理取消操作  cancelBtn.on('click', function() {  layer.closeAll(); // 关闭当前弹窗  });   }  });  },error:function(){layer.msg("单个加载公告信息失败啦")}})}
})

⑧用户联系管理员页面contact_admin.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="resource/css/manage.css"><script src="resource/js/jquery.js"></script><script src="resource/js/jquery.cookie.js"></script><script src="resource/layer/layer.js"></script><script src="resource/js/contact.js" defer></script>
</head>
<body><div class="container"><div class="search_box"><div class="search"><input type="text" placeholder="请输入内容关键字" class="message"><input type="text" placeholder="请输入标题" class="title"><input type="button" value="查找" class="search_btn"></div><div class="btns"><input type="button" value="留言" class="leave"></div></div></div><table border="1" ><thead><tr><th style="width: 4%;">序号</th><th>标题</th><th style="width: 30%;">内容</th><th style="width: 30%;">回复</th><th style="width: 10%;">留言时间</th><th style="width: 6%;">操作</th></tr> </thead><tbody></tbody></table><ul class="page"></ul>
</body>
</html>

contact.js

//剪裁方法
function cut_str(str,len){if(str.length>len){str=str.substring(0,len)+"..."}return str
}//页面大小
var pageSize=4var param = window.location.search;   
var account = param.split('?')[1];   function loadData(page){var message = $(".message").val().trim()var title = $(".title").val().trim()$.ajax({url:"User?action=getMessage&title="+title+"&username="+account+"&message="+message+"&page="+page+"&pageSize="+pageSize,type:"get",success:function(value){var arr = value.data$("tbody").empty()for(var i=0; i<arr.length;i++){$("tbody").append("<tr>"+"<td>"+arr[i].id+"</td>"+"<td>"+cut_str(arr[i].title,10)+"</td>"+"<td>"+cut_str(arr[i].message,20)+"</td>"+"<td>"+cut_str(arr[i].answer,20)+"</td>"+"<td>"+arr[i].updatetime.substring(0,10)+"</td>"+"<td><input type='button' value='查看详情' class='detail' index='"+arr[i].id+"'></td>"+"</tr>")}},error:function(){alert("查找失败")}
})
}//加载分页
function loadPage(){var message = $(".message").val().trim()var title = $(".title").val().trim()$.ajax({url:"User?action=getMecount&title="+title+"&message="+message+"&username="+account,type:"get",success:function(value){var count = value.msg$(".page").empty()$(".page").append("<li class='first'>首页</li>")$(".page").append("<li class='prev'>上一页</li>")for(var i=0;i<Math.ceil(count/pageSize);i++){if(i==0){$(".page").append("<li class='current item'>"+(i+1)+"</li>")}else{$(".page").append("<li class='item'>"+(i+1)+"</li>")}}$(".page").append("<li class='next'>下一页</li>")$(".page").append("<li class='last'>尾页</li>")},error:function(){alert("查找失败")}
})
}//加载数据
loadData(1)
loadPage()//搜索框搜索
$(".search_btn").on("click",function(){loadData(1)	loadPage()
})//指定页码加载
$(".page").on("click",".item",function(){//数据切换loadData($(this).text())//样式切换$(this).addClass("current").siblings().removeClass("current")$(".checkAll").prop("checked",false)
})//首页切换
$(".page").on("click",".first",function(){//数据切换loadData(1)//样式切换$(".item").removeClass("current").first().addClass("current")
})//尾页切换
$(".page").on("click",".last",function(){//数据切换loadData($(".item").length)//样式切换$(".item").removeClass("current").last().addClass("current")$(".checkAll").prop("checked",false)
})//上一页切换
$(".page").on("click",".prev",function(){if($("li.current").text()==1){layer.alert("当前已经是第一页啦")return}//数据切换loadData($("li.current").text()-1)//样式切换$("li.current").removeClass("current").prev().addClass("current")$(".checkAll").prop("checked",false)
})//下一页切换
$(".page").on("click",".next",function(){if($("li.current").text()==$(".item").length){layer.alert("当前已经是最后页啦")return}//数据切换loadData(parseInt($("li.current").text())+1)//样式切换$("li.current").removeClass("current").next().addClass("current")$(".checkAll").prop("checked",false)
})//查看详情
$("tbody").on("click",".detail",function(){var index = $(this).attr("index")$.ajax({url:"Admin?action=getMedetail&id="+index,type:"get",success:function(value){var arr = value.datavar content = "<div style='margin: 5%;'>"+"<h3>标题："+arr[0].title+"</h3>"+"<p style='font-size: 18px;'>留言："+arr[0].message+"</p>"+"<p style='font-size: 18px;color: rgb(67, 238, 238);'>回复："+arr[0].answer+"</p>"+"<p style='font-size: 15px;color: burlywood;'>留言时间："+arr[0].updatetime+"</p>"+"</div>"layer.open({  type: 1, // page 层类型area: ['400px', '300px'],title: '留言信息',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, });     },error:function(){layer.alert("加载详细信息失败啦")}})
})//留言
$(".leave").on("click",function(){var content = "<div style='margin: 5%;'>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>标题： </span>"+"<input type='text' class='title' style='padding: 5px;width:50%;'>"+"</div>"+"<div style='margin: 1%;'>"+"<span style='font-size:17px'>内容： </span>"+"<textarea name='' id='' cols='50' rows='10' class='content'></textarea>"+"</div>"+"<div style='margin: 1%;'>"+"<input type='button' value='留言' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;''><input type='button' value='取消' style='outline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);'>"+"</div>""</div>"layer.open({  type: 1, // page 层类型area: ['700px', '400px'],title: '留言',title_position: 'middle', // 标题居中显示  shade: 0.3, // 遮罩透明度shadeClose: true, // 点击遮罩区域，关闭弹层maxmin: true, // 允许全屏最小化anim: 0, // 0-6 的动画形式，-1 不开启content: content, success: function(layero) {var leaveBtn = layero.find('input[value="留言"]');  var cancelBtn = layero.find('input[value="取消"]'); leaveBtn.on('click', function() {  var title = layero.find('.title').val() var message = layero.find('.content').val() $.ajax({url:"User",type:"post",data:{account:decodeURIComponent(account),title,message,	action:"leave"},success:function(value){layer.msg(value.msg,function(){layer.closeAll(); // 关闭当前弹窗			})location.reload()				},error:function(){layer.alert("添加公告信息失败啦")}})   })  // 处理取消操作  cancelBtn.on('click', function() {  layer.closeAll(); // 关闭当前弹窗  });   }  });  
})