好好编程-物流项目15【基础数据-分页查询和添加】

简介: 项目中我们往往要用到很多数据量不大且不会经常变动的数据,比如部门信息,付款方式,性别等信息,如果这些信息我们都单独用一张表来维护,显示不是很明智,所以我们可以将这一类数据统一存放在一张表中。通过数据结构来维护


基础数据

 项目中我们往往要用到很多数据量不大且不会经常变动的数据,比如部门信息,付款方式,性别等信息,如果这些信息我们都单独用一张表来维护,显示不是很明智,所以我们可以将这一类数据统一存放在一张表中。通过数据结构来维护。如下:

image.png

 我们规定parent_id为null的表示类别数据,parent_id不为null则表示为该类型下的数据。

1.查询基础数据

left.jsp跳转

image.png

创建Dto

public class BasicDataDto extends BasePage{
  public BasicData basic;
  public BasicData getBasic() {
    return basic;
  }
  public void setBasic(BasicData basic) {
    this.basic = basic;
  }
}

 

创建IBasicService接口

public interface IBasicService {
  public List<BasicData> query(BasicData bd);
  public PageInfo<BasicData> queryPage(BasicDto dto);
  public void addBasicData(BasicData bd);
  public void deleteBasicData(int id);
  public void updateBasicData(BasicData bd);
}

创建BasicServiceImpl

@Service
public class BasicServiceImpl implements IBasicService {
  @Resource
  private BasicDataMapper basicDataMapper;
  @Override
  public List<BasicData> query(BasicData bd) {
    BasicDataExample example = new BasicDataExample();
    return basicDataMapper.selectByExample(example );
  }
  @Override
  public PageInfo<BasicData> queryPage(BasicDataDto dto) {
    PageHelper.startPage(dto.getPageNum(), dto.getPageSize());
    List<BasicData> list = this.query(dto.getBasic());
    return new PageInfo<>(list);
  }
  @Override
  public void addBasicData(BasicData bd) {
    basicDataMapper.insertSelective(bd);
  }
  @Override
  public void deleteBasicData(int id) {
    basicDataMapper.deleteByPrimaryKey(id);
  }
  @Override
  public void updateBasicData(BasicData bd) {
    basicDataMapper.updateByPrimaryKeySelective(bd);
  }
}

创建BasicController

@Controller
@RequestMapping("/basic")
public class BasicDataController {
  @Resource
  private IBasicService basicService;
  @RequestMapping("/query")
  public String queryPage(BasicDataDto dto,Model model){
    PageInfo<BasicData> pageInfo = basicService.queryPage(dto);
    model.addAttribute("pageModel", pageInfo);
    return "basic/basic.jsp";
  }
}

创建basic.jsp页面,

image.png

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $(".click").click(function() {
      $(".tip").fadeIn(200);
    });
    $(".tiptop a").click(function() {
      $(".tip").fadeOut(200);
    });
    $(".sure").click(function() {
      $(".tip").fadeOut(100);
    });
    $(".cancel").click(function() {
      $(".tip").fadeOut(100);
    });
  });
</script>
</head>
<body>
  <div class="place">
    <span>位置:</span>
    <ul class="placeul">
      <li><a href="#">首页</a></li>
      <li><a href="#">数据表</a></li>
      <li><a href="#">基本内容</a></li>
    </ul>
  </div>
  <div class="rightinfo">
    <div class="tools">
      <ul class="toolbar">
        <li class="click">
          <a href="userUpdate">
            <span>
                <img src="/images/t01.png" />
            </span>
            添加
          </a>
        </li>
        <li class="click"><span><img src="/images/t02.png" /></span>修改</li>
        <li><span><img src="/images/t03.png" /></span>删除</li>
        <li><span><img src="/images/t04.png" /></span>统计</li>
      </ul>
      <ul class="toolbar1">
        <li><span><img src="/images/t05.png" /></span>设置</li>
      </ul>
    </div>
    <table class="tablelist">
      <thead>
        <tr>
          <th><input name="" type="checkbox" value="" checked="checked" /></th>
          <th>编号<i class="sort"><img src="/images/px.gif" /></i></th>
          <th>基础数据</th>
          <th>父节点</th>
          <th>描述信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <c:forEach items="${pageModel.list }" var="basic">
          <tr>
            <td><input name="" type="checkbox" value="" /></td>
            <td>${basic.baseId }</td>
            <td>${basic.baseName }</td>
            <td>${basic.parentId }</td>
            <td>${basic.baseDesc }</td>
            <td>
              <a href="/user/userUpdate?id=${basic.baseId }" 
              class="tablelink">修改</a> 
              <a href="javascript:void(0)" onclick="deleteUser(${basic.baseId})" 
              class="tablelink"> 删除</a></td>
          </tr>
        </c:forEach>
      </tbody>
    </table>
      <div class="inline pull-right page" style="margin-top: 20px;">
        <form action="/user/queryPage" id="pager">
          <input type="hidden" name="pageSize" id="pageSize" value="${pageModel.pageSize }">
          <input type="hidden" name="pageNum" id="pageNum" value="${pageModel.pageNum }">
        </form>
        <jsp:include page="/pageBar.jsp"></jsp:include>
      </div>
  </div>
  <script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
    function deleteUser(userId){
      if(window.confirm("确定要删除该用户吗?")){
        location.href="/user/delete?id="+userId;
      }
    }
  </script>
</body>
</html>

测试访问

image.png

2.添加基础数据

 实现步骤和添加用户差不多,我们快速实现效果。

image.png

IBasicService接口

public void getUpdateInfo(Integer id, Model m);

BasicServiceImpl实现

@Override
public void getUpdateInfo(Integer id, Model m) {
  BasicDataExample example = new BasicDataExample();
  example.createCriteria().andParentIdIsNull();
  // 查询所有的父类型
  List<BasicData> parents = basicDataMapper.selectByExample(example );
  m.addAttribute("parents", parents);
  if(id != null && id > 0){
    // 表示是更新数据,根据id查询出对应的数据信息
    BasicData data = basicDataMapper.selectByPrimaryKey(id);
    m.addAttribute("basic", data);
  }
}

BasicDataController

@RequestMapping("/basicUpdate")
public String basicUpdate(Integer id,Model m){
  basicService.getUpdateInfo(id,m);
  return "basic/basicUpdate";
}

页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<link href="/css/select.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.idTabs.min.js"></script>
<script type="text/javascript" src="/js/select-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $(".select1").uedSelect({
    width : 345       
  });
  $(".select2").uedSelect({
    width : 167  
  });
  $(".select3").uedSelect({
    width : 100
  });
});
</script>
</head>
<body>
  <div class="place">
    <span>位置:</span>
    <ul class="placeul">
      <li><a href="/">首页</a></li>
      <li><a href="/user/query">基础数据管理</a></li>
    </ul>
  </div>
  <div class="formbody">
    <div class="formtitle">
      <span>基本信息</span>
    </div>
    <form action="/basic/saveOrUpdate">
      <ul class="forminfo">
        <li><label>基础数据</label>
          <input name="baseName"  type="text" 
          class="dfinput" />
          <i>基础数据不能超过30个字符</i>
        </li>
        <li><label>描述</label>
          <input name="baseDesc" type="text" 
          class="dfinput" />
        </li>
        <li><label>所属类型</label>
          <div class="vocation">
              <select class="select1" name="parentId">
              <option value="0">--本身就是大类--</option>
              <c:forEach items="${ parents}" var="parent">
                <option value="${parent.baseId }">${parent.baseName }</option>
              </c:forEach>
              </select>
          </div>
          <i></i>
        </li>
        <li><label>&nbsp;</label>
          <input name="" type="submit"
          class="btn" value="确认保存" /></li>
        </ul>
    </form>
  </div>
  <div style="display: none">
    <script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540'
      language='JavaScript' charset='gb2312'></script>
  </div>
</body>
</html>

image.png

保存数据

@RequestMapping("/saveOrUpdate")
public String saveOrUpdate(BasicData bd){
  if(bd.getParentId()==0){
    bd.setParentId(null);
  }
  basicService.addBasicData(bd);
  return "redirect:/basic/query";
}

image.png

image.png

image.png

ok~添加成功,下篇介绍修改,删除和带条件查询


相关文章
|
3月前
|
资源调度 数据可视化 JavaScript
一个高效的低代码表单,可视化设计,一键生成源码,享受更多摸鱼时间!
Variant Form 是一款基于 Vue 2 的低代码表单生成器,采用可视化拖拽设计界面,支持一键生成完整源码,大幅降低开发复杂度。它具备高度自定义配置能力,能够满足不同场景需求,并且完全开源免费。通过简单的拖拽操作,用户可以轻松创建表单,同时还能自定义 CSS 样式、校验逻辑及多语言支持等功能。安装便捷,兼容多种环境,极大提升开发效率。赶紧试试 Variant Form,享受高效开发的乐趣吧!
75 0
|
3月前
|
SQL Java 关系型数据库
MyBatis-Plus 分页魅力绽放!紧跟技术热点,带你领略数据分页的高效与便捷
【8月更文挑战第29天】在 Java 开发中,数据处理至关重要,尤其在大量数据查询与展示时,分页功能尤为重要。MyBatis-Plus 作为一款强大的持久层框架,提供了便捷高效的分页解决方案。通过封装数据库分页查询语句,开发者能轻松实现分页功能。在实际应用中,只需创建 `Page` 对象并设置页码和每页条数,再通过 `QueryWrapper` 构建查询条件,调用 `selectPage` 方法即可完成分页查询。MyBatis-Plus 不仅生成分页 SQL 语句,还自动处理参数合法性检查,并支持条件查询和排序等功能,极大地提升了系统性能和稳定性。
57 0
|
4月前
|
缓存 前端开发 测试技术
什么是七星创客系统丨七星创客系统开发规则玩法/设计方案/逻辑需求/案例项目/源码功能
七星创客系统开发指南是一个帮助开发人员理解并完成七星创客系统的开发任务的指南。以下是一个简要的开发指南需求:
2020考研公共课_基础精讲课_管理类联考综合能力 联考逻辑(读书笔记)
2020考研公共课_基础精讲课_管理类联考综合能力 联考逻辑(读书笔记)
|
数据可视化 前端开发 搜索推荐
低代码平台名声臭,用起来却真香——90%重复工作给你完成喽
低代码平台名声臭,用起来却真香——90%重复工作给你完成喽
117 0
|
Rust 安全
Jogger跑鞋零撸项目系统开发/方案详细/规则玩法/源码案例/功能说明
At present, multi blockchain smart contract compatibility technology mainly includes two ways: one is to implement cross chain smart contracts, which is to apply smart contracts to cross chain scenarios; Another approach is to use converters to convert smart contracts from one programming language
|
测试技术 Python
测试圈相亲平台开发流程(17):删除功能
测试圈相亲平台开发流程(17):删除功能
测试圈相亲平台开发流程(17):删除功能
|
前端开发 算法
测试圈相亲平台开发流程(18):匹配功能(上)
测试圈相亲平台开发流程(18):匹配功能(上)
测试圈相亲平台开发流程(18):匹配功能(上)
|
前端开发 算法 数据库
测试圈相亲平台开发流程(19):匹配功能(下)
测试圈相亲平台开发流程(19):匹配功能(下)
测试圈相亲平台开发流程(19):匹配功能(下)
|
前端开发 JavaScript
测试圈相亲平台开发流程(7):详情页基础信息部分-前端开发
测试圈相亲平台开发流程(7):详情页基础信息部分-前端开发
测试圈相亲平台开发流程(7):详情页基础信息部分-前端开发
下一篇
无影云桌面