用户管理-ssm-02

最新推荐文章于 2022-06-05 16:31:36 发布

juiceda

最新推荐文章于 2022-06-05 16:31:36 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/juiceda/article/details/82563862

版权

/hz-ssm-cyp/WebContent/WEB-INF/jsp/user/list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--这里编写java代码，多行 -->
<%
	
	String path = request.getContextPath();
	out.println("path="+path);
%>
<style type="text/css">
	div{
	   /*  text-align: center; */
	}
	form{
		/* text-align: center; */
		border :1px solid;
		width:500px;
		height:300px;
		margin-left:100px;
	}
	form div{
		margin-top:10px;
		margin-left:10px;
	}
	
	form input ,form select{
		width:150px;
		margin-left:20px;
	}
	table ,table tr td{
		border : 1px solid;
	}
	
</style>
</head>
<body>
	<!-- 地址前面带/ 表示绝对路径   /hz-ssm;  ./hz-ssm:相对路径 -->
	<div style="text-align: center;">用户新增</div>
	<form id="addform" action="<%=path%>/user/add">
		<div>
			姓名：<input name="name" />
			登录名：<input name="loginId" />
		</div>
		<div>
			性别：<select name="sex">
					<option value="0">男</option>
					<option value="1">女</option>
				</select>
			用户年龄：<input name="age" />
			
		</div>
		<div>
			密码：<input name="password" type="password" />
			注册时间：<input name="registerTime" id="registerTime"/>
		</div>
		<div>
			状态：<select name="status">
					<option value="0">无效</option>
					<option value="1">有效</option>
			</select>
			角色：<select name="roleId">
					<option value="0">请选择角色</option>
			</select>
		</div>
		<div style="    text-align: center;">
		
			<button type="button" id="btn-save">保存</button>
			<button type="button" id="btn-reset">重置</button>
		</div>
	</form>
	<div style="margin-top:30px;margin-left:20px;">
		<table id="userTable">
			<thead>
				<tr>
					<td>选择</td>
					<td>id</td>
					<td>姓名</td>
					<td>登录名称</td>
					<td>性别</td>
					<td>年龄</td>
					<td>密码</td>
					<td>注册时间</td>
					<td>状态</td>
					<td>操作</td>
					<td>操作2</td>
				</tr>
			</thead>
			<tbody>
				
			
			</tbody>
		</table>
		
	</div>
	
<script type="text/javascript" src="<%=path%>/static/jquery/jquery-1.10.2.min.js"></script>	
<script type="text/javascript" src="<%=path%>/static/My97DatePicker/WdatePicker.js"></script>	
<script type="text/javascript">
	$("#registerTime").on("click",function(){
		WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'});
	});
	
	/* 动态获取角色 */
	$.ajax({
		url:"<%=path%>/role/query",
		/* url:"http://127.0.0.1:8080/hz-ssm/role/query", */
		type:"post",
		success:function(data){
			if(data.result){
				var html = "";
				$(data.result).each(function(){
					var op = "<option value='"+ this.id+"'>" + this.name +"</option>";
					html += op;
				})
				$("[name='roleId']").append(html);
			}
			
		}
	});
	
	function formatDate(t){
		var date = new Date(t);
		var strDate = date.getFullYear() +"-"+(date.getMonth() + 1)+"-"
		+ date.getDate()+" " +date.getHours()+":"+ date.getMinutes()+":" +date.getSeconds() ;
		return strDate;
	}
	
	/* 动态获取用户信息 */
	$.ajax({
		url:"<%=path%>/user/query",
		type:"post",
		success:function(data){
			debugger;
			if(data.result){
				var html = "";
				$(data.result).each(function(){
					html+="<tr>";
					html+="<td><input type ='checkbox' value ='"+ this.id+"'</input></td>";
					html+="<td>"+ this.id+"</td>";
					html+="<td>"+ this.name+"</td>";
					html+="<td>"+ this.loginId+"</td>";
					html+="<td>"+ (this.sex ==0?"男":"女") +"</td>";
					html+="<td>"+ this.age+"</td>";
					html+="<td>"+ this.password+"</td>";
					html+="<td>"+ formatDate(this.registerTime)+"</td>";
					html+="<td>"+ (this.status==0?"无效":"有效")+"</td>";
					html+="<td><button class='btn-del' value='"+this.id+"'>删除</button></td>";
					html+="<td><button class='btn-detail' value='"+this.id+"'>详情</button></td>";
					html+="</tr>"
				})
				
				$("#userTable").append(html);
			}
			
		}
	});
	/* 给所有详情按钮绑定事件 */
	$("table tbody").on("click",".btn-detail",function(){
		var that = $(this).parents("tr");
		var id = $(this).val();
		window.open("http://localhost:8080/hz-ssm-cyp/user/query?id="+id)
	})
	
	/* 给所有删除按钮绑定事件 */
	$("table tbody").on("click",".btn-del",function(){
		var that = $(this).parents("tr");
		var id = $(this).val();
		$.ajax({
			url:"<%=path%>/user/delete",
			data:{
				id:id
			},
			success:function(data){
				if(data.result == "success"){
					that.remove();
					alert("删除成功！")
				}
			}
		})
	})
	
	
	/* 给保存按钮绑定提交事件 */
	$("#btn-save").on("click",function(){
		/* 发送ajax请求到后端 */
		var data = {};
		/* 直接手动拼接数据 */
		data.name = $("[name='name']").val();
		data.loginId = $("[name='loginId']").val();
		data.sex = $("[name='sex']").val();
		data.age = $("[name='age']").val();
		data.password = $("[name='password']").val();
		data.registerTime = $("[name='registerTime']").val();
		data.status = $("[name='status']").val();
			
		/* 遍历表单里面所有的输入框，获取其数据，构造成json */
		/* $("#addform :input").each(function(){
			
			if($(this).attr("name")){
				data[$(this).attr("name")] = $(this).val();
			}
			
		}) */
		debugger;
		/* 注意相对路径和绝对路径问题 */
		$.ajax({
			url:"<%=path%>/user/add",
			type:"post",
			data:data,
			success:function(data){
				if(data.result == "success"){
					alert("新增成功");
				}
				
			},
			error:function(a,b,c){
				debugger;
			}
		});
		
	});
	
</script>
	
</body>
</html>

cn.dw.hz.servlet.TestServlet

/**
 *
 */
package cn.dw.hz.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @author aubrey
 * @date  下午2:38:26
 * 
 */
//@WebServlet("/test")
public class TestServlet  extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//		PrintWriter print = resp.getWriter();
//		print.write("hello");
		resp.getWriter().write("hello");
	}
	
	

}

/hz-ssm-cyp/WebContent/index.jsp (Echarts示例)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script src="./echarts.min.js"></script>
</head>
<body>
	welcome
	
	 <div id="main" style="width: 600px;height:400px;"></div>
	  <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
        		 xAxis: {
        		        type: 'category',
        		        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        		    },
        		    yAxis: {
        		        type: 'value'
        		    },
        		    series: [{
        		        data: [820, 932, 901, 934, 1290, 1330, 1320],
        		        type: 'line'
        		    }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>