springmvc+mybaits-plus+jquery+layui分页对数据库进行操作实例

最新推荐文章于 2023-09-27 22:35:57 发布

滴...滴滴

最新推荐文章于 2023-09-27 22:35:57 发布

阅读量595

点赞数

本文链接：https://blog.csdn.net/Tan_tan_666/article/details/84556928

版权

控制层

package cn.ps.controller;

import cn.ps.entity.Commodity;
import cn.ps.entity.Result;
import cn.ps.service.CommodityService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class CommodityController {
    @Autowired
    private CommodityService commodityService;
	@ResponseBody
	@RequestMapping(value = "comms",method = RequestMethod.GET)
	public Result listCommodity(String productName,String prodectprice, String page, String limit){
		try {
			Result pb=commodityService.queryCommodity(productName,prodectprice, page, limit);
			return pb;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	@ResponseBody
	@RequestMapping(value = "comm",method = RequestMethod.POST)
	public Result addCommodity(Commodity commodity){
		Result result=new Result();
		try {
			commodityService.addCommodity(commodity);
		}catch (Exception e){
			result.setCode(1);
			result.setMsg("新增出错"+e.getMessage());
		}
		return result;
	}
	@ResponseBody
	@RequestMapping(value = "comm/{id}",method = RequestMethod.DELETE)
	public Result deleteCommodity(@PathVariable int id){
		Result result=new Result();
			try {
				commodityService.deleteCommodity(id);
			}catch (Exception e){
				result.setCode(1);
				result.setMsg("删除失败"+e.getMessage());
			}
		return result;
	}
	@ResponseBody
	@RequestMapping(value = "comm/{id}",method = RequestMethod.PUT)
	public Result updateCommodity(@PathVariable int id,Commodity commodity){
		Result result=new Result();
		commodity.setId(id);
		try {
			commodityService.updateCommodity(commodity);
		}catch (Exception e){
			result.setCode(1);
			result.setMsg("修改失败"+e.getMessage());
		}
		return result;
	}
}

实体类

package cn.ps.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;

public class Commodity {
	@TableId(type=IdType.AUTO)
    private int id;//商品编号
    private String productname;//商品名称
    private String prodectprice;//商品价格
    private String prodectquantity;//商品数量
    private String productiondate;//生产日期
    private String servicetel;//客服电话
    private String companyemail;//公司邮箱
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getProductname() {
		return productname;
	}
	public void setProductname(String productname) {
		this.productname = productname;
	}
	public String getProdectprice() {
		return prodectprice;
	}
	public void setProdectprice(String prodectprice) {
		this.prodectprice = prodectprice;
	}
	public String getProdectquantity() {
		return prodectquantity;
	}
	public void setProdectquantity(String prodectquantity) {
		this.prodectquantity = prodectquantity;
	}
	public String getProductiondate() {
		return productiondate;
	}
	public void setProductiondate(String productiondate) {
		this.productiondate = productiondate;
	}
	public String getServicetel() {
		return servicetel;
	}
	public void setServicetel(String servicetel) {
		this.servicetel = servicetel;
	}
	public String getCompanyemail() {
		return companyemail;
	}
	public void setCompanyemail(String companyemail) {
		this.companyemail = companyemail;
	}
}

sql映射类

package cn.ps.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import cn.ps.entity.Commodity;

public interface CommMapper extends BaseMapper<Commodity>{

}

service层：实现类

package cn.ps.service.impl;

import java.sql.SQLException;

import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;

import cn.ps.entity.Commodity;
import cn.ps.entity.Result;
import cn.ps.mapper.CommMapper;
import cn.ps.service.CommodityService;

@Service
public class CommodityServiceImpl implements CommodityService {
	@Autowired
	private CommMapper commMapper;
	public Result queryCommodity(String productName,String prodectprice, String curPage, String numPage) throws SQLException {
		//第一次访问没有当前页
		if(StringUtils.isEmpty(curPage)) {
			curPage="1";
		}
		if(StringUtils.isEmpty(numPage)) {
			numPage="10";
		}
		QueryWrapper<Commodity> qw=new QueryWrapper();
		if(StringUtils.isNotEmpty(productName)) {
			qw.like("productName", productName);
		}
		if(StringUtils.isNotEmpty(prodectprice)) {
			qw.eq("prodectprice", prodectprice);
		}
		//转换成int类型
		int cur=Integer.parseInt(curPage);
		int num=Integer.parseInt(numPage);
		IPage<Commodity> pageData=commMapper.selectPage(new Page(cur,num), qw);
		Result result=new Result();
		result.setCode(0);
		result.setCount((int)pageData.getTotal());
		result.setData(pageData.getRecords());
		return result;
	}
	public void addCommodity(Commodity commodity) {
		commMapper.insert(commodity);
	}

	public void deleteCommodity(int id) {
		commMapper.deleteById(id);
	}

	public void updateCommodity(Commodity commodity) {
		commMapper.updateById(commodity);
	}
}

service层：接口

package cn.ps.service;

import cn.ps.entity.Commodity;
import cn.ps.entity.Result;
import java.sql.SQLException;

public interface CommodityService {
	public Result queryCommodity(String productName,String prodectprice, String curPage, String numPage) throws SQLException;

    void addCommodity(Commodity commodity);

    void deleteCommodity(int id);

    void updateCommodity(Commodity commodity);
}

工具类：分页

package cn.ps.utils;
import java.util.List;

/**
 * 分页的帮助类
 * @author Administrator
 *
 * @param <T>
 */
public class PageBean<T> {
	public PageBean(int curPage, int numPage, int total) {
		//计算上一页
		this.prePage=(curPage==1?1:curPage-1);
		//计算总页
		this.totaPage=(total%numPage==0?total/numPage:total/numPage+1);
		//下一页
		this.nextPage=(curPage<totaPage?curPage+1:curPage);
		//当前页的索引
		this.startIndex=(curPage-1)*numPage;
		//总条数
		this.total=total;
		//当前页
		this.curPage=curPage;
		//总条数
		this.numPage=numPage;
	}
	public void calc(int curPage,int numPage,int total) {
		
	}
	/**
	 * 当前页
	 * 页面传递的参数
	 */
	private int curPage;
	/**
	 * 每页显示条数据 默认=10
	 */
	private int numPage=10;
	/**
	 * 上一页
	 * 根据当前页计算
	 * curPage=1 prePage=1
	 * curPage>1 prePage=curPage-1
	 * curPage=2 prePage=2-1=1
 	 */
	private int prePage;
	/**
	 * 下一页
	 * curPage=totaPage nextPage=totaPage
	 * curPage<totaPage nextPage=curPage+1
	 * 当前页=2  总页=2  下一页=2
	 * 当前页=1  总页=2  下一页=1+1
	 */
	private int nextPage;
	/**
	 * 总共多少页
	 * 总条数total/numPage
	 * total%numPage==0？total/numPage：total/numPage+1
	 */
	private int totaPage;
	/**
	 * 总共多少条
	 * 数据库查询
	 */
	private int total;
	/**
	 * 装载当前页的数据
	 */
	private List<T> data;
	/**
	 * 开始索引
	 * startIndex=(curPage-1)*numPage
	 */
	private int startIndex;
	
	public int getCurPage() {
		return curPage;
	}
	public void setCurPage(int curPage) {
		this.curPage = curPage;
	}
	public int getNumPage() {
		return numPage;
	}
	public void setNumPage(int numPage) {
		this.numPage = numPage;
	}
	public int getPrePage() {
		return prePage;
	}
	public void setPrePage(int prePage) {
		this.prePage = prePage;
	}
	public int getNextPage() {
		return nextPage;
	}
	public void setNextPage(int nextPage) {
		this.nextPage = nextPage;
	}
	public int getTotaPage() {
		return totaPage;
	}
	public void setTotaPage(int totaPage) {
		this.totaPage = totaPage;
	}
	public int getTotal() {
		return total;
	}
	public void setTotal(int total) {
		this.total = total;
	}
	public List<T> getData() {
		return data;
	}
	public void setData(List<T> data) {
		this.data = data;
	}
	public int getStartIndex() {
		return startIndex;
	}
	public void setStartIndex(int startIndex) {
		this.startIndex = startIndex;
	}
}

resources：jdbc配置文件

jdbcDriver=com.mysql.jdbc.Driver
jdbcUrl=jdbc:mysql://localhost/my_mysql?useUnicode=true&characterEncoding=UTF-8
jdbcUsername=tan_tan
jdbcPassword=789456123

resources：spring.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"
       xmlns:p="http://www.springframework.org/schema/p"
       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="cn">
		<context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
	</context:component-scan>
	<context:property-placeholder location="classpath:jdbc.properties"></context:property-placeholder>
	<bean id="dataSource" class="org.apache.commons.dbcp2.BasicDataSource">
		<property name="url" value="${jdbcUrl}"></property>
        <property name="driverClassName" value="${jdbcDriver}"></property>
        <property name="username" value="${jdbcUsername}"></property>
        <property name="password" value="${jdbcPassword}"></property>
    </bean>
    <!-- 创建数据源关联的工厂 -->
     <bean id="sessionFactoryBean" class="com.baomidou.mybatisplus.extension.spring.MybatisSqlSessionFactoryBean">
     	<property name="dataSource" ref="dataSource"></property>     	     	
     	<property name="plugins">
     		<array>
     			<bean class="com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor">
     			</bean>
     		</array>
     	</property>
     </bean>
     <bean id="mapperScannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
     	<property name="basePackage" value="cn.ps.mapper"></property>
     </bean>
	<bean id="jedisConnFactory" class="org.springframework.data.redis.connection.jedis.JedisConnectionFactory">
    	<property name="usePool" value="true"></property>
    	<property name="hostName" value="192.168.0.192"></property>
    	<property name="password" value="123456789"></property>
    	<property name="port" value="6379"></property>
    	<property name="database" value="0"></property>
    </bean>
    <bean id="stringRedisSerializer" class="org.springframework.data.redis.serializer.StringRedisSerializer"></bean>
    <bean id="redisTemplate" class="org.springframework.data.redis.core.RedisTemplate">	
    	<property name="connectionFactory" ref="jedisConnFactory"></property>
    	<property name="stringSerializer" ref="stringRedisSerializer"></property>
    	<property name="valueSerializer" ref="stringRedisSerializer"></property>
    </bean>
</beans>

WEB-INF：web.xml文件

<?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" version="2.5">
  <display-name>JAVA_MYBAITS_PLUS</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>
  <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring.xml</param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <!-- 过滤springmvc的请求 将字符集修改为utf-8 -->
    <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>
        <init-param>
            <param-name>forceRequestEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- 使springmvc支持rest风格 -->
    <filter>
        <filter-name>httpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>httpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- 中央处理器 所有的请求都将经过DispatcherServlet 然后再调用springmvc的控制层-->
    <servlet>
        <servlet-name>DispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/springweb.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>DispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

WEB-INF：springweb.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"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       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
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
        ">
    <context:component-scan base-package="cn.ps.controller"></context:component-scan>
    <bean id="validator" class="org.springframework.validation.beanvalidation.LocalValidatorFactoryBean"/>

    <!--启用验证-->
    <mvc:annotation-driven>
        <mvc:message-converters>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
    <mvc:default-servlet-handler></mvc:default-servlet-handler>
</beans>

*webapp下导入jquery*
*webapp下新建resource文件夹，导入layui*

pom.xml文件

<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>cn.ps</groupId>
  <artifactId>JAVA_MYBAITS_PLUS</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <properties>
	<maven.compiler.source>1.8</maven.compiler.source>
	<maven.compiler.target>1.8</maven.compiler.target>
	<maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>
  </properties>
  
   <dependencies>
       <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.3.20.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.5</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>4.3.19.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-dbcp2</artifactId>
            <version>2.5.0</version>
        </dependency>

        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.2</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.22</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>5.3.4.Final</version>
        </dependency>
    
		<dependency>
		    <groupId>com.baomidou</groupId>
		    <artifactId>mybatis-plus</artifactId>
		    <version>3.0.5</version>
		</dependency>
		
		<dependency>
    		<groupId>org.springframework.data</groupId>
    		<artifactId>spring-data-redis</artifactId>
    		<version>1.6.0.RELEASE</version>
		</dependency>
		
		<dependency>
    		<groupId>redis.clients</groupId>
    		<artifactId>jedis</artifactId>
    		<version>2.7.3</version>
		</dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <configuration>
                    <uriEncoding>UTF-8</uriEncoding>
                </configuration>
            </plugin>
        </plugins>
    </build>
    
</project>

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" href="resource/layui/css/layui.css"/>
    <script src="resource/layui/layui.js"></script>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        layui.use('form',function () {
            var form=layui.form;
            form.on('submit(myForm)', function(data){
                layui.table.reload('commodityTable', {
                    url: 'comms'
                    ,where: data.field //设定异步数据接口的额外参数
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                return false;
            });
            form.on('submit(addForm)', function(data){
               //alert(JSON.stringify(data.field));
                $.ajax({
                    url:'comm',
                    dataType:'json',
                    data:data.field,
                    type:'post',
                    success:function (d) {
                        if(d.code==0){
                            alert("增加成功");
                            layer.close(addWindow);
                            layui.table.reload('commodityTable', {
                                url: 'comms'
                            });
                            $("#addForm input[class=layui-input]").val("");
                        }else{
                           console.log(d.msg);
                        }
                    },
                })
                return false;
            });
            form.on('submit(updateForm)', function(data){
                data.field["_method"]="put";
                $.ajax({
                    url:'comm/'+data.field.id,
                    dataType:'json',
                    data:data.field,
                    type:'post',
                    success:function (d) {
                        if(d.code==0){
                            alert("修改成功");
                            layer.close(updateWindow);
                            layui.table.reload('commodityTable', {
                                url: 'comms',
                            });
                        }else{
                            console.log(d.msg);
                        }
                    }
                })
                return false;
            });
        });
        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: '#commodityTable'
                ,height: 474
                ,width: 984
                ,url: 'comms' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: '商品编号', width:120, sort: true, fixed: 'left'}
                    ,{field: 'productname', title: '商品名称', width:120}
                    ,{field: 'prodectprice', title: '商品价格', width:120, sort: true}
                    ,{field: 'prodectquantity', title: '商品数量', width:120}
                    ,{field: 'productiondate', title: '生产日期', width: 120}
                    ,{field: 'servicetel', title: '服务电话', width: 120, sort: true}
                    ,{field: 'companyemail', title: '公司邮箱', width: 120, sort: true}
                    ,{field: 'caoZuo', title: '操作', width: 120, sort: true,templet: function(d){
                            var str=JSON.stringify(d);
                            return "<button onclick='commDelete("+d.id+")'>删除</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
                                    "<button onclick=\"commUpdate()\" data='"+str+"'>修改</button>";
                        }}
                ]]
            });
        });
        var addWindow=null;
        function addCommodity() {
            layui.use('layer', function(){
                addWindow=layer.open({
                    type: 1,
                    area: ['500px', '410px'],
                    content:$("#addForm")
                });
            });

        };
        function commDelete(id) {
            $.ajax({
                url: 'comm/'+id,
                dataType: 'json',
                data:{
                    "_method":"delete"
                },
                type: 'post',
                success: function (d) {
                    if (d.code == 0) {
                        alert("删除成功");
                        layui.table.reload('commodityTable', {
                            url: 'comms',
                            page:1
                        });

                    } else {s
                        console.log(d.msg);
                    }
                }
            })
            return false;
        }
        var updateWindow=null;
        function commUpdate(str) {
            var source=JSON.parse(event.srcElement.getAttribute("data"));
            layui.use('layer', function(){
                updateWindow=layer.open({
                    type: 1,
                    area: ['500px', '410px'],
                    content:$("#updateForm")
                })
            });
            layui.form.val("updateForm",source)
        }
    </script>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="productname" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">商品价格</label>
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="prodectprice" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline" style="width: 100px;">
            <button class="layui-btn" lay-submit lay-filter="myForm">查询</button>
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline" style="width: 100px;">
            <a href="javascript:addCommodity()" class="layui-btn">新增</a>
        </div>
    </div>
</form>

<table id="commodityTable"></table>
</body>
</html>

<!--新增-->
<form id="addForm" class="layui-form" style="display: none"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <input type="text" name="productname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品价格</label>
        <div class="layui-input-block">
            <input type="text" name="prodectprice" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品数量</label>
        <div class="layui-input-block">
            <input type="text" name="prodectquantity" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">客服电话</label>
        <div class="layui-input-block">
            <input type="text" name="servicetel" lay-verify="phone" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">公司邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="companyemail" lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addForm">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--修改-->
<form id="updateForm" class="layui-form" lay-filter="updateForm" style="display: none"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <input type="hidden" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <input type="text" name="productname" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品价格</label>
        <div class="layui-input-block">
            <input type="text" name="prodectprice" lay-verify="number" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品数量</label>
        <div class="layui-input-block">
            <input type="text" name="prodectquantity" lay-verify="number" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">客服电话</label>
        <div class="layui-input-block">
            <input type="text" name="servicetel" lay-verify="phone" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">公司邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="companyemail" lay-verify="email" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateForm">立即保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<!--<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>-->

滴...滴滴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springmvc+mybaits-plus+jquery+layui分页对数据库进行操作实例

控制层package cn.ps.controller;import cn.ps.entity.Commodity;import cn.ps.entity.Result;import cn.ps.service.CommodityService;import org.springframework.beans.factory.annotation.Autowired;import or...
复制链接

扫一扫