初学者的java项目笔记-8.返回课程JSON数组

在/web/WEB-INF/jsp下新建course文件夹,在course里新建courseList.jsp

将下面的文件cv到新建的courseList.jsp里

 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<title>课程列表</title>
	<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../easyui/css/demo.css">
	<script type="text/javascript" src="../easyui/jquery.min.js"></script>
	<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../easyui/js/validateExtends.js"></script>
	<script type="text/javascript">
	$(function() {	
		//datagrid初始化 
	    $('#dataList').datagrid({ 
	        title:'课程列表', 
	        iconCls:'icon-more',//图标 
	        border: true, 
	        collapsible: false,//是否可折叠的 
	        fit: true,//自动大小 
	        method: "post",
	        url:"CourseServlet?method=CourseList&t="+new Date().getTime(),
	        idField:'id', 
	        singleSelect: true,//是否单选 
	        pagination: false,//分页控件 
	        rownumbers: true,//行号 
	        sortName:'id',
	        sortOrder:'DESC', 
	        remoteSort: false,
	        columns: [[  
				{field:'chk',checkbox: true,width:50},
 		        {field:'id',title:'ID',width:50, sortable: true},    
 		        {field:'name',title:'课程名称',width:200},
	 		]], 
	        toolbar: "#toolbar"
	    }); 
	   	
	    //设置工具类按钮
	    $("#add").click(function(){
	    	$("#addDialog").dialog("open");
	    });
	    //删除
	    $("#delete").click(function(){
	    	var selectRow = $("#dataList").datagrid("getSelected");
        	if(selectRow == null){
            	$.messager.alert("消息提醒", "请选择数据进行删除!", "warning");
            } else{
            	var courseid = selectRow.id;
            	$.messager.confirm("消息提醒", "将删除与课程相关的所有数据,确认继续?", function(r){
            		if(r){
            			$.ajax({
							type: "post",
							url: "CourseServlet?method=DeleteCourse",
							data: {courseid: courseid},
							success: function(msg){
								if(msg == "success"){
									$.messager.alert("消息提醒","删除成功!","info");
									//刷新表格
									$("#dataList").datagrid("reload");
								} else{
									$.messager.alert("消息提醒","删除失败!","warning");
									return;
								}
							}
						});
            		}
            	});
            }
	    });
	  	
	  	//设置添加窗口
	    $("#addDialog").dialog({
	    	title: "添加课程",
	    	width: 450,
	    	height: 250,
	    	iconCls: "icon-add",
	    	modal: true,
	    	collapsible: false,
	    	minimizable: false,
	    	maximizable: false,
	    	draggable: true,
	    	closed: true,
	    	buttons: [
	    		{
					text:'添加',
					plain: true,
					iconCls:'icon-book-add',
					handler:function(){
						var validate = $("#addForm").form("validate");
						if(!validate){
							$.messager.alert("消息提醒","请检查你输入的数据!","warning");
							return;
						} else{
							$.ajax({
								type: "post",
								url: "CourseServlet?method=AddCourse",
								data: $("#addForm").serialize(),
								success: function(msg){
									if(msg == "success"){
										$.messager.alert("消息提醒","添加成功!","info");
										//关闭窗口
										$("#addDialog").dialog("close");
										//清空原表格数据
										$("#add_name").textbox('setValue', "");
										//刷新
										$('#dataList').datagrid("reload");
									} else{
										$.messager.alert("消息提醒","添加失败!","warning");
										return;
									}
								}
							});
						}
					}
				},
				{
					text:'重置',
					plain: true,
					iconCls:'icon-book-reset',
					handler:function(){
						$("#add_name").textbox('setValue', "");
					}
				},
			]
	    });
	  	
	});
	</script>
</head>
<body>
	<!-- 数据列表 -->
	<table id="dataList" cellspacing="0" cellpadding="0"> 
	    
	</table> 
	<!-- 工具栏 -->
	<div id="toolbar">
		<div style="float: left;"><a id="add" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a></div>
			<div style="float: left;" class="datagrid-btn-separator"></div>
		<div><a id="delete" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-some-delete',plain:true">删除</a></div>
	</div>
	
	<!-- 添加数据窗口 -->
	<div id="addDialog" style="padding: 10px">  
    	<form id="addForm" method="post">
	    	<table cellpadding="8" >
	    		<tr>
	    			<td>课程名称:</td>
	    			<td><input id="add_name" style="width: 200px; height: 30px;" class="easyui-textbox" type="text" name="name" data-options="required:true, validType:'repeat_course', missingMessage:'不能为空'" /></td>
	    		</tr>
	    	</table>
	    </form>
	</div>
</body>
</html>

在/src/demo/servlet里新建course文件夹,并在course里新建CourseServlet

 代码如下

 修改admin.jsp里 

修改courseList.jsp

修改admin.jsp 

修改CourseServlet 

 先在/src/demo/model新建Course

代码如下

package demo.model;

public class Course {
    private Integer cid;
    private String courseName;

    public Integer getCid() {
        return cid;
    }

    public void setCid(Integer cid) {
        this.cid = cid;
    }

    public String getCourseName() {
        return courseName;
    }

    public void setCourseName(String courseName) {
        this.courseName = courseName;
    }
}

在/src/demo/dao里新建CourseDao

代码如下

package demo.dao;

import demo.model.Course;
import demo.utils.DBUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import java.sql.SQLException;
import java.util.List;

public class CourseDao {
    QueryRunner queryRunner = new QueryRunner(DBUtils.getDs());

    public List<Course> getAllCourses() throws SQLException {
        return queryRunner.query("select * from course",new BeanListHandler<>(Course.class));
    }
}

在/src/demo/service新建CourseService

代码如下

package demo.service;

import demo.dao.CourseDao;
import demo.model.Course;

import java.sql.SQLException;
import java.util.List;

public class CourseService {
    CourseDao courseDao = new CourseDao();
    public List<Course>grtAllCourses(){
        try {
            return courseDao.getAllCourses();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }
}

在CourseServlet写如下代码

运行用Postman测试一下

补全代码

CourseServlet

package demo.servlet.course;

import com.fasterxml.jackson.databind.ObjectMapper;
import demo.model.Course;
import demo.service.CourseService;

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 java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet(urlPatterns = "/course")
public class CourseServlet extends HttpServlet {

    CourseService courseService =new CourseService();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String action =req.getParameter("action");
        if ("page".equals(action)){
            //说明是来请求页面的
            req.getRequestDispatcher("/WEB-INF/jsp/course/courseList.jsp").forward(req,resp);
        }else if ("data".equals(action)){
            //说明是来请求json数据的
            //前端是一个表格,所以这里返回的是json数组,数组格式是[{xx:xx,xx:xx},{},{}]
            List<Course>list=courseService.grtAllCourses();
            ObjectMapper om=new ObjectMapper();
            String json=om.writeValueAsString(list);
            resp.setContentType("application/json;charset=utf-8");
            PrintWriter out= resp.getWriter();
            out.write(json);
        }

    }
}

courseList.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>课程列表</title>
    <link href='<c:url context="${pageContext.request.contextPath}" value="/easyui/themes/default/easyui.css"/>' rel="stylesheet" type="text/css" />
    <link href='<c:url context="${pageContext.request.contextPath}" value="/easyui/themes/icon.css"/>' rel="stylesheet" type="text/css" />
    <link href='<c:url context="${pageContext.request.contextPath}" value="/easyui/css/demo.css"/>' rel="stylesheet" type="text/css" />
    <script type="text/javascript" src='<c:url value="/easyui/jquery.min.js" context="${pageContext.request.contextPath}"/>'></script>
    <script type="text/javascript" src='<c:url value="/easyui/jquery.easyui.min.js" context="${pageContext.request.contextPath}"/>'></script>
    <script type="text/javascript" src='<c:url value="/easyui/js/validateExtends.js" context="${pageContext.request.contextPath}"/>'></script>




    <script type="text/javascript">
        $(function() {
            //datagrid初始化
            $('#dataList').datagrid({
                title:'课程列表',
                iconCls:'icon-more',//图标
                border: true,
                collapsible: false,//是否可折叠的
                fit: true,//自动大小
                method: "post",
                url:"CourseServlet?method=CourseList&t="+new Date().getTime(),
                idField:'id',
                singleSelect: true,//是否单选
                pagination: false,//分页控件
                rownumbers: true,//行号
                sortName:'id',
                sortOrder:'DESC',
                remoteSort: false,
                columns: [[
                    {field:'chk',checkbox: true,width:50},
                    {field:'id',title:'ID',width:50, sortable: true},
                    {field:'name',title:'课程名称',width:200},
                ]],
                toolbar: "#toolbar"
            });

            //设置工具类按钮
            $("#add").click(function(){
                $("#addDialog").dialog("open");
            });
            //删除
            $("#delete").click(function(){
                var selectRow = $("#dataList").datagrid("getSelected");
                if(selectRow == null){
                    $.messager.alert("消息提醒", "请选择数据进行删除!", "warning");
                } else{
                    var courseid = selectRow.id;
                    $.messager.confirm("消息提醒", "将删除与课程相关的所有数据,确认继续?", function(r){
                        if(r){
                            $.ajax({
                                type: "post",
                                url: "CourseServlet?method=DeleteCourse",
                                data: {courseid: courseid},
                                success: function(msg){
                                    if(msg == "success"){
                                        $.messager.alert("消息提醒","删除成功!","info");
                                        //刷新表格
                                        $("#dataList").datagrid("reload");
                                    } else{
                                        $.messager.alert("消息提醒","删除失败!","warning");
                                        return;
                                    }
                                }
                            });
                        }
                    });
                }
            });

            //设置添加窗口
            $("#addDialog").dialog({
                title: "添加课程",
                width: 450,
                height: 250,
                iconCls: "icon-add",
                modal: true,
                collapsible: false,
                minimizable: false,
                maximizable: false,
                draggable: true,
                closed: true,
                buttons: [
                    {
                        text:'添加',
                        plain: true,
                        iconCls:'icon-book-add',
                        handler:function(){
                            var validate = $("#addForm").form("validate");
                            if(!validate){
                                $.messager.alert("消息提醒","请检查你输入的数据!","warning");
                                return;
                            } else{
                                $.ajax({
                                    type: "post",
                                    url: "CourseServlet?method=AddCourse",
                                    data: $("#addForm").serialize(),
                                    success: function(msg){
                                        if(msg == "success"){
                                            $.messager.alert("消息提醒","添加成功!","info");
                                            //关闭窗口
                                            $("#addDialog").dialog("close");
                                            //清空原表格数据
                                            $("#add_name").textbox('setValue', "");
                                            //刷新
                                            $('#dataList').datagrid("reload");
                                        } else{
                                            $.messager.alert("消息提醒","添加失败!","warning");
                                            return;
                                        }
                                    }
                                });
                            }
                        }
                    },
                    {
                        text:'重置',
                        plain: true,
                        iconCls:'icon-book-reset',
                        handler:function(){
                            $("#add_name").textbox('setValue', "");
                        }
                    },
                ]
            });

        });
    </script>
</head>
<body>
<!-- 数据列表,这个就是课程列表的表格 -->
<table id="dataList" cellspacing="0" cellpadding="0">

</table>
<!-- 工具栏 -->
<div id="toolbar">
    <div style="float: left;"><a id="add" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a></div>
    <div style="float: left;" class="datagrid-btn-separator"></div>
    <div><a id="delete" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-some-delete',plain:true">删除</a></div>
</div>

<!-- 添加数据窗口 -->
<div id="addDialog" style="padding: 10px">
    <form id="addForm" method="post">
        <table cellpadding="8" >
            <tr>
                <td>课程名称:</td>
                <td><input id="add_name" style="width: 200px; height: 30px;" class="easyui-textbox" type="text" name="name" data-options="required:true, validType:'repeat_course', missingMessage:'不能为空'" /></td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>

admin.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>学生成绩管理系统 管理员后台</title>
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="bookmark" href="favicon.ico"/>
    <link href='<c:url context="${pageContext.request.contextPath}" value="/easyui/css/default.css"/>' rel="stylesheet" type="text/css" />
    <link href='<c:url context="${pageContext.request.contextPath}" value="/easyui/themes/default/easyui.css"/>' rel="stylesheet" type="text/css" />
    <link href='<c:url context="${pageContext.request.contextPath}" value="/easyui/themes/icon.css"/>' rel="stylesheet" type="text/css" />
    <script type="text/javascript" src='<c:url value="/easyui/jquery.min.js" context="${pageContext.request.contextPath}"/>'></script>
    <script type="text/javascript" src='<c:url value="/easyui/jquery.easyui.min.js" context="${pageContext.request.contextPath}"/>'></script>
    <script type="text/javascript" src='<c:url value="/easyui/js/outlook2.js" context="${pageContext.request.contextPath}"/>'></script>

    <script type="text/javascript">
        var _menus = {"menus":[
                {"menuid":"1","icon":"","menuname":"成绩统计分析",
                    "menus":[
                        {"menuid":"11","menuname":"考试列表","icon":"icon-exam","url":"../exam/examList.html"},
                    ]
                },
                {"menuid":"2","icon":"","menuname":"学生信息管理",
                    "menus":[
                        {"menuid":"21","menuname":"学生列表","icon":"icon-user-student","url":"../student/studentList.html"},
                    ]
                },
                {"menuid":"3","icon":"","menuname":"教师信息管理",
                    "menus":[
                        {"menuid":"31","menuname":"教师列表","icon":"icon-user-teacher","url":"../teacher/teacherList.html"},
                    ]
                },
                {"menuid":"4","icon":"","menuname":"基础信息管理",
                    "menus":[
                        {"menuid":"41","menuname":"年级列表","icon":"icon-world","url":"../grade/gradeList.html"},
                        {"menuid":"42","menuname":"班级列表","icon":"icon-house","url":"../class/clazzList.html"},
                        {"menuid":"43","menuname":"课程列表","icon":"icon-book-open","url":"/s/course?action=page"}
                    ]
                },
                {"menuid":"5","icon":"","menuname":"系统管理",
                    "menus":[
                        {"menuid":"51","menuname":"系统设置","icon":"icon-set","url":"../admin/adminPersonal.html"},
                    ]
                }
            ]};

    </script>

</head>
<body class="easyui-layout" style="overflow-y: hidden"  scroll="no">
<noscript>
    <div style=" position:absolute; z-index:100000; height:2046px;top:0px;left:0px; width:100%; background:white; text-align:center;">
        <img src="images/noscript.gif" alt='抱歉,请开启脚本支持!' />
    </div>
</noscript>
<div region="north" split="true" border="false" style="overflow: hidden; height: 30px;
        background: url(../images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%;
        line-height: 20px;color: #fff; font-family: Verdana, 微软雅黑,黑体">
    <span style="float:right; padding-right:20px;" class="head"><span style="color:red; font-weight:bold;">${loginUser.nickname}&nbsp;</span>您好&nbsp;&nbsp;&nbsp;<a href="SystemServlet?method=LoginOut" id="loginOut">安全退出</a></span>
    <span style="padding-left:10px; font-size: 16px; ">学生信息管理系统</span>
</div>
<div region="south" split="true" style="height: 30px; background: #D2E0F2; ">
    <div class="footer">Copyright &copy; Power By Mryang</div>
</div>
<div region="west" hide="true" split="true" title="导航菜单" style="width:180px;" id="west">
    <div id="nav" class="easyui-accordion" fit="true" border="false">
        <!--  导航内容 -->
    </div>

</div>
<div id="mainPanle" region="center" style="background: #eee; overflow-y:hidden">
    <div id="tabs" class="easyui-tabs"  fit="true" border="false" >
        <div title="欢迎使用" style="padding:20px;overflow:hidden; color:red; ">
            <p style="font-size: 50px; line-height: 60px; height: 60px;">${si.schoolName}</p>
            <p style="font-size: 25px; line-height: 30px; height: 30px;">欢迎使用学生成绩管理系统</p>
            <p>开发人员:${si.developer}</p>
            <p>开发周期:${si.devTime}</p>

            <hr />
            <h2>系统环境</h2>
            <p>系统环境:${si.osName}</p>
            <p>开发工具:${si.devTools}</p>
            <p>Java版本:${si.javaVersion}</p>
            <p>服务器:${si.tomcatVersion}</p>
            <p>数据库:${si.mysqlVersion}</p>
            <p>系统采用技术:${si.info}</p>
        </div>
    </div>
</div>

<iframe width=0 height=0 src="refresh.jsp"></iframe>

</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值