当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 荐 mvc进阶项目（二）

荐 mvc进阶项目（二）

2020年07月07日  | 移动技术网IT编程  | 我要评论

文章目录

前言

easyui的样式比较丑这里部分用bootstrap替代了，今天实现的是增加和下拉框功能。

效果

1.下拉框功能

这是基于数据库中Category表的数据展示
在这里插入图片描述
在这里插入图片描述

2.增加

在这里插入图片描述
在这里插入图片描述

代码实现

首先我们下拉框实现的话是用于easyui中ComboBox组件实现的，引用到项目中改一下就好了，对应的数据格式是数组。

  1. valueField:'自己表中的id',
  2. 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> -->&nbsp;
	  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	   <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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网