使用前后端分离的思想，设计与开发课程管理模块。

1、数据表设计

CREATE TABLE `course` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `code` VARCHAR(50) DEFAULT NULL,
  `name` VARCHAR(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=INNODB DEFAULT CHARSET=utf8

2、实验数据

insert  into `course`(`id`,`code`,`name`) values (1,'01','语文');
insert  into `course`(`id`,`code`,`name`) values (2,'02','数学');
insert  into `course`(`id`,`code`,`name`) values (3,'03','英语');
insert  into `course`(`id`,`code`,`name`) values (4,'04','物理');
insert  into `course`(`id`,`code`,`name`) values (5,'05','化学');

3、Java bean

public class Course {
	private int id;
	private String code;
	private String name;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

4、Servlet

public class CourseServlet extends HttpServlet{
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	Connection con=null;
	
	public void init(){
		try {
			super.init();
			Class.forName("com.mysql.jdbc.Driver"); 
			String url="jdbc:mysql://localhost:3306/my_db?useUnicode=true";
			url+="&characterEncoding=utf-8&serverTimezone=Asia/Shanghai"; 
			con=DriverManager.getConnection(url,"root","");
		} catch (ServletException e) {
			// TODO Auto-generated catch block
			System.out.println(e);
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			System.out.println(e);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			System.out.println(e);
		}
	}
	
	public void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		PreparedStatement pstmt=null; 
		ResultSet rs=null; 
		try {
			pstmt=con.prepareStatement("select * from course");
			rs=pstmt.executeQuery();
			List<Course> lst=new ArrayList<Course>();
			while(rs.next()){
				Course c=new Course();
				c.setId(rs.getInt("id"));
				c.setCode(rs.getString("code"));
				c.setName(rs.getString("name"));
				lst.add(c);
			}
			Map<String, Object> dataMap = new HashMap<String, Object>();
			dataMap.put("lst", lst);
			JSONObject jsonObject = JSONObject.fromObject(dataMap);
			String funString = request.getParameter("callback");
			response.setCharacterEncoding("UTF-8");
			PrintWriter writer = response.getWriter();
			writer.write(funString+"("+jsonObject+")");
			writer.close();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	public void destroy(){
		if(con!=null)
			try {
				con.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		super.destroy();
	}
}

5、前端js

function courseList(){
    $('#subject').html('课程管理');
    var htm='<div class="panel panel-default">';
    htm+='<div class="panel-heading">';
    htm+='<button class="btn btn-default fa fa-plus"> 添加</button>';
    htm+='</div>';
    htm+='<div class="panel-body">';
    htm+='<div class="table-responsive">';
    htm+='<table class="table table-striped table-bordered table-hover">';
    htm+='<thead>';
    htm+='<tr>';
    htm+='<th width="10%">#</th>';
    htm+='<th width="35%">课程编码</th>';
    htm+='<th width="35%">课程名称</th>';
    htm+='<th width="20%">操作</th>';
    htm+='</tr>';
    htm+='</thead>';
    htm+='<tbody id="courses"></tbody>';
    htm+='</tbody>';
    htm+='</table>';
    htm+='</div>';
    htm+='</div>';
    htm+='</div>';
    $.ajax({
        type:'GET',
        async:true,
        url:'/course',
        dataType:'jsonp',
        beforeSend:function(){
            $('#content').html(htm);
        },
        success:function(result){
            var lst=result.lst;
            for(var i=0;i<lst.length;i++){
                var tr='<tr>';
                tr+='<td>'+lst[i].id+'</td>';
                tr+='<td>'+lst[i].code+'</td>';
                tr+='<td>'+lst[i].name+'</td>';
                tr+='<td><button class="btn btn-default fa fa-edit"> 编辑</button>';
                tr+=' <button class="btn btn-default fa fa-times"> 删除</button></td>';
                tr+='</tr>';
                $('#courses').append(tr);
            }
        },
    });
}