使用SSM框架+BootStrapTable 写增删改查
1、pom.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.hdax.dpl</groupId>
<artifactId>yoyo</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<!-- spring-webMVC-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.1.9.RELEASE</version>
</dependency>
<!--spring事务-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>5.1.9.RELEASE</version>
</dependency>
<!--切面-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>5.1.9.RELEASE</version>
</dependency>
<!-- spring-web-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>5.1.9.RELEASE</version>
</dependency>
<!-- spring-jdbc-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>5.1.9.RELEASE</version>
</dependency>
<!-- fastjson-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.68</version>
</dependency>
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.6</version>
</dependency>
<!--servlet-api 请求 转发-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<!--jstl-->
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!-- mybatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.5</version>
</dependency>
<!--mybatis整合spring mybatis-plus 自带-->
<!-- <dependency>-->
<!-- <groupId>org.mybatis</groupId>-->
<!-- <artifactId>mybatis-spring</artifactId>-->
<!-- <version>2.0.4</version>-->
<!-- </dependency>-->
<!--事务-->
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjweaver</artifactId>
<version>1.6.8</version>
</dependency>
<!--日志-->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.12</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>1.6.6</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>1.6.6</version>
</dependency>
<!--druld-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.22</version>
</dependency>
<!-- mybatis-plus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus</artifactId>
<version>3.4.0</version>
</dependency>
<!-- shiro-->
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-core</artifactId>
<version>1.6.0</version>
</dependency>
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-web</artifactId>
<version>1.6.0</version>
</dependency>
<!-- shiro-cache-->
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-cache</artifactId>
<version>1.6.0</version>
</dependency>
<!-- shiro-spring-->
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-spring</artifactId>
<version>1.6.0</version>
</dependency>
<!-- lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
</dependency>
<!-- jackson-databind依赖 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.2</version>
</dependency>
</dependencies>
</project>
2、web.xml文件
<?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">
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<servlet>
<servlet-name>spring-mvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>spring-mvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 静态资源放行 -->
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.css</url-pattern>
<url-pattern>*.ttf</url-pattern>
<url-pattern>*.woff</url-pattern>
<url-pattern>*.js</url-pattern>
<url-pattern>*.png</url-pattern>
<url-pattern>*.jpg</url-pattern>
<url-pattern>*.gif</url-pattern>
</servlet-mapping>
<filter>
<filter-name>characterEncodingFilter</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>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
3、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"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="com.yoyo.service"/>
<!--spring整合mybatis-->
<import resource="classpath:application-mybatis.xml"/>
<import resource="classpath:spring-mvc.xml"/>
</beans>
4、application-mybatis.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/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<!--数据源：负责数据库连接-->
<context:property-placeholder location="classpath:jdbc.properties"/>
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
<property name="url" value="${jdbc.url}" />
<property name="driverClassName" value="${jdbc.driver}" />
<property name="username" value="${jdbc.username}" />
<property name="password" value="${jdbc.password}" />
</bean>
<!--数据库连接工厂：产生数据库连接-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--数据库连接-->
<property name="dataSource" ref="dataSource" />
<!--mybatis配置文件-->
<!--<property name="configLocation" value="classpath:mybatis-config.xml" />-->
<!--mybatis-mapper文件配置-->
<property name="mapperLocations" value="classpath:com/yoyo/mappers/*.xml" />
<!--实体类映射别名-->
<property name="typeAliasesPackage" value="com.yoyo.entity" />
</bean>
<!--生成数据访问层代理实现类-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
<property name="basePackage" value="com.yoyo.dao" />
</bean>
</beans>
5、jdbc.properties
jdbc.url=jdbc:mysql://localhost:3306/yoyodb?useSSL=false&useUnicode=true&characterEncoding=UTF-8
jdbc.driver=com.mysql.jdbc.Driver
jdbc.username=root
jdbc.password=root
6、log4j.properties
log4j.rootLogger=info,stdout
log4j.logger.com.yoyo.dao=debug
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern= [%d{yyyy-MM-dd HH:mm:ss a}]:%p %l%m%n
7、mybatis-config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<settings>
<!--日志实现方式-->
<setting name="LogImpl" value="LOG4J"/>
</settings>
</configuration>
8、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/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="com.yoyo.controller" />
<!--静态资源不拦截-->
<mvc:default-servlet-handler/>
<mvc:resources location="/static/Hplus/css/" mapping="css/**" />
<mvc:resources location="/static/Hplus/img/" mapping="/img/**" />
<mvc:resources location="/static/Hplus/js/" mapping="/js/**" />
<mvc:resources location="/static/Hplus/plugins/" mapping="/plugins/**" />
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>application/json;charset=UTF-8</value>
</list>
</property>
<property name="fastJsonConfig">
<bean class="com.alibaba.fastjson.support.config.FastJsonConfig">
<property name="serializerFeatures">
<array>
<value>PrettyFormat</value>
<value>DisableCircularReferenceDetect</value>
<value>WriteNullStringAsEmpty</value>
<value>WriteNullNumberAsZero</value>
</array>
</property>
</bean>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
<!--视图解析器-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
9、PetMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<!-- class方式加载配置文件:class指定的是 mapper接口的地址
但是这时候就需要将接口类 和映射文件放在同一个目录下-->
<mapper namespace="com.yoyo.dao.PetDao">
<resultMap id="pet" type="com.yoyo.entity.Pet">
<id column="id" property="id"/>
<result property="age" column="age"/>
<result property="name" column="name"/>
<result property="breed" column="breed"/>
<result property="description" column="description"/>
<result property="gender" column="gender"/>
<result property="typeId" column="type_id"/>
<result property="coat" column="coat"/>
<result property="buy" column="buy"/>
<result property="sell" column="sell"/>
<result property="state" column="state"/>
<result property="weight" column="weight"/>
<result property="endDate" javaType="java.sql.Date" column="endDate"/>
<result property="createDate" javaType="java.sql.Date" column="createDate"/>
</resultMap>
<select id="findAll" resultMap="pet">
select * from pet
<where>
<if test="name!= null and name !=''">
<bind name="name" value="'%' + name + '%'" />
and name like #{name}
</if>
<if test="state!= -1">
and state=0
</if>
</where>
</select>
<delete id="delete" parameterType="int">
DELETE FROM pet WHERE id=#{id}
</delete>
<insert id="save" parameterType="pet">
INSERT INTO yoyodb.pet (name, age, gender, type_id, breed, description, buy, sell, weight, coat ,createDate)
VALUES (#{name}, #{age}, #{gender}, #{typeId}, #{breed}, #{description},#{buy},#{sell},#{weight},#{coat},now())
</insert>
<select id="getById" resultMap="pet" parameterType="int">
select * from pet where id = #{id}
</select>
<update id="updPet" parameterType="pet">
UPDATE pet
<set>
<if test="name!=null and name !=''">name = #{name} ,</if>
<if test="age!=0">age = #{age},</if>
<if test="gender!=-1">gender = #{gender},</if>
<if test="description!=null and description !=''">description = #{description},</if>
<if test="breed!=null and breed !=''">breed = #{breed},</if>
<if test="typeId!=-1">type_id = #{typeId},</if>
<if test="buy!=-1">buy = #{buy},</if>
<if test="sell!=-1">sell = #{sell},</if>
<if test="weight!=-1">weight = #{weight},</if>
<if test="coat!=null and coat !=''">coat = #{coat}</if>
</set>
where id = #{id}
</update>
</mapper>
10、controller层
package com.yoyo.controller;
import com.yoyo.entity.Pet;
import com.yoyo.entity.PetType;
import com.yoyo.entity.ResultBulls;
import com.yoyo.service.PetService;
import com.yoyo.service.PetTypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
@RequestMapping(path = "/feeding")
public class PetFeedingController {
@Autowired
private PetTypeService petTypeService;
@Autowired
private PetService petService;
/**
* 加载petType
* @return
*/
@GetMapping("petType")
public String feeding(){
return "Petfeeding";
}
/**
* 查询petType表全部
* @param model
* @param petType
* @return
*/
@RequestMapping(path = "/petTypeAll")
@ResponseBody
public List<PetType> findAll(Model model, PetType petType){
List<PetType> petTypeList =petTypeService.findAll(petType);
model.addAttribute("PetTypeAll",petTypeList);
return petTypeList;
}
/**
*加载pet
* @return
*/
@GetMapping("pet")
public String petAll(){
return "Petfeeding";
}
/**
* 查询pet表全部
* @param model
* @param pet
* @return
*/
@RequestMapping(path = "/petAll")
@ResponseBody
public List<Pet> findAll(Model model, Pet pet){
List<Pet> petList =petService.findAll(pet);
model.addAttribute("PetAll",petList);
System.out.println("+++++++++++++++++Controller"+petList);
return petList;
}
/**
* 删除
* @param id
* @return
*/
@RequestMapping(path = "delete")
@ResponseBody
public ResultBulls delete(Integer id){
int i = petService.delete(id);
ResultBulls bs = new ResultBulls();
if(i>0){
bs.setCode(200);
}else{
bs.setCode(500);
}
return bs;
}
@ResponseBody
@RequestMapping("add")
public ResultBulls add(Pet pet){
ResultBulls bs = new ResultBulls();
try{
int i = petService.save(pet);
bs.setCode(200);
}catch (Exception e){
bs.setCode(500);
e.printStackTrace();
}
return bs;
}
/**
*批量删除
* @param ids
* @return
*/
@ResponseBody
@RequestMapping("batchDel")
public ResultBulls batchDel(String ids){
ResultBulls bs = new ResultBulls();
try{
int i = petService.bacthDel(ids);
bs.setCode(200);
}catch (Exception e){
bs.setCode(500);
e.printStackTrace();
}
return bs;
}
@ResponseBody
@RequestMapping("selById")
public ResultBulls batchDel(int id){
ResultBulls bs = new ResultBulls();
try{
Pet pet = petService.selById(id);
bs.setCode(200);
bs.setData(pet);
}catch (Exception e){
bs.setCode(500);
e.printStackTrace();
}
return bs;
}
@ResponseBody
@RequestMapping("upd")
public ResultBulls upd(Pet pet){
ResultBulls bs = new ResultBulls();
try{
int index = petService.updPet(pet);
bs.setCode(200);
bs.setData(pet);
}catch (Exception e){
bs.setCode(500);
e.printStackTrace();
}
return bs;
}
}
11、entity（pojo）层
package com.yoyo.entity;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;
import java.util.Date;
@Data
public class Pet {
private long id;
private String name;
private long age;
private long gender;
private long typeId;
private String breed;
private String description;
private java.sql.Date createDate;
private long buy;
private long sell;
private String coat;
private long weight;
private long state;
@JsonFormat(pattern="yyyy-MM-dd",timezone = "GMT+8")
private Date endDate;
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 long getAge() {
return age;
}
public void setAge(long age) {
this.age = age;
}
public long getGender() {
return gender;
}
public void setGender(long gender) {
this.gender = gender;
}
public long getTypeId() {
return typeId;
}
public void setTypeId(long typeId) {
this.typeId = typeId;
}
public String getBreed() {
return breed;
}
public void setBreed(String breed) {
this.breed = breed;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public java.util.Date getCreateDate() {
return createDate;
}
public void setCreateDate(java.sql.Date createDate) {
this.createDate = createDate;
}
public long getBuy() {
return buy;
}
public void setBuy(long buy) {
this.buy = buy;
}
public long getSell() {
return sell;
}
public void setSell(long sell) {
this.sell = sell;
}
public String getCoat() {
return coat;
}
public void setCoat(String coat) {
this.coat = coat;
}
public long getWeight() {
return weight;
}
public void setWeight(long weight) {
this.weight = weight;
}
public long getState() {
return state;
}
public void setState(long state) {
this.state = state;
}
public Date getEndDate() {
return endDate;
}
public void setEndDate(Date endDate) {
this.endDate = endDate;
}
}
12、dao层
package com.yoyo.dao;
import com.yoyo.entity.Pet;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface PetDao {
/**
*查询全部
* @param entity
* @return
*/
List<Pet> findAll(Pet entity);
/**
* 添加
* @param entity
* @return
*/
public int save(Pet entity);
/**
* 根据id删除
* @param id
* @return
*/
int delete(@Param("id") int id);
/**
* 修改
* @param entity
* @return
*/
public int updete(Pet entity);
/**
* 根据id查询
* @param id
* @return
*/
Pet getById(int id);
/**
* 多条件查询
* @param t
* @return
*/
List<Pet> moreSelect(Pet t);
/**
* 修改宠物信息
* @param pet
* @return
*/
int updPet(Pet pet);
}
13、service层
package com.yoyo.service;
import com.yoyo.entity.Pet;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface PetService {
List<Pet> findAll(Pet pet);
int delete(int id);
int save(Pet pet) ;
int bacthDel(String ids) throws Exception;
Pet selById(@Param("id")int id);
int updPet(Pet pet);
}
13.1 Serviceimpl层代码
package com.yoyo.service.impl;
import com.yoyo.dao.PetDao;
import com.yoyo.entity.Pet;
import com.yoyo.service.PetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class PetServiceimpl implements PetService {
@Autowired
private PetDao petDao;
public List<Pet> findAll(Pet pet) {
// System.out.println("+++++++++++++++++++++impl"+petDao.findAll(pet));
return petDao.findAll(pet);
}
public int delete(int id) {
return petDao.delete(id);
}
public int save(Pet pet) {
return petDao.save(pet);
}
public int bacthDel(String ids) throws Exception{
String id [] = ids.split(",");
int i = 0;
for(String temp:id){
i += petDao.delete(Integer.parseInt(temp));
}
if(i!=id.length){
throw new Exception("删除失败,记录可能已被删除!");
}
return i;
}
public Pet selById(int id) {
return petDao.getById(id);
}
public int updPet(Pet pet) {
return petDao.updPet(pet);
}
}
14、ResultBulls.java
package com.yoyo.entity;
import lombok.Data;
@Data
public class ResultBulls {
Integer code;
private Object data;
}
15、jsp页面
<%--
Created by IntelliJ IDEA.
User: wanlo
Date: 2020/10/12
Time: 11:20
Author:wanlong
To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ request.getContextPath() + "/";
%>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><%-- initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放 --%>
<title>宠物进购管理</title>
<base href="<%=basePath%>">
<script src="static/commons/css/commonsCss.js"></script>
<%-- wl的页面 .col-sm-2,.col-sm-4两个class设置了行高、防止冲突 --%>
<link href="static/Hplus/css/ys.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="tableBody">
<div class="panel panel-default" style="overflow: hidden">
<div class="form-group col-sm-12">
<div class="col-sm-2" style="padding-left: 60px;margin-bottom: 20px">
<h3>宠物进购</h3>
</div>
</div>
<div class="panel-body form-group col-sm-12" style="margin-top:15px;margin-bottom: 0px">
<label class="col-sm-2 control-label text-right" >宠物名称：</label>
<div class="col-sm-2 text-left" >
<input type="text" oninput="sx()" class="form-control col-sm-2 text-left" id="searchName"/>
</div>
<div class="col-sm-3 pull-left text-left">
<button class="btn btn-primary glyphicon glyphicon-search" id="search"></button>
<button type="button" class="btn btn-success glyphicon glyphicon-plus" data-toggle="modal" data-target="#myModal"></button>
<button type="button" id="batchDel" class="btn btn-danger glyphicon glyphicon-trash"></button>
</div>
</div>
</div>
<div id="toolbar" style="margin-top: 0px;overflow: hidden" >
</div>
<table id="tables" class="table table-striped table-hover table-bordered"></table>
<%-- 模态框 增加 修改--%>
<div class="btn-group " style="margin-right: 20px">
<!-- 添加模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<form>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
添加
</h4>
</div>
<div class="modal-body" style="height: 500px">
<%-- border: 1px red solid;--%>
<div class="form-group col-sm-12" style="margin-bottom: 20px;overflow: hidden">
<label class="col-sm-2 control-label text-left">名称:</label>
<div class="col-sm-4">
<input type="text" id="name" class="form-control">
</div>
<label class="col-sm-2 control-label text-left" >成本:</label>
<div class="col-sm-4">
<input type="text" id="buy" class="form-control">
</div>
</div>
<div class="form-group col-sm-12" style="margin-bottom: 20px;overflow: hidden">
<label class="col-sm-2 control-label text-left" >年龄:</label>
<div class="col-sm-4">
<input type="text" id="age" class="form-control">
</div>
<label class="col-sm-2 control-label text-left" >售价:</label>
<div class="col-sm-4">
<input type="text" id="sell" class="form-control">
</div>
</div>
<div class="form-group col-sm-12">
<label class="col-sm-2 control-label text-left " >性别:</label>
<div class="col-sm-5">
<label style="overflow: hidden;height: 30px;width: 50px;margin-left: 15px" >
<input type="radio" checked="" value="0" id="optionsRadios1" name="gender" > 雄性</label>
</div>
<div class="col-sm-5">
<label style="overflow: hidden;height: 30px;width: 50px;margin-left: 50px" >
<input type="radio" value="1" id="optionsRadios2" name="gender"> 雌性</label>
</div>
</div>
<div class="form-group draggable col-sm-12" >
<label class="col-sm-2 control-label text-left">类型:</label>
<div class="col-sm-4">
<select id="type" class="form-control">
</select>
</div>
<label class="col-sm-2 control-label text-left" >毛色:</label>
<div class="col-sm-4">
<input type="text" id="coat" class="form-control">
</div>
</div>
<div class="form-group col-sm-12" style="margin-bottom: 20px;overflow: hidden">
<label class="col-sm-2 control-label text-left" >品种:</label>
<div class="col-sm-4">
<input type="text" id="breed" class="form-control">
</div>
<label class="col-sm-2 control-label text-left" >体重:</label>
<div class="col-sm-4">
<input type="text" id="weight" class="form-control">
</div>
</div>
<div class="form-group col-sm-12" style="margin-bottom: 20px;overflow: hidden">
<label class="col-sm-2 control-label text-left" >描述:</label>
<div class="col-sm-10">
<textarea class="form-control" id="description" rows="3"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" id="sub" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</form>
</div><!-- /.modal -->
<!-- 修改模态框（Modal） -->
<div class="modal fade" id="updeteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<form>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabels">
添加
</h4>
</div>
<div class="modal-body" style="height: 500px">
<%-- border: 1px red solid;--%>
<div class="form-group col-sm-12" style="margin-bottom: 20px;overflow: hidden">
<label class="col-sm-2 control-label text-left" >名称:</label>
<div class="col-sm-4">
<input type="text" id="names" class="form-control">
<input type="hidden" id="ids" class="form-control">
</div>
<label class="col-sm-2 control-label text-left" >成本:</label>
<div class="col-sm-4">
<input type="text" id="buys" class="form-control">
</div>
</div>
<div class="form-group col-sm-12" style="margin-bottom: 20px;overflow: hidden">
<label class="col-sm-2 control-label text-left" >年龄:</label>
<div class="col-sm-4">
<input type="text" id="ages" class="form-control">
</div>
<label class="col-sm-2 control-label text-left" >售价:</label>
<div class="col-sm-4">
<input type="text" id="sells" class="form-control">
</div>
</div>
<div class="form-group col-sm-12">
<label class="col-sm-2 control-label text-left " >性别:</label>
<div class="col-sm-5">
<label style="overflow: hidden;height: 30px;width: 50px;margin-left: 15px" >
<input type="radio" checked="" value="0" id="optionsRadios1s" name="genders" > 雄性</label>
</div>
<div class="col-sm-5">
<label style="overflow: hidden;height: 30px;width: 50px;margin-left: 50px" >
<input type="radio" value="1" id="nv" name="genders"> 雌性</label>
</div>
</div>
<div class="form-group draggable col-sm-12" >
<label class="col-sm-2 control-label text-left">类型:</label>
<div class="col-sm-4">
<select id="types" class="form-control">
</select>
</div>
<label class="col-sm-2 control-label text-left" >毛色:</label>
<div class="col-sm-4">
<input type="text" id="coats" class="form-control">
</div>
</div>
<div class="form-group col-sm-12" style="margin-bottom: 20px;overflow: hidden">
<label class="col-sm-2 control-label text-left" >品种:</label>
<div class="col-sm-4">
<input type="text" id="breeds" class="form-control">
</div>
<label class="col-sm-2 control-label text-left" >体重:</label>
<div class="col-sm-4">
<input type="text" id="weights" class="form-control">
</div>
</div>
<div class="form-group col-sm-12" style="margin-bottom: 20px;overflow: hidden">
<label class="col-sm-2 control-label text-left" >描述:</label>
<div class="col-sm-10">
<textarea class="form-control" id="descriptions" rows="3"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" id="upd" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</form>
</div>
</div>
</div>
</body>
<!-- 全局js -->
<script src="static/commons/js/commonsJs.js"></script>
<script type="text/javascript">
//动态加载表格数据
$('#tables').bootstrapTable({
url: 'feeding/petAll',
method:'get',
// contentType:"application/x-www-form-urlencoded; charset=UTF-8", 设置post请求 需要添加
pagination: true,
// cardView: true, //名片显示
showColumns: true, //显示隐藏列
showRefresh: true, //显示刷新按钮
// queryParams: queryParams, //参数
// queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
paginationPreText: "上一页",
paginationNextText: "下一页",
uniqueId: "id", //每一行的唯一标识，一般为主键列
striped: true,//行间隔色
pageSize:5, //每页的记录行数
locale: "zh-CN",
search: false, //搜索框
toolbar:'#toolbar',//工具栏
formatLoadingMessage:function(){
return "请稍等，正在加载中...";
},
formatNoMatches: function () { //没有匹配的结果
return '无符合条件的记录';
},
columns: [ {
checkbox : true,
title : '全选',
align : 'middle'
},
{
field: 'id',
title: 'ID',
align:'center',
visible: false //是否显示
}, {
field: 'name',
title: '宠物名称',
align:'center',
class: 'colStyle' //动态添加每一列样式
},{
field: 'age',
title: '年龄',
align:'center',
visible: true //是否显示
},
{
field: 'gender',
title: '性别',
align:'center',
visible: true ,//是否显示
formatter:function(value,row,inde){
if(value==0){
return '雄性';
}
return '雌性';
}
},
// {
// field: 'typeId',
// title: '类型编号',
// align:'center',
// visible: true //是否显示
// },
{
field: 'breed',
title: '宠物品种',
align:'center',
visible: true //是否显示
},
{
field: 'buy',
title: '成本￥',
align:'center',
visible: true, //是否显示
formatter:function (value,row,inde){
return value+".00元"
}
},
{
field: 'sell',
title: '售价￥',
align:'center',
visible: true, //是否显示
formatter:function (value,row,inde){
return value+".00元"
}
},
{
field: 'coat',
title: '毛色',
align:'center',
visible: true //是否显示
},
{
field: 'weight',
title: '体重/kg',
align:'center',
visible: true, //是否显示
formatter:function (value,row,inde){
return value+"kg"
}
},
{
field: 'description',
title: '描述',
align:'center',
visible: true //是否显示
},
{
field: 'createDate',
title: '创建日期',
align:'center',
visible: true, //是否显示
},
{
field: 'Desc',
title: '操作',
// events: operateEvents,//给按钮注册事件
formatter:AddFunctionAlty,//表格中添加按钮
align: 'center',
}
]
}
)
//刷新页面
function sx(){
if ($("#searchName").val().length==0){
$('#tables').bootstrapTable("refresh");
}
}
//给表格中添加 按钮
function AddFunctionAlty(value,row,index) { //给表格中添加 按钮
return[
// '<button type="button" class="btn btn-xs btn-primary" οnclick="putaWay('+row.id+')">上架</button> '+
// '<button type="button" class="btn btn-xs btn-info" οnclick="soldOut('+row.id+')">下架</button> '+
'<button type="button" class="btn btn-xs btn-warning" οnclick="upde('+row.id+')" >编辑</button> '+
'<button type="button" class="btn btn-xs btn-danger" οnclick="del('+row.id+')">删除</button>'
].join("")
}
// 删除
function del(index){
swal({
title: "您确定要删除这条信息吗",
text: "删除后将无法恢复，请谨慎操作！",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "删除",
closeOnConfirm: false
}, function () {
$.post("feeding/delete",{id:index},function(data){
swal("删除成功！", "您已经永久删除了这条信息。", "success");
$('#tables').bootstrapTable("refresh");
})
});
}
//修改模态框赋值
function upde(index){
$("#updeteModal").modal('show');
$.post("feeding/selById",{id:index},function(data){
if(data.code==200){
$("#names").val(data.data.name)
$("#breeds").val(data.data.breed)
$("#ages").val(data.data.age)
$("#descriptions").val(data.data.description)
$("#buys").val(data.data.buy)
$("#sells").val(data.data.sell)
$("#weights").val(data.data.weight)
$("#coats").val(data.data.coat)
$("#ids").val(data.data.id)
if(data.data.gender==1){
$("#nv").attr("checked",'checked');
}
//在修改模态框中，查询类型赋值 select
$.post("type/all",function(da){
if(da.code==200){
$("#types option").remove();
$(da.data).each(function(i,n){
var option = '<option value ="'+n.id+'">'+n.type+'</option>';
if(data.data.typeId==n.id){
option = '<option selected value ="'+n.id+'">'+n.type+'</option>';
}
$("#types").append(option);
})
}
})
}
})
}
$(function (){
//add 获取类型
$.post("type/all",function(data){
if(data.code==200){
$(data.data).each(function(i,n){
var option = '<option value ="'+n.id+'">'+n.type+'</option>';
// alert(option)
$("#type").append(option);
})
}
})
//添加宠物
$("#sub").click(function (){
$.post("feeding/add",{
name:$("#name").val(),
age:$("#age").val(),
breed:$("#breed").val(),
gender:$("input[name='gender']:checked").val(),
typeId:$("#type").val(),
description:$("#description").val(),
buy:$("#buy").val(),
sell:$("#sell").val(),
weight:$("#weight").val(),
coat:$("#coat").val()},function(data){
if(data.code==200){
$('#myModal').modal('hide');
$('form')[0].reset();
$('#tables').bootstrapTable("refresh");
swal({
title: "太帅了",
text: "宠物录入成功",
type: "success"
});
}else{
alert("添加失败")
}
})
})
//search
$("#search").click(function(){
var name = $("#searchName").val();
$('#tables').bootstrapTable('refresh',{
query:
{
name:name
}
});
})
//批量删除
$("#batchDel").click(function(){
var rows = $("#tables").bootstrapTable('getSelections');
var ids = "";
$(rows).each(function(i,n){
ids+=n.id+",";
})
ids = ids.substring(0,ids.length-1);
$.post("feeding/batchDel",{ids,ids},function(data){
if(data.code==200){
$('#tables').bootstrapTable("refresh");
}else{
alert("删除失败")
}
})
})
//修改宠物
$("#upd").click(function (){
$.post("feeding/upd",{id:$("#ids").val(),name:$("#names").val(),age:$("#ages").val(),breed:$("#breeds").val(),gender:$("input[name='genders']:checked").val(),typeId:$("#types").val(),description:$("#descriptions").val(),buy:$("#buys").val(),
sell:$("#sells").val(),
weight:$("#weights").val(),
coat:$("#coats").val()},function(data){
if(data.code==200){
$('#updeteModal').modal('hide');
// $('form')[0].reset();
$('#tables').bootstrapTable("refresh");
swal({
title: "太帅了",
text: "宠物修改成功",
type: "success"
});
}else{
alert("修改失败")
}
})
})
})
</script>
</html>
16、commonsCss.js
//全局css
document.write(' <link href="static/Hplus/css/bootstrap.min.css" rel="stylesheet">')
document.write('<link href="static/Hplus/css/bootstrap-table.min.css" rel="stylesheet">')
document.write(' <link href="static/Hplus/css/font-awesome.css">')
document.write(' <link href="static/Hplus/css/animate.css" rel="stylesheet">')
document.write(' <link href="static/Hplus/css/style.css" rel="stylesheet">')
//漂亮的弹窗口必须引入css
document.write(' <link href="static/Hplus/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">')
document.write(' <link href="static/Hplus/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet">')
document.write('')
document.write('')
17、commonsJs.js
//全局js
document.write('<script src="static/Hplus/js/jquery.min.js"></script>')
document.write('<script src="static/Hplus/js/bootstrap.min.js?"></script>')
document.write('<script src="static/Hplus/js/plugins/metisMenu/jquery.metisMenu.js"></script>')
document.write('<script src="static/Hplus/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>')
document.write('<script src="static/Hplus/js/plugins/layer/layer.min.js"></script>')
document.write('<script src="static/Hplus/js/bootstrap-table.min.js"></script>')
document.write('<script src="static/Hplus/js/plugins/sweetalert/sweetalert.min.js"></script>')
//bootstrap stable -表格分页详情 中文显示 必用
document.write('<script src="static/Hplus/js/bootstrap-table-zh-CN.js"></script>')
// <!-- layerDate plugin javascript -->
// document.write('<script src="static/Hplus/js/plugins/layer/laydate/laydate.js"></script>')
// document.write('<script src="static/Hplus/js/content.js"></script>')
// document.write('<script src="static/Hplus/js/moment-with-locales.min.js"></script>')
document.write('<script src="static/Hplus/js/moment.js"></script>')
document.write('<script src="static/Hplus/js/bootstrap-datetimepicker.min.js"></script>')
18、数据库文件
-- ----------------------------
-- Table structure for pet
-- ----------------------------
DROP TABLE IF EXISTS `pet`;
CREATE TABLE `pet` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '编号',
`name` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '宠物名称',
`age` int(2) NULL DEFAULT NULL COMMENT '年龄',
`gender` int(1) NULL DEFAULT NULL COMMENT '性别',
`type_id` int(11) NULL DEFAULT NULL COMMENT '类型编号',
`breed` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '宠物品种',
`description` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '描述',
`createDate` date NULL DEFAULT NULL COMMENT '创建时间',
`buy` int(11) NOT NULL COMMENT '收购价',
`sell` int(11) NOT NULL COMMENT '售价',
`coat` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '毛色',
`weight` int(11) NULL DEFAULT NULL COMMENT '体重kg',
`state` int(11) NULL DEFAULT 0 COMMENT '状态，0为待出售，1为已售出',
`endDate` datetime(0) NULL DEFAULT NULL COMMENT '售出日期',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 168 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '宠物' ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of pet
-- ----------------------------
INSERT INTO `pet` VALUES (134, '白鹰', 2, 1, 3, '叮当猫', '啦啦啦啦', '2020-09-18', 2000, 8000, '白色', 10, 0, '2020-10-20 15:12:16');
INSERT INTO `pet` VALUES (136, '多多', 1, 1, 4, '戴尔', '4564564', '2020-09-18', 200, 800, '黑色', 20, 1, '2020-10-20 15:12:16');
INSERT INTO `pet` VALUES (137, '小法', 2, 1, 4, '美国式', '4564564', '2020-09-18', 200, 800, '黑色', 20, 1, '2020-10-20 15:12:16');
INSERT INTO `pet` VALUES (138, '团团', 3, 0, 4, '45645', '4564564', '2020-09-18', 200, 800, '黑色', 20, 1, '2020-10-20 15:12:16');
INSERT INTO `pet` VALUES (146, '乌鸦', 2, 1, 4, '双西版纳象', '爱吃芭蕉叶', '2020-09-18', 200, 700, '黑色', 20, 0, '2020-10-20 15:12:16');
INSERT INTO `pet` VALUES (147, '朵朵', 2, 1, 5, '中华田园犬', 'c', '2020-09-18', 200, 700, '黑色', 20, 0, '2020-10-20 15:12:16');
INSERT INTO `pet` VALUES (150, '菲菲', 1, 1, 5, '马犬', '9595发、', '2020-10-20', 800, 2000, '藏黑', 35, 0, NULL);
INSERT INTO `pet` VALUES (152, '小黑', 1, 0, 5, '雪橇犬', '012', '2020-10-20', 500, 5000, '白色', 20, 0, NULL);
INSERT INTO `pet` VALUES (153, '小超', 1, 1, 5, '拉布拉多犬', '看我的', '2020-10-21', 50000, 500000, '纯白色', 20, 0, NULL);
INSERT INTO `pet` VALUES (154, '小花', 3, 0, 3, '中华猫', 'ccc', '2020-10-21', 500, 1000, '花色', 12, 0, NULL);
INSERT INTO `pet` VALUES (155, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
INSERT INTO `pet` VALUES (156, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
INSERT INTO `pet` VALUES (157, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
INSERT INTO `pet` VALUES (158, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
INSERT INTO `pet` VALUES (159, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
INSERT INTO `pet` VALUES (160, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
INSERT INTO `pet` VALUES (161, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
INSERT INTO `pet` VALUES (162, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
INSERT INTO `pet` VALUES (163, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
INSERT INTO `pet` VALUES (164, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
INSERT INTO `pet` VALUES (165, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
INSERT INTO `pet` VALUES (166, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
INSERT INTO `pet` VALUES (167, '法', 1, 1, 2, '1', '1', '2020-10-21', 1, 1, '1', 1, 0, NULL);
PS:以上内容仅供学习使用，不做其他任何商业用途
侵删
2032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
