Javaweb15==mysql+mybatis+servlet+axios+fasetjson+vue+elementUI前后端分离，实现列表后端分页、模糊查询后分页、新增、单一/批量删除、修改
2024-04-08 21:03:15
难点：模糊查询后再次分页，并可以选择页数。
最终环境配置：
maven3.8：依赖包管理
IDEA2021+JDK8+mysql connector java5+Mysql5+mybatis3.5：从数据库取出数据。
tomcat7插件：web服务器
servlet、fastjson、axios：处理前后端数据交互
fastjson：阿里提供的依赖包。新增时后端收到前端发过来的JSON字符串后，简化将JSON字符串解析成对象。展示商品列表时后端通过mybatis从数据库中查出数据封装成实体类对象的list之后，简化将对象list序列化成JSON字符串。
axios框架：封装了原生JavaScript的ajax操作，简化了HTTP请求的发起和响应参数的获取。
vue.js+ElementUI+html5+css3+chorme：vue.js封装了JavaScript。ElementUI组件库，封装了vue.js，通过提供了搭配的CSS。所以作为后端搭建个简易前端界面，只需要新建个html页面，new一个Vue，绑定一个DIV，然后在这个DIV里填ElementUI提供的组件，并且在head标签中的style中填ElementUI提供的CSS样式就行了。
重点：记住一切操作的背后都是对象，比如前端是在操作vue data中return的对象，后端就是new 的Brand对象。深浅拷贝涉及JS的内存知识
================================================================
项目结构：
表结构
运行效果
=================================================================
代码
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 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.ldj</groupId><artifactId>brand-crud</artifactId><version>1.0-SNAPSHOT</version><name>brand-crud</name><packaging>war</packaging><properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target></properties><dependencies><!--Servlet--><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><scope>provided</scope></dependency><!--MyBatis--><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.5</version></dependency><!--MySQL--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.34</version></dependency><!--fastjson--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version></dependency><!-- junit测试包--><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.11</version><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><version>2.2</version></plugin></plugins></build>
</project>BrandMapper
package com.ldj.mapper;import com.ldj.pojo.Brand;
import org.apache.ibatis.annotations.Param;import java.util.List;
import java.util.Map;public interface BrandMapper {/*** 查询所有** @return*/List<Brand> selectAll();/*** 添加数据** @param brand*/int add(Brand brand);int update(Brand brand);int delete(Integer id);//根据批量删除int deleteByIds(int[] ids);//多条件查询动态SQL。多个参数可以使用mapList<Brand> selectLike4(Map map);//分页查询。多个参数也可以使用@Param标签List<Brand> selectByPage(@Param("begin") int begin, @Param("size") int size);//查询总记录数int selectTotalCount();//分页模糊条件查询List<Brand> selectByPageAndCondition(Map map);//分页模糊查询//查询总记录数int selectTotalCountByPageAndCondition(Map map);}
Brand
package com.ldj.pojo;public class Brand {// id 主键private Integer id;// 品牌名称private String brandName;// 企业名称private String companyName;// 排序字段private Integer ordered;// 描述信息private String description;// 状态：0：禁用 1：启用private Integer status;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getBrandName() {return brandName;}public void setBrandName(String brandName) {this.brandName = brandName;}public String getCompanyName() {return companyName;}public void setCompanyName(String companyName) {this.companyName = companyName;}public Integer getOrdered() {return ordered;}public void setOrdered(Integer ordered) {this.ordered = ordered;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public Integer getStatus() {return status;}//逻辑视图public String getStatusStr(){if (status == null){return "未知";}return status == 0 ? "禁用":"启用";}public void setStatus(Integer status) {this.status = status;}@Overridepublic String toString() {return "Brand{" +"id=" + id +", brandName='" + brandName + '\'' +", companyName='" + companyName + '\'' +", ordered=" + ordered +", description='" + description + '\'' +", status=" + status +'}';}
}
PageBean
package com.ldj.pojo;import java.util.List;//用于分页查询的数据传递，泛型T在new的时候指定
public class PageBean<T> {//总记录数private int totalCount;//当前页数据private List<T> rows;@Overridepublic String toString() {return "PageBean{" +"totalCount=" + totalCount +", rows=" + rows +'}';}public int getTotalCount() {return totalCount;}public void setTotalCount(int totalCount) {this.totalCount = totalCount;}public List<T> getRows() {return rows;}public void setRows(List<T> rows) {this.rows = rows;}
}
BrandService
package com.ldj.service;import com.ldj.pojo.Brand;
import com.ldj.pojo.PageBean;import java.util.HashMap;
import java.util.List;
import java.util.Map;//接口约束功能，方便servlet更换具体的实现类
public interface BrandService {/*** 查询所有** @return*/List<Brand> selectAll();/*** 添加数据** @param brand*/int add(Brand brand);/*** 修改数据** @param brand*/int update(Brand brand);int delete(Integer id);List<Brand> selectLike4(Map map);int deleteByIds(int[] ids);PageBean<Brand> selectByPage(int currentPage, int pageSize);List<Brand> selectByPageLike(Map map);int selectTotalCountByPageAndCondition(Map map);
}
BrandServiceImpl
package com.ldj.service.impl;import com.ldj.mapper.BrandMapper;
import com.ldj.pojo.Brand;
import com.ldj.pojo.PageBean;
import com.ldj.service.BrandService;
import com.ldj.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;import java.util.HashMap;
import java.util.List;
import java.util.Map;//实现接口
public class BrandServiceImpl implements BrandService {//1. 创建SqlSessionFactory 工厂对象SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();@Overridepublic List<Brand> selectAll() {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 调用方法List<Brand> brands = mapper.selectAll();//5. 释放资源sqlSession.close();return brands;}@Overridepublic int add(Brand brand) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 调用方法int add = mapper.add(brand);sqlSession.commit();//提交事务//5. 释放资源sqlSession.close();return add;}@Overridepublic int delete(Integer id) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 调用方法int delete = mapper.delete(id);sqlSession.commit();//提交事务//5. 释放资源sqlSession.close();return delete;}@Overridepublic int update(Brand brand) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 调用方法int update = mapper.update(brand);sqlSession.commit();//提交事务//5. 释放资源sqlSession.close();return update;}@Overridepublic List<Brand> selectLike4(Map map) {//多条件动态查询，如果某些条件用户不填写，就要用这种对应的映射文件，类似java if else if//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);List<Brand> tbBrands = mapper.selectLike4(map);System.out.println(tbBrands);return tbBrands;}@Overridepublic int deleteByIds(int[] ids) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 调用方法int res = mapper.deleteByIds(ids);sqlSession.commit();//提交事务//5. 释放资源sqlSession.close();return res;}@Overridepublic PageBean<Brand> selectByPage(int currentPage, int pageSize) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 调用方法int begin = (currentPage - 1) * pageSize;List<Brand> list = mapper.selectByPage(begin, pageSize);int totalCount = mapper.selectTotalCount();PageBean<Brand> pageBean = new PageBean<>();pageBean.setRows(list);pageBean.setTotalCount(totalCount);sqlSession.commit();//提交事务//5. 释放资源sqlSession.close();return pageBean;}@Overridepublic List<Brand> selectByPageLike(Map map) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 调用方法List<Brand> brands = mapper.selectByPageAndCondition(map);sqlSession.commit();//提交事务//5. 释放资源sqlSession.close();return brands;}@Overridepublic int selectTotalCountByPageAndCondition(Map map) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 调用方法int count = mapper.selectTotalCountByPageAndCondition(map);sqlSession.commit();//提交事务//5. 释放资源sqlSession.close();return count;}}
SqlSessionFactoryUtils
package com.ldj.util;import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;import java.io.IOException;
import java.io.InputStream;public class SqlSessionFactoryUtils {private static SqlSessionFactory sqlSessionFactory;static {//静态代码块会随着类的加载而自动执行，且只执行一次try {String resource = "mybatis-config.xml";InputStream inputStream = Resources.getResourceAsStream(resource);sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);} catch (IOException e) {e.printStackTrace();}}public static SqlSessionFactory getSqlSessionFactory(){return sqlSessionFactory;}
}
BaseServlet
package com.ldj.web.servletoptimization;import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;public class BaseServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String requestURI = req.getRequestURI();int i = requestURI.lastIndexOf('/');String methodName = requestURI.substring(i + 1);System.out.println(methodName);Class clazz = this.getClass();Method method = null;try {method = clazz.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);method.invoke(this, req, resp);} catch (NoSuchMethodException | IllegalAccessException | InvocationTargetException e) {e.printStackTrace();}}
}
BrandServletAfterOptimization
package com.ldj.web.servletoptimization;import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.ldj.pojo.Brand;
import com.ldj.pojo.PageBean;
import com.ldj.service.BrandService;
import com.ldj.service.impl.BrandServiceImpl;import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** @author ldj* 优化后的servlet，通过BaseServlet重写HttpServlet的service方法，解析出访问的方法名，通过反射获取相应的方法并调用*/
@WebServlet("/brandAfterOptimization/*")
public class BrandServletAfterOptimization extends BaseServlet {private BrandService brandService = new BrandServiceImpl();//查询所有public void selectAllServlet(HttpServletRequest request, HttpServletResponse response) throws IOException {System.out.println("收到查询所有的请求");//1. 调用service查询List<Brand> brands = brandService.selectAll();//2. 转为JSONString jsonString = JSON.toJSONString(brands);System.out.println(jsonString);//3. 写数据//有中文防止乱码response.setContentType("text/json;charset=utf-8");response.getWriter().write(jsonString);}//添加一条数据public void addServlet(HttpServletRequest request, HttpServletResponse response) throws IOException {System.out.println("收到添加一条数据的请求");//解决乱码request.setCharacterEncoding("utf-8");//指定输入流的解码方式//1. 接收品牌数据BufferedReader br = request.getReader();String params = br.readLine();//json字符串/*阿里的fastJson.jar：(import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;)
//list转换为json
List<CustPhone> list = new ArrayList<CustPhone>();
String str=JSON.toJSON(list).toString();
//json转换为list
List<Person> list = new ArrayList<Person>();
list = JSONObject.parseArray(jasonArray, Person.class);*/if (!"".equals(params)) {//转为Brand对象Brand brand = JSON.parseObject(params, Brand.class);System.out.println("收到一条修改信息" + params);//2. 调用service添加int add = brandService.add(brand);//3. 响应成功的标识if (add == 1) {response.getWriter().write("success");}}}//批量删除public void deleteSelectedListServlet(HttpServletRequest request, HttpServletResponse response) throws IOException {System.out.println("收到批量删除的请求");//解决乱码request.setCharacterEncoding("utf-8");//指定输入流的解码方式//1. 接收品牌数据BufferedReader br = request.getReader();String params = br.readLine();//json字符串System.out.println("前端想要批量删除传过来的JSON字符串：" + params + "======");/*阿里的fastJson.jar：(import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;)
//list转换为json
List<CustPhone> list = new ArrayList<CustPhone>();
String str=JSON.toJSON(list).toString();
//json转换为list
List<Person> list = new ArrayList<Person>();
list = JSONObject.parseArray(jasonArray, Person.class);*/if (!"".equals(params)) {//转为ids数组int[] arr = JSONObject.parseObject(params, int[].class);if (arr.length != 0) {//2. 调用service删除brandService.deleteByIds(arr);//3. 响应成功的标识response.getWriter().write("success");}}}//删除一条数据public void deleteOneServlet(HttpServletRequest request, HttpServletResponse response) throws IOException {System.out.println("收到删除一条数据的请求");//解决乱码request.setCharacterEncoding("utf-8");//指定输入流的解码方式//1. 接收想要删除的IDString id = request.getParameter("id");//转为System.out.println("收到一条删除信息，想要删除的ID是" + id);//2. 调用service删除brandService.delete(Integer.valueOf(id));//3. 响应成功的标识response.getWriter().write("success");}//模糊分页查询public void selectLikeServlet(HttpServletRequest request, HttpServletResponse response) throws IOException {//获取前端传过来的三个参数封装进Map//解决乱码request.setCharacterEncoding("utf-8");//指定输入流的解码方式//1. 接收模糊查询的品牌数据BufferedReader br = request.getReader();String params = br.readLine();//json字符串//转为Brand对象Brand brandLike = JSON.parseObject(params, Brand.class);System.out.println("收到一条模糊查询信息" + params);//2接收当前页信息和每页显示多少页int currentPageLike = Integer.parseInt(request.getParameter("currentPageLike"));int pageSizeLike = Integer.parseInt(request.getParameter("pageSizeLike"));int begin = (currentPageLike - 1) * pageSizeLike;//封装查询条件Map map = new HashMap();String companyName = "";String brandName = "";if (!"".equals(brandLike.getCompanyName())) {//不为空则进行模糊查询companyName = "%" + brandLike.getCompanyName() + "%";brandLike.setCompanyName(companyName);}if (!"".equals(brandLike.getBrandName())) {//不为空则进行模糊查询brandName = "%" + brandLike.getBrandName() + "%";brandLike.setBrandName(brandName);}map.put("begin", begin);map.put("pageSizeLike", pageSizeLike);map.put("brandLike", brandLike);//1. 调用service模糊查询List<Brand> brands = brandService.selectByPageLike(map);int countLike = brandService.selectTotalCountByPageAndCondition(map);PageBean<Brand> pageBean =new PageBean<>();pageBean.setTotalCount(countLike);pageBean.setRows(brands);//2. 转为JSONString jsonString = JSON.toJSONString(pageBean);System.out.println("模糊查询到的" + jsonString);//3. 写数据//有中文防止乱码response.setContentType("text/json;charset=utf-8");response.getWriter().write(jsonString);}//更新一条数据public void updateOneBrandServlet(HttpServletRequest request, HttpServletResponse response) throws IOException {//解决乱码request.setCharacterEncoding("utf-8");//指定输入流的解码方式//1. 接收品牌数据BufferedReader br = request.getReader();String params = br.readLine();//json字符串//转为Brand对象Brand brand = JSON.parseObject(params, Brand.class);System.out.println("收到一条修改信息" + params);//2. 调用service添加int update = brandService.update(brand);//3. 响应成功的标识if (update == 1) {response.getWriter().write("success");}}//分页查询public void selectByPage(HttpServletRequest request, HttpServletResponse response) throws IOException {int currentPage = Integer.parseInt(request.getParameter("currentPage"));int pageSize = Integer.parseInt(request.getParameter("pageSize"));PageBean<Brand> pageBean = brandService.selectByPage(currentPage, pageSize);//2. 转为JSONString jsonString = JSON.toJSONString(pageBean);System.out.println("模糊查询到的" + jsonString);//3. 写数据//有中文防止乱码response.setContentType("text/json;charset=utf-8");response.getWriter().write(jsonString);}
}
BrandMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ldj.mapper.BrandMapper"><resultMap id="brandResultMap" type="brand"><result column="brand_name" property="brandName"></result><result column="company_name" property="companyName"></result></resultMap><!--查询所有--><select id="selectAll" resultMap="brandResultMap">select *from tb_brand;</select><!--插入一条数据--><insert id="add">insert into tb_brandvalues (null, #{brandName}, #{companyName}, #{ordered}, #{description}, #{status})</insert><update id="update" parameterType="com.ldj.pojo.Brand">update tb_brandset brand_name = #{brandName},company_name = #{companyName},ordered = #{ordered},description = #{description},`status` = #{status}where id = #{id}</update><delete id="delete">deletefrom tb_brandwhere id = #{id}</delete><!--多条件动态查询用where标签和if test标签，如果一个条件都不满足，就会自动去除where中的所有内容--><select id="selectLike4" parameterType="com.ldj.pojo.Brand" resultMap="brandResultMap">select *from tb_brand<where><if test="status != null">and status = #{status}</if><if test="companyName != null and companyName != ''"><!-- 这里不能用equals来判断-->and company_name like #{companyName}</if><if test="brandName != null and brandName != ''">and brand_name like #{brandName}</if></where></select><delete id="deleteByIds" parameterType="int">deletefrom tb_brand where id in<foreach item="item" collection="array" open="(" separator="," close=")">#{item}</foreach></delete><select id="selectByPage" parameterType="int" resultMap="brandResultMap">select *from tb_brandlimit #{begin},#{size};</select><select id="selectTotalCount" resultType="int">select count(*)from tb_brand</select><select id="selectByPageAndCondition" resultMap="brandResultMap">select *from tb_brand<where><if test="brandLike.status != null">and status = #{brandLike.status}</if><if test="brandLike.companyName != null and brandLike.companyName != ''"><!-- 这里不能用equals来判断-->and company_name like #{brandLike.companyName}</if><if test="brandLike.brandName != null and brandLike.brandName != ''">and brand_name like #{brandLike.brandName}</if></where>limit #{begin},#{pageSizeLike};</select><select id="selectTotalCountByPageAndCondition" resultType="int">select count(*)from tb_brand<where><if test="brandLike.status != null">and status = #{brandLike.status}</if><if test="brandLike.companyName != null and brandLike.companyName != ''"><!-- 这里不能用equals来判断-->and company_name like #{brandLike.companyName}</if><if test="brandLike.brandName != null and brandLike.brandName != ''">and brand_name like #{brandLike.brandName}</if></where></select>
</mapper>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><typeAliases><package name="com.ldj.pojo"/></typeAliases><environments default="development"><environment id="development"><transactionManager type="JDBC"/><dataSource type="POOLED"><property name="driver" value="com.mysql.jdbc.Driver"/><property name="url" value="jdbc:mysql:///db1?useSSL=false"/><property name="username" value="root"/><property name="password" value="1234"/></dataSource></environment></environments><mappers><!--扫描mapper--><package name="com.ldj.mapper"/></mappers>
</configuration>brandAfterOptimizationPageBehind.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head>
<body>
<a href="http://localhost:8080/brand-crud/brand.html">去往前端分页未优化servlet</a> <br> <br> <br>
<a href="http://localhost:8080/brand-crud/brandAfterOptimization.html">去往前端分页已优化servlet</a> <br> <br> <br>
<a href="http://localhost:8080/brand-crud/brandAfterOptimizationPageBehind.html">去往后端分页已优化servlet</a><div id="app"><!--模糊查询表单--><el-form :inline="true" :model="brandLike" class="demo-form-inline"><el-form-item label="当前状态"><el-select v-model="brandLike.status" placeholder="当前状态"><el-option label="启用" value="1"></el-option><el-option label="禁用" value="0"></el-option></el-select></el-form-item><el-form-item label="企业名称"><el-input v-model="brandLike.companyName" placeholder="企业名称"></el-input></el-form-item><el-form-item label="品牌名称"><el-input v-model="brandLike.brandName" placeholder="品牌名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="selectByPageAndCondition">模糊查询</el-button></el-form-item></el-form><!--删除、新增按钮--><el-row><el-button type="danger" plain @click="deleteList">批量删除</el-button><el-button type="primary" plain @click="dialogVisible = true">新增</el-button></el-row><!--添加数据对话框表单--><el-dialogtitle="编辑品牌":visible.sync="dialogVisible"width="30%"><el-form ref="form" :model="brandAdd" label-width="80px"><el-form-item label="品牌名称"><el-input v-model="brandAdd.brandName"></el-input></el-form-item><el-form-item label="企业名称"><el-input v-model="brandAdd.companyName"></el-input></el-form-item><el-form-item label="排序"><el-input v-model="brandAdd.ordered"></el-input></el-form-item><el-form-item label="备注"><el-input type="textarea" v-model="brandAdd.description"></el-input></el-form-item><el-form-item label="状态"><el-switch v-model="brandAdd.status"active-value="1"inactive-value="0"></el-switch></el-form-item><el-form-item><el-button type="primary" @click="addBrand">提交</el-button><el-button @click="cancelDo">取消</el-button></el-form-item></el-form></el-dialog><!--修改的弹对话框表单--><el-dialogtitle="修改更新品牌":visible.sync="dialogVisibleUpdate"width="30%"><el-form ref="form" :model="brand" label-width="80px"><el-form-item label="品牌名称"><el-input v-model="brand.brandName"></el-input></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName"></el-input></el-form-item><el-form-item label="排序"><el-input v-model="brand.ordered"></el-input></el-form-item><el-form-item label="备注"><el-input type="textarea" v-model="brand.description"></el-input></el-form-item><el-form-item label="状态"><el-switch v-model="brand.status":active-value="1":inactive-value="0"></el-switch></el-form-item><el-form-item><el-button type="primary" @click="updateBrandDo">提交修改</el-button><el-button @click="dialogVisibleUpdate = false">取消</el-button></el-form-item></el-form></el-dialog><!--显示数据的主表格，后端分页--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><!-- 每条记录最前方的小选择框--><el-table-columntype="selection"width="55"></el-table-column><!-- 每条记录的编号--><el-table-columnlabel="序号"type="index"width="50"></el-table-column><!-- <el-table-column--><!-- prop="id"--><!-- label="ID"--><!-- align="center"--><!-- //row自动对应整个对象，取出ID备用 >--></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"align="center"label="排序"></el-table-column><el-table-columnprop="description"align="center"label="描述"></el-table-column><el-table-columnprop="status"align="center"label="当前状态":formatter="stateFormat"></el-table-column><el-table-columnalign="center"label="操作"><template slot-scope="updateData"><el-row><el-button type="primary" @click="updateOneBrand(updateData.row)">修改</el-button><el-button type="danger" @click="deleteOneBrand(updateData.row)">删除</el-button></el-row></template></el-table-column></el-table></template><!--分页工具条--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="pageSizes":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="totalNum"></el-pagination></div><!--引入依赖-->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script><script>new Vue({el: "#app",methods: {//点击取消新增或者取消修改按钮时执行此方法重置提示框cancelDo() {this.dialogVisible = false;this.brand = {status: '',brandName: '',companyName: '',id: "",ordered: "",description: ""};this.brandAdd = {status: '',brandName: '',companyName: '',id: "",ordered: "",description: ""}},//显示每行颜色间隔变化tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';},// 复选框选中后执行的方法handleSelectionChange(val) {this.multipleSelection = val;//选中的对象集合let listSelect = this.multipleSelection;console.log(listSelect)//获取ID集合this.ids = [];//保险起见。先重置一下if (listSelect.length != 0) {for (let i = 0; i < listSelect.length; i++) {this.ids[i] = listSelect[i].id;}}console.log("删除的ID集合" + this.ids)},//点击批量删除后执行此方法deleteList() {let _this = this;console.log("想要批量删除：" + _this.ids);axios({method: "post",url: "http://localhost:8080/brand-crud/brandAfterOptimization/deleteSelectedListServlet",data: JSON.stringify(this.ids)//会自动转换，可以不写转换语句//JS对象转通过方法JSON.stringify(js对象) 转换为 JSON串，servlet中以req.getReader()流的形式读取}).then(function (resp) {// 判断响应数据是否为 successif (resp.data === "success") {_this.selectByPageAndCondition();// alert("删除成功！"_this.ids = [];//重置选择的IDS集合_this.$message({message: '批量删除成功', type: 'success'});} else {alert("删除失败");_this.selectByPageAndCondition();}})},// 点击查询后执行此方法：按条件模糊查询selectByPageAndCondition() {console.log("模糊查询的条件为" + this.brandLike.status + this.brandLike.companyName + this.brandLike.brandName);let _this = this;_this.selectMethod = 1;//标志符改成模糊查询axios({method: "post",url: "http://localhost:8080/brand-crud/brandAfterOptimization/selectLikeServlet?currentPageLike=" + this.currentPageLike + "&pageSizeLike=" + this.pageSizeLike,data: JSON.stringify(this.brandLike)//会自动转换，可以不写转换语句//JS对象转通过方法JSON.stringify(js对象) 转换为 JSON串，servlet中以req.getReader()流的形式读取}).then(function (resp) {// 判断响应数据是否为 successif (resp.data != "") {// alert("查询成功！")_this.tableData = resp.data.rows;//后端已经分页_this.totalNum = resp.data.totalCount;_this.$message({message: '模糊分页查询成功', type: 'success'});} else {alert("模糊分页查询失败");}})},// 点击新增按钮后会将新增提示框显现，数据填写完毕后，点击提交会执行此方法：添加数据addBrand() {let _this = this;console.log("想要添加：" + _this.brandAdd.brandName);axios({method: "post",url: "http://localhost:8080/brand-crud/brandAfterOptimization/addServlet",data: JSON.stringify(this.brandAdd)//会自动转换，可以不写转换语句//JS对象转通过方法JSON.stringify(js对象) 转换为 JSON串，servlet中以req.getReader()流的形式读取}).then(function (resp) {// 判断响应数据是否为 successif (resp.data == "success") {// alert("添加成功！")_this.dialogVisible = false;_this.selectByPageAndCondition();_this.brandAdd = {};//重置brandAdd对象// location.href = "http://localhost:8080/brand-crud/brandAfterOptimization/brand.html";// 弹出消息提示_this.$message({message: '恭喜你，添加成功', type: 'success'});} else {alert("添加失败");_this.selectByPageAndCondition();// location.href = "http://localhost:8080/brand-crud/brandAfterOptimization/brand.html";}})},//后端分页==========================================//每页显示条数改变后执行：选择 ?条/页后执行此方法handleSizeChange(val) {console.log(`每页 ${val} 条`);if (this.selectMethod == 0) {//正常分页查询this.pageSize = val;this.selectByPageAndCondition();} else if (this.selectMethod == 1) {//模糊分页查询this.pageSizeLike = val;this.selectByPageAndCondition();}},//当前页改变后执行：//选择 123456.。。之后执行此方法。//选择 前往？页后执行此方法handleCurrentChange(val) {if (this.selectMethod == 0) {//正常分页查询this.currentPage = val;this.selectByPageAndCondition();} else if (this.selectMethod == 1) {//模糊分页查询this.currentPageLike = val;this.selectByPageAndCondition();}},//点击删除按钮后执行此方法deleteOneBrand(data) {console.log("想要删除的数据的ID" + data.id)let _this = this;//页面加载完成后发送异步请求获取列表数据，获取到的为JSON字符串//往前端传JS对象会自动转成JSON字符串axios({method: "get",url: "http://localhost:8080/brand-crud/brandAfterOptimization/deleteOneServlet?id=" + data.id}).then(function (resp) {//axios会将后端传过来JSON字符串自动转成JS对象//将JSON字符串转成JS对象的原生JS方法是===parse(str) ：// 将 JSON串转换为 js 对象。使用方式是： var jsObject = JSON.parse(jsonStr);// 判断响应数据是否为 successif (resp.data == "success") {_this.selectByPageAndCondition();// 弹出消息提示_this.$message({message: '删除成功', type: 'success'});} else {alert("删除失败");_this.selectByPageAndCondition();}});},//点击修改按钮后获取当前行数据，提示框显现updateOneBrand(data) {console.log("想要修改的数据的ID" + data.id)this.dialogVisibleUpdate = true;// this.brand = data;//浅拷贝，我改你也改this.brand = JSON.parse(JSON.stringify(data));//深拷贝，我改你不改},//修改提示框显现后，显示停用启用stateFormat(row, column) {if (row.status === 1) {return '启用'} else {return '停用'}},//填写修改后的信息后，点击提交修改按钮后，执行此方法updateBrandDo() {let _this = this;console.log("想要添加：" + _this.brand.brandName);axios({method: "post",url: "http://localhost:8080/brand-crud/brandAfterOptimization/updateOneBrandServlet",data: JSON.stringify(this.brand)//会自动转换，可以不写转换语句//JS对象转通过方法JSON.stringify(js对象) 转换为 JSON串，servlet中以req.getReader()流的形式读取}).then(function (resp) {// 判断响应数据是否为 successif (resp.data == "success") {// alert("添加成功！")_this.dialogVisibleUpdate = false;//关闭弹窗_this.selectByPageAndCondition();//重现所有_this.brand = {};//重置brand对象// location.href = "http://localhost:8080/brand-crud/brandAfterOptimization/brand.html";// 弹出消息提示_this.$message({message: '修改成功', type: 'success'});} else {alert("修改失败");_this.selectByPageAndCondition();// location.href = "http://localhost:8080/brand-crud/brandAfterOptimization/brand.html";}})},},//钩子函数，页面初次加载DIV被EL后自动调用此方法mounted() {this.selectByPageAndCondition();},//页面中用到的相关VM对象data() {return {//是否是模糊查询的标志0表示正常分页查询，1表示模糊分页查询，默认0selectMethod: 0,// 默认当前页码currentPage: 1,//每页显示多少条选择框pageSizes: [3, 10, 15, 20],//当前每页默认显示多少条pageSize: 3,//默认总数据的条数totalNum: 0,//默认首次模糊查询当前页码currentPageLike: 1,//当前每页默认显示多少条pageSizeLike: 3,// 添加数据对话框是否展示的标记，默认不显示dialogVisible: false,//修改更新数据对话框是否展示的标记，，默认不显示dialogVisibleUpdate: false,// 品牌模型数据:用于修改brand: {status: '',brandName: '',companyName: '',id: "",ordered: "",description: ""},//品牌模型数据:用于模糊查询brandLike: {status: '',brandName: '',companyName: '',id: "",ordered: "",description: ""},//品牌模型数据:用于新增brandAdd: {status: '',brandName: '',companyName: '',id: "",ordered: "",description: ""},//复选框选中的数据集合multipleSelection: [],//复选框选中的数据的ID集合ids: [],// 表格数据，从后端接收到的JSON字符串经过AXIOS自动转成JS对象并赋值到这里tableData: []}}})</script></body>
</html>index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title>
</head>
<body><a href="http://localhost:8080/brand-crud/brand.html">去往前端分页，未优化servlet</a> <br> <br> <br>
<a href="http://localhost:8080/brand-crud/brandAfterOptimization.html">去往前端分页，已优化servlet</a> <br> <br> <br>
<a href="http://localhost:8080/brand-crud/brandAfterOptimizationPageBehind.html">去往后端分页，已优化servlet</a></body>
</html>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">
</web-app>element-UI和vue.js和axios的依赖包太长，需要时直接上官网下载吧，版本如下：
Vue.js v2.6.10
=================================
"name": "element-ui",
"version": "2.13.0",
===============================
axios v0.18.0在pom.xml上右键点击tomcat7.run后，浏览器输入初始页面的地址，点击第三个功能：
http://localhost:8080/brand-crud
如上，实现了：
1、单表的后端分页显示到前端页面、前端页面三种方式选择页数。
2、进行模糊查询，并且模糊查询后能在模糊查询结果中实现分页。
3、新增一条、删除一条、批量删除、修改
Javaweb15==mysql+mybatis+servlet+axios+fasetjson+vue+elementUI前后端分离，实现列表后端分页、模糊查询后分页、新增、单一/批量删除、修改相关推荐
- mysql模糊查询后分页_jsp模糊查询后的数据进行分页,但点击下一页后就查询全部的了...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 String path = request.getContextPath(); String basePath = request.getScheme() ...
- 鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统
鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统 1. 项目背景 一.随着公司的快速发展,企业人员和经 ...
- dotnetcore+vue+elementUI 前后端分离 三（前端篇）
说明: 本项目使用了 mysql employees数据库,使用了vue + axois + element UI 2.0 ,演示了 单页程序 架构 ,vue router 的使用,axois 使用, ...
- 基于SSM+SpringBoot+Vue+ElementUI前后端分离的校园岗位招聘就业管理系统
运行视频 基于SSM+SpringBoot+Vue+ElementUI前后端分离的校园岗位招聘就业管理系统 项目运行截图 学生管理 添加学生 学生信息 教师管理 教师信息 实习基地 公告信息 公司管理 ...
- Bootstrap4+MySQL前后端综合实训-Day07-PM【用户信息管理页面——功能展示(分页显示数据、添加用户、批量删除用户、编辑用户信息)、servlet项目代码整理汇总】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目 录 页面展示 分页显示数据 添加用户信息 (单个/批量)删除用户 编辑 ...
- 短视频社交|电影点播平台Springboot+vue+ElementUI前后端分离
感谢您的关注,请收藏以免忘记,点赞以示鼓励,评论给以建议,爱你哟 项目编号:BS-PT-071 一,项目简介 本项目基于Springboot+vue开发实现了一个电影点播和短视频分享平台,名为爱奇艺影 ...
- dotnetcore+vue+elementUI 前后端分离架 二（后端篇）
前言 最近几年前后端分离架构大行其道,而且各种框架也是层出不穷.本文通过dotnetcore +vue 来介绍 前后端分离架构实战. 涉及的技术栈 服务端技术 mysql 本项目使用mysql 作为持 ...
- springboot+vue +ElementUI前后端分离框架搭建教程
项目介绍 一款 Java 语言基于 SpringBoot2.x.MybatisPlus.Vue.ElementUI.MySQL等框架精心打造的一款前后端分离框架,致力于实现模块化.组件化.可插拔的前后 ...
- 最棒的Vue+ElementUI前后端分离框架
项目介绍 一款 Java 语言基于 SpringBoot2.x.MybatisPlus.Vue.ElementUI.MySQL等框架精心打造的一款前后端分离框架,致力于实现模块化.组件化.可插拔的前后 ...
最新文章
- 解决问题 inner element must either be a resource reference or empty.
- 2021-05-19 Schur补引理及证明
- python restful 框架_restful-dj
- HSSFDataFormat大全
- K-th Beautiful String CodeForces - 1328B（二分+数学）
- linux系统监控和进程管理
- java时间类Date、Calendar及用法
- YUV格式学习：YUV444转换RGB24
- 昆明北大附中2021高考成绩查询入口,昆明高考成绩单：昆明多所高中高考数据来啦！...
- 赣南师范大学科技学院计算机科学与技术,2021江西独立学院转设最新消息（新增两所）：赣南师范大学科技学院转设公办?...
- 程序员常用的泛型机制究竟怎么玩？
- Html设置div重置样式,CSS 重置样式
- 拓端tecdat|把握出租车行驶的数据脉搏 ：出租车轨迹数据给你答案!
- Access数据库的查询
- 10-20210308华为海思Hi3516DV300在鸿蒙系统下测试网络（以太网+WIFI）
- 企业内网通讯软件有哪些优势？
- cookie.setValue一些注意事项
- SPSS进行问卷数据的效度分析及结果解读（问卷数据统计分析第3步(转载)
- Pairing heap
- ubuntu16.04无线网卡rtl8723be驱动问题