首页 > 分享 > 动态网页项目宠物商店

动态网页项目宠物商店

萌宠菠菠乐园
2024-09-17 04:16

需要用到的jar包

C3P0连接池 c3p0-0.9.1.2.jar

beanUtils commons-beanutils-1.8.3.jar

dbutils,jdbc的一个集成 commons-dbutils-1.4.jar

logging commons-logging-1.1.1.jar

编写jstl的 jstl.jar

JSP 标准标签库，和jstl.jar 一起使用 standard standard.jar

数据库驱动 mysql-connector-java-8.0.13.jar

1.java

(1)tomcat 服务器的搭建，xml的配置

(2)servlet xml的配置。了解请求和响应

(3)jsp el表达式和jstl的用法

2.mysql

(1)创建数据库

(2)创建表

(3)编写sql语句

3.html

(1)html5的标签

(2)css静态网页的样式

(3)js的一些用法

1.商品查询

需求：有一个页面上面有一个超链接[查询所有商品]，点击[查询所有商品],会把数据库中的所有商品信息查询出来，并且展示在表格中

如何在一个servlet中判断执行哪个方法：

doGet(request,response){

//获取到method的值

//判断method

if("findAll".equals(method)){

//走查询方法

}else if("add".equals(method)){

//走添加方法

}

//定义查询方法

//定义增加方法

......

步骤分析：

1.创建数据库和表结构

2.创建动态的web项目,创建包结构,导入项目需要的资源

3.创建一个首页，上面有一个'查询所有商品'的超链接,点击链接后向servlet发送请求 ${pageContext.request.contextPath}/findAll?method=findAll

4.servlet的操作

//获取method

//判断当前method是哪个请求(增删改查)

//编写具体请求的方法

//调用service和dao完成查询数据库所有商品的操作

//返回一个list结合

//把当前的list放入request域对象中

//请求转发到jsp解析

2.增加商品

需求：在首页有个[增加商品]的超链接，点击超链接后，能把用户录入的数据保存到数据库

步骤分析：

1.在首页加一个[添加商品]的超链接 ${pageContext.request.contextPath}/pet?method=addUI

2.点击超链接向servlet发送请求 (请求转发到pet.jsp中防止pet.jsp直接暴露在地址栏中)

3.用户录入数据后点击增加按钮向servlet发送请求

${pageContext.request.contextPath}/pet?method=add(有丢失参数的风险)

解决方式：<input type="hidden" name="method" value="add">

4.在add方法中

//获取表单中的所有数据 map

//创建pet

//把map中的数据拷贝到pet中

//把pid(UUID)和pdate存放到pet中

//调用service和dao完成数据保存操作

//请求转发到查询所有的链接上 /pet?method=findAll

//如果有异常需要请求转发到error.jsp页面

3.修改商品

需求：点击列表中商品后面的修改按钮，就可以对当前商品信息进行修改，

跳转到修改的表单页面(数据是已经填写好的)，在此基础上进行修改，点击修改按钮后，在数据库中更新该条数据

4.删除商品

需求：点击列表中商品后面的删除按钮，点击后，弹出[确认删除该条商品吗？]的提示,点击确认，则删除该条商品，点击取消，不执行删除

5.批量删除商品

需求：根据数据前面的复选框选中情况，批量删除选中的数据

步骤分析：

1.拷贝pet 修改web

2.为表头和列表加上复选框，加上删除勾选的按钮

3.使用jquery实现全选全不选的功能

//导入jquery.js文件

//派发单击事件

//获取表头复选框的选中状态

//获取列表中所有复选框对象

//使列表中复选框状态和表头复选框状态保持一致

4.为列表复选框添加name属性和value 外面嵌套一个form表单在点击删除勾选的时候派发一个click事件，让事件方法拥有提交form表单的功能

5.servlet的操作

//获取前台传递的id数组

//调用service

6.service操作

//开启事物

//遍历数组

//调用dao删除

//提交事物

//出现异常,回滚事物

7.dao操作

//获取QueryRunner对象

//编写sql

//执行sql(手动获取连接)

6.模糊查询

需求：在列表页面有按照名称和关键字查询的两个输入框，输入查询信息后，点击搜索按钮，那么在下面的列表中会显示出符合条件的数据

select * from pet where pname like ? and pdesc like ?

select * from pet where pname like ?

select * from pet where pdesc like ?

select * from pet

StringBuffer sb = new StringBuffer("select * from where 1=1");

//判断输入的搜索项是否为“”

if(name!=""){

sb.append( and pname like ?)

}

if(kw!=""){

sb.append( and pdesc like ?)

}

首页

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

#h{

margin-top:0px;

background-color: silver;

font-style: italic;

}

#id1{

float: left;

}

#id2{

margin-top:80px;

float: left;

}

#img2{

margin-top: 80px;

}

</style>

</head>

<h1 id="h" align="center">欢迎来到宠物商店</h1>

</a><br>

</a>

</body>

</html>

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

a{font-size: 13px;

}

</style>

</head>

名字：<input type="text" name="name" value="${name}">

品种：<input type="text" name="kw" value="${kw}">

</a>

</form>

</td>

</tr>

<tr>

</tr>

<c:if test="${empty list}">

<tr>

</tr>

</c:if>

<c:if test="${not empty list}">

<c:forEach items="${list}" var="pet">

<td >${pet.pname}</td>

<td >${pet.ptype}</td>

<td >${pet.price}</td>

<td >${pet.pdate}</td>

<td >${pet.pdesc}</td>

<td>

</td>

</tr>

</c:forEach>

</form>

</c:if>

</table>

</body>

function del(id){

var flag = confirm("您确认要删除吗？");

if(flag){

location.href = "${pageContext.request.contextPath}/pet?method=delete&id="+id;

}

$("#thId").click(function(){

$("[name=id]").prop("checked",$("#thId").prop("checked"));

})

$("#btn").click(function(){

$("#formId").submit();

})

</script>

</html>

添加的界面pet.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

form {

height:800px;

width:300px;

line-height:30px;

}

dd {

margin-left:0;

}

#dt1{

float: left;

}

margin-left: 100px;

}

</style>

</head>

<dl>

</a>

</dl>

</fieldset>

</form>

</body>

</html>

修改的界面edit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

form {

height:800px;

width:300px;

line-height:30px;

}

dd {

margin-left:0;

}

</style>

</head>

<dl>

<dd><textarea rows="5" cols="30" name="pdesc">${pet.pdesc}</textarea><br></dd>

</dl>

</fieldset>

</form>

</body>

</html>

显示错误消息的界面err.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

</body>

</html>

java的生成随机id的类

package com.it.servlet;

import java.util.UUID;

public class UUIDCLS {

public static void main(String[] args) {

UUID randomUUID = UUID.randomUUID();

System.out.println(randomUUID.toString().replace("-", "").toUpperCase().substring(0, 2));

}

public static String Uid() {

UUID randomUUID = UUID.randomUUID();

return randomUUID.toString().replace("-", "").toUpperCase().substring(0, 2);

}

java的servlet

package com.it.servlet;

import java.io.IOException;

import java.lang.reflect.InvocationTargetException;

import java.sql.SQLException;

import java.util.Arrays;

import java.util.Date;

import java.util.List;

import java.util.Map;

import java.util.UUID;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.beanutils.BeanUtils;

import org.apache.commons.dbutils.DbUtils;

import com.it.bean.PetBean;

import com.it.service.PetSevice;

public class PetServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

request.setCharacterEncoding("utf-8");

String method = request.getParameter("method");

if ("findAll".equals(method)) {

findAll(request,response);

}else if ("UUID".equals(method)) {

UUID(request,response);

}else if ("add".equals(method)) {

add(request,response);

}else if ("edit".equals(method)) {

edit(request,response);

}else if ("update".equals(method)) {

update(request,response);

}else if ("delete".equals(method)) {

delete(request,response);

}else if ("delCheck".equals(method)) {

delCheck(request,response);

}else if ("search".equals(method)) {

search(request,response);

}

private void search(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

try {

String name = request.getParameter("name");

String kw = request.getParameter("kw");

PetSevice ps=new PetSevice();

List<PetBean>list= ps.search(name,kw);

for (PetBean petBean : list) {

System.out.println(petBean.getPname());

}

request.setAttribute("list", list);

request.setAttribute("name", name);

request.setAttribute("kw",kw);

request.getRequestDispatcher("/list.jsp").forward(request, response);

} catch (Exception e) {

e.printStackTrace();

request.setAttribute("msg", "查询失败");

request.getRequestDispatcher("/err.jsp").forward(request, response);

}

private void delCheck(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

try {

String[] ids = request.getParameterValues("id");

PetSevice ps=new PetSevice();

ps.delCheck(ids);

request.getRequestDispatcher("/pet?method=findAll").forward(request, response);

} catch (Exception e) {

e.printStackTrace();

request.setAttribute("msg", "删除多条信息失败");

request.getRequestDispatcher("/err.jsp").forward(request, response);

}

private void delete(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

try {

String id = request.getParameter("id");

PetSevice ps=new PetSevice();

ps.delete(id);

request.getRequestDispatcher("/pet?method=findAll").forward(request, response);

} catch (Exception e) {

e.printStackTrace();

request.setAttribute("msg", "删除宠物信息失败");

request.getRequestDispatcher("/err.jsp").forward(request, response);

}

private void update(HttpServletRequest request, HttpServletResponse response) {

try {

Map<String, String[]> map = request.getParameterMap();

PetBean pb=new PetBean();

BeanUtils.populate(pb, map);

PetSevice ps=new PetSevice();

ps.update(pb);

request.getRequestDispatcher("/pet?method=findAll").forward(request, response);

} catch (Exception e) {

e.printStackTrace();

request.setAttribute("msg", "修改宠物信息失败");

request.getRequestDispatcher("err.jsp");

}

private void edit(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

try {

String id = request.getParameter("id");

PetSevice ps=new PetSevice();

PetBean pb= ps.findId(id);

request.setAttribute("pet", pb);

request.getRequestDispatcher("/edit.jsp").forward(request, response);

} catch (Exception e) {

e.printStackTrace();

request.setAttribute("msg", "查询单条数据失败");

request.getRequestDispatcher("/err.jsp").forward(request, response);

}

private void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

try {

Map<String, String[]> map = request.getParameterMap();

PetBean pb=new PetBean();

BeanUtils.populate(pb, map);

pb.setPid(UUIDCLS.Uid());

pb.setPdate(new Date().toLocaleString());

PetSevice ps=new PetSevice();

ps.add(pb);

request.getRequestDispatcher("/pet?method=findAll").forward(request, response);

} catch (Exception e) {

e.printStackTrace();

request.setAttribute("msg", "添加失败");

request.getRequestDispatcher("/err.jsp").forward(request, response);

}

private void UUID(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

request.getRequestDispatcher("/pet.jsp").forward(request, response);

}

private void findAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

try {

PetSevice ps = new PetSevice();

List<PetBean> list= ps.findAll();

request.setAttribute("list", list);

request.getRequestDispatcher("/list.jsp").forward(request, response);

} catch (Exception e) {

e.printStackTrace();

request.setAttribute("msg", "查询所有宠物失败");

request.getRequestDispatcher("/err.jsp").forward(request, response);

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doGet(request, response);

}

service层

package com.it.service;

import java.sql.SQLException;

import java.util.List;

import com.it.bean.PetBean;

import com.it.dao.PetDao;

import com.it.utils.DataSourceUtils;

public class PetSevice {

/**

* 查询所有宠物

* @return

* @throws SQLException

public List<PetBean> findAll() throws SQLException {

PetDao pd = new PetDao();

return pd.findAll();

}

/**

* 添加宠物

* @param pb

* @throws SQLException

public void add(PetBean pb) throws SQLException {

// TODO Auto-generated method stub

PetDao pd=new PetDao();

pd.add(pb);

}

/**

* 根据id查找宠物

* @param id

* @return

* @throws SQLException

public PetBean findId(String id) throws SQLException {

PetDao pb=new PetDao();

return pb.findId(id);

}

/**

* 修改宠物信息

* @param pb

* @throws SQLException

public void update(PetBean pb) throws SQLException {

// TODO Auto-generated method stub

PetDao pd=new PetDao();

pd.update(pb);

}

/**

* 删除

* @param id

* @throws SQLException

public void delete(String id) throws SQLException {

PetDao pd=new PetDao();

pd.delete(id);

}

/**

* 批量删除

* @param ids

* @throws SQLException

public void delCheck(String[] ids) throws SQLException {

try {

//开启事务

DataSourceUtils.beginTransaction();

PetDao pd=new PetDao();

if (ids!=null) {

for (String id : ids) {

pd.delCheck(id);

}

//提交事务

DataSourceUtils.commitAndClose();

} catch (SQLException e) {

e.printStackTrace();

DataSourceUtils.rollbackAndClose();

throw e;

}

//模糊查询

public List<PetBean> search(String name, String kw) throws SQLException {

//调用dao

PetDao pd=new PetDao();

return pd.sreach(name,kw);

}

dao层

package com.it.dao;

import java.sql.SQLException;

import java.util.ArrayList;

import java.util.List;

import org.apache.commons.dbutils.QueryRunner;

import org.apache.commons.dbutils.handlers.BeanHandler;

import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.it.bean.PetBean;

import com.it.utils.DataSourceUtils;

public class PetDao {

public List<PetBean> findAll() throws SQLException {

QueryRunner qr=new QueryRunner(DataSourceUtils.getDataSource());

String sql="select * from pet";

List<PetBean> list = qr.query(sql, new BeanListHandler<PetBean>(PetBean.class));

return list;

}

public void add(PetBean pb) throws SQLException {

QueryRunner qr=new QueryRunner(DataSourceUtils.getDataSource());

String sql="insert into pet values (?,?,?,?,?,?,?)";

qr.update(sql, pb.getPid(),pb.getPname(),pb.getPtype(),pb.getPrice(),"pet/"+pb.getPimage(),pb.getPdate(),pb.getPdesc());

}

public PetBean findId(String id) throws SQLException {

QueryRunner qr=new QueryRunner(DataSourceUtils.getDataSource());

String sql="select * from pet where pid=?";

PetBean pb = qr.query(sql, new BeanHandler<PetBean>(PetBean.class), id);

return pb;

}

public void update(PetBean pb) throws SQLException {

QueryRunner qr=new QueryRunner(DataSourceUtils.getDataSource());

String sql="update pet set pname=?,ptype=?,price=?,pimage=?,pdesc=? where pid=?";

qr.update(sql, pb.getPname(),pb.getPtype(),pb.getPrice(),pb.getPimage(),pb.getPdesc(),pb.getPid());

}

public void delete(String id) throws SQLException {

QueryRunner qr=new QueryRunner(DataSourceUtils.getDataSource());

String sql="delete from pet where pid=?";

qr.update(sql,id);

}

public void delCheck(String id) throws SQLException {

QueryRunner qr=new QueryRunner();

String sql="delete from pet where pid=?";

qr.update(DataSourceUtils.getConnection(), sql,id);

}

public List<PetBean> sreach(String name, String kw) throws SQLException {

QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());

StringBuilder sb = new StringBuilder("select * from pet where 1=1");

List<String> list = new ArrayList<>();

System.out.println(name+kw);

if(name!=""){

sb.append(" and pname like ?");

list.add("%"+name+"%");

}

if(kw!=""){

sb.append(" and ptype like ?");

list.add("%"+kw+"%");

}

List<PetBean> query = qr.query(sb.toString(), new BeanListHandler<PetBean>(PetBean.class), list.toArray());

return query;

}

javabean

package com.it.bean;

public class PetBean {

private String pid;

private String pname;

private String ptype;

private double price;

private String pimage;

private String pdate;

private String pdesc;

public String getPid() {

return pid;

}

public void setPid(String pid) {

this.pid = pid;

}

public String getPname() {

return pname;

}

public void setPname(String pname) {

this.pname = pname;

}

public String getPtype() {

return ptype;

}

public void setPtype(String ptype) {

this.ptype = ptype;

}

public double getPrice() {

return price;

}

public void setPrice(double price) {

this.price = price;

}

public String getPimage() {

return pimage;

}

public void setPimage(String pimage) {

this.pimage = pimage;

}

public String getPdate() {

return pdate;

}

public void setPdate(String pdate) {

this.pdate = pdate;

}

public String getPdesc() {

return pdesc;

}

public void setPdesc(String pdesc) {

this.pdesc = pdesc;

}

数据库工具类

package com.it.utils;

import java.sql.Connection;

import java.sql.SQLException;

import javax.sql.DataSource;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class DataSourceUtils {

private static DataSource ds=new ComboPooledDataSource();

private static ThreadLocal<Connection> tl = new ThreadLocal<Connection>();

public static DataSource getDataSource(){

return ds;

}

public static Connection getConnection() throws SQLException{

Connection conn = tl.get();

if(conn== null){

conn=ds.getConnection();

tl.set(conn);

}

return conn;

}

public static void beginTransaction() throws SQLException{

Connection conn = getConnection();

conn.setAutoCommit(false);

}

public static void commitAndClose(){

try {

Connection conn = getConnection();

if(conn != null){

conn.commit();

}

closeConn(conn);

} catch(Exception e){

}

public static void rollbackAndClose(){

try {

Connection conn = getConnection();

if(conn != null){

conn.rollback();

}

closeConn(conn);

} catch (SQLException e) {

}

public static void closeConn(Connection conn){

try {

if(conn != null){

conn.close();

}

tl.remove();

} catch (Exception e) {

}

conn = null;

}

servlet配置文件

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">

<display-name>PetStore</display-name>

<welcome-file-list>

<welcome-file>index.html</welcome-file>

<welcome-file>index.htm</welcome-file>

<welcome-file>index.jsp</welcome-file>

<welcome-file>default.html</welcome-file>

<welcome-file>default.htm</welcome-file>

<welcome-file>default.jsp</welcome-file>

</welcome-file-list>

<display-name>PetServlet</display-name>

<servlet-name>PetServlet</servlet-name>

<servlet-class>com.it.servlet.PetServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>PetServlet</servlet-name>

<url-pattern>/pet</url-pattern>

</servlet-mapping>

</web-app>

c3p0配置文件

<c3p0-config>

<default-config>

<property name="driverClass">com.mysql.cj.jdbc.Driver</property>

<property name="jdbcUrl">jdbc:mysql://127.0.0.1:3306/pet</property>

</default-config>

<named-config name="itcast">

<property name="driverClass">com.mysql.cj.jdbc.Driver</property>

<property name="jdbcUrl">jdbc:mysql://127.0.0.1:3306/day17</property>

</named-config>

</c3p0-config>

为什么有人很怕蛇，但还是很喜欢看蛇啊？

如何做一个宠物猫咪博主?

热点分享

布偶猫吃什么对毛发好原来这些食物就可以

对于布偶猫这种长毛猫来说，一般情况下，布偶猫这样的长毛猫咪毛...

这九种宠物既新奇又独特，看完你爱上没有？

这九种宠物既新奇又独特，看完你爱上没有？小猫，小狗，仓鼠...

推荐分享

缅因猫能长多大一种体型较大的猫

缅因猫能长多大?缅因猫是很多人都喜欢的一个品种，尤其是广大的女...

警惕狗贩的骗人损招星期狗的症状特征

警惕狗贩的骗人损招染色：这一招最多的是用在斑点狗、蝴蝶犬...

热门点击排行

2024“最流行”的9种猫，附上最新参考价格，别买贵了！

带宠物被阻，女子“脱光”大闹健身房，以为不要脸就能解决问题？

分享分类导航

萌宠日常

宠物饲养指南

宠物营养食谱

动态网页项目宠物商店

为什么有人很怕蛇，但还是很喜欢看蛇啊？

如何做一个宠物猫咪博主?

布偶猫吃什么对毛发好 原来这些食物就可以

这九种宠物既新奇又独特，看完你爱上没有？

缅因猫能长多大 一种体型较大的猫

警惕狗贩的骗人损招 星期狗的症状特征

布偶猫吃什么对毛发好原来这些食物就可以

缅因猫能长多大一种体型较大的猫

警惕狗贩的骗人损招星期狗的症状特征