水果库存系统(SSM+Thymeleaf版)

不为失败找理由,只为成功找方法。所有的不甘,因为还心存梦想,所以在你放弃之前,好好拼一把,只怕心老,不怕路长。

文章目录

  • 一、前言
  • 二、系统架构与需求分析
    • 1、技术栈
      • 1.1 后端
      • 1.2 前端
    • 2、需求分析
  • 三、设计数据库
  • 四、后端篇
    • 1、环境搭建
    • 2、SSM整合(配置文件编写)
      • 2.1 database.properties文件编写:
      • 2.2 mybatis-config.xml编写:
      • 2.3 spring-dao.xml编写:
      • 2.4 spring-service.xml编写:
      • 2.5 spring-mvc.xml编写:
      • 2.6 applicationContext.xml编写:
    • 3、web.xml文件配置(重点)
    • 4、持久层(Mapper) 编写
    • 5、业务层(Service) 编写
    • 6、控制层(Controller) 编写
  • 五、前端篇
    • 1、页面结构HTML
      • 1.1 index页面:
      • 1.2 food页面:
    • 2、页面样式CSS
    • 3、JavaScript脚本编写
      • 3.1 新增和修改功能
      • 3.2 删除功能
  • 六、总结


一、前言

本系统是一个简易版的水果库存系统,在前面的文章里面也有写过 水果库存基础版 和水果库存进阶版;这两个版本的区别是基础版是使用javaSE的知识,进阶版是使用了Spring框架技术,特别是合理的理由了IOC(控制反转)进行重构;如果有兴趣的小伙伴可以点击对应链接查看详情。 而编写本篇文章目的是为了把页面以网页的形式展现出来。而该篇文章适合人群是刚学会SSM框架但是不太懂怎么整合的小伙伴,也适合不知道前端和后端怎么联调开发流程的小伙伴。所以本系统会从0到1完整的开发流程进行讲解。

二、系统架构与需求分析

1、技术栈

1.1 后端

① JDK8
② IDEA(2022)
③ Maven 3.8.3
④ Tomcat 8.0
⑤ Spring、SpringMVC 5.3.20
⑥ Mybatis 3.5.7
⑦ Mybatis-Spring 2.0.6
⑧ MySQL 8.0.22
⑨ Thymeleaf 3.0.15

1.2 前端

① HTML
② CSS
③ JQuery
④ AJAX

以上就是本系统使用到技术栈,如果你已经学习了以上知识,但是又不知道怎么运用,那么本篇文章会一一进行讲解。

2、需求分析

我们先来看看项目的总体结构:
项目结构图
由上图所示可以知道,我们的项目是以maven的形式进行搭建的。系统架构使用了常见的MVC三层架构进行实现。本项目不是使用前后端分离的,而是使用了模板引擎Thymeleaf进行页面渲染。 然后就是功能分析;本系统实现了常见的CRUD功能。就是查询水果库存(包含分页)新增水果库存,修改水果库存和删除水果库存。 不过在开发功能之前我们要先做一些准备工作,首先得有存数据的仓库— 数据库,所以我们先来设计一下数据库。

三、设计数据库

本系统的数据库设计比较简单,就一个表就可以了,我这里把该表名为t_fruit,该表设计如下:

字段名数据类型非空自增注释
fidintyesyes主键编号
fnamevarchar(20)yesno-名称
priceintnono-单价
fcountintnono-数量
remarkvarchar(50)nono-广告词
producervarchar(10)nono-产地

SQL语句如下所示

# 创建一个名为fruitdb的数据库
CREATE DATABASE fruitdb;
# 进入数据库fruitdb
USE fruitdb;
# 创建数据表t_fruit
CREATE TABLE `t_fruit` (`fid` int NOT NULL AUTO_INCREMENT COMMENT '编号',`fname` varchar(20) NOT NULL COMMENT '名称',`price` int DEFAULT NULL COMMENT '单价',`fcount` int DEFAULT NULL COMMENT '数量',`remark` varchar(50) COMMENT '广告词',`producer` varchar(10) COMMENT '产地',PRIMARY KEY (`fid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

通过以上的SQL语句就可以创建一个数据库和数据表,现在有了数据表,那么接下来就要开始从后端到前端的开发了。我们先从后端开始>>>

四、后端篇

1、环境搭建

后端的任何功能的开始,都必须有一个环境,所以我们先来搭建一个SSM环境出来。本系统IDE使用IDEA进行开发,而且是基于maven的,具体搭建步骤如下:
idea项目搭建第一步

[idea项目搭建第二步]
以上步骤就已经创建了一个基础maven项目。接下来要配置一下maven:

maven配置
由于我们本系统的页面是网页的形式,所以我们还需要在maven上添加web模块,具体步骤如下:

web模块
到此本系统的Web项目就创建完成了,项目结构如下所示:项目结构
项目创建完毕之后,那么就该导入依赖了,和我们以前导入Jar包是一个意思。之前是我们自己导入每一个Jar包,但是有了maven之后,那么我们只要导入对应的坐标依赖就行了,至于Jar包maven会帮我们下载下来。依赖导入是在pom.xml文件中进行编写,本系统使用到的依赖有如下:

<dependencies><!-- spring --><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>5.3.20</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId><version>5.3.20</version></dependency><!-- aop与事务 --><dependency><groupId>org.springframework</groupId><artifactId>spring-aspects</artifactId><version>5.3.20</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-tx</artifactId><version>5.3.20</version></dependency><!-- mysql驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.22</version></dependency><!-- mybatis --><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.7</version></dependency><!-- mybatis与spring整合 版本:mybatis3.x以上,spring5.x以上使用2.x --><dependency><groupId>org.mybatis</groupId><artifactId>mybatis-spring</artifactId><version>2.0.6</version></dependency><!-- 模板引擎Thymeleaf --><dependency><groupId>org.thymeleaf</groupId><artifactId>thymeleaf-spring5</artifactId><version>3.0.15.RELEASE</version></dependency></dependencies><!-- 静态资源导出问题 --><build><resources><resource><directory>src/main/java</directory><includes><include>**/*.properties</include><include>**/*.xml</include></includes><filtering>false</filtering></resource><resource><directory>src/main/resources</directory><includes><include>**/*.properties</include><include>**/*.xml</include></includes><filtering>false</filtering></resource></resources></build>

到此,本项目的构建已经初步完成了,但是到真正编写功能模块还得配置几个文件才可以,项目有些基础的小伙伴已经知道接下来要做的步骤了,那就是整合SSM。

2、SSM整合(配置文件编写)

接下来就是SSM整合,本质上就是进行一些xml配置文件的配置,而我们需要怎么配置呢?我们这里可以分成6个文件;分别为:database.properties(数据库参数文件)、mybatis-config.xml(Mybatis核心配置文件)、spring-dao.xml(Mybatis与Spring整合文件/持久层配置文件)、spring-service.xml(业务层配置文件)、spring-mvc.xml(SpringMVC控制层配置文件)和applicationContext.xml(整合配置文件)。好了,废话不多说,直接开干~

2.1 database.properties文件编写:

# 驱动
jdbc.driver=com.mysql.cj.jdbc.Driver
# 如果数据库MySQL8+以上需要在后面设置时区 &serverTimezone=UTC
jdbc.url=jdbc:mysql://localhost:3306/fruitdb?useSSL=true&useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
# 自己本地数据库账号 和密码
jdbc.username=root
jdbc.password=root

2.2 mybatis-config.xml编写:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration><!-- 配置输出日志:logging --><settings><setting name="logImpl" value="STDOUT_LOGGING"/></settings><!-- 配置数据源,但和spring整合之后,所以让spring去处理 --><!-- 给实体类起别名 --><typeAliases><package name="pojo"/></typeAliases><!-- mapper映射,注解开发,扫描包交给spring -->
</configuration>

2.3 spring-dao.xml编写:

<?xml version="1.0" encoding="UTF-8" ?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context="http://www.springframework.org/schema/context"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd"><!-- 1、关联数据库配置文件 即:database.properties --><context:property-placeholder location="classpath:database.properties"/><!-- 2、配置数据源 这里的数据源使用Spring的,没有使用第三方池化技术--><bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"><property name="driverClassName" value="${jdbc.driver}"/><property name="url" value="${jdbc.url}"/><property name="username" value="${jdbc.username}"/><property name="password" value="${jdbc.password}"/></bean><!-- 3、sqlSessionFactory --><bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"><property name="dataSource" ref="dataSource"/><!-- 绑定Mybatis的配置文件 --><property name="configLocation" value="classpath:mybatis-config.xml"/></bean><!-- 4、配置dao接口扫描包,动态的实现了DAO接口可以注入到Spring容器中! --><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"><!-- 注入sqlSessionFactory --><property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/><!-- 要扫描的dao包 --><property name="basePackage" value="mapper"/></bean>
</beans>

2.4 spring-service.xml编写:

<?xml version="1.0" encoding="UTF-8" ?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:context="http://www.springframework.org/schema/context"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttps://www.springframework.org/schema/context/spring-context.xsd"><!-- 扫描service下的包 进行注解开发 --><context:component-scan base-package="service"/><!-- 事务使用注解式 -->
</beans>

2.5 spring-mvc.xml编写:

<?xml version="1.0" encoding="UTF-8" ?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"xmlns:context="http://www.springframework.org/schema/context"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd"><!-- 1、注解驱动 --><mvc:annotation-driven/><!-- 2、静态资源过滤 --><mvc:resources mapping="/css/**" location="/WEB-INF/pages/css/"/><mvc:resources mapping="/js/**" location="/WEB-INF/pages/js/"/><mvc:resources mapping="/images/**" location="/WEB-INF/pages/images/"/><!-- 3、扫描包:controller --><context:component-scan base-package="controller"/><!-- 4、视图解析器 本系统使用Thymeleaf --><bean id="templateResolver" class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver"><!-- 前缀 --><property name="prefix" value="/WEB-INF/pages/"></property><!-- 后缀 --><property name="suffix" value=".html"></property><!-- 指定编码 --><property name="characterEncoding" value="utf-8"></property><!-- 是否开启缓存 --><property name="cacheable" value="false"></property><!-- 模板的类型 --><property name="templateMode" value="HTML5"></property></bean><!-- 配置模板引擎 --><bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine"><property name="templateResolver" ref="templateResolver"></property></bean><!-- 配置模板视图 --><bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver"><property name="characterEncoding" value="utf-8"></property><property name="templateEngine" ref="templateEngine"></property></bean>
</beans>

2.6 applicationContext.xml编写:

<?xml version="1.0" encoding="UTF-8" ?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsd"><!-- 导入dao、service、mvc配置 --><import resource="classpath:spring-dao.xml"/><import resource="classpath:spring-service.xml"/><import resource="classpath:spring-mvc.xml"/>
</beans>

本文件配置的目的是为了把三个文件整合起来变成一个文件,到后面启动项目的时候,利用Tomcat初始化配置把该文件作为接口加载即可。

3、web.xml文件配置(重点)

☆☆☆本文件特别重要,如果本文件没有配置,那么当访问页面的时候会出现404。原因是本配置是暴露给浏览器的。本文件是在WEB-INF目录下,具体配置如下所示:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><!-- DispatchServlet 前端控制器配置 --><servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><!-- 加载所有的配置文件 applicationContext.xml里加载了全部文件 --><param-name>contextConfigLocation</param-name><param-value>classpath:applicationContext.xml</param-value></init-param><!-- 当值为0或者大于0时,表示容器在应用启动时就加载这个servlet;反则需要时加载 --><load-on-startup>1</load-on-startup></servlet><!-- 映射路径 --><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>/</url-pattern></servlet-mapping><!-- 乱码过滤 --><filter><filter-name>encodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>utf-8</param-value></init-param></filter><!-- 过滤路径:/* 全部过滤 --><filter-mapping><filter-name>encodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!-- Session --><session-config><session-timeout>15</session-timeout></session-config>
</web-app>

到此,本系统的所有配置就已经完毕,SSM整合也到此完成了,接下来就可以开始后端功能的编写了。

4、持久层(Mapper) 编写

我们先来编写持久层,也就是操作数据库的功能,不过在编写之前,我们得先创建一个与数据表对应的实体类, 具体代码如下:

package pojo;
/*** 水果库存实体类*/
public class Fruit {private Integer id; //编号private String name; //名称private Float price; //单格private Integer count; //数量private String remark; //广告词private String producer; //产地//构造public Fruit() {}public Fruit(Integer id, String name, Float price, Integer count, String remark, String producer) {this.id = id;this.name = name;this.price = price;this.count = count;this.remark = remark;this.producer = producer;}//getting、settingpublic Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Float getPrice() {return price;}public void setPrice(Float price) {this.price = price;}public Integer getCount() {return count;}public void setCount(Integer count) {this.count = count;}public String getRemark() {return remark;}public void setRemark(String remark) {this.remark = remark;}public String getProducer() {return producer;}public void setProducer(String producer) {this.producer = producer;}@Overridepublic String toString() {return "Fruit{" +"id=" + id +", name='" + name + '\'' +", price=" + price +", count=" + count +", remark='" + remark + '\'' +", producer='" + producer + '\'' +'}';}
}

数据映射已经编写完成,接下来就是功能实现了,持久层代码如下:

package mapper;import org.apache.ibatis.annotations.*;
import org.apache.ibatis.session.RowBounds;
import pojo.Fruit;import java.util.List;
/*** 操作数据库的接口*/
public interface FruitMapper {/* 查询所有数据 */@Select("select fid id, fname name,price,fcount count,remark,producer from t_fruit")List<Fruit> findAll(RowBounds rowBounds);/* 查询总数据量 */@Select("select count(*) from t_fruit")int fruitCount();/* 新增水果库存 数据库实现了id自增策略,不用写id;字段名要和数据库一致,不用写别名 */@Insert("insert into t_fruit(fname,price,fcount,remark,producer) values (#{name},#{price},#{count},#{remark},#{producer})")int addFruit(Fruit fruit);//删除库存@Delete("delete from t_fruit where fid=#{id}")int delFruit(Integer id);//修改库存@Update("update t_fruit set fname=#{name}, price=#{price},fcount=#{count},remark=#{remark},producer=#{producer} where fid=#{id}")int updateFruit(Fruit fruit);//根据水果名称查询水果信息@Select("select fid id, fname name,price,fcount count,remark,producer from t_fruit where fname=#{fruitName}")Fruit findByName(String fruitName);
}

5、业务层(Service) 编写

到了业务层,由于本系统的业务还是比较简单的,直接调用持久层就可以了:

package service;import pojo.Fruit;import java.util.List;
/*** 业务层接口*/
public interface FruitService {/* 逻辑分页 */List<Fruit> fruitPages(Integer pageNum);/* 查询总条数 */int fruitCount();//新增库存int saveFruit(Fruit fruit);//删除库存int delFruit(Integer id);//修改库存int updateFruit(Fruit fruit);//根据水果名称查询水果信息Fruit findByName(String fruitName);
}

业务实现类如下:

package service.impl;import mapper.FruitMapper;
import org.apache.ibatis.session.RowBounds;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
import pojo.Fruit;
import service.FruitService;import javax.annotation.Resource;
import java.util.List;/*** 水果库存业务具体实现*/
@Service
public class FruitServiceImpl implements FruitService {//依赖注入持久层@Resourceprivate FruitMapper fruitMapper;/*** 利用RowBounds分页查询(逻辑分页)* @param pageNum* @return*/@Overridepublic List<Fruit> fruitPages(Integer pageNum) {//分页 公式:(当前页-1)*当前页条数RowBounds rowBounds = new RowBounds((pageNum-1)*5,5);return fruitMapper.findAll(rowBounds);}/*** 获取水果库存总数量* @return*/@Overridepublic int fruitCount() {return fruitMapper.fruitCount();}/*** 新增水果库存业务* @param fruit* @return*/@Override@Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)public int saveFruit(Fruit fruit) {int flg = fruitMapper.addFruit(fruit);return flg;}/*** 删除操作* @param id* @return*/@Overridepublic int delFruit(Integer id) {return fruitMapper.delFruit(id);}/*** 修改库存* @param fruit*/@Override@Transactional(propagation = Propagation.REQUIRED,rollbackFor = Exception.class)public int updateFruit(Fruit fruit) {return fruitMapper.updateFruit(fruit) ;}/*** 根据水果名称查询水果库存* @param fruitName 水果名称* @return*/@Overridepublic Fruit findByName(String fruitName) {Fruit fruit = fruitMapper.findByName(fruitName);return fruit;}
}

6、控制层(Controller) 编写

最后就到了控制层的编写,这里是直接与前端交互的接口,具体代码如下:

package controller;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import pojo.Fruit;
import service.FruitService;import javax.annotation.Resource;
import java.util.List;@Controller
@RequestMapping("/fruit")
public class FruitController {//依赖注入业务层@Resourceprivate FruitService fruitService;/*** 访问首页* @return*/@RequestMapping("/index")public String index(){return "/index";}/*** 查询水果库存列表* @param pageNum* @param model 存储到域中* @return*/@GetMapping("/all/{pageNum}")public String findAll(@PathVariable(required = false) Integer pageNum, Model model){List<Fruit> fruitList = fruitService.fruitPages(pageNum);model.addAttribute("fruitList",fruitList);//查询总条数int count = fruitService.fruitCount();model.addAttribute("count",count);//页数model.addAttribute("pageNum",pageNum);System.out.println(model.getAttribute("fruitList"));return "food"; //指定页面}/*** 新增水果库存* produces = "application/json;charset=UTF-8":防止响应数据乱码* @return msg 响应数据*/@PostMapping(value = "/addFruit", produces = "application/json;charset=UTF-8")@ResponseBodypublic String addFruit(Fruit fruit){//响应信息String msg = "添加水果库存成功!";//在添加水果库存之前查询一下水果名称是否唯一Fruit fruit1 = fruitService.findByName(fruit.getName());if (fruit1 != null){//存在//响应提示语给前端msg = "该水果名称已注册,不可复用!";return msg;}//调用服务层进行新增水果库存int flg = fruitService.saveFruit(fruit);if (flg < 1){msg = "添加水果库存失败,请联系管理员!";}return msg;}/*** 修改水果库存* @param fruit* @return msg 响应数据*/@PostMapping(value = "/updateFruit", produces = "application/json;charset=UTF-8")@ResponseBodypublic String updateFruit(Fruit fruit){//响应信息String msg = "水果库存修改失败!";//传进来的库存不为空并且id不为空if (fruit != null && fruit.getId() != null){//在添加水果库存之前查询一下水果名称是否唯一Fruit dbFruit = fruitService.findByName(fruit.getName());System.out.println("传进来:"+fruit+"\n数据库中:"+dbFruit);//校验水果名称是否已注册但排除本身if (dbFruit != null && dbFruit.getId() != fruit.getId()){//存在//响应提示语给前端msg = "该水果名称已注册,不可复用!";return msg;}//校验完毕,进行修改操作int flg = fruitService.updateFruit(fruit);if (flg >= 1)  msg = "水果库存修改成功!";}System.out.println("水果:"+fruit);return msg;}/*** 删除水果库存* @param id* @return*/@GetMapping(value = "/delFruit", produces = "application/json;charset=UTF-8")@ResponseBodypublic String deleteFruit(Integer id){//响应信息String msg = "删除水果库存成功!";if (null == id){msg = "请选择待删除的库存";return msg;}//调用服务层进行删除水果库存int flg = fruitService.delFruit(id);if (flg < 1){msg = "删除水果库存失败,请联系管理员!";}return msg;}
}

到此,后端的代码就已经编写完成了,我们来看一下整体结构图:
后端结构图

五、前端篇

1、页面结构HTML

后端代码已经编写完毕了,接下来就是前端页面了,我们先把页面结构编写出来,而前端的所有代码在本项目中是存放在web\WEB-INF\pages;本系统页面一共有2个,分别是index首页和food主体页面,具体HTML页面代码如下所示~

1.1 index页面:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水果库存系统</title><style>h1{padding: 5px 10px 8px 10px;background-color: blanchedalmond;font-family: kaiti;display: inline-block;border-radius: 5px;margin: 0;}h2{text-align: center;padding-top: 20px;}h2 a{text-decoration: none;}</style>
</head>
<body><h1>水果库存系统</h1><h2><a th:href="@{/fruit/all/1}">进入水果库存详情页>>></a></h2>
</body>
</html>

1.2 food页面:

<!DOCTYPE html>
<!-- xmlns:th="http://www.thymeleaf.org" Thymeleaf的声明,有语法提示,th开头的都是Thymeleaf语法 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水果库存</title><!-- 路径前面要加/ 当前目录 --><link rel="stylesheet" type="text/css" href="./css/food.css" th:href="@{/css/food.css}" />
</head><body><div id="div_conteiner"><div id="div_fruit_list"><table id="tbl_fruit"><thead><tr><th class="w16">名称</th><th class="w16">单价</th><th class="w16">数量</th><th class="w16">广告词</th><th class="w16">产地</th><th class="w16">操作</th></tr></thead><tbody><!-- 从服务器中获取数据 --><tr th:each="fruit,item:${fruitList}" th:id="${item.count}"><!-- 隐藏域 存放水果编号 --><input type="hidden" name="id" th:id="|id${item.count}|" th:value="${fruit.id}"><td th:text="${fruit.name}" th:class="|name${item.count}|">西瓜</td><td th:text="${fruit.price}" th:class="|price${item.count}|">3</td><td th:text="${fruit.count}" th:class="|count${item.count}|">60</td><td th:text="${fruit.remark}" th:class="|remark${item.count}|">描述</td><td th:text="${fruit.producer}" th:class="|producer${item.count}|">产地</td><td><img src="./images/del.jpg" th:src="@{/images/del.jpg}" th:id="${item.count}" alt="删除" class="delImg"/></td></tr><tr th:if="${#lists.isEmpty(fruitList)}"><td colspan="6">对不起,暂无数据!</td></tr></tbody><tfoot><tr><td colspan="6"><span>当前第&nbsp;<span style="color: coral; size: 1.5rem; font-weight: bold" th:text="${pageNum}">1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><a th:if="${pageNum>1}" th:href="@{/fruit/all/{pageNum}(pageNum=${pageNum}-1)}">上一页</a><a th:if="${pageNum==1}" th:disabled="true">上一页</a><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span><a th:href="@{/fruit/all/{pageNum}(pageNum=${pageNum}+1)}">下一页</a><span>&nbsp;&nbsp;总条数:<strong style="color: coral; size: 1.5rem;" th:text="${count}"></strong></span></td></tr></tfoot></table><hr color="black"/><div id="add_fruit_div"><table id="add_fruit_tbl"><tr><td>名称:</td><td><input type="text" id="name" /></td></tr><tr><td>单价:</td><td><input type="text" id="price"/></td></tr><tr><td>数量:</td><td><input type="text" id="count"/></td></tr><tr><td>广告词:</td><td><input type="text" id="remark"/></td></tr><tr><td>产地:</td><td><input type="text" id="producer"/></td></tr><th colspan="2"><input type="button" value="添加" id="addOrUpdateBtn" class="addBtn"/></th></table></div></div></div>
</body>
</html>

【说明】以上都是使用了Thymeleaf模板引擎,我们再把CSS样式编写完毕,就可以访问一下页面试试效果了。

2、页面样式CSS

html{width: 100%;height: 100%;
}
body{margin: 0;padding: 0;background:url(../images/bg.jpg) center no-repeat;background-size: cover;}
/*所有div设置*/
div{position: relative;float: left;
}/*页面数据主体*/
#div_conteiner{width: 80%;height: 100%;margin-left: 13%;float: left;margin-top: 3%;}
/*数据列表大盒子*/
#div_fruit_list{width: 89%;text-align: center;background-color: rgb(237, 249, 255);border-radius: 20px;padding-top: 2%;padding-bottom: 2%;
}
/*搜索栏*/
.search{margin-bottom: 5px;margin-left: 9%;
}
.search input{font-size: 1.2rem;padding: 3px;border-radius: 5px 0 0 5px;outline: none;border: lightgray solid 2px;}
.search button{font-size: 1.2rem;border-radius: 0 5px 5px 0;border: lightgray solid 2px;padding-bottom: 3px;background-color: #1371c3;color: white;cursor: pointer;position: relative;right: 7px;
}/*显示数据列表*/
#tbl_fruit{width: 80%;text-align: center;line-height:45px;margin-left: 9%;border-radius: 20px;
}
#tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{border: 1px solid gray;border-collapse: collapse;
}
.w16{width: 16%;
}
.delImg{width: 30px;height: 30px;vertical-align: middle; /* 图片垂直居中 */cursor: pointer;
}
thead{font-size: 1.3rem;  
}#add_fruit_div{width: 40%;margin-left: 30%;
}
#add_fruit_tbl{width: 80%;margin-top: 5px;margin-left: 5%;border-collapse: collapse;
}
#add_fruit_tbl,#add_fruit_tbl tr,#add_fruit_tbl th,#add_fruit_tbl td{border: 1px solid lightgray;text-align: center;
}/*添加和修改*/
#add_fruit_tbl input{outline: none;
}
#add_fruit_tbl td input[type='text']{width: 90%;padding: 4px;
}
/*添加修改按钮样式*/
.addBtn{font-size: 1.2rem;padding: 3px 16px;
}/*a链接禁用*/
a[disabled] {pointer-events: none;cursor: default;text-decoration: none;color: #999;
}

到此我们可以查看一下页面效果:
index页面
主页面
以上就是编码到目前为止的页面效果了;数据的展示是我已经在数据库中添加了一些数据,然后由于我们使用Thymeleaf遍历后端传来的数据,所以有数据显示,也由此查询分页功能也就完成了。

3、JavaScript脚本编写

接下来就到最后一步了,那就是把剩下的新增、修改和删除功能利用Ajax技术与后端联调就可以了。不过在联调之前,我们在本系统的数据展示模块利用js写点附属功能上去,需求是这样的:**当鼠标悬浮到对应的的行的时候,会更换颜色,当鼠标移除的时候会变回原本的颜色。**具体实现如下所示:

//当鼠标悬浮时,显示背景颜色
function showBGColor(e) {//获取事件源  event:当前发生的事件 tagName:获取当前的元素// alert(event.srcElement.tagName)// alert(window.event.srcElement.tagName);//判断是否存在该元素if (window.event && window.event && window.event.srcElement.tagName == "TD") {var td = window.event.srcElement;var tr = td.parentElement;//设置样式tr.style.backgroundColor = "lightblue";//获取tr中所有单元格var tds = tr.cells;for (var i = 0; i < tds.length; i++) {tds[i].style.color = "white";}}
}//鼠标移除时执行
function cleanBGColor() {if (window.event && window.event && window.event.srcElement.tagName == "TD") {var td = window.event.srcElement;var tr = td.parentElement;//设置样式tr.style.backgroundColor = " rgb(237, 249, 255)";//获取tr中所有单元格var tds = tr.cells;for (var i = 0; i < tds.length; i++) {tds[i].style.color = "black";}}
}

然后我们在food.html页面引入

	<!-- food.js 即上面代码存储的文件 --><script type="text/javascript" src="./js/food.js" th:src="@{/js/food.js}" ></script><!-- 后续功能实现要使用到Ajax,所以引入jQuery库 --><script type="text/javascript" src="js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>

然后我们在到html对应的标签中添加鼠标悬浮和移除事件

	<!-- onmouseover:鼠标悬浮,显示背景颜色;onmouseout:鼠标移除,清除背景颜色 --><tr th:each="fruit,item:${fruitList}" th:id="${item.count}" onmouseover="showBGColor()" onmouseout ="cleanBGColor()"></tr>

我们来看一下功能实现:

悬浮
鼠标悬浮的时候,出现背景颜色~~

移除
鼠标移除,变回原本的颜色,功能实现OK。

3.1 新增和修改功能

废话不多说,直接上代码:

//当页面加载完成后执行
window.onload = function () {addFruit();
}//点击添加按钮时进行数据新增操作
function addFruit(){$("#addOrUpdateBtn").click(function(){if ($("#addOrUpdateBtn").val() == '添加'){//校验if(!check())return false;$.ajax({url: "/fruit/addFruit",type: "post",data: { //前端携带的数据name: $("#name").val(),price: $("#price").val(),count: $("#count").val(),remark: $("#remark").val(),producer: $("#producer").val()},dataType:'text', //后端是String返回,所以为文本形式表示json格式success:function (data){//响应数据alert(data);//页面刷新location.reload();}});}});
}//在发起请求之前进行数据校验
function check(){if ($("#name").val() == ''){alert("水果名称不能为空!");return false;}if ($("#price").val() == ''){alert("水果单价不能为空!");return false;}if ($("#count").val() == ''){alert("水果数量不能为空!");return false;}return true; //校验通过
}//点击对应水果库存进行具体操作 参数为:id值
function showData(id){switch (id){case '1'://获取水果id值let fid1 = $("#id"+id).val();//调用修改水果库存函数updateFruit(id,fid1);break;case '2'://获取水果id值let fid2 = $("#id"+id).val();updateFruit(id,fid2);break;case '3'://获取水果id值let fid3 = $("#id"+id).val();updateFruit(id,fid3);break;case '4'://获取水果id值let fid4 = $("#id"+id).val();updateFruit(id,fid4);break;case '5'://获取水果id值let fid5 = $("#id"+id).val();updateFruit(id,fid5);break;}
}//修改水果库存 id:行id fid:水果id
function updateFruit(id,fid){//获取水果库存各属性值$("#name").val($('.name'+id).text());$("#price").val($('.price'+id).text());$("#count").val($('.count'+id).text());$("#remark").val($('.remark'+id).text());$("#producer").val($('.producer'+id).text());//把‘添加’按钮值改为‘修改’$("#addOrUpdateBtn").val("修改");//点击修改按钮进行相应操作$("#addOrUpdateBtn").click(function (){if ($("#addOrUpdateBtn").val() == "修改"){//参数校验if(!check()){return false;}//发起ajax请求$.ajax({url: "/fruit/updateFruit/",type: "post",data: { //前端携带的数据id: fid,name: $("#name").val(),price: $("#price").val(),count: $("#count").val(),remark: $("#remark").val(),producer: $("#producer").val()},dataType:'text', //后端是String返回,所以为文本形式表示json格式success:function (data){//响应数据alert(data);//页面刷新location.reload();}});}return false;})
}

最后绑定点击事件就可以了

<!-- 绑定点击事件函数 showData(this.id):把id值传参,这里就可以实现数据显示了 -->
<tr th:each="fruit,item:${fruitList}" th:id="${item.count}" onclick="showData(this.id)"></tr>

我们来看一下功能效果:
add

addOK

addYse

updateShow
update
updateOK
由此可见,新增和修改功能都已经实现了。

3.2 删除功能

代码如下:

//点击删除小图标执行删除数据的函数 num:html绑定事件中的参数获取
function delFruit(num) {//用户提示框let result = confirm("确定要删除该记录吗?");if (result){//确定,执行删除操作$.ajax({url: "/fruit/delFruit",type: "get",data: { //前端携带的数据id: $("#id"+num).val(),},dataType:'text', //后端是String返回,所以为文本形式表示json格式success:function (data){//响应数据alert(data);//页面刷新location.reload();}});}else {// 用户点击取消,则返回false,不执行任何操作return false;}
}

绑定点击事件,进行删除操作

	<td><!-- οnclick="delFruit(this.id)":传入的参数是id值 --><img src="./images/del.jpg" th:src="@{/images/del.jpg}" th:id="${item.count}" onclick="delFruit(this.id)" alt="删除" class="delImg"/></td>

然后我们看效果即可:
delete
点击确定删除会出现提示语:
deleteOK
删除成功!!!
deleteYes
查询数据列表可以知道test02数据已经被删除成功!!!

六、总结

    至此,本系统的功能实现完毕了。本系统是使用了后端SSM框架,模板引擎Thymeleaf;前端使用了HTML+CSS+JQuery技术。另外本人技术有限,可能在本篇内容中有不足之地,各方道友可私聊畅谈一二~~
    最后关于本系统使用到的静态资源可以可以使用自己的,也可以从源码中获取。本系统的源码已上传到码云。链接为:https://gitee.com/originnan/fruit

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/71209.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode每日一题:1123. 最深叶节点的最近公共祖先(2023.9.6 C++)

目录 1123. 最深叶节点的最近公共祖先 题目描述&#xff1a; 实现代码与解析&#xff1a; dfs 原理思路&#xff1a; 1123. 最深叶节点的最近公共祖先 题目描述&#xff1a; 给你一个有根节点 root 的二叉树&#xff0c;返回它 最深的叶节点的最近公共祖先 。 回想一下&…

【深度学习】You Only Segment Once: Towards Real-Time Panoptic Segmentation,YOSO全景分割

论文&#xff1a;https://arxiv.org/abs/2303.14651 代码&#xff1a;https://github.com/hujiecpp/YOSO 文章目录 Abstract1. Introduction2. Related Work3. Method3.1. Task Formulation3.2. Feature Pyramid Aggregator3.3. Separable Dynamic Decoder 4. Experiments4.1. …

潜艇来袭(Qt官方案例-2维动画游戏)

一、游戏介绍 1 开始界面 启动程序&#xff0c;进入开始界面。 2 开始新游戏 点击菜单&#xff1a;File》New Game &#xff08;或者CtrlN&#xff09;进入新游戏。 开始新游戏之后&#xff0c;会有一个海底的潜艇&#xff0c;和水面舰艇对战。 计算机&#xff1a;自动控制…

Leetcode1006笨阶乘

思路&#xff1a;以4为一个分组分别进行处理 class Solution:def clumsy(self, n: int) -> int:answer_dict {0:0,1: 1, 2: 2, 3: 6, 4: 7}if n > 4:answer n * (n - 1) // (n - 2) n - 3n - 4else:print(answer_dict[n])return answer_dict[n]print(answer)while n …

一文巩固Spring MVC的Bean加载机制

目录 一、什么是Spring MVC的Bean 二、Spring MVC的Bean加载机制 三、Spring MVC如何动态装载Bean 一、什么是Spring MVC的Bean 在Spring MVC中&#xff0c;Bean指的是在Spring IoC容器中创建和管理的对象。这些对象可以是普通的Java类&#xff0c;也可以是服务层组件、数据…

Python实现SSA智能麻雀搜索算法优化XGBoost回归模型(XGBRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 麻雀搜索算法(Sparrow Search Algorithm, SSA)是一种新型的群智能优化算法&#xff0c;在2020年提出&a…

028:vue上传解析excel文件,列表中输出内容

第028个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

JDK源码剖析之PriorityQueue优先级队列

写在前面 版本信息&#xff1a; JDK1.8 PriorityQueue介绍 在数据结构中&#xff0c;队列分为FIFO、LIFO 两种模型&#xff0c;分别为先进先出&#xff0c;后进后出、先进后出&#xff0c;后进先出&#xff08;栈&#xff09; 而一切数据结构都是基于数组或者是链表实现。 在…

C#文件拷贝工具

目录 工具介绍 工具背景 4个文件介绍 CopyTheSpecifiedSuffixFiles.exe.config DataSave.txt 拷贝的存储方式 文件夹介绍 源文件夹 目标文件夹 结果 使用 *.mp4 使用 *.* 重名时坚持拷贝 可能的报错 C#代码如下 Form1.cs Form1.cs设计 APP.config Program.c…

冠达管理:紧盯必要性 追问合理性 再融资问询透露监管新动向

在“活泼资本市场&#xff0c;提振出资者决心”一系列办法落地之后&#xff0c;再融资市场整体已明确收紧&#xff0c;但审阅尺度、相关细则还有待进一步观察。有接受采访的投行人士指出&#xff0c;现在存量项目仍在持续推进&#xff0c;监管审阅要点已在问询环节有较为充沛的…

SQL注入案例

目录 一、简介 二、案例 1.发现注入点 2.寻找注入类型 3.寻找字段数 4.将传参值设为超出数据量的大值&#xff0c;联合查询找到回显位置 5.找到数据库 6.寻找库中的表 7.寻找表中列 8.查看表中数据 附&#xff1a;SQLMap注入 1.输入指令查数据库 2.输入指令查表 3…

2023全国大学生数学建模竞赛C题思路模型代码来啦

目录 一.选题建议先发布&#xff0c;思路模型代码论文第一时间更新&#xff0c;获取见文末名片 二.选题建议&#xff0c;后续思路代码论文 C 题 蔬菜类商品的自动定价与补货决策 各题分析 获取完整思路代码见此处名片 一.选题建议先发布&#xff0c;思路模型代码论文第一时…

matplotlib 使用

import matplotlib.pyplot as plt %matplotlib inlineplt.figure()#创建一个画布 plt.plot([1, 0, 9], [4, 5, 6])#点数据&#xff0c;横坐标&#xff0c;纵坐标&#xff0c;相当于&#xff08;1&#xff0c;4&#xff09;&#xff08;0&#xff0c;5&#xff09;&#xff08;9…

log4qt库的使用

log4qt库的使用 一,什么是log4qt?二,log4qt的下载三,如何集成log4qt?1.在vs2022中集成log4qt的方法:模块一:配置log4qt的步骤步骤一,将下好的log4qt库进行解压,然后再库文件中,新建build和Log4Qt文件夹步骤二,打开cmake,有两个填写路径的位置.步骤三,点击cmake的configure按钮…

C高级day2

作业 写一个1.sh脚本&#xff0c;将以下内容放到脚本中&#xff1a; 在家目录下创建目录文件&#xff0c;dir 在dir下创建dir1和dir2 把当前目录下的所有文件拷贝到dir1中&#xff0c; 把当前目录下的所有脚本文件拷贝到dir2中 把dir2打包并压缩为dir2.tar.xz 再把dir2.…

《向量数据库指南》——AI原生向量数据库Milvus Cloud 2.3稳定性

在当今的互联网时代,稳定性是所有系统和应用程序的关键要素。无论是大型数据中心还是个人电脑,稳定性都是保证正常运行和用户体验的基础。在这个背景下,我们来谈谈 Milvus,一个开源的向量数据库,它在 2.1.0 版本中引入了内存多副本的概念。 Milvus 是一个开源的向量数据库…

redhat7.6安装weblogic12c

目录 一、环境准备 二、使用root创建用户和组 三、创建部署目录 四、上传安装包 五、创建 oraInst.loc 文件 六、创建wls.rsp 响应文件 七、进行安装 八、使用 wlst.sh 离线模式创建一个域 九、启动服务 十、浏览器访问 一、环境准备 REDHAT版本&#xff1a;Redhat…

Docker从认识到实践再到底层原理(二-3)|LXC容器

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…

OJ练习第165题——修车的最少时间

修车的最少时间 力扣链接&#xff1a;2594. 修车的最少时间 题目描述 给你一个整数数组 ranks &#xff0c;表示一些机械工的 能力值 。ranksi 是第 i 位机械工的能力值。能力值为 r 的机械工可以在 r * n2 分钟内修好 n 辆车。 同时给你一个整数 cars &#xff0c;表示总…

十五、MySQL(DCL)如何实现用户权限控制?

1、为什么要实现用户权限控制&#xff1f; 在日常工作中&#xff0c;会存在多个用户&#xff0c;为了避免某些用户对重要数据库进行“误操作”&#xff0c;从而导致严重后果&#xff0c;所以对用户进行权限控制是必须的。 2、常见的权限类型&#xff1a; ALL,ALL PRIVILEGES …