phpcms 投资 网站源码,南通网站seo报价,wordpress 多功能插件下载,站长工具搜索一、实现技术
前端技术#xff1a;html、javascript(jquery、ajax、json)、css、layui
后端技术#xff1a;java、mysql、servlet
开发工具#xff1a;eclipse、vscode
二、项目描述
基于web的汽车保养管家系统的设计与实现
一、功能需求
1#xff0e;用户功能 1.1…一、实现技术
前端技术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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title主页面/titlelink relstylesheet hrefresource/css/home.csslink relstylesheet hrefresource/layui/css/layui.cssscript srcresource/js/jquery.js/scriptscript srcresource/js/jquery.cookie.js/scriptscript srcresource/layui/layui.js/scriptscript srcresource/js/home.js defer/script
/head
bodya nametop/a!-- 页面头部开始 --div classtopdiv classlefth3汽车保养管家中心/h3/divdiv classrighta hreflogin.html登录/a |a hrefregister.html注册/a/div/div!-- 页面头部结束 --!-- 页面菜单开始 --div classmenuboxullia href#top首页/a/li/ul/div!-- 页面菜单结束 --!-- 轮播图开始 --div classlunbodiv classlayui-carousel idID-carousel-demo-1div carousel-itemimg srcresource/images/lunbo1.jpg alt styleobject-fit:coverimg srcresource/images/lunbo2.jpg alt styleobject-fit:coverimg srcresource/images/lunbo3.jpg alt styleobject-fit:coverimg srcresource/images/lunbo4.jpg alt styleobject-fit:coverimg srcresource/images/lunbo5.jpg alt styleobject-fit:cover/div/div scriptlayui.use(function(){var carousel layui.carousel;// 渲染 - 常规轮播carousel.render({elem: #ID-carousel-demo-1,anim: fade,width: 100%,height: 360px});});/script/div!-- 轮播图结束 --!-- 页面主体开始 --div classmain/div!-- 页面主体结束 --!-- 页面底部开始 --div classbottomspan系统创建时间2024.1.13nbsp;nbsp;nbsp; 联系方式1750502120qq.com/span/div!-- 页面底部结束 --!-- 返回顶部开始--a href#top classbackTopspanTOP/spanimg srcresource/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.lengthlen){strstr.substring(0,len)...}return str
}//加载页面菜单
$.ajax({url:Home?actiongetMenu,type:get,success:function(value){//$(.menubox ul).empty()var arr value.datafor(var i0; iarr.length;i){$(.menubox ul).append(lia href#arr[i].idarr[i].column/a/li)$(.main).append(a namearr[i].id/ah5spanarr[i].column/spana href# indexarr[i].id classmoremore/a/h5)loadContent(arr[i].id)} },error:function(){console.log(加载页面菜单失败)}
})//加载公告
function loadContent(id){$.ajax({url:Home?actiongetContentcolum_idid,type:get,async:false, success:function(value){var arr value.datafor(var i0; iarr.length;i){if(i0){$(.main).append(div classcolums ididdiv classrightul/ul/divdiv classleftul/ul/div/div)}if(i%20){$(#id).find(.right ul).append(lia href# numarr[i].id classdetaildiv classleh3arr[i].createtime.substring(8,10)/h3parr[i].createtime.substring(0,7)/p/divdiv classrih4cut_str(arr[i].title,10)/h4pcut_str(arr[i].content,25)/p/div/a/li)}else{$(#id).find(.left ul).append(lia href# numarr[i].id classdetaildiv classleh3arr[i].createtime.substring(8,10)/h3parr[i].createtime.substring(0,7)/p/divdiv classrih4cut_str(arr[i].title,10)/h4pcut_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?actiongetMoremore_idmore_id,type:get,success:function(value){var arr value.datavar content div stylemargin: 5%;;for(var i0; iarr.length;i){content contenth3标题arr[i].title/h3p stylefont-size: 18px;内容arr[i].content/pp stylefont-size: 15px;color: burlywood;创建时间arr[i].createtime/pbr}content content /divlayer.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?actiongetDetaildetail_iddetail_id,type:get,success:function(value){var arr value.datavar content div stylemargin: 5%;;for(var i0; iarr.length;i){content contenth4标题arr[i].title/h4p stylefont-size: 16px;内容arr[i].content/pp stylefont-size: 14px;color: burlywood;创建时间arr[i].createtime/pbr}content content /divlayer.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;charsetutf-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 available1 and colum_idcolum_id order by createtime desc;res MysqlUtil.getJsonBySql(sql, content);break;//加载morecase getMore:String more_id request.getParameter(more_id);sql select menu.column,content.* from menu,content where menu.idcontent.colum_id and content.available1 and colum_idmore_id order by createtime desc;res MysqlUtil.getJsonBySql(sql, more);break;//加载morecase getDetail:String detail_id request.getParameter(detail_id);sql select menu.column,content.* from menu,content where menu.idcontent.colum_id and content.iddetail_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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title页面/titlelink relstylesheet hrefresource/css/main.cssscript srcresource/js/jquery.js/scriptscript srcresource/js/jquery.cookie.js/scriptscript srcresource/layer/layer.js/scriptscript typetext/javascript$(function(){var role $.cookie(role)var account $.cookie(account)//加载用户或管理员if(role0){var str 欢迎管理员account$(span).text(str)$(.bottom ul).append(lia hrefmaintenance_advice.html targetaa车辆保养信息管理/a/lilia hrefannouncement.html targetaa公告管理/a/li
// lia hrefannouncement_column.html?a2 targetaa公告栏目管理/a/lilia hrefuser_message.html targetaa用户留言管理/a/li)$(.bottom iframe).attr(src,maintenance_advice.html)}if(role1){var str 欢迎用户account$(span).text(str)$(.bottom ul).append(lia hrefmaintenance_records.html?account targetaa车辆保养记录管理/a/lilia hrefvehicle_information.html?account targetaa车辆信息管理/a/lilia hrefcontact_admin.html?account targetaa联系管理员/a/li)$(.bottom iframe).attr(src,maintenance_records.html?account)}$(.top .logout).on(click,function(){$.ajax({url:Login?actionlogout,type:get,success:function(){location.hrefhome.html},error:function(){alert(登出出错啦)}})})})/script
/head
bodydiv classcontainerdiv classtoph1汽车保养管理系统/h1span/spana href# classlogout登出/a/divdiv classbottomul/uliframe src frameborder0 nameaa/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;charsetutf-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 sqlselect records.id,user.username,vehicle.carname,records.type,records.mantaincetime,records.updatetime from user,vehicle,records where vehicle.available1 and records.available1 and user.idvehicle.user_id and vehicle.idrecords.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);sqlselect count(*) from user,vehicle,records where vehicle.available1 and records.available1 and user.idvehicle.user_id and vehicle.idrecords.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);sqlselect menu.column,content.* from menu,content where content.available0 and menu.idcontent.colum_id and title like %title%and content like %content%;if(!0.equals(colum_id)) {sql and colum_idcolum_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);sqlselect content.*,menu.column from content,menu where content.colum_idmenu.id and content.idid;res MysqlUtil.getJsonBySql(sql, colums_all);break;//加载公告信息分页case getPage:title request.getParameter(title);content request.getParameter(content);colum_id request.getParameter(colum_id);sqlselect count(*) from menu,content where content.available0 and menu.idcontent.colum_id and title like %title%and content like %content%;if(!0.equals(colum_id)) {sql and colum_idcolum_id;}count MysqlUtil.getCount(sql);res {\msg\:\count\,\code\:0};break;//加载公告栏目case getMenu:sqlselect * from menu;res MysqlUtil.getJsonBySql(sql, menus);break;//加载用户留言case getMessage:String uname request.getParameter(username);String message request.getParameter(message);sqlselect user.username,contact.* from user,contact where user.idcontact.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);sqlselect count(*) from user,contact where user.idcontact.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);sqlselect 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_idvehicle.id and vehicle.user_iduser.id and records.idid;res MysqlUtil.getJsonBySql(sql, advice);break;case getMedetail:id request.getParameter(id);sqlselect contact.*,user.username from contact,user where contact.idid and user.idcontact.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;charsetutf-8);String action request.getParameter(action);String res {\msg\:\删除失败\,\code\:0};String id request.getParameter(id);switch(action) {//单个删除case delete_id:String sqlupdate content set available0 where idid;int num MysqlUtil.update(sql);if(num0) {res {\msg\:\删除成功\,\code\:1};}break;//批量删除case deleteAll:String ids request.getParameter(ids);sqlupdate content set available0 where id in(ids);num MysqlUtil.update(sql);if(num0) {res {\msg\:\批量删除成功\,\code\:1};}break;case advice:String suggestion request.getParameter(suggestion);id request.getParameter(id);sqlupdate records set advicesuggestion where idid;res {\msg\:\建议信息失败\,\code\:0};num MysqlUtil.update(sql);if(num0) {res {\msg\:\建议信息成功\,\code\:1};}break;case answer:String answer request.getParameter(answer);id request.getParameter(id);sqlupdate contact set answeranswer where idid;res {\msg\:\回复信息失败\,\code\:0};num MysqlUtil.update(sql);if(num0) {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(\, \);sqlinsert into content(colum_id,title,content,available) values(colum_id,title,content,2);res {\msg\:\添加公告信息失败\,\code\:0};num MysqlUtil.add(sql);if(num0) {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);sqlupdate content set titletitle,contentcontent,colum_idcolum_id where id id;res {\msg\:\修改信息失败\,\code\:0};num MysqlUtil.update(sql);if(num0) {res {\msg\:\修改信息成功\,\code\:1};}break;//发布公告信息case publish:id request.getParameter(id);sqlupdate content set available1 where id id;res {\msg\:\发布公告信息失败\,\code\:0};num MysqlUtil.update(sql);if(num0) {res {\msg\:\发布公告信息成功\,\code\:1};}break;//停止发布公告信息case no_publish:id request.getParameter(id);sqlupdate content set available2 where id id;res {\msg\:\停止发布公告信息失败\,\code\:0};num MysqlUtil.update(sql);if(num0) {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;charsetutf-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 sqlselect vehicle.carname,records.* from records,user,vehicle where records.car_idvehicle.id and vehicle.user_iduser.id and vehicle.available1 and records.available1 and usernameusername 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);sqlselect count(*) from records,user,vehicle where records.car_idvehicle.id and vehicle.user_iduser.id and vehicle.available1 and records.available1 and usernameusername and carname like %carname%;int count MysqlUtil.getCount(sql);res {\msg\:\count\,\code\:0};break;//加载车辆信息case getVehicle:carname request.getParameter(carname);sqlselect vehicle.* from vehicle,user where vehicle.available1 and user.idvehicle.user_id and usernameusername 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);sqlselect count(*) from vehicle,user where vehicle.available1 and user.idvehicle.user_id and usernamelala 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);sqlselect user.username,contact.* from user,contact where user.idcontact.user_id and title like %title% and message like %message% and usernameusername 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);sqlselect count(*) from user,contact where user.idcontact.user_id and title like %title% and message like %message% and usernameusername;count MysqlUtil.getCount(sql);res {\msg\:\count\,\code\:0};break;//根据车辆信息查看保养信息case getReinform:String id request.getParameter(id);sqlselect * from records where car_idid;res MysqlUtil.getJsonBySql(sql, reinform);break;//根据保养信息查看保养建议case getReadvice:id request.getParameter(id);sqlselect * from records where idid;res MysqlUtil.getJsonBySql(sql, reinform);break;//根据保养信息查看车辆信息case getVeinform:id request.getParameter(id);sqlselect vehicle.* from records,vehicle where records.idid and records.car_idvehicle.id;res MysqlUtil.getJsonBySql(sql, vehicle);break; //根据保养信息查看车辆信息case getVeById:id request.getParameter(id);sql select * from vehicle where idid;res MysqlUtil.getJsonBySql(sql, vehicle);break;//根据保养信息查看车辆信息case getReById:id request.getParameter(id);sql select vehicle.carname,records.* from records,vehicle where vehicle.idrecords.car_id and records.idid;res MysqlUtil.getJsonBySql(sql, records);break;case getCarId:sql select distinct vehicle.id,vehicle.carname from user,vehicle,records where user.idvehicle.user_id and records.car_idvehicle.id and usernameusername;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;charsetutf-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 sqlupdate records set available0 where idid;int num MysqlUtil.update(sql);if(num0) {res {\msg\:\删除成功\,\code\:1};}break;//车辆保养批量删除case delAll:String ids request.getParameter(ids);sqlupdate records set available0 where id in(ids);num MysqlUtil.update(sql);if(num0) {res {\msg\:\批量删除成功\,\code\:1};}break;//车辆信息单个删除case delete_id:sqlupdate vehicle set available0 where idid;num MysqlUtil.update(sql);if(num0) {res {\msg\:\删除成功\,\code\:1};}break;//车辆信息批量删除case deleteAll:ids request.getParameter(ids);sqlupdate vehicle set available0 where id in(ids);num MysqlUtil.update(sql);if(num0) {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(num0) {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_idcar_id, typetype, bodybody, innerinner, renovaterenovate, engineengine, componentcomponent, clearclear, othersothers, mantaincetimemantaincetime where idid;res {\msg\:\修改车辆保养信息失败\,\code\:0};num MysqlUtil.update(sql);if(num0) {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 usernameaccount;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的值 sqlinsert 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(num0) {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);sqlupdate vehicle set carnamecarname,modelmodel,mileagemileage,displacedisplace,producetimeproducetime,buytimebuytime,imgimg,otherother where id id;res {\msg\:\修改车辆信息失败\,\code\:0};num MysqlUtil.update(sql);if(num0) {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 usernameaccount;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的值 sqlinsert into contact(user_id,title,message) values(user_id,title,account);res {\msg\:\留言失败\,\code\:0};num MysqlUtil.add(sql);if(num0) {res {\msg\:\留言成功\,\code\:1};}break;default:break;}response.getWriter().write(res);}}③管理员 车辆保养管理信息页面maintenance_advice.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefresource/css/manage.cssscript srcresource/js/jquery.js/scriptscript srcresource/js/jquery.cookie.js/scriptscript srcresource/layer/layer.js/scriptscript srcresource/js/advice.js defer/script
/head
bodydiv classcontainerdiv classsearch_boxdiv classsearchinput typetext placeholder请输入车主 classusernameinput typetext placeholder请车辆名称 classcarnameinput typebutton value查找 classsearch_btn/div/div/divtable border1 theadtrth序号/thth车主/thth车辆名称/thth保养类型/thth上次保养时间/thth更新时间/thth操作/th/tr/theadtbody/tbody/tableul classpage/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[typetext]{border: 1.5px solid rgb(126, 173, 240);outline: none;padding: 8px 10px;
}.container .search_box .search select:focus,
.container .search_box .search input[typetext]:focus{border: 3px solid rgb(64, 182, 237);
}.container .search_box .search input[typebutton]{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[typebutton]{background: none;border: none;font-size: 14px;margin-left: 5px;padding: 2px 3px;color: rgb(14, 32, 231);
}table tbody input[typebutton]: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.lengthlen){strstr.substring(0,len)...}return str
}//页面大小
var pageSize4function loadData(page){var username $(.username).val().trim()var carname $(.carname).val().trim()$.ajax({url:Admin?actiongetAdviceusernameusernamecarnamecarnamepagepagepageSizepageSize,type:get,success:function(value){var arr value.data$(tbody).empty()for(var i0; iarr.length;i){$(tbody).append(trtdarr[i].id/tdtdarr[i].username/tdtdarr[i].carname/tdtdarr[i].type/tdtdarr[i].mantaincetime.substring(0,10)/tdtdarr[i].updatetime.substring(0,10)/tdtdinput typebutton value建议 classadvice indexarr[i].id/td/tr)}},error:function(){layer.alert(查找失败)}
})
}//加载分页
function loadPage(){var username $(.username).val().trim()var carname $(.carname).val().trim()$.ajax({url:Admin?actiongetCountusernameusernamecarnamecarname,type:get,success:function(value){var count value.msg$(.page).empty()$(.page).append(li classfirst首页/li)$(.page).append(li classprev上一页/li)for(var i0;iMath.ceil(count/pageSize);i){if(i0){$(.page).append(li classcurrent item(i1)/li)}else{$(.page).append(li classitem(i1)/li)}}$(.page).append(li classnext下一页/li)$(.page).append(li classlast尾页/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?actiongetAdviceIdidindex,type:get,success:function(value){var arr value.datavar content div styledisplay: flex;margin: 5%;justify-content: space-between;div stylewidth: 45%;h3 styletext-align: center;车辆信息/h3p车主arr[0].username/pp汽车名称arr[0].carname/pp车辆型号arr[0].model/pp里程数arr[0].mileage/pp发动机排量arr[0].displace/pp生产年份arr[0].producetime.substring(0,10)/pp购买日期arr[0].buytime.substring(0,10)/pp车辆图img srcupload/arr[0].img stylewidth: 60%;height: auto;object-fit: cover;/pp备注arr[0].other/p/divdiv stylewidth: 45%;h3 styletext-align: center;保养信息/h3p保养类型arr[0].type/pp车体保养arr[0].body/pp车内保养arr[0].inner/pp车体翻新arr[0].renovate/pp发动机保养arr[0].engine/pp零部件更换arr[0].component/pp清洗和维护arr[0].clear/pp其它arr[0].others/pp上次保养时间arr[0].mantaincetime.substring(0,10)/p/div/divdiv stylemargin: 0% 10% 5% 10%;width: 80%;h4建议/h4div stylewidth: 90%;textarea name id cols70 rows10 classcontentarr[0].advice/textarea/div /divdiv stylemargin:0% 35% 5%;input typebutton value建议 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;input typebutton value取消 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);/divlayer.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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefresource/css/manage.cssscript srcresource/js/jquery.js/scriptscript srcresource/js/jquery.cookie.js/scriptscript srcresource/layer/layer.js/scriptscript srcresource/js/announce.js defer/script
/head
bodydiv classcontainerdiv classsearch_boxdiv classsearchselect classcolum/selectinput typetext placeholder请输入标题 classtitleinput typetext placeholder请输入内容关键字 classcontentinput typebutton value查找 classsearch_btn/divdiv classbtnsinput typebutton value批量删除 classdeleteAllinput typebutton value添加 classadd/div/div/divtable border1 theadtrth stylewidth: 4%;input typecheckbox name id classcheckAll/thth stylewidth: 6%;序号/thth公告栏目/thth标题/thth内容/thth stylewidth: 12%;创建时间/thth stylewidth: 15%;操作/th/tr/theadtbody/tbody/tableul classpage/ul
/body
/html
announce.js
//剪裁方法
function cut_str(str,len){if(str.lengthlen){strstr.substring(0,len)...}return str
}//页面大小
var pageSize4// 获取查询字符串
var param window.location.search; //?a1
// 提取参数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?actiongetColumtitletitlecontentcontentpagepagepageSizepageSizecolum_idcolum_id,type:get,success:function(value){var arr value.data$(tbody).empty()for(var i0; iarr.length;i){$(tbody).append(trtdinput typecheckbox indexarr[i].id classoption/tdtdarr[i].id/tdtdarr[i].column/tdtdarr[i].title/tdtdcut_str(arr[i].content,18)/tdtdarr[i].createtime.substring(0,10)/tdtdinput typebutton value修改 classupdate indexarr[i].idinput typebutton value删除 classdelete indexarr[i].idinput typebutton value发布 classpublish indexarr[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?actiongetPagetitletitlecontentcontentcolum_idcolum_id,type:get,success:function(value){var count value.msg$(.page).empty()$(.page).append(li classfirst首页/li)$(.page).append(li classprev上一页/li)for(var i0;iMath.ceil(count/pageSize);i){if(i0){$(.page).append(li classcurrent item(i1)/li)}else{$(.page).append(li classitem(i1)/li)}}$(.page).append(li classnext下一页/li)$(.page).append(li classlast尾页/li)},error:function(){alert(查找失败)}
})
}//加载栏目
function loadMenu(){$.ajax({url:Admin?actiongetMenu,type:get,async:false, //默认为异步请求设置为同步success:function(value){var arr value.data$(.colum).append(option value0全部/option)for(var i0; iarr.length;i){$(.colum).append(option valuearr[i].idarr[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 idsfor(var i0;i$(.option:checked).length;i){//$(.option:checked)[i].getAttribute(index) //js方法ids $(.option:checked).eq(i).attr(index),}idsids.slice(0,-1) //slice(start,end) 不包含end,支持负数截取if(ids.length0){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 i0;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 stylemargin: 5%;div stylemargin: 1%;span stylefont-size:17px公告栏目 /spanselect classcolum stylepadding: 5px;/select/divdiv stylemargin: 1%;span stylefont-size:17px标题 /spaninput typetext classtitle stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px内容 /spantextarea name id cols40 rows10 classcontent/textarea/divdiv stylemargin: 1%;input typebutton value添加 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;input typebutton value取消 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);/div/divlayer.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?actiongetMenu,type:get,async:false, //默认为异步请求设置为同步success:function(value){var arr value.datafor(var i0; iarr.length;i){$(.colum).append(option valuearr[i].idarr[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?actiongetColumIdidid,type:get,success:function(value){var obj value.data[0]var content div stylemargin: 5%;div stylemargin: 2%;span stylefont-size:20px公告obj.id/span/divdiv stylemargin: 1%;span stylefont-size:17px公告栏目 /spanselect classcolum stylepadding: 5px;/select/divdiv stylemargin: 1%;span stylefont-size:17px标题 /spaninput typetext classtitle stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px内容 /spantextarea name id cols40 rows10 classcontentobj.content/textarea/divdiv stylemargin: 1%;span stylefont-size:15px;color: rgb(171, 39, 9);创建时间:obj.createtime/span/divdiv stylemargin: 1%;input typebutton value修改 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;input typebutton value取消 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);/div/divlayer.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?actiongetMenu,type:get,async:false, //默认为异步请求设置为同步success:function(value){var arr value.datafor(var i0; iarr.length;i){$(.colum).append(option valuearr[i].idarr[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?actiongetColumIdidid,type:get,success:function(value){var obj value.data[0]var str 未发布if(obj.available1){str 已发布}var content div stylemargin: 5%;div stylemargin: 2%;span stylefont-size:20px公告obj.id/span/divdiv stylemargin: 1%;span stylefont-size:17px公告栏目 obj.column/span/divdiv stylemargin: 1%;span stylefont-size:17px标题 obj.title/span/divdiv stylemargin: 1%;span stylefont-size:17px内容 obj.content/span/divdiv stylemargin: 1%;span stylefont-size:17px发布情况 str/span/divdiv stylemargin: 1%;span stylefont-size:15px;color: rgb(171, 39, 9);创建时间:obj.createtime/span/divdiv stylemargin: 1%;input typebutton value发布 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(225, 138, 201);input typebutton value停止发布 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;input typebutton value取消 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);/div/divlayer.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.available2){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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefresource/css/manage.cssscript srcresource/js/jquery.js/scriptscript srcresource/js/jquery.cookie.js/scriptscript srcresource/layer/layer.js/scriptscript srcresource/js/message.js defer/script
/head
bodydiv classcontainerdiv classsearch_boxdiv classsearchinput typetext placeholder请输入留言关键字 classmessageinput typetext placeholder请输入用户名 classusernameinput typebutton value查找 classsearch_btn/div/div/divtable border1 theadtrth stylewidth: 5%;序号/thth stylewidth: 10%;用户/thth标题/thth留言/thth stylewidth: 10%;留言时间/thth回复/thth stylewidth: 10%;操作/th/tr/theadtbody/tbody/tableul classpage/ul
/body
/html message.js
//剪裁方法
function cut_str(str,len){if(str.lengthlen){strstr.substring(0,len)...}return str
}//页面大小
var pageSize4function loadData(page){var message $(.message).val().trim()var username $(.username).val().trim()$.ajax({url:Admin?actiongetMessageusernameusernamemessagemessagepagepagepageSizepageSize,type:get,success:function(value){var arr value.data$(tbody).empty()for(var i0; iarr.length;i){$(tbody).append(trtdarr[i].id/tdtdarr[i].username/tdtdarr[i].title/tdtdcut_str(arr[i].message,16)/tdtdarr[i].updatetime.substring(0,10)/tdtdcut_str(arr[i].answer,16)/tdtdinput typebutton value查看详情 classdetail indexarr[i].id/td/tr)}},error:function(){alert(查找失败)}
})
}//加载分页
function loadPage(){var message $(.message).val().trim()var username $(.username).val().trim()$.ajax({url:Admin?actiongetMecountusernameusernamemessagemessage,type:get,success:function(value){var count value.msg$(.page).empty()$(.page).append(li classfirst首页/li)$(.page).append(li classprev上一页/li)for(var i0;iMath.ceil(count/pageSize);i){if(i0){$(.page).append(li classcurrent item(i1)/li)}else{$(.page).append(li classitem(i1)/li)}}$(.page).append(li classnext下一页/li)$(.page).append(li classlast尾页/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?actiongetMedetailidindex,type:get,success:function(value){var arr value.datavar content div stylemargin: 5%;h3标题arr[0].title/h3p用户arr[0].username/pp stylefont-size: 16px;留言arr[0].message/pp stylefont-size: 14px;color: burlywood;留言时间arr[0].updatetime/p回复textarea name id cols40 rows10 classcontentarr[0].answer/textareabrinput typebutton value回复 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;input typebutton value取消 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);/divlayer.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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefresource/css/manage.cssscript srcresource/js/jquery.js/scriptscript srcresource/js/jquery.cookie.js/scriptscript srcresource/layer/layer.js/scriptscript srcresource/js/records.js defer/script
/head
bodydiv classcontainerdiv classsearch_boxdiv classsearchinput typetext placeholder请输入汽车名称 classcarnameinput typebutton value查找 classsearch_btn/divdiv classbtnsinput typebutton value批量删除 classdeleteAllinput typebutton value添加 classadd/div/div/divtable border1 theadtrthinput typecheckbox name id classcheckAll/thth序号/thth车辆名称/thth保养类型/thth车体保养/thth车内保养/thth车体翻新/thth发动机保养/thth零部件更换/thth清洗和维护/thth其它/thth上次保养时间/thth stylewidth: 8%;编辑操作/thth stylewidth: 10%;查看操作/th/tr/theadtbody/tbody/tableul classpage/ul
/body
/html
records.js
//剪裁方法
function cut_str(str,len){if(str.lengthlen){strstr.substring(0,len)...}return str
}//页面大小
var pageSize4var param window.location.search;
var account param.split(?)[1]; function loadData(page){var carname $(.carname).val().trim()$.ajax({url:User?actiongetRecordscarnamecarnameusernameaccountpagepagepageSizepageSize,type:get,success:function(value){var arr value.data$(tbody).empty()for(var i0; iarr.length;i){$(tbody).append(trtdinput typecheckbox indexarr[i].id classoption/tdtdarr[i].id/tdtdarr[i].carname/tdtdarr[i].type/tdtdarr[i].body/tdtdarr[i].inner/tdtdarr[i].renovate/tdtdarr[i].engine/tdtdarr[i].component/tdtdarr[i].clear/tdtdarr[i].others/tdtdarr[i].mantaincetime.substring(0,10)/tdtdinput typebutton value修改 classupdate indexarr[i].idinput typebutton value删除 classdelete indexarr[i].id/tdtdinput typebutton value查看保养建议 classadvice kidarr[i].idinput typebutton value查看车辆信息 classvehicle kidarr[i].id/td/tr)}},error:function(){alert(查找失败)}
})
}//加载分页
function loadPage(){var carname $(.carname).val().trim()$.ajax({url:User?actiongetRpagecarnamecarnameusernameaccount,type:get,success:function(value){var count value.msg$(.page).empty()$(.page).append(li classfirst首页/li)$(.page).append(li classprev上一页/li)for(var i0;iMath.ceil(count/pageSize);i){if(i0){$(.page).append(li classcurrent item(i1)/li)}else{$(.page).append(li classitem(i1)/li)}}$(.page).append(li classnext下一页/li)$(.page).append(li classlast尾页/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 idsfor(var i0;i$(.option:checked).length;i){//$(.option:checked)[i].getAttribute(index) //js方法ids $(.option:checked).eq(i).attr(index),}idsids.slice(0,-1) //slice(start,end) 不包含end,支持负数截取if(ids.length0){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 i0;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?actiongetVeinformidid,type:get,success:function(value){var arr value.datavar content div stylemargin: 5%;h3车辆信息/h3p汽车名称arr[0].carname/pp车辆型号arr[0].model/pp里程数arr[0].mileage/pp发动机排量arr[0].displace/pp生产年份arr[0].producetime.substring(0,10)/pp购买日期arr[0].buytime.substring(0,10)/pp车辆图img srcupload/arr[0].img stylewidth:60%;height:auto;object-fit:cover/pp备注arr[0].other/p/divlayer.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?actiongetReadviceidid,type:get,success:function(value){var arr value.datavar content div stylemargin: 5%;for(var i0;iarr.length;i){if(arr[i].advice){content content h3保养信息id/h3p stylefont-size: 18px;暂时没有建议/pp stylefont-size: 16px;color: rgb(171, 39, 9);上次保养时间arr[i].mantaincetime.substring(0,10)/phr}else{content content h3保养信息(i1)/h3p stylefont-size: 18px;建议arr[i].advice/pp stylefont-size: 16px;color: rgb(171, 39, 9);上次保养时间arr[i].mantaincetime.substring(0,10)/phr}}content content /divlayer.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 stylemargin: 5%;div stylemargin: 1%;span stylefont-size:17px汽车名称 /spanselect classcarname stylepadding:5px;/select/divdiv stylemargin: 1%;span stylefont-size:17px保养类型 /spaninput typetext classtype stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px车体保养 /spaninput typetext classbody stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px车内保养 /spaninput typetext classinner stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px车体翻新 /spaninput typetext classrenovate stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px发动机保养 /spaninput typetext classengine stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px零部件更换 /spaninput typetext classcomponent stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px清洗和维护 /spaninput typetext classclear stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px其它 /spaninput typetext classothers stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px上次保养时间 /spaninput typedatetime-local classmantaincetime/divdiv stylemargin: 1%;input typebutton value添加 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;input typebutton value取消 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);/div/divlayer.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?actiongetCarIdusernameaccount,type:get,async:false, //默认为异步请求设置为同步success:function(value){var arr value.datafor(var i0; iarr.length;i){$(.carname).append(option valuearr[i].idarr[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?actiongetReByIdidid,type:get,success:function(value){var obj value.data[0]var content div stylemargin: 5%;div stylemargin: 1%;span stylefont-size:17px汽车名称 /spanselect classcarname stylepadding:5px;/select/divdiv stylemargin: 1%;span stylefont-size:17px保养类型 /spaninput typetext classtype stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px车体保养 /spaninput typetext classbody stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px车内保养 /spaninput typetext classinner stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px车体翻新 /spaninput typetext classrenovate stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px发动机保养 /spaninput typetext classengine stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px零部件更换 /spaninput typetext classcomponent stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px清洗和维护 /spaninput typetext classclear stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px其它 /spaninput typetext classothers stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px上次保养时间 /spaninput typedatetime-local classmantaincetime/divdiv stylemargin: 1%;input typebutton value修改 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;input typebutton value取消 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);/div/divlayer.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?actiongetCarIdusernameaccount,type:get,async:false, //默认为异步请求设置为同步success:function(value){var arr value.datafor(var i0; iarr.length;i){$(.carname).append(option valuearr[i].idarr[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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefresource/css/manage.cssscript srcresource/js/jquery.js/scriptscript srcresource/js/jquery.cookie.js/scriptscript srcresource/layer/layer.js/scriptscript srcresource/js/vehicle.js defer/script
/head
bodydiv classcontainerdiv classsearch_boxdiv classsearchinput typetext placeholder请输入汽车名称 classcarnameinput typebutton value查找 classsearch_btn/divdiv classbtnsinput typebutton value批量删除 classdeleteAllinput typebutton value添加 classadd/div/div/divtable border1 theadtrthinput typecheckbox name id classcheckAll/thth序号/thth汽车名称/thth车辆型号/thth里程数/thth发动机排量/thth生产年份/thth购买日期/thth车辆图片/thth备注/thth stylewidth: 8%;编辑操作/thth stylewidth: 10%;查看操作/th/tr/theadtbody/tbody/tableul classpage/ul
/body
/html
vehicle.js
//剪裁方法
function cut_str(str,len){if(str.lengthlen){strstr.substring(0,len)...}return str
}//页面大小
var pageSize4var param window.location.search;
var account param.split(?)[1]; function loadData(page){var car $(.carname).val().trim()$.ajax({url:User?actiongetVehiclecarnamecarusernameaccountpagepagepageSizepageSize,type:get,success:function(value){var arr value.data$(tbody).empty()for(var i0; iarr.length;i){$(tbody).append(trtdinput typecheckbox indexarr[i].id classoption/tdtdarr[i].id/tdtdarr[i].carname/tdtdarr[i].model/tdtdarr[i].mileage/tdtdarr[i].displace/tdtdarr[i].producetime.substring(0,10)/tdtdarr[i].buytime.substring(0,10)/tdtdimg srcupload/arr[i].img stylewidth:70px;height:55px;object-fit:cover/tdtdarr[i].other/tdtdinput typebutton value修改 classupdate indexarr[i].idinput typebutton value删除 classdelete indexarr[i].id/tdtdinput typebutton value查看保养信息 classinform kidarr[i].idinput typebutton value查看保养建议 classadvice kidarr[i].id/td/tr)}},error:function(){alert(查找失败)}
})
}//加载分页
function loadPage(){var carname $(.carname).val().trim()$.ajax({url:User?actiongetVpagecarnamecarnameusernameaccount,type:get,success:function(value){var count value.msg$(.page).empty()$(.page).append(li classfirst首页/li)$(.page).append(li classprev上一页/li)for(var i0;iMath.ceil(count/pageSize);i){if(i0){$(.page).append(li classcurrent item(i1)/li)}else{$(.page).append(li classitem(i1)/li)}}$(.page).append(li classnext下一页/li)$(.page).append(li classlast尾页/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 idsfor(var i0;i$(.option:checked).length;i){//$(.option:checked)[i].getAttribute(index) //js方法ids $(.option:checked).eq(i).attr(index),}idsids.slice(0,-1) //slice(start,end) 不包含end,支持负数截取if(ids.length0){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 i0;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?actiongetReinformidid,type:get,success:function(value){var arr value.datavar content div stylemargin: 5%;for(var i0;iarr.length;i){content content h3保养信息(i1)/h3p保养类型arr[i].type/pp车体保养arr[i].body/pp车内保养arr[i].inner/pp车体翻新arr[i].renovate/pp发动机保养arr[i].engine/pp零部件更换arr[i].component/pp清洗和维护arr[i].clear/pp其它arr[i].others/pp stylefont-size: 15px;color: rgb(171, 39, 9);上次保养时间arr[i].mantaincetime.substring(0,10)/phr}content content /divlayer.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?actiongetReinformidid,type:get,success:function(value){var arr value.datavar content div stylemargin: 5%;for(var i0;iarr.length;i){if(arr[i].advice){content content h3保养信息(i1)/h3p stylefont-size: 18px;暂时没有建议/pp stylefont-size: 16px;color: rgb(171, 39, 9);上次保养时间arr[i].mantaincetime.substring(0,10)/phr}else{content content h3保养信息(i1)/h3p stylefont-size: 18px;建议arr[i].advice/pp stylefont-size: 16px;color: rgb(171, 39, 9);上次保养时间arr[i].mantaincetime.substring(0,10)/phr}}content content /divlayer.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 stylemargin: 5%;div stylemargin: 1%;span stylefont-size:17px汽车名称 /spaninput typetext classcarname stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px车辆型号 /spaninput typetext classmodel stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px里程数 /spaninput typetext classmileage stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px发动机排量 /spaninput typetext classdisplace stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px生产年份 /spaninput typedatetime-local classproducetime/divdiv stylemargin: 1%;span stylefont-size:17px购买日期 /spaninput typedatetime-local classbuytime/divdiv stylemargin: 1%;span stylefont-size:17px车辆图片 /spanform classimgboxinput typefile classimg nameimginput typehidden classfile_value/formdiv classimg_display/div/divdiv stylemargin: 1%;span stylefont-size:17px备注 /spantextarea name id cols40 rows5 classother/textarea/divdiv stylemargin: 1%;input typebutton value添加 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;input typebutton value取消 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);/div/divlayer.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 srcupload/value.img stylewidth: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?actiongetVeByIdidid,type:get,success:function(value){var obj value.data[0]var content div stylemargin: 5%;div stylemargin: 1%;span stylefont-size:17px汽车名称 /spaninput typetext classcarname stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px车辆型号 /spaninput typetext classmodel stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px里程数 /spaninput typetext classmileage stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px发动机排量 /spaninput typetext classdisplace stylepadding: 5px;/divdiv stylemargin: 1%;span stylefont-size:17px生产年份 /spaninput typedatetime-local classproducetime/divdiv stylemargin: 1%;span stylefont-size:17px购买日期 /spaninput typedatetime-local classbuytime/divdiv stylemargin: 1%;span stylefont-size:17px车辆图片 /spanform classimgboxinput typefile classimg nameimginput typehidden classfile_value/formdiv classimg_display/div/divdiv stylemargin: 1%;span stylefont-size:17px备注 /spantextarea name id cols40 rows5 classother/textarea/divdiv stylemargin: 1%;input typebutton value修改 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;input typebutton value取消 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);/div/divlayer.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 srcupload/obj.img stylewidth: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 srcupload/value.img stylewidth: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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefresource/css/manage.cssscript srcresource/js/jquery.js/scriptscript srcresource/js/jquery.cookie.js/scriptscript srcresource/layer/layer.js/scriptscript srcresource/js/contact.js defer/script
/head
bodydiv classcontainerdiv classsearch_boxdiv classsearchinput typetext placeholder请输入内容关键字 classmessageinput typetext placeholder请输入标题 classtitleinput typebutton value查找 classsearch_btn/divdiv classbtnsinput typebutton value留言 classleave/div/div/divtable border1 theadtrth stylewidth: 4%;序号/thth标题/thth stylewidth: 30%;内容/thth stylewidth: 30%;回复/thth stylewidth: 10%;留言时间/thth stylewidth: 6%;操作/th/tr /theadtbody/tbody/tableul classpage/ul
/body
/html contact.js
//剪裁方法
function cut_str(str,len){if(str.lengthlen){strstr.substring(0,len)...}return str
}//页面大小
var pageSize4var 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?actiongetMessagetitletitleusernameaccountmessagemessagepagepagepageSizepageSize,type:get,success:function(value){var arr value.data$(tbody).empty()for(var i0; iarr.length;i){$(tbody).append(trtdarr[i].id/tdtdcut_str(arr[i].title,10)/tdtdcut_str(arr[i].message,20)/tdtdcut_str(arr[i].answer,20)/tdtdarr[i].updatetime.substring(0,10)/tdtdinput typebutton value查看详情 classdetail indexarr[i].id/td/tr)}},error:function(){alert(查找失败)}
})
}//加载分页
function loadPage(){var message $(.message).val().trim()var title $(.title).val().trim()$.ajax({url:User?actiongetMecounttitletitlemessagemessageusernameaccount,type:get,success:function(value){var count value.msg$(.page).empty()$(.page).append(li classfirst首页/li)$(.page).append(li classprev上一页/li)for(var i0;iMath.ceil(count/pageSize);i){if(i0){$(.page).append(li classcurrent item(i1)/li)}else{$(.page).append(li classitem(i1)/li)}}$(.page).append(li classnext下一页/li)$(.page).append(li classlast尾页/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?actiongetMedetailidindex,type:get,success:function(value){var arr value.datavar content div stylemargin: 5%;h3标题arr[0].title/h3p stylefont-size: 18px;留言arr[0].message/pp stylefont-size: 18px;color: rgb(67, 238, 238);回复arr[0].answer/pp stylefont-size: 15px;color: burlywood;留言时间arr[0].updatetime/p/divlayer.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 stylemargin: 5%;div stylemargin: 1%;span stylefont-size:17px标题 /spaninput typetext classtitle stylepadding: 5px;width:50%;/divdiv stylemargin: 1%;span stylefont-size:17px内容 /spantextarea name id cols50 rows10 classcontent/textarea/divdiv stylemargin: 1%;input typebutton value留言 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: aquamarine;input typebutton value取消 styleoutline: none;padding: 3px 6px;margin: 0 5px;background-color: rgb(146, 230, 245);/div/divlayer.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(); // 关闭当前弹窗 }); } });
})
