:D 没有看过之前博文的人建议从第三篇开始阅读->>https://mp.csdn.net/console/editor/html/104677362
整个项目的代码会在完成这一系列博客后传至csdn下载或github~
照例有任何问题欢迎下方评论>3<
1 图片演示
①分类列表（listCategory.jsp）
②编辑分类(editCategory.jsp)
③增加分类(addCategory.jsp)
④删除分类（确认框）
2 详细分析
①该模块在左侧导航栏第三个管理的位置，相关具体代码在index.jsp中位置如下：
（index.jsp的总体代码在上一篇博文，在此不赘述）
图示如下：
表面是由listCategory.jsp和addCategory.jsp页面组成，实则还有editCategory.jsp
②数据库设计
（总的数据库设计见之前博文）
|
属性名 |
类型 |
长度 |
允许空 |
是否主键 |
说明 |
|
category_id |
int |
10 |
NOT NULL |
主键 |
分类id |
|
catagory_name |
varchar |
20 |
NOT NULL |
|
分类名称 |
|
parent_id |
int |
10 |
NOT NULL |
|
父分类id |
③总体分析步骤
第一步：Category的实体类（pojo层），与数据库表中字段相对应
第二步：Category的相关Dao层接口（先思考需要实现那些内容，再写接口，需要再添加）
第三步：CategoryDao接口的实现类CategoryDaoImpl类
第四步：listCategory.jsp的页面，写相关的servlet层接口，如listPageCategory接口
第五步：editCategory.jsp的页面，接收传过来的参数，写相关的servlet层接口，如editCategory接口
（且该页面是借助listCategory.jsp页面的弹出层来完成的）
第六步：addCategory.jsp的页面，写相关的servlet层接口，如listCategory接口
（以下详细介绍各个页面以及数据交互的过程）
④listCategory.jsp与editCategory.jsp设计
（1）使用layui里的经典的数据表格布局，这就对他从后台传回来的数据有一定的要求，官网要求如下：
（详细介绍及扩展部分见官网：https://www.layui.com/doc/modules/table.htm l）
（2）layui的table布局中有三种渲染方法：方法渲染、自动渲染、静态表格渲染，这里使用的是方法渲染，要求如下：
cols里面各个field对应于每一列的表头，其field的值应该与后台传过来的属性变量名是一样的，这里我的命名和数据库中字段名也是一样的
url对应的是servlet层的数据接口地址
（3）利用layui的templet来实现field为'parent_id'的数据模板化
（比如，传过来的数据是0，然后我要让他变成无，需要两步。）
第一步：创建一个模板，注意类型是text/html
代码图示如下：
第二步：增加一个属性在你想要模块上的那个field上，注意id要对应。
代码图示如下：
（4）listCatrgory.jsp渲染数据表格时还使用了分页效果，相关步骤如下：
第一步：设置开启table的分页效果（page:true）
第二步：servlet层先获取limit（默认10）和page（默认1）参数值
第三步：再通过CategoryDaoImpl.java的getPageCategory(page,limit)方法返回相关分类每页数据，是ArrayList对象
代码图示如下：
第四步：再通过CategoryDaoImpl.java里getAllCategory()方法返回分类总数据，是ArrayList对象
(在这里其实只需返回一个int变量，因为后来还需用它，所以我返回ArrayList对象)
代码图示如下：
第五步：前台回调数据实现分类列表时，具体来说接收的是符合一定规则的json数据，这里我掌握了两个方法
First Method：3.1 先使用map集合，保存相关数据格式------>>
3.2 再利用google的json解析包将map格式转为string格式，google的json包目录如下
3.3 然后返回给前台，ajax回调时选择json格式就会自动把其转换为json格式
（这里要注意它使用的是PrintWriter对象的write方法写到前台）
Second Method: 也是先使用map存储数据，再利用json的jar包，首先你需要如下jar包:
代码图示如下：
（这里要注意它使用的是PrintWriter对象的print方法写到前台）
（4）综上，listAdm.jsp页面的详细步骤如下：
第一步：运用方法渲染的格式，其table的id值与渲染表格的elem值要对应
图示如下：
第二步：使用layui的数据表格table结构，在url里写入对应的数据接口（分类列表的数据接口）
图示如下：
第三步：写入对应的工具条模板，就相当于操作模板，注意script的type值
图示如下：
第四步：监听工具条，layEvent对应
举例如下：
第五步：(1)点击某一项的编辑按钮时，它就触发监听工具条的事件,通过layEvent确定触发的是“编辑”事件
(2)利用弹出层的content属性，走到servlet层，同时将category_id传回去
(3)它获取category_id是通过data.category_id的方法
(因为之前渲染数据时数据接口返回的值都存在data里头)
图示如下：
(4)4.1它先走selectServlet这个控制层的接口，
4.2然后从Dao层的getOneCategory()通过category_id读取对应的一条管理员的数据，
4.3返回的是Category对象，将其对应信息保存在request属性中，
4.4最后1再将数据转发到editCategory.jsp页面
图示如下：
(5)编辑弹出层主要是利用layui的form组件，利用getAttribute()方法获得上一步存储的属性值
第六步：(1)点击某一项的删除按钮时，它就触发监听工具条的事件,通过layEvent确定触发的是“删除”事件
(2)利用layui提供的confirm弹出对话框，提示用户执行下一步操作
(3)当用户点击“确定”时，先删除对应行的DOM结构（假删除），
再通过ajax向服务端发送删除指令，调用delCategory接口，传过去category_id（真删除），
(4)table重新加载——table.reload('demo');
其中demo是table的id名
图示如下：
(5)在delCategory接口中，先获得传过来的id，再利用Dao层的delete(int id)方法，返回值为布尔值
(6)将这个boolean值返回给前端，然后前端通过这个值判断是否删除成功
图示如下：
⑤addCategory.jsp的设计
（1）addCategory.jsp主要是以layui里的form表单实现分类的增加，设计为一个下拉框、输入框、重置按钮和提交按钮
图示如下：
（2）addCategory.jsp的下拉框是获取父类别名称，这里设计的是一个无限分类的，当然也可以满足二层分类需求
第一步：首先设计这个下拉框，默认有一个选项，选中这个选项的就代表是顶层分类，我给其id值设为0
图示如下：
第二步：在打开这个页面时，用ajax要动态获取后台传过来的数据，这里主要走listCategory这个接口
图示如下：
第三步：后台返回的数据result是一个object类型，参数如下：
（3）用户点击提交后的处理过程，如图所示：
3 具体代码
①Category.java
package pojo;
public class Category {
private int category_id;
private int parent_id;
private String category_name;
public int getCategory_id() {
return category_id;
}
public void setCategory_id(int category_id) {
this.category_id = category_id;
}
public int getParent_id() {
return parent_id;
}
public void setParent_id(int parent_id) {
this.parent_id = parent_id;
}
public String getCategory_name() {
return category_name;
}
public void setCategory_name(String category_name) {
this.category_name = category_name;
}
}
②CategoryDao.java
package dao;
import java.util.ArrayList;
import pojo.Category;
public interface CategoryDao {
//1.增加分类
public boolean insertCategory(int parent_id,String category_name);
//2.获取所有的分类
public ArrayList<Category> getAllCategory();
//3.根据id到数据库中查询分类
public Category getOneCategory(int category_id);
//4.修改分类
public boolean update(Category category);
//5.删除分类
public boolean delete(int category_id);
//6.获得一级目录
public ArrayList<Category> getFirstCategory();
//7.获得二级目录
public ArrayList<Category> getSecondCategory(int parent_id);
//8.获取分页分类
public ArrayList<Category> getPageCategory(int page,int limit);
//9.通过子分类查父分类
public int getParentCategory(int category_id);
}
③CategoryDaoImpl.java
package dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import util.DBUtil;
import pojo.Adm;
import pojo.Category;
import pojo.ChangePage;
public class CategoryDaoImpl implements CategoryDao {
//1.增加分类
@Override
public boolean insertCategory(int parent_id,String category_name) {
//System.out.println("1.你走了我这个方法哦");
Connection conn = DBUtil.getConnection();
// 在数据库中添加记录
String sql = "insert into dai_category(parent_id,category_name) values(?,?)";
// 预编译
PreparedStatement prep;
try {
prep = conn.prepareStatement(sql);
prep.setInt(1, parent_id);
prep.setString(2, category_name);
prep.executeUpdate();
return true;
} catch (SQLException e) {
e.printStackTrace();
return false;
} finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
}
//2.获取所有的分类
@Override
public ArrayList<Category> getAllCategory() {
ArrayList<Category> c = new ArrayList<Category>();
Connection conn = DBUtil.getConnection();
// 在数据库中添加记录
String sql = "select * from dai_category";
// 预编译
try {
PreparedStatement prep = conn.prepareStatement(sql);
ResultSet rst = prep.executeQuery();
while (rst.next()) {
Category c1 = new Category();
c1.setCategory_id(rst.getInt(1));
c1.setCategory_name(rst.getString("category_name"));
c1.setParent_id(rst.getInt("parent_Id"));
c.add(c1);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
return c;
}
//3.根据id到数据库中查询分类
@Override
public Category getOneCategory(int category_id) {
//System.out.println("又到了万众瞩目的测试环节啦！！！");
Category c = null;
Connection conn = DBUtil.getConnection();
// 在数据库中修改记录
String sql = "select * from dai_category where category_id = ?";
// 预编译
PreparedStatement prep;
try {
prep = conn.prepareStatement(sql);
prep.setInt(1,category_id);
ResultSet rst = prep.executeQuery();
c = new Category();
if(rst.next()) {
c.setCategory_id(rst.getInt("category_id"));
c.setCategory_name(rst.getString("category_name"));
c.setParent_id(rst.getInt("parent_id"));
return c;
}
}catch(Exception e) {
e.printStackTrace();
}finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
return c;
}
//4.修改分类
@Override
public boolean update(Category category) {
Connection conn = DBUtil.getConnection();
// 在数据库中修改记录
String sql = "update dai_category set category_name = ?,parent_id = ? where category_id=?";
// 预编译
PreparedStatement prep;
try {
prep = conn.prepareStatement(sql);
prep.setString(1,category.getCategory_name());
prep.setInt(2, category.getParent_id());
prep.setInt(3, category.getCategory_id());
prep.executeUpdate();
return true;
} catch (SQLException e) {
e.printStackTrace();
return false;
}finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
}
//5.删除分类
@Override
public boolean delete(int category_id) {
Connection conn = DBUtil.getConnection();
// 在数据库中删除记录
String sql = "delete from dai_category where category_id = ?";
// 预编译
PreparedStatement prep;
try {
prep = conn.prepareStatement(sql);
prep.setInt(1, category_id);
prep.executeUpdate();
return true;
} catch (SQLException e) {
e.printStackTrace();
return false;
} finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
}
//获得一级目录
@Override
public ArrayList<Category> getFirstCategory() {
System.out.println("获得一级目录");
ArrayList<Category> c = new ArrayList<Category>();
Connection conn = DBUtil.getConnection();
// 在数据库中添加记录
String sql = "select * from dai_category where parent_id = 0";
// 预编译
try {
PreparedStatement prep = conn.prepareStatement(sql);
ResultSet rst = prep.executeQuery();
while (rst.next()) {
Category c1 = new Category();
c1.setCategory_id(rst.getInt(1));
c1.setCategory_name(rst.getString("category_name"));
c1.setParent_id(rst.getInt("parent_Id"));
c.add(c1);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
System.out.println("一级目录下有"+c.size()+"条数据");
return c;
}
//获得二级目录
@Override
public ArrayList<Category> getSecondCategory(int parent_id) {
System.out.println("获得二级目录");
ArrayList<Category> c = new ArrayList<Category>();
Connection conn = DBUtil.getConnection();
// 在数据库中添加记录
String sql = "select * from dai_category where parent_id = ?";
// 预编译
try {
PreparedStatement prep = conn.prepareStatement(sql);
prep.setInt(1, parent_id);
ResultSet rst = prep.executeQuery();
while (rst.next()) {
Category c1 = new Category();
c1.setCategory_id(rst.getInt(1));
c1.setCategory_name(rst.getString("category_name"));
c1.setParent_id(rst.getInt("parent_Id"));
c.add(c1);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
return c;
}
@Override
public ArrayList<Category> getPageCategory(int page, int limit) {
ArrayList<Category> c = new ArrayList<Category>();
ChangePage cp = new ChangePage();
cp.setLimit(limit);
cp.setPage(page);
int startRow = cp.getStartRow();
Connection conn = DBUtil.getConnection();
// 在数据库中添加记录
String sql = "select * from dai_category limit "+startRow+","+limit+"";
// 预编译
try {
PreparedStatement prep = conn.prepareStatement(sql);
ResultSet rst = prep.executeQuery();
while (rst.next()) {
Category c1 = new Category();
c1.setCategory_id(rst.getInt(1));
c1.setCategory_name(rst.getString("category_name"));
c1.setParent_id(rst.getInt("parent_Id"));
c.add(c1);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
return c;
}
@Override
public int getParentCategory(int category_id) {
Category c = null;
Connection conn = DBUtil.getConnection();
// 在数据库中修改记录
String sql = "select * from dai_category where category_id = ?";
// 预编译
PreparedStatement prep;
try {
prep = conn.prepareStatement(sql);
prep.setInt(1,category_id);
ResultSet rst = prep.executeQuery();
c = new Category();
if(rst.next()) {
c.setCategory_id(rst.getInt("category_id"));
c.setCategory_name(rst.getString("category_name"));
c.setParent_id(rst.getInt("parent_id"));
return c.getParent_id();
}
}catch(Exception e) {
e.printStackTrace();
}finally {
try {
DBUtil.closeConnection(conn);
} catch (SQLException e) {
e.printStackTrace();
}
}
return c.getParent_id();
}
}
④ListPageCategory.java
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
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 dao.CategoryDao;
import dao.CategoryDaoImpl;
import net.sf.json.JSONObject;
import pojo.Category;
import util.JsonUtil;
/**
* Servlet implementation class ListPageCategory
*/
@WebServlet("/listPageCategory")
public class ListPageCategory extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ListPageCategory() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int limit = 0;
int page = 0;
PrintWriter writer = null;
try {
limit = Integer.parseInt(request.getParameter("limit"));
page = Integer.parseInt(request.getParameter("page"));
CategoryDao c = new CategoryDaoImpl();
ArrayList<Category> aList = c.getAllCategory();
ArrayList<Category> aPageList = c.getPageCategory(page, limit);
Map<String, Object> map = new HashMap<String, Object>();
map.put("code", 0);
map.put("msg", "");
map.put("count", aList.size());
map.put("data", aPageList);
// String jsonStr = JsonUtil.beanToString(map);
// writer= response.getWriter();
// writer.write(jsonStr);
writer = response.getWriter();
JSONObject jsonStr = JSONObject.fromObject(map);
writer.print(jsonStr);
}catch(Exception e) {
e.printStackTrace();
}finally {
writer.flush();
writer.close();
}
}
/**
* @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);
}
}
⑤ListCategory.java
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
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 javax.xml.ws.ResponseWrapper;
import dao.CategoryDao;
import dao.CategoryDaoImpl;
import pojo.Category;
import util.JsonUtil;
/**
* Servlet implementation class ListCategory
*/
@WebServlet("/listCategory")
public class ListCategory extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ListCategory() {
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("application/json;charset=utf-8");
PrintWriter writer = null;
try {
CategoryDao c = new CategoryDaoImpl();
ArrayList<Category> aList = c.getAllCategory();
Map<String, Object> map = new HashMap<String, Object>();
map.put("code", 0);
map.put("msg", "");
map.put("count", aList.size());
map.put("data", aList);
String jsonStr = JsonUtil.beanToString(map);
writer= response.getWriter();
writer.write(jsonStr);
}catch(Exception e) {
e.printStackTrace();
}finally {
writer.flush();
writer.close();
}
}
/**
* @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);
}
}
⑥SelectServlet.java
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
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 dao.CategoryDao;
import dao.CategoryDaoImpl;
import pojo.Category;
import util.JsonUtil;
/**
* Servlet implementation class SelectServlet
*/
@WebServlet("/selectServlet")
public class SelectServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public SelectServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
int category_id = Integer.parseInt(request.getParameter("category_id"));
CategoryDao c = new CategoryDaoImpl();
Category c1 = c.getOneCategory(category_id);
if(c1!=null) {
request.setAttribute("category_id", c1.getCategory_id());
request.setAttribute("category_name",c1.getCategory_name());
request.setAttribute("parent_id", c1.getParent_id());
request.getRequestDispatcher("category/editCategory.jsp").forward(request, response);//转发到成功页面
}
} catch (Exception e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
⑦AddServlet.java
package 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;
import dao.CategoryDao;
import dao.CategoryDaoImpl;
/**
* Servlet implementation class AddServlet
*/
@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AddServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String result = "false";
PrintWriter writer = null;
try {
int parent_id = Integer.parseInt(request.getParameter("parent_id"));
String category_name = request.getParameter("category_name");
CategoryDao c = new CategoryDaoImpl();
boolean flag = c.insertCategory(parent_id, category_name);
if(flag) {
result="true";
}
writer = response.getWriter();
writer.write(result);
}catch(Exception e) {
e.printStackTrace();
}finally {
writer.flush();
writer.close();
}
}
/**
* @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);
}
}
⑧DelCategory.java
package 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;
import dao.CategoryDao;
import dao.CategoryDaoImpl;
/**
* Servlet implementation class DelCategory
*/
@WebServlet("/delCategory")
public class DelCategory extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DelCategory() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String result = "false";
PrintWriter writer = null;
try {
int id = Integer.parseInt(request.getParameter("category_id"));
CategoryDao c = new CategoryDaoImpl();
boolean flag = c.delete(id);
if(flag) {
result="true";
}
writer = response.getWriter();
writer.write(result);
}catch(Exception e) {
e.printStackTrace();
}finally {
writer.flush();
writer.close();
}
}
/**
* @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);
}
}
⑨addCategory.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="../base.jsp"%>
<!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">
<link href="../css/base.css" rel="stylesheet" media="screen" />
<title>增加分类</title>
</head>
<body>
<div id="box">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">父类别名称:</label>
<div class="layui-input-block">
<select name="city" lay-verify="" id="pid">
<option id="0">请选择父类别:可不选</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">类别名称:</label>
<div class="layui-input-inline">
<input type="text" name="title" lay-verify="title"
autocomplete="off" placeholder="请输入类别名称" class="layui-input"
id="category_name" name="category_name">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-btn" lay-submit="" lay-filter="demo1" id="sub">立即提交</div>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
layui.use([ 'layer' ], function() {
// 点击提交执行的内容
$('#sub').click(function() {
//或者取长度
if ($("#category_name").val() == "") {
layer.msg("类别不能输入为空哦！", {
icon : 2
});
return;
} else {
var str = $("#pid :selected").attr("id");
$.post("${ctx}/addServlet",//后台地址
{
parent_id:str,
category_name:$("#category_name").val()
},//需要提交到后台的数据
function(result) {
//alert(typeof result);
if (result) {
//添加成功
layer.msg("添加成功", {
icon : 1
});
}else{
alert("难道我是大笨蛋？")
}
},//回调函数
"json");
}
//清空表单
$("#category_name").val("");
});
});
</script>
<script type="text/javascript">
function getDataList() {
$.post("${ctx}/listCategory", {}, function(result) {
console.log("result"+result);
with (result) {
console.log("---------");
console.log(result);
console.log(data);
for (var i = 0; i < data.length; i++) {
var option = "<option id="+data[i].category_id+">"
+ data[i].category_name + "</option>";
$("#pid").append(option);
layui.form.render('select');
}
}
}, "json");
$.ajaxSetup({cache:false});
}
layui.use('form', function() {
var form = layui.form;
getDataList();
form.render();
});
</script>
</body>
</html>
⑩editCategory.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file ="../base.jsp" %>
<!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>编辑分类</title>
</head>
<body>
<!-- session由服务器产生，保存在服务器的内存中，sessionid会返回给客户端 -->
<%
int category_id = (int)request.getAttribute("category_id");
int parent_id = (int)request.getAttribute("parent_id");
String category_name = (String)request.getAttribute("category_name");
%>
<form class="layui-form" action="">
<!-- hidden = "hidden" -->
<input value = "<%=category_id %>" hidden = "hidden" id = "tid">
<div class="layui-form-item">
<label class="layui-form-label">parent_id:</label>
<div class="layui-input-inline" style="width: 200px;">
<input type="text" name="title" lay-verify="title"
autocomplete="off" placeholder="请输入parent_id" class="layui-input"
id="parent_id" name="topicname" value = "<%=parent_id%>">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">类别名称:</label>
<div class="layui-input-inline" style="width: 200px;">
<input type="text" name="title" lay-verify="title"
autocomplete="off" placeholder="请输入类别名称" class="layui-input"
id="category_name" name="topicname" value = "<%=category_name%>">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-btn" lay-submit="" lay-filter="demo1" id="sub">立即提交</div>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script type="text/javascript">
layui.use([ 'layer' ], function() {
$("#sub").click(function(){
if($("#category_name").val() == ""){
layer.msg("不能输入为空哦！", {
icon : 2
});
return;
}else{
$.post("${ctx}/editCategory",//后台地址
{
parent_id : $("#parent_id").val(),
category_name : $("#category_name").val(),
category_id : $("#tid").val()
},//需要提交到后台的数据
function(result) {
if (result) {
//修改成功
layer.msg("修改成功", {
icon : 1
});
//假设这是iframe页
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
}
},//回调函数
"json");
}
});
});
</script>
</body>
</html>
⑪listCategory.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="../base.jsp"%>
<!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">
<link href="../css/base.css" rel="stylesheet" media="screen" />
<title>分类列表</title>
</head>
<body>
<div id="box">
<table id="demo" lay-filter="test"></table>
</div>
</body>
<script>
layui.use('table', function() {
var table = layui.table;
//开始渲染表格
table.render({
elem : '#demo',//要渲染的表格id
height : 480,//表格的高度
width : 586,
url : '${ctx}/listPageCategory', //数据接口
page : true, //开启分页
cols : [ [ //表头
{
field : 'category_id',
title : 'ID',
width : 100,
sort : true,
fixed : 'left'
},
{
field : 'parent_id',
title : '父类名',
width : 120,
templet:'#manageParentId'
},
{
field : 'category_name',
title : '类名',
width : 180
}, {
title : '操作',
toolbar : '#barDemo',
width : 180
} ] ]
});
//监听工具条
table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象
if (layEvent === 'detail') { //查看
/*
后来可以查看父id的值
*/
layer.msg("你今天真好看！！", {
icon : 1
});
//alert(data.category_id);
//do somehing
} else if (layEvent === 'del') { //删除
layer.confirm('真的删除该分类么？？', function(index) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
$.post("${ctx}/delCategory", {
category_id : data.category_id
}, function(result) {
if (result) {
layer.msg("删除成功！！", {
icon : 1
});
table.reload('demo');
}
}, "json");
});
layer.close(index);
} else if (layEvent === 'edit') { //编辑
//弹出层
layer.open({
title : ["编辑分类","text-align:center"],
type : 2,
offset : [ "80px" ],//位置
area : [ "500px", "220px" ],//大小
content : ['${ctx}/selectServlet?category_id=' + data.category_id,"no"], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
anim:1,
//当窗口关闭时执行
end : function() {
table.reload('demo');
}
});
}
});
});
</script>
<!--工具条模板 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 处理父类 -->
<script type="text/html" id="manageParentId">
<div>
{{# var fu = function(){
var eType = d.parent_id;
if(eType == 0){return "无";}
else if(eType == 3){return "杂谈";}
else if(eType == 4){return "技术笔记";}
else{return "其它";}
}
}}
{{fu()}}
</div>
</script>
</html>
以后重复的知识点我就不赘写了，这篇博文实在写太久了。
正好待疫情过去企业的人要来学校授课，我会把这个项目到时候抽空改一下，不用后台框架感觉在重复造轮子。