【JavaWeb】全部撒花-小实例(附源码)

24 篇文章 6 订阅
10 篇文章 1 订阅

【JavaWeb】全部撒花-小实例(附源码)

前言

全部章节:
【JavaWeb】-Tomcat、Eclipse使用项目搭建(一)
【JavaWeb】-mysql、jdbc、dbcp使用(二)
【JavaWeb】-MVC、Servlet学习(三)
【JavaWeb】-Cookie、Session,token+学习(四)

【JavaWeb】-jsp简单了解(五)
【JavaWeb】-小实例,全部源码(结)

javaweb到这里就差不多了,我们做一个小示例,完成一些基本操作;

这里我给大家写了两个页面,实在没有什么素材,只能靠自己给大家写两个了;

同时这里是源码,是整个JavaWeb系列,因为直接从创建文件开始,就用的一个项目,从上面到下面所有的源码都在里面了,所以如果你直接看的这个博客,推荐你拿到这个项目,找到我的主页,从头到尾看一遍,所以说你真幸运直接有了大结局,当然了,这才只是个开始,后面还有更多:

全部源码,百度网盘

链接:https://pan.baidu.com/s/1_eQZgTuKHkgZ4RwODV_ylw?pwd=tyzt 
提取码:tyzt

这里我实在不想做一个系统了,因为之后几乎都是重复的操作,大家如果把这个全部理解,做个系统简简单单,什么什么管理系统,无非是再加个侧边栏,然后对几张表的操作,加上关系啥的,这里我在网上找的一个模板,也教大家怎么去拿到这种网页,变成自己使用;

这是我们进行操作的页面:
在这里插入图片描述

这是修改时候的页面,一会儿呢就改成我们想要的那种:

在这里插入图片描述

实现效果

我们先来看一下实现效果:

  • 了解下大致的功能

    1、登录功能,这里没有建用户表,大家创建一个用户表一个查询方法就实现,最简单的功能
    2、对货物表的CRUD
    3、条件查询 -搜索功能
    4、带条件查询的分页
    

登录页面:

在这里插入图片描述

对单表的所有操作页面,一页显示5个:

在这里插入图片描述

编辑和新增货物页面:

在这里插入图片描述

在这里插入图片描述

搜索功能,搜索带上分页:

在这里插入图片描述

好,大家可以拿到本地运行下,下面对代码进行下解释

讲解

首先就是代码的写的,这里拿最开始,我们先尝试着,把代码数据库中的数据显示到页面上:

首先就是数据库:

创建货物表:

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for good
-- ----------------------------
DROP TABLE IF EXISTS `good`;
CREATE TABLE `good` (
  `goodid` int(20) NOT NULL AUTO_INCREMENT,
  `goodname` varchar(20) NOT NULL,
  `surplus` int(20) NOT NULL,
  `goodprice` int(20) NOT NULL,
  PRIMARY KEY (`goodid`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of good
-- ----------------------------
INSERT INTO `good` VALUES ('1', '黑色森林', '2', '15');
INSERT INTO `good` VALUES ('2', '奶油蛋糕', '3', '13');
INSERT INTO `good` VALUES ('3', '水果蛋糕', '2', '11');
INSERT INTO `good` VALUES ('4', '冰淇凌蛋糕', '5', '13');
INSERT INTO `good` VALUES ('9', '牛奶蛋糕', '34', '9');
INSERT INTO `good` VALUES ('11', '肉松蛋糕', '13', '13');
INSERT INTO `good` VALUES ('12', '草莓蛋糕', '99', '23');
INSERT INTO `good` VALUES ('13', '苹果蛋糕', '32', '12');
INSERT INTO `good` VALUES ('14', '香蕉蛋糕', '32', '12');
INSERT INTO `good` VALUES ('15', '火龙果蛋糕', '43', '43');
INSERT INTO `good` VALUES ('16', '香橙蛋糕', '65', '31');
INSERT INTO `good` VALUES ('17', '苹果', '43', '54');
INSERT INTO `good` VALUES ('18', '菠萝', '32', '32');
INSERT INTO `good` VALUES ('19', '橙子', '435', '32');
INSERT INTO `good` VALUES ('20', '花椒', '43', '65');
INSERT INTO `good` VALUES ('21', '大蒜', '23', '54');
INSERT INTO `good` VALUES ('22', '鸡蛋', '32', '43');
INSERT INTO `good` VALUES ('23', '西红柿', '32', '43');

写一个pojo对象

package pojo;

public class Good {
	private int goodId;
	private String goodName;
	private int surplus;
	private int goodPrice;
	public int getGoodId() {
		return goodId;
	}
	public void setGoodId(int goodId) {
		this.goodId = goodId;
	}
	public String getGoodName() {
		return goodName;
	}
	public void setGoodName(String goodName) {
		this.goodName = goodName;
	}
	public int getSurplus() {
		return surplus;
	}
	public void setSurplus(int surplus) {
		this.surplus = surplus;
	}
	public int getGoodPrice() {
		return goodPrice;
	}
	public void setGoodPrice(int goodPrice) {
		this.goodPrice = goodPrice;
	}
	public Good(int goodId, String goodName, int surplus, int goodPrice) {
		super();
		this.goodId = goodId;
		this.goodName = goodName;
		this.surplus = surplus;
		this.goodPrice = goodPrice;
	}
	public Good() {
		super();
	}
	@Override
	public String toString() {
		return "Good [goodId=" + goodId + ", goodName=" + goodName + ", surplus=" + surplus + ", goodPrice=" + goodPrice
				+ "]";
	}
	
}

GoodDao接口:

package Dao;

import java.util.List;
import pojo.Good;

public interface GoodDao {
	public List<Good> selectGoodAll();
	public Good  selectGoodById();
	public List<Good> selectGoodBySearch(String condition);
	public int updateGood(Good good);
	public int insertGood(Good good);
	public int deleteGood(int goodId);
}

GoodDaoImpl实现类:

package Dao.impl;

import java.util.ArrayList;
import java.util.List;

import Dao.BaseDao;
import Dao.GoodDao;
import pojo.Good;
import util.DbcpUtil;

public class GoodDaoImpl extends BaseDao implements GoodDao {

	@Override
	public List<Good> selectGoodAll() {
		List<Good> list = new ArrayList<Good>();
		String sql = "select * from good";
		this.executeQuery(sql);
		try {
			while (rs.next()) {
				Good good = new Good(rs.getInt(1), rs.getString(2), rs.getInt(3), rs.getInt(4));
				list.add(good);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DbcpUtil.closeConnection();
		}
		return list;
	}

	@Override
	public Good selectGoodById() {
		Good good = new Good();
		String sql = "select * from good where goodid = ?";
		this.executeQuery(sql);
		try {
			good.setGoodId(rs.getInt(1));
			good.setGoodName(rs.getString(2));
			good.setSurplus(rs.getInt(3));
			good.setGoodPrice(rs.getInt(4));
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DbcpUtil.closeConnection();
		}
		return good;
	}

	@Override
	public List<Good> selectGoodBySearch(String condition) {
		List<Good> list = new ArrayList<Good>();
		String sql = "select * from good where goodname like ?";
		this.executeQuery(sql);
		try {
			while (rs.next()) {
				Good good = new Good(rs.getInt(1), rs.getString(2), rs.getInt(3), rs.getInt(4));
				list.add(good);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DbcpUtil.closeConnection();
		}
		return list;
	}

	@Override
	public int updateGood(Good good) {
		String sql = "UPDATE good SET goodName=?,surplus=?,goodPrice='? where goodId=?";
		return this.executeUpdate(sql, good.getGoodName(),good.getSurplus(),good.getGoodPrice(),good.getGoodId());
	}

	@Override
	public int insertGood(Good good) {
		String sql = "insert into good (goodName,surplus,goodPrice)VALUES(?,?,?)";
		return this.executeUpdate(sql, good.getGoodName(),good.getSurplus(),good.getGoodPrice());
	}

	@Override
	public int deleteGood(int goodId) {
		String sql = "delete from buy where goodid=?";
		return this.executeUpdate(sql, goodId);
	}

}

这里为了方便就不写service层了,我们直接写servlet,首先就是:

GoodGetAllservlet 实现doGet方法

protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    GoodDao goodDao = new GoodDaoImpl();
    List<Good> goods =  goodDao.selectGoodAll();
    request.setAttribute("goods", goods);
    request.getRequestDispatcher("good.jsp").forward(request, response);
}

good.jsp页面将我们的数据渲染上去

<div class="card-body">

    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th width="5"><label
                                         class="ftdms-checkbox checkbox-primary"> <input
                                                                                         type="checkbox" id="check-all"><span></span>
                        </label></th>
                    <th>货物编号</th>
                    <th>货物名称</th>
                    <th>剩余数量</th>
                    <th>货物价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>


                <c:forEach items="${goods}" var="good">
                    <tr>
                        <td>${good.goodId}</td>
                        <td>${good.goodName}</td>
                        <td>${good.surplus}</td>
                        <td>${good.goodPrice}</td>
                        <td><font class="text-success">正常</font></td>
                        <td>
                            <div class="btn-group">
                                <div class="toolbar-btn-action">
                                    <a class="btn btn-success m-r-5 submenuitem" href="GoodGetByIdServlet?goodid=${good.goodId}" data-id="link553" data-index="553"><i class="ftsucai-edit-2">编辑</i></a> 

                                    <a class="btn btn-warning m-r-5 submenuitem" href="GoodDeleteByIdServlet?goodId=${good.goodId}" data-id="link554" data-index="554"><i class="ftsucai-edit-2">删除</i></a>

                                </div>
                            </div>
                        </td>
                    </tr>

                </c:forEach>


            </tbody>
        </table>
    </div>

这样我们就成功把数据渲染上去了,运行页面,我们可以看到我们数据库里的信息已经渲染到页面了,那这里就是我们主要的一个流程实现方式,我们的代码就是这么一层层写的,通过这个方式你是不是可以再创建几个servlet把增删改也写一下呢;这些写完,我们来看下搜索功能;

搜索功能

搜索功能也是通过传递参数,具体实现在这里,通过keyword然后传递给servlet:

在这里插入图片描述

这里我直接是带条件的搜索了,这里最后一定要注意,我们把keyword放进了session,不然分页的时候你点击下一页就会没有搜索条件喽

在这里插入图片描述

很简单,利用了,sql语句中的模糊查询;

分页功能

分页比较困难些,这里为了方便,我们创建了一个对页脚进行面向对象操作,进行了下封装,这里可能比较难理解一点,其实我们这里只需要关心两个数据

  • 我们的数据记录条数,这取决于我们可以分多少页,我这里一页5条,24条记录,就是24/5+1=5页,多少记录,才能知道多少页数,这都是要给到下面值得

  • 第二个就是通过前端传过来,现在是第几页,只有知道是第几页我们才能知道从哪里开始重新渲染数据;
    在这里插入图片描述

    然后上一页下一页+1-1的操作;

这里渲染是重点,也能会晕哦,这个关系一定要弄清,上手尝试下就理解了:

<ul class="pagination">
    <li><a href="GoodGetSearchServlet?curpage=1">首页</a></li>
    <li><a href="GoodGetSearchServlet?curpage=${pi.prepage}">上一页</a></li>
	如果总页数小于3页,我们全部显示出来
    <c:if test="${pi.totalpage <= 3}">
        <c:forEach begin="1" end="${pi.totalpage}" step="1" varStatus="i">
            <c:if test="${pi.curpage == i.index}">
                <li class="active"><span class="active">${i.index}</span></li>
            </c:if>
            <c:if test="${pi.curpage != i.index}">
                <li><a href="GoodGetSearchServlet?curpage=${i.index}">${i.index}</a></li>
            </c:if>
        </c:forEach>
    </c:if>
    如果总页数大于三页
    <c:if test="${pi.totalpage > 3 }">
        如果小于总页数-2的页数,我们就从当前页开始往后显示3页
        <c:if test="${pi.curpage < pi.totalpage-2 }">
            <c:forEach begin="1" end="${pi.curpage + 2 }" step="1" varStatus="i">
                <c:if test="${pi.curpage == i.index}">
                    <li class="active"><span class="active">${i.index}</span></li>
                </c:if>
                <c:if test="${pi.curpage != i.index}">
                    <li><a href="GoodGetSearchServlet?curpage=${i.index}">${i.index}</a></li>
                </c:if>
            </c:forEach>
            <li class="disabled"><span>...</span></li>
        </c:if>
      如果已经接近末尾了,我们直接从当前页显示到末尾
        <c:if test="${pi.curpage >= pi.totalpage-2}">
            <li class="disabled"><span>...</span></li>
            <c:forEach begin="${pi.curpage}" end="${pi.totalpage }" step="1" varStatus="i">
                <c:if test="${pi.curpage == i.index}">
                    <li class="active"><span class="active">${i.index}</span></li>
                </c:if>
                <c:if test="${pi.curpage != i.index}">
                    <li><a href="GoodGetSearchServlet?curpage=${i.index}">${i.index}</a></li>
                </c:if>
            </c:forEach>
        </c:if>
    </c:if> 

    <li><a href="GoodGetSearchServlet?curpage=${pi.nextpage }">下一页</a></li>
    <li><a href="GoodGetSearchServlet?curpage=${pi.totalpage }">尾页</a> </li>
</ul>

小结

到这里我们的JavaWeb知识点就学的差不多了,可能之后你就要开启框架之旅了,但是不管学习任何框架,都是通过底层去网上抽取的,不断地接管不断地封装,然后配置,但是对于学习一个框架,我们的底层原理一定要夯实,框架原理都是很简单的

我们不一定要去看源码,但是我们后面的能力不是在使用框架上,而是我们对框架的改错找错能力,框架都是人写的,也会有性能bug的地方,这时候就是我们对于原理,以及原生JavaWeb的熟练了,以及怎么通过框架实现我们对框架的自定义div,所以一定要动手把这一部分练习的很熟练,这样我们之后的学习可以说已经成功一半了,好了,当然了,这只是一点儿,也只是一个开始;

后来的小伙伴直接看到这个,那真的幸运了,把源码下载起来,回到之前的跟篇走完,希望你会有收获的,那到这里就求三连,点个关注吧

  • 18
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习日记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值