mvc进阶项目（二）
程序员文章站
2022-07-06 16:50:25
文章目录前言效果1.下拉框功能2.增加代码实现1.addBook.jsp2.addBook.js3.commobox4.BookAction5.Category6.Result前言easyui的样式比较丑这里部分用bootstrap替代了，今天实现的是增加和下拉框功能。效果1.下拉框功能这是基于数据库中Category表的数据展示2.增加代码实现首先我们下拉框实现的话是用于easyui中ComboBox组件实现的，引用到项目中改一下就好了，对应的数据格式是数组。valueFi...
前言
easyui的样式比较丑这里部分用bootstrap替代了，今天实现的是增加和下拉框功能。
效果
1.下拉框功能
这是基于数据库中Category表的数据展示
2.增加
代码实现
首先我们下拉框实现的话是用于easyui中ComboBox组件实现的，引用到项目中改一下就好了，对应的数据格式是数组。
-
valueField:'自己表中的id', -
textField:'自己表中的名字'
1.addBook.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> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/bootstrap.min.css" /> <!--全局样式 --> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css"> <!--定义图标 --> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script> <!--组件库源码的js文件 --> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript"> </script> <!-- 自定义 js--> <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/addBook.js"></script> </head> <body> <input type="hidden" id="tcx" value="${pageContext.request.contextPath }"/> <form class="form-horizontal" id="ff" method="post"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">书名</label> <div class="col-sm-10"> <input type="text" class="form-control" name="name" placeholder="请输入名字"> </div> </div> <div class="form-group"> <label for="lx" class="col-sm-2 control-label">类型</label> <div class="col-sm-10"> <input id="cid" name="cid" value="" class="form-control" style="width: 100px"/> <!-- <select class="form-control" style="width: 100px"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> --> </div> </div> <div class="form-group"> <label for="author" class="col-sm-2 control-label" >作者</label> <div class="col-sm-10"> <input type="text" class="form-control" name="author" placeholder="请输入作者" > </div> </div> <div class="form-group"> <label for="price" class="col-sm-2 control-label">价格</label> <div class="col-sm-10"> <input type="text" class="form-control" name="price" placeholder="请输入价格"> </div> </div> <div class="form-group"> <label for="publishing" class="col-sm-2 control-label">出版社</label> <div class="col-sm-10"> <input type="text" class="form-control" name="publishing" placeholder="请输入出版社"> </div> </div> <div class="form-group"> <label for="description" class="col-sm-2 control-label">简介</label> <div class="col-sm-10"> <textarea class="form-control" rows="3" name="description"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input class="btn btn-default" id="addBook" value="增加"style="width: 60px"> <!-- <button class="btn btn-default" id="addBook">增加</button> --> <input type="reset" class="btn btn-default" value="清空" id="qk" > <!-- <button type="reset" class="btn btn-default">清空</button> --> </div> </div> </form> </body> </html> 2.addBook.js
$(function(){ var tcx=$("#tcx").val(); $('#cid').combobox({ url:tcx+'/category.action?methodName=commobox', valueField:'id', textField:'name' }); $("#addBook").click(function(){ // 加载表单中的提交 $('#ff').form('submit',{ url:tcx+'/book.action?methodName=add', // 成功函数返回的值 success:function(data){ // 将括号内的表达式('data')转化为对象 data=eval('('+data+')'); // 判断结果码是否正常 if(data.code == 200){ // 提示操作成功 alert(data.msg); //清空 $("#qk").click(); } } }); }); }) 3.commobox
package com.liyingdong.web; import java.sql.SQLException; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.liyingdong.dao.CategoryDao; import com.liyingdong.entity.Category; import com.liyingdong.framework.ActionSupport; import com.liyingdong.framework.ModelDriver; import com.liyingdong.util.ResponseUtil; public class CategoryAction extends ActionSupport implements ModelDriver<Category> { private Category category=new Category(); private CategoryDao categoryDao=new CategoryDao(); @Override public Category getModel() { // TODO Auto-generated method stub return category; } public String commobox(HttpServletRequest req,HttpServletResponse resp) { try { List<Category> list = this.categoryDao.list(null, null); ResponseUtil.writeJSON(resp, list); } catch (InstantiationException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } catch (Exception e) { e.printStackTrace(); } return null; } } 4.BookAction
// 新增 public String add(HttpServletRequest req, HttpServletResponse resp) throws Exception { //获取当前时间戳 book.setDeployTime(book.getDate()); this.bookDao.add(book); ResponseUtil.writeJSON(resp, Result.success); return null; } 5.Category
package com.liyingdong.entity; public class Category { private long id; private String name; public Category() {} public long getId() { return id; } public void setId(long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Category(long id, String name) { super(); this.id = id; this.name = name; } @Override public String toString() { return "Category [id=" + id + ", name=" + name + "]"; } } 6.Result
package com.liyingdong.util; public class Result<T> { private int code; private String msg; private T data; public static Result success=new Result<>(200,"操作成功"); public static <T> Result ok(T data) { return new Result<T>(data); } public int getCode() { return code; } public void setCode(int code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public Result(int code, String msg) { super(); this.code = code; this.msg = msg; } public T getData() { return data; } public void setData(T data) { this.data = data; } private Result() { super(); } private Result(T data) { this.data = data; } } 本文地址：https://blog.csdn.net/qq_45384482/article/details/107148454
上一篇： 你家经济大权谁掌握