沐暖沐

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

一、实现技术

前端技术：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




    
    
    主页面
    
    
    
	
    
    


    
    
    
        
            汽车保养管家中心
        
        
            登录 |
            注册
        
    
    

    
    
        
            首页
            
        
    
    

    
    
        
            
            
            
            
            
            
            
         
        
   
    
    

    
    
        
    
    

    
    
        系统创建时间：2024.1.13       
        联系方式：[email protected]
    
    

    
     
        TOP

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.data
		for(var i=0; i"+arr[i].column+"")
			$(".main").append(""+
        ""+
            ""+arr[i].column+""+
            "more+"+
        "")
        	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.data
			for(var i=0; i

")
				}
				if(i%2==0){
					$("#"+id).find(".right ul").append(""+
                        ""+
                            ""+
                                ""+arr[i].createtime.substring(8,10)+""+
                                ""+arr[i].createtime.substring(0,7)+""+
                            ""+
                            ""+
                                ""+cut_str(arr[i].title,10)+""+
                                ""+cut_str(arr[i].content,25)+""+
                            ""+
                        ""+
                    "")
				}else{
					$("#"+id).find(".left ul").append(""+
                        ""+
                            ""+
                                ""+arr[i].createtime.substring(8,10)+""+
                                ""+arr[i].createtime.substring(0,7)+""+
                            ""+
                            ""+
                                ""+cut_str(arr[i].title,10)+""+
                                ""+cut_str(arr[i].content,25)+""+
                            ""+
                        ""+
                    "")
				}
			}	
		},
		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.data
			var content = "";
			for(var i=0; i标题："+arr[i].title+""+
					        "内容："+arr[i].content+""+
					        "创建时间："+arr[i].createtime+"

"
			}
			content = content + ""
			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.data
			var content = "";
			for(var i=0; i标题："+arr[i].title+""+
					        "内容："+arr[i].content+""+
					        "创建时间："+arr[i].createtime+"

"
			}
			content = content + ""
			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 stub
		doGet(request, response);
	}

}

②后台管理主页面 main.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

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=4

function 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[i].id+""+
                ""+arr[i].username+""+
                ""+arr[i].carname+""+
                ""+arr[i].type+""+
                ""+arr[i].mantaincetime.substring(0,10)+""+
                ""+arr[i].updatetime.substring(0,10)+""+
                ""+
            "")
		}
	},
	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("首页")
		$(".page").append("上一页")
        for(var i=0;i"+(i+1)+"")
			}else{
				$(".page").append(""+(i+1)+"")
			}
		}
        $(".page").append("下一页")
        $(".page").append("尾页")
	},
	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.data
			var content = ""+
						        ""+
						            "车辆信息"+
						            "车主："+arr[0].username+""+
						            "汽车名称："+arr[0].carname+""+
						            "车辆型号："+arr[0].model+""+
						            "里程数："+arr[0].mileage+""+
						            "发动机排量："+arr[0].displace+""+
						            "生产年份："+arr[0].producetime.substring(0,10)+""+
						            "购买日期："+arr[0].buytime.substring(0,10)+""+
						            "车辆图："+
						            "备注："+arr[0].other+""+
						        ""+
						        ""+
						            "保养信息"+
						            "保养类型："+arr[0].type+""+
						            "车体保养："+arr[0].body+""+
						            "车内保养："+arr[0].inner+""+
						            "车体翻新："+arr[0].renovate+""+
						            "发动机保养："+arr[0].engine+""+
						            "零部件更换："+arr[0].component+""+
						            "清洗和维护："+arr[0].clear+""+
						            "其它："+arr[0].others+""+
						            "上次保养时间："+arr[0].mantaincetime.substring(0,10)+""+
						        ""+
						    ""+
						    ""+
						        "建议"+
						        ""+
						            ""+arr[0].advice+""+
						        ""+    
						    ""+
						    ""+
						        ""+
						    ""
			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

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[i].id+""+
	                ""+arr[i].column+""+
	                ""+arr[i].title+""+
	                ""+cut_str(arr[i].content,18)+""+
	                ""+arr[i].createtime.substring(0,10)+""+
	                ""+
	            "")
	     	}
		
	},
	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("首页")
		$(".page").append("上一页")
        for(var i=0;i"+(i+1)+"")
			}else{
				$(".page").append(""+(i+1)+"")
			}
		}
        $(".page").append("下一页")
        $(".page").append("尾页")
	},
	error:function(){
    	alert("查找失败")
    }
})
}

//加载栏目
function loadMenu(){
	$.ajax({
		url:"Admin?action=getMenu",
		type:"get",
		async:false,     //默认为异步请求，设置为同步
		success:function(value){
			var arr = value.data
			$(".colum").append("")
			for(var i=0; i"+arr[i].column+"")
			}
		},
		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 = true
	for(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 = ""+
			        ""+
			            "公告栏目： "+
			            ""+
			        ""+
			        ""+
			            "标题： "+
			            ""+
			        ""+
			        ""+
			            "内容： "+
			            ""+
			        ""+
			        ""+
			            ""+
			        ""
			    ""
		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.data
					for(var i=0; i"+arr[i].column+"")
					}
				},
				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 = ""+
						        ""+
						            "公告"+obj.id+""+
						        ""+
						        ""+
						            "公告栏目： "+
						            ""+
						        ""+
						        ""+
						            "标题： "+
						            ""+
						        ""+
						        ""+
						            "内容： "+
						            ""+obj.content+""+
						        ""+
						        ""+
						            "创建时间:"+obj.createtime+""+
						        ""+
						        ""+
						            ""+
						        ""
						    ""
			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.data
							for(var i=0; i"+arr[i].column+"")
							}
						},
						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 = ""+
						        ""+
						            "公告"+obj.id+""+
						        ""+
						        ""+
						            "公告栏目： "+obj.column+""+
						        ""+
						        ""+
						            "标题： "+obj.title+""+
						        ""+
						        ""+
						            "内容： "+obj.content+""+
						        ""+
						        ""+
						            "发布情况： "+str+""+
						        ""+
						        ""+
						            "创建时间:"+obj.createtime+""+
						        ""+
						        ""+
						            ""+
						        ""
						    ""
			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

message.js

//剪裁方法
function cut_str(str,len){
	if(str.length>len){
		str=str.substring(0,len)+"..."
	}
	return str
}

//页面大小
var pageSize=4

function 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[i].id+""+
                ""+arr[i].username+""+
                ""+arr[i].title+""+
                ""+cut_str(arr[i].message,16)+""+
                ""+arr[i].updatetime.substring(0,10)+""+
                ""+cut_str(arr[i].answer,16)+""+
                ""+
            "")
		}
	},
	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("首页")
		$(".page").append("上一页")
        for(var i=0;i"+(i+1)+"")
			}else{
				$(".page").append(""+(i+1)+"")
			}
		}
        $(".page").append("下一页")
        $(".page").append("尾页")
	},
	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.data
			var content = ""+
						    "标题："+arr[0].title+""+
						    "用户："+arr[0].username+""+
						    "留言："+arr[0].message+""+
						    "留言时间："+arr[0].updatetime+""+
						    "回复："+arr[0].answer+"
"+
						    ""+
						""
			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

records.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;   
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[i].id+""+
                ""+arr[i].carname+""+
                ""+arr[i].type+""+
                ""+arr[i].body+""+
                ""+arr[i].inner+""+
                ""+arr[i].renovate+""+
                ""+arr[i].engine+""+
                ""+arr[i].component+""+
                ""+arr[i].clear+""+
                ""+arr[i].others+""+
                ""+arr[i].mantaincetime.substring(0,10)+""+
                ""+
                ""+
            "")
		}
	},
	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("首页")
		$(".page").append("上一页")
        for(var i=0;i"+(i+1)+"")
			}else{
				$(".page").append(""+(i+1)+"")
			}
		}
        $(".page").append("下一页")
        $(".page").append("尾页")
	},
	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 = true
	for(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.data
			var	content = ""+
							"车辆信息"+
				            "汽车名称："+arr[0].carname+""+
				            "车辆型号："+arr[0].model+""+
				            "里程数："+arr[0].mileage+""+
				            "发动机排量："+arr[0].displace+""+
				            "生产年份："+arr[0].producetime.substring(0,10)+""+
				            "购买日期："+arr[0].buytime.substring(0,10)+""+
				            "车辆图："+
				            "备注："+arr[0].other+""
			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.data
			var content = ""
			for(var i=0;i保养信息"+id+""+
							        "暂时没有建议"+
							        "上次保养时间："+arr[i].mantaincetime.substring(0,10)+"
"
				}else{
					content = content + "保养信息"+(i+1)+""+
							        "建议："+arr[i].advice+""+
							        "上次保养时间："+arr[i].mantaincetime.substring(0,10)+"
"
				}
			}
			content = content + ""
			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 = ""+
			        ""+
			            "汽车名称： "+
			            ""+
			        ""+
			        ""+
			            "保养类型： "+
			            ""+
			        ""+
			        ""+
			            "车体保养： "+
			            ""+
			        ""+
			        ""+
			            "车内保养： "+
			            ""+
			        ""+
			        ""+
			            "车体翻新： "+
			            ""+
			        ""+
			         ""+
			            "发动机保养： "+
			             ""+
			        ""+
			        ""+
			            "零部件更换： "+
			            ""+
			        ""+
			        ""+
			            "清洗和维护： "+
			            ""+
			        ""+
			        ""+
			            "其它： "+
			            ""+
			        ""+
			        ""+
			            "上次保养时间： "+
			            ""+
			        ""+
			        ""+
			            ""+
			        ""
			    ""
	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.data
					for(var i=0; i"+arr[i].carname+"")
					}
				},
				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 = ""+
						        ""+
						            "汽车名称： "+
						            ""+
						        ""+
						        ""+
						            "保养类型： "+
						            ""+
						        ""+
						        ""+
						            "车体保养： "+
						            ""+
						        ""+
						        ""+
						            "车内保养： "+
						            ""+
						        ""+
						        ""+
						            "车体翻新： "+
						            ""+
						        ""+
						         ""+
						            "发动机保养： "+
						             ""+
						        ""+
						        ""+
						            "零部件更换： "+
						            ""+
						        ""+
						        ""+
						            "清洗和维护： "+
						            ""+
						        ""+
						        ""+
						            "其它： "+
						            ""+
						        ""+
						        ""+
						            "上次保养时间： "+
						            ""+
						        ""+
						        ""+
						            ""+
						        ""
						    ""
			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.data
							for(var i=0; i"+arr[i].carname+"")
							}
						},
						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

vehicle.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;   
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[i].id+""+
                ""+arr[i].carname+""+
                ""+arr[i].model+""+
                ""+arr[i].mileage+""+
                ""+arr[i].displace+""+
                ""+arr[i].producetime.substring(0,10)+""+
                ""+arr[i].buytime.substring(0,10)+""+
                ""+
                ""+arr[i].other+""+
                ""+
                ""+
            "")
		}
	},
	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("首页")
		$(".page").append("上一页")
        for(var i=0;i"+(i+1)+"")
			}else{
				$(".page").append(""+(i+1)+"")
			}
		}
        $(".page").append("下一页")
        $(".page").append("尾页")
	},
	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 = true
	for(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.data
			var content = ""
			for(var i=0;i保养信息"+(i+1)+""+
							        "保养类型："+arr[i].type+""+
							        "车体保养："+arr[i].body+""+
							        "车内保养："+arr[i].inner+""+
							        "车体翻新："+arr[i].renovate+""+
							        "发动机保养："+arr[i].engine+""+
							        "零部件更换："+arr[i].component+""+
							        "清洗和维护："+arr[i].clear+""+
							        "其它："+arr[i].others+""+
							        "上次保养时间："+arr[i].mantaincetime.substring(0,10)+"
"
			}
			content = content + ""
			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.data
			var content = ""
			for(var i=0;i保养信息"+(i+1)+""+
							        "暂时没有建议"+
							        "上次保养时间："+arr[i].mantaincetime.substring(0,10)+"
"
				}else{
					content = content + "保养信息"+(i+1)+""+
							        "建议："+arr[i].advice+""+
							        "上次保养时间："+arr[i].mantaincetime.substring(0,10)+"
"
				}
			}
			content = content + ""
			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 = ""+
			        ""+
			            "汽车名称： "+
			            ""+
			        ""+
			        ""+
			            "车辆型号： "+
			            ""+
			        ""+
			        ""+
			            "里程数： "+
			            ""+
			        ""+
			        ""+
			            "发动机排量： "+
			            ""+
			        ""+
			        ""+
			            "生产年份： "+
			            ""+
			        ""+
			         ""+
			            "购买日期： "+
			            ""+
			        ""+
			        ""+
			            "车辆图片： "+
			            ""+
            				""+
            				""+
            			""+
            			""+
			        ""+
			        ""+
			            "备注： "+
			            ""+
			        ""+
			        ""+
			            ""+
			        ""
			    ""
	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("")
							//给隐藏域设置值
							$(".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 = ""+
						        ""+
						            "汽车名称： "+
						            ""+
						        ""+
						        ""+
						            "车辆型号： "+
						            ""+
						        ""+
						        ""+
						            "里程数： "+
						            ""+
						        ""+
						        ""+
						            "发动机排量： "+
						            ""+
						        ""+
						        ""+
						            "生产年份： "+
						            ""+
						        ""+
						         ""+
						            "购买日期： "+
						            ""+
						        ""+
						        ""+
						            "车辆图片： "+
						            ""+
			            				""+
			            				""+
			            			""+
			            			""+
						        ""+
						        ""+
						            "备注： "+
						            ""+
						        ""+
						        ""+
						            ""+
						        ""
						    ""
				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("")
					//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("")
									//给隐藏域设置值
									$(".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

contact.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;   
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[i].id+""+
                ""+cut_str(arr[i].title,10)+""+
                ""+cut_str(arr[i].message,20)+""+
                ""+cut_str(arr[i].answer,20)+""+
                ""+arr[i].updatetime.substring(0,10)+""+
                ""+
            "")
		}
	},
	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("首页")
		$(".page").append("上一页")
        for(var i=0;i"+(i+1)+"")
			}else{
				$(".page").append(""+(i+1)+"")
			}
		}
        $(".page").append("下一页")
        $(".page").append("尾页")
	},
	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.data
			var content = ""+
						    "标题："+arr[0].title+""+
						    "留言："+arr[0].message+""+
						    "回复："+arr[0].answer+""+
						    "留言时间："+arr[0].updatetime+""+
						""
			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 = ""+
			        ""+
			            "标题： "+
			            ""+
			        ""+
			        ""+
			            "内容： "+
			            ""+
			        ""+
			        ""+
			            ""+
			        ""
			    ""
	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(); // 关闭当前弹窗  
	        });   
		}  
    });  
})

你可能感兴趣的:(eclipse,java)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
LocalDateTime 转 String igotyback java 开发语言
importjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;publicclassMain{publicstaticvoidmain(String[]args){//获取当前时间LocalDateTimenow=LocalDateTime.now();//定义日期格式化器DateTimeFormatterformat
Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类 qt 开发语言 sdl2 linux
需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java 算法华为 javascript
华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
Java 重写(Override)与重载(Overload) 叨唧唧的
Java重写(Override)与重载(Overload)重写(Override)重写是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变。即外壳不变，核心重写！重写的好处在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。重写方法不能抛出新的检查异常或者比被重写方法申明更加宽泛的异常。例如：父类的一个方法申明了一个检查异常IOExceptio
简单了解 JVM 记得开心一点啊 jvm
目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机
1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven Energet!c 开发语言
1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach
Java企业面试题3 马龙强_ java
1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分
JVM、JRE和 JDK：理解Java开发的三大核心组件 Y雨何时停T Java java
Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja
Java面试题精选：消息队列(二) 芒果不是芒 Java面试题精选 java kafka
一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会
白骑士的Java教学基础篇 2.5 控制流语句白骑士所长 Java 教学 java 开发语言
欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘
python语法——三目运算符 HappyRocking python python 三目运算符
在java中，有三目运算符，如：intc=(a>b)?a:b表示c取两者中的较大值。但是在python，不能直接这样使用，估计是因为冒号在python有分行的关键作用。那么在python中，如何实现类似功能呢？可以使用ifelse语句，也是一行可以完成，格式为：aifbelsec表示如果b为True，则表达式等于a，否则等于c。如：c=(aif(a>b)elseb)同样是完成了取最大值的功能。
ArrayList 源码解析程序猿进阶 Java基础 ArrayList List java 面试性能优化架构设计 idea
ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
Java爬虫框架（一）--架构设计狼图腾-狼之传说 java 框架 java 任务 html解析器存储电子商务
一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
Java：爬虫框架 dingcho Java java 爬虫
一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
python怎么将png转为tif_png转tif weixin_39977276
发国外的文章要求图片是tif，cmyk色彩空间的。大小尺寸还有要求。比如网上大神多，找到了一段代码，感谢！https://www.jianshu.com/p/ec2af4311f56https://github.com/KevinZc007/image2Tifimportjava.awt.image.BufferedImage;importjava.io.File;importjava.io.Fi
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
JAVA·一个简单的登录窗口 MortalTom java 开发语言学习
文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
WebMagic：强大的Java爬虫框架解析与实战 Aaron_945 Java java 爬虫开发语言
文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
JAVA学习笔记之23种设计模式学习 victorfreedom Java技术设计模式 android java 常用设计模式
博主最近买了《设计模式》这本书来学习，无奈这本书是以C++语言为基础进行说明，整个学习流程下来效率不是很高，虽然有的设计模式通俗易懂，但感觉还是没有充分的掌握了所有的设计模式。于是博主百度了一番，发现有大神写过了这方面的问题，于是博主迅速拿来学习。一、设计模式的分类总体来说设计模式分为三大类：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式，共七种：适配器
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
【Java】已解决：java.util.concurrent.CompletionException 屿小夏 java 开发语言
文章目录一、分析问题背景出现问题的场景代码片段二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项已解决：java.util.concurrent.CompletionException一、分析问题背景在Java并发编程中，java.util.concurrent.CompletionException是一种常见的运行时异常，通常在使用CompletableFuture进行异步计算时出现
设计模式之建造者模式(通俗易懂--代码辅助理解【Java版】） ok!ko 设计模式设计模式建造者模式 java
文章目录设计模式概述1、建造者模式2、建造者模式使用场景3、优点4、缺点5、主要角色6、代码示例：1）实现要求2）UML图3)实现步骤：1）创建一个表示食物条目和食物包装的接口2）创建实现Packing接口的实体类3）创建实现Item接口的抽象类，该类提供了默认的功能4）创建扩展了Burger和ColdDrink的实体类5）创建一个Meal类，带有上面定义的Item对象6）创建一个MealBuil
关于旗正规则引擎规则中的上传和下载问题何必如此文件下载压缩 jsp 文件上传
文件的上传下载都是数据流的输入输出，大致流程都是一样的。一、文件打包下载 1.文件写入压缩包 string mainPath="D:\upload\"; 下载路径 string tmpfileName=jar.zip; &n
【Spark九十九】Spark Streaming的batch interval时间内的数据流转源码分析 bit1129 Stream
以如下代码为例（SocketInputDStream）： Spark Streaming从Socket读取数据的代码是在SocketReceiver的receive方法中，撇开异常情况不谈(Receiver有重连机制，restart方法，默认情况下在Receiver挂了之后，间隔两秒钟重新建立Socket连接)，读取到的数据通过调用store(textRead)方法进行存储。数据
spark master web ui 端口8080被占用解决方法 daizj 8080 端口占用 spark master web ui
spark master web ui 默认端口为8080，当系统有其它程序也在使用该接口时，启动master时也不会报错，spark自己会改用其它端口，自动端口号加1，但为了可以控制到指定的端口，我们可以自行设置，修改方法： 1、cd SPARK_HOME/sbin 2、vi start-master.sh 3、定位到下面部分
oracle_执行计划_谓词信息和数据获取周凡杨 oracle 执行计划
oracle_执行计划_谓词信息和数据获取(上) 一：简要说明在查看执行计划的信息中，经常会看到两个谓词filter和access，它们的区别是什么，理解了这两个词对我们解读Oracle的执行计划信息会有所帮助。简单说，执行计划如果显示是access，就表示这个谓词条件的值将会影响数据的访问路径（表还是索引），而filter表示谓词条件的值并不会影响数据访问路径，只起到
spring中datasource配置 g21121 dataSource
datasource配置有很多种，我介绍的一种是采用c3p0的，它的百科地址是： http://baike.baidu.com/view/920062.htm  <bean name="propertiesConfig" class="org.springframework.b
web报表工具FineReport使用中遇到的常见报错及解决办法（三）老A不折腾 finereport FAQ 报表软件
这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。 1、repeated column width is largerthan paper width：这个看这段话应该是很好理解的。比如做的模板页面宽度只能放
mysql 用户管理墙头上一根草 linux mysql user
1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户mysql> insert into mysql.user(Host,User,Password) values(‘localhost’,'jeecn’,password(‘jeecn’));//刷新系统权限表mysql>flush privileges;这样就创建了一个名为：
关于使用Spring导致c3p0数据库死锁问题 aijuans spring Spring 入门 Spring 实例 Spring3 Spring 教程
这个问题我实在是为整个 springsource 的员工蒙羞如果大家使用 spring 控制事务，使用 Open Session In View 模式， com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.
百度词库联想 annan211 百度
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title&g
int数据与byte之间的相互转换实现代码百合不是茶位移 int转byte byte转int 基本数据类型的实现
在BMP文件和文件压缩时需要用到的int与byte转换,现将理解的贴出来; 主要是要理解;位移等概念 http://baihe747.iteye.com/blog/2078029 int转byte; byte转int; /** * 字节转成int,int转成字节 * @author Administrator *
简单模拟实现数据库连接池 bijian1013 java thread java多线程简单模拟实现数据库连接池
简单模拟实现数据库连接池实例1： package com.bijian.thread; public class DB { //private static final int MAX_COUNT = 10; private static final DB instance = new DB(); private int count = 0; private i
一种基于Weblogic容器的鉴权设计 bijian1013 java weblogic
服务器对请求的鉴权可以在请求头中加Authorization之类的key，将用户名、密码保存到此key对应的value中，当然对于用户名、密码这种高机密的信息，应该对其进行加砂加密等，最简单的方法如下： String vuser_id = "weblogic"; String vuse
【RPC框架Hessian二】Hessian 对象序列化和反序列化 bit1129 hessian
任何一个对象从一个JVM传输到另一个JVM，都要经过序列化为二进制数据(或者字符串等其他格式，比如JSON)，然后在反序列化为Java对象，这最后都是通过二进制的数据在不同的JVM之间传输(一般是通过Socket和二进制的数据传输)，本文定义一个比较符合工作中。 1. 定义三个POJO Person类 package com.tom.hes
【Hadoop十四】Hadoop提供的脚本的功能 bit1129 hadoop
1. hadoop-daemon.sh 1.1 启动HDFS ./hadoop-daemon.sh start namenode ./hadoop-daemon.sh start datanode 通过这种逐步启动的方式，比start-all.sh方式少了一个SecondaryNameNode进程，这不影响Hadoop的使用，其实在 Hadoop2.0中，SecondaryNa
中国互联网走在“灰度”上 ronin47 管理灰度
中国互联网走在“灰度”上（转）文/孕峰第一次听说灰度这个词，是任正非说新型管理者所需要的素质。第二次听说是来自马化腾。似乎其他人包括马云也用不同的语言说过类似的意思。灰度这个词所包含的意义和视野是广远的。要理解这个词，可能同样要用“灰度”的心态。灰度的反面，是规规矩矩，清清楚楚，泾渭分明，严谨条理，是决不妥协，不转弯，认死理。黑白分明不是灰度，像彩虹那样
java-51-输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 bylijinnan java
public class PrintMatrixClockwisely { /** * Q51.输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。例如：如果输入如下矩阵： 1 2 3 4 5 6 7 8 9
mongoDB 用户管理开窍的石头 mongoDB用户管理
1:添加用户第一次设置用户需要进入admin数据库下设置超级用户（use admin） db.addUsr({user:'useName',pwd:'111111',roles:[readWrite,dbAdmin]}); 第一个参数用户的名字第二个参数
[游戏与生活]玩暗黑破坏神3的一些问题 comsci 生活
暗黑破坏神3是有史以来最让人激动的游戏。。。。但是有几个问题需要我们注意玩这个游戏的时间，每天不要超过一个小时，且每次玩游戏最好在白天结束游戏之后，最好在太阳下面来晒一下身上的暗黑气息，让自己恢复人的生气 &nb
java 二维数组如何存入数据库 cuiyadll java
using System; using System.Linq; using System.Text; using System.Windows.Forms; using System.Xml; using System.Xml.Serialization; using System.IO; namespace WindowsFormsApplication1 {
本地事务和全局事务Local Transaction and Global Transaction(JTA) darrenzhu java spring local global transaction
Configuring Spring and JTA without full Java EE http://spring.io/blog/2011/08/15/configuring-spring-and-jta-without-full-java-ee/ Spring doc -Transaction Management http://docs.spring.io/spri
Linux命令之alias - 设置命令的别名，让 Linux 命令更简练 dcj3sjt126com linux alias
用途说明设置命令的别名。在linux系统中如果命令太长又不符合用户的习惯，那么我们可以为它指定一个别名。虽然可以为命令建立“链接”解决长文件名的问题，但对于带命令行参数的命令，链接就无能为力了。而指定别名则可以解决此类所有问题【1】。常用别名来简化ssh登录【见示例三】，使长命令变短，使常用的长命令行变短，强制执行命令时询问等。常用参数格式：alias 格式：ali
yii2 restful web服务[格式响应] dcj3sjt126com PHP yii2
响应格式当处理一个 RESTful API 请求时，一个应用程序通常需要如下步骤来处理响应格式：确定可能影响响应格式的各种因素，例如媒介类型，语言，版本，等等。这个过程也被称为 content negotiation。资源对象转换为数组，如在 Resources 部分中所描述的。通过 [[yii\rest\Serializer]]
MongoDB索引调优（2）——[十] eksliang mongodb MongoDB索引优化
转载请出自出处：http://eksliang.iteye.com/blog/2178555 一、概述上一篇文档中也说明了，MongoDB的索引几乎与关系型数据库的索引一模一样，优化关系型数据库的技巧通用适合MongoDB，所有这里只讲MongoDB需要注意的地方二、索引内嵌文档可以在嵌套文档的键上建立索引，方式与正常
当滑动到顶部和底部时，实现Item的分离效果的ListView gundumw100 android
拉动ListView，Item之间的间距会变大，释放后恢复原样； package cn.tangdada.tangbang.widget; import android.annotation.TargetApi; import android.content.Context; import android.content.res.TypedArray; import andr
程序员用HTML5制作的爱心树表白动画 ini JavaScript jquery Web html5 css
体验效果：http://keleyi.com/keleyi/phtml/html5/31.htmHTML代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <ti
预装windows 8 系统GPT模式的ThinkPad T440改装64位 windows 7旗舰版 kakajw ThinkPad 预装改装 windows 7 windows 8
该教程具有普遍参考性，特别适用于联想的机器，其他品牌机器的处理过程也大同小异。该教程是个人多次尝试和总结的结果，实用性强，推荐给需要的人！缘由小弟最近入手笔记本ThinkPad T440，但是特别不能习惯笔记本出厂预装的Windows 8系统，而且厂商自作聪明地预装了一堆没用的应用软件，消耗不少的系统资源（本本的内存为4G，系统启动完成时，物理内存占用比
Nginx学习笔记 mcj8089 nginx
一、安装nginx 1、在nginx官方网站下载一个包，下载地址是： http://nginx.org/download/nginx-1.4.2.tar.gz 2、WinSCP(ftp上传工
mongodb 聚合查询每天论坛链接点击次数 qiaolevip 每天进步一点点学习永无止境 mongodb 纵观千象
/* 18 */ { "_id" : ObjectId("5596414cbe4d73a327e50274"), "msgType" : "text", "sendTime" : ISODate("2015-07-03T08:01:16.000Z"
java术语（PO/POJO/VO/BO/DAO/DTO） Luob. DAO POJO DTO po VO BO
PO(persistant object) 持久对象在o/r 映射的时候出现的概念,如果没有o/r映射,就没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数据库的操作. VO(value object) 值对象通
算法复杂度 Wuaner Algorithm
Time Complexity & Big-O： http://stackoverflow.com/questions/487258/plain-english-explanation-of-big-o http://bigocheatsheet.com/ http://www.sitepoint.com/time-complexity-algorithms/

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

一、实现技术

二、项目描述

三、页面展示

四、关键代码展示

汽车保养管家中心

"+ ""+arr[i].column+""+ "more+"+ "

"+arr[i].createtime.substring(8,10)+"

"+cut_str(arr[i].title,10)+"

"+arr[i].createtime.substring(8,10)+"

"+cut_str(arr[i].title,10)+"

汽车保养管理系统

车辆信息

保养信息

建议

标题："+arr[0].title+"

车辆信息

保养信息"+(i+1)+"

保养信息"+(i+1)+"

标题："+arr[0].title+"

你可能感兴趣的:(eclipse,java)