600字范文 > JavaWeb综合案例——商品后台管理系统

JavaWeb综合案例——商品后台管理系统

时间：2019-07-01 03:36:59

1.功能介绍

2.工程准备

2.1pom.xml

2.2mybatis-config.xml

2.3SqlSessionFactoryUtils

2.4CheckCodeUtil

3.注册页面

3.1User

3.2UserMapper.xml

3.3UserMapper

3.4UserService

3.5register.html

3.6RegisterServlet

3.7CheckCodeServlet

4.登录页面

4.1login.html

4.2LoginServlet

4.3LoginFilter

5.后台主页面

5.1Brand

5.2BrandMapper

5.3BrandMapper.xml

5.4BrandService

5.5BrandServiceImpl

5.6BaseServlet

5.7BrandServlet

5.8PageBean

5.9brand.html

6.工程结构

7.代码下载

JavaWeb 综合案例

黑马程序员视频链接:01-综合案例-环境搭建_哔哩哔哩_bilibili

1.功能介绍

用户登录（账号密码登录）用户注册（新用户注册账号）查询所有（查询所有品牌数据）新增品牌（增加新的品牌数据）修改品牌（修改品牌数据）删除品牌（删除品牌数据）批量删除（删除多条品牌数据）分页查询（分页展示品牌数据）条件查询（通过条件精确查询品牌数据)

所用技术及工具：Mybatis+Maven+Filter+Ajax+JSON+JavaScript+HTML+CSS+Element+VUE

2.工程准备

Maven配置：

2.1pom.xml

<?xml version="1.0" encoding="UTF-8"?><project xmlns="/POM/4.0.0"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>org.example</groupId><artifactId>brand-case</artifactId><version>1.0-SNAPSHOT</version><packaging>war</packaging><properties><piler.source>8</piler.source><piler.target>8</piler.target></properties><dependencies><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><scope>provided</scope></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.5</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.34</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version></dependency></dependencies><build><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><version>2.2</version></plugin></plugins></build></project>

Mybatis配置：

2.2mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configurationPUBLIC "-////DTD Config 3.0//EN""/dtd/mybatis-3-config.dtd"><configuration><typeAliases><package name="com.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://localhost:13306/db1"/><property name="username" value="root"/><property name="password" value="1234"/></dataSource></environment></environments><mappers><package name="com.mapper"/></mappers></configuration>

2.3SqlSessionFactoryUtils

package com.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;//通过mybatis操作数据库的工具类，里面封装了对数据库的操作//只能使用一次，一旦创建后可以重复使用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;}}

验证码生成工具类：

2.4CheckCodeUtil

package com.util;import javax.imageio.ImageIO;import java.awt.*;import java.awt.geom.AffineTransform;import java.awt.image.BufferedImage;import java.io.*;import java.util.Arrays;import java.util.Random;/*** 生成验证码工具类*/public class CheckCodeUtil {public static final String VERIFY_CODES = "123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";private static Random random = new Random();public static void main(String[] args) throws Exception {//调用主方法，在D盘产生名为a的验证码图片，并在服务端打印验证码内容OutputStream fos=new FileOutputStream("d://a.jpg");String s = CheckCodeUtil.outputVerifyImage(100, 50, fos, 4);System.out.println(s);//此为CheckCodeServlet写入，在jsp中可直接调用// 如：“<img id="checkCodeImg" src="/brand-demo/CheckCodeServlet">”//ServletOutputStream os = response.getOutputStream();//String s = CheckCodeUtil.outputVerifyImage(100, 50, os, 4);}/*** 输出随机验证码图片流,并返回验证码值（一般传入输出流，响应response页面端，Web项目用的较多）** @param width 图片宽度* @param height 图片高度* @param os 输出流* @param verifySize 数据长度* @return 验证码数据* @throws IOException*/public static String outputVerifyImage(int width, int height, OutputStream os, int verifySize) throws IOException {String verifyCode = generateVerifyCode(verifySize);outputImage(width, height, os, verifyCode);return verifyCode;}/*** 使用系统默认字符源生成验证码** @param verifySize 验证码长度* @return*/public static String generateVerifyCode(int verifySize) {return generateVerifyCode(verifySize, VERIFY_CODES);}/*** 使用指定源生成验证码** @param verifySize 验证码长度* @param sources 验证码字符源* @return*/public static String generateVerifyCode(int verifySize, String sources) {// 未设定展示源的字码，赋默认值大写字母+数字if (sources == null || sources.length() == 0) {sources = VERIFY_CODES;}int codesLen = sources.length();Random rand = new Random(System.currentTimeMillis());StringBuilder verifyCode = new StringBuilder(verifySize);for (int i = 0; i < verifySize; i++) {verifyCode.append(sources.charAt(rand.nextInt(codesLen - 1)));}return verifyCode.toString();}/*** 生成随机验证码文件,并返回验证码值 (生成图片形式，用的较少)** @param w* @param h* @param outputFile* @param verifySize* @return* @throws IOException*/public static String outputVerifyImage(int w, int h, File outputFile, int verifySize) throws IOException {String verifyCode = generateVerifyCode(verifySize);outputImage(w, h, outputFile, verifyCode);return verifyCode;}/*** 生成指定验证码图像文件** @param w* @param h* @param outputFile* @param code* @throws IOException*/public static void outputImage(int w, int h, File outputFile, String code) throws IOException {if (outputFile == null) {return;}File dir = outputFile.getParentFile();//文件不存在if (!dir.exists()) {//创建dir.mkdirs();}try {outputFile.createNewFile();FileOutputStream fos = new FileOutputStream(outputFile);outputImage(w, h, fos, code);fos.close();} catch (IOException e) {throw e;}}/*** 输出指定验证码图片流** @param w* @param h* @param os* @param code* @throws IOException*/public static void outputImage(int w, int h, OutputStream os, String code) throws IOException {int verifySize = code.length();BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);Random rand = new Random();Graphics2D g2 = image.createGraphics();g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);// 创建颜色集合，使用java.awt包下的类Color[] colors = new Color[5];Color[] colorSpaces = new Color[]{Color.WHITE, Color.CYAN,Color.GRAY, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE,Color.PINK, Color.YELLOW};float[] fractions = new float[colors.length];for (int i = 0; i < colors.length; i++) {colors[i] = colorSpaces[rand.nextInt(colorSpaces.length)];fractions[i] = rand.nextFloat();}Arrays.sort(fractions);// 设置边框色g2.setColor(Color.GRAY);g2.fillRect(0, 0, w, h);Color c = getRandColor(200, 250);// 设置背景色g2.setColor(c);g2.fillRect(0, 2, w, h - 4);// 绘制干扰线Random random = new Random();// 设置线条的颜色g2.setColor(getRandColor(160, 200));for (int i = 0; i < 20; i++) {int x = random.nextInt(w - 1);int y = random.nextInt(h - 1);int xl = random.nextInt(6) + 1;int yl = random.nextInt(12) + 1;g2.drawLine(x, y, x + xl + 40, y + yl + 20);}// 添加噪点// 噪声率float yawpRate = 0.05f;int area = (int) (yawpRate * w * h);for (int i = 0; i < area; i++) {int x = random.nextInt(w);int y = random.nextInt(h);// 获取随机颜色int rgb = getRandomIntColor();image.setRGB(x, y, rgb);}// 添加图片扭曲shear(g2, w, h, c);g2.setColor(getRandColor(100, 160));int fontSize = h - 4;Font font = new Font("Algerian", Font.ITALIC, fontSize);g2.setFont(font);char[] chars = code.toCharArray();for (int i = 0; i < verifySize; i++) {AffineTransform affine = new AffineTransform();affine.setToRotation(Math.PI / 4 * rand.nextDouble() * (rand.nextBoolean() ? 1 : -1), (w / verifySize) * i + fontSize / 2, h / 2);g2.setTransform(affine);g2.drawChars(chars, i, 1, ((w - 10) / verifySize) * i + 5, h / 2 + fontSize / 2 - 10);}g2.dispose();ImageIO.write(image, "jpg", os);}/*** 随机颜色** @param fc* @param bc* @return*/private static Color getRandColor(int fc, int bc) {if (fc > 255) {fc = 255;}if (bc > 255) {bc = 255;}int r = fc + random.nextInt(bc - fc);int g = fc + random.nextInt(bc - fc);int b = fc + random.nextInt(bc - fc);return new Color(r, g, b);}private static int getRandomIntColor() {int[] rgb = getRandomRgb();int color = 0;for (int c : rgb) {color = color << 8;color = color | c;}return color;}private static int[] getRandomRgb() {int[] rgb = new int[3];for (int i = 0; i < 3; i++) {rgb[i] = random.nextInt(255);}return rgb;}private static void shear(Graphics g, int w1, int h1, Color color) {shearX(g, w1, h1, color);shearY(g, w1, h1, color);}private static void shearX(Graphics g, int w1, int h1, Color color) {int period = random.nextInt(2);boolean borderGap = true;int frames = 1;int phase = random.nextInt(2);for (int i = 0; i < h1; i++) {double d = (double) (period >> 1)* Math.sin((double) i / (double) period+ (6.2831853071795862D * (double) phase)/ (double) frames);g.copyArea(0, i, w1, 1, (int) d, 0);if (borderGap) {g.setColor(color);g.drawLine((int) d, i, 0, i);g.drawLine((int) d + w1, i, w1, i);}}}private static void shearY(Graphics g, int w1, int h1, Color color) {int period = random.nextInt(40) + 10; // 50;boolean borderGap = true;int frames = 20;int phase = 7;for (int i = 0; i < w1; i++) {double d = (double) (period >> 1)* Math.sin((double) i / (double) period+ (6.2831853071795862D * (double) phase)/ (double) frames);g.copyArea(i, 0, 1, h1, 0, (int) d);if (borderGap) {g.setColor(color);g.drawLine(i, (int) d, i, 0);g.drawLine(i, (int) d + h1, i, h1);}}}}

3.注册页面

3.1User

package com.pojo;public class User {private Integer id;private String username;private String password;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {return "User{" +"id=" + id +", username='" + username + '\'' +", password='" + password + '\'' +'}';}}

3.2UserMapper.xml

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperPUBLIC "-////DTD Mapper 3.0//EN""/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.mapper.UserMapper"></mapper>

3.3UserMapper

package com.mapper;import com.pojo.User;import org.apache.ibatis.annotations.Insert;import org.apache.ibatis.annotations.Param;import org.apache.ibatis.annotations.Select;public interface UserMapper {/*** 根据用户名和密码查询用户对象* @param username* @param password* @return*/@Select("select * from tb_user where username = #{username} and password = #{password}")User select(@Param("username") String username, @Param("password") String password);/*** 根据用户名查询用户对象* @param username* @return*/@Select("select * from tb_user where username = #{username}")User selectByUsername(String username);/*** 添加用户* @param user*/@Insert("insert into tb_user values(null,#{username},#{password})")void add(User user);}

3.4UserService

package com.service;import com.mapper.UserMapper;import com.pojo.User;import com.util.SqlSessionFactoryUtils;import org.apache.ibatis.session.SqlSession;import org.apache.ibatis.session.SqlSessionFactory;public class UserService {SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();/*** 登录方法* @param username* @param password* @return*/public User login(String username, String password) {// 2.获取SqlSessionSqlSession sqlSession = factory.openSession();// 3.获取UserMapperUserMapper mapper = sqlSession.getMapper(UserMapper.class);User user = mapper.select(username, password);// 释放资源sqlSession.close();return user;}/*** 注册方法* @param user* @return*/public boolean register(User user) {// 2.获取SqlSessionSqlSession sqlSession = factory.openSession();// 3.获取UserMapperUserMapper mapper = sqlSession.getMapper(UserMapper.class);// 4.判断用户名是否存在User u = mapper.selectByUsername(user.getUsername());if(u == null){// 用户名不存在mapper.add(user);// 提交事务mit();}sqlSession.close();return u == null;}}

3.5register.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>欢迎注册</title><link href="css/register.css" rel="stylesheet"><script src="js/vue.js"></script><script src="js/axios-0.18.0.js"></script></head><body><div id="app"><div class="form-div"><div class="reg-content"><h1>欢迎注册</h1><span>已有帐号？</span> <a href="login.html">登录</a></div><form id="reg-form" action="#" method="get"><table><tr><td>用户名</td><td class="inputs"><input v-model="username" type="text" id="username" ><br><span id="username_err" class="err_msg" ref="unerr" style="display: none">用户名已被注册</span></td></tr><tr><td>密码</td><td class="inputs"><input v-model="password" type="password" id="password"><br><span id="password_err" class="err_msg" style="display: none">密码格式有误</span></td></tr><tr><td>验证码</td><td class="inputs"><input v-model="checkCode" type="text" id="checkCode"><img :src="url" id="checkCodeImg"><a @click="switchPic" id="changeImg">看不清？</a><br><span class="err_msg">{{message}}</span></td></tr></table><div class="buttons"><input value="注册" type="button" id="reg_btn" @click="submit"></div><br class="clear"></form></div></div><script>new Vue({el: "#app",data: {username:'',password:'',message:'',checkCode:'',url:''},mounted(){this.url = "http://localhost:8080/brand-case/checkCodeServlet"},methods:{switchPic(){//如果网址一样，浏览器可能会有缓存导致验证码换不了，增加时间函数，每次网址唯一this.url = "http://localhost:8080/brand-case/checkCodeServlet?"+new Date().getMilliseconds()},submit(){if(!this.username.trim()){this.message = "账号不能为空"return}if(!this.password.trim()){this.message = "密码不能为空"return}axios.get("http://localhost:8080/brand-case/registerServlet?username=" + this.username + "&password=" + this.password+ "&checkCode=" + this.checkCode).then((res)=>{//console.log(res)if(res.data==="success"){location.href = 'http://localhost:8080/brand-case/login.html'}else if(res.data === 1){this.message = "验证码错误"/*在vue2中，我们可以直接使用ref获取元素，也就是直接在元素上绑定ref属性，在直接使用this.$refs[‘自定义属性名’] 就能直接获取。*/this.$refs.unerr.style.display = 'none'}else {this.$refs.unerr.style.display = ''this.message = ""}})}}})</script><script>//点击图片更换验证码document.getElementById("checkCodeImg").onclick=function (){//如果src地址与上次相同，验证码会缓存，为保证每次不一样，src后加?和时间document.getElementById("checkCodeImg").src="http://localhost:8080/brand-case/checkCodeServlet?"+new Date().getMilliseconds();}</script></body></html>

3.6RegisterServlet

package com.web.servlet;import com.pojo.User;import com.service.UserService;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import java.io.IOException;@WebServlet("/registerServlet")public class RegisterServlet extends HttpServlet {/*** 注册验证*/private UserService service = new UserService();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 1.获取用户名和密码数据String username = request.getParameter("username");String password = request.getParameter("password");User user = new User();user.setUsername(username);user.setPassword(password);// 获取用户输入验证码String checkCode = request.getParameter("checkCode");// 程序生成的验证码HttpSession session = request.getSession();String checkCodeGen = (String) session.getAttribute("checkCodeGen");// 比对if(!checkCodeGen.equalsIgnoreCase(checkCode)){response.getWriter().write("1");// 不允许注册return;}// 2.调用service 注册boolean flag = service.register(user);// 3.判断注册成功与否if(flag){// 注册成功跳转登陆页面response.getWriter().write("success");}else {// 注册失败跳转到注册页面response.getWriter().write("error");}}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}}

3.7CheckCodeServlet

package com.web.servlet;import com.util.CheckCodeUtil;import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import java.io.IOException;@WebServlet("/checkCodeServlet")public class CheckCodeServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {HttpSession session = request.getSession();// 生成验证码ServletOutputStream os = response.getOutputStream();String checkCode = CheckCodeUtil.outputVerifyImage(100, 50, os, 4);// 存入Sessionsession.setAttribute("checkCodeGen",checkCode);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}}

4.登录页面

4.1login.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>login</title><link href="css/login.css" rel="stylesheet"><script src="js/vue.js"></script><script src="js/axios-0.18.0.js"></script></head><body><div id="app"><div id="loginDiv" style="height: 350px"><form action="" id="form"><h1 id="loginMsg">品牌后台管理系统</h1><div id="errorMsg">{{ message }}</div><p>账号:<input id="username" v-model="username" type="text"></p><p>密码:<input id="password" v-model="password" type="password"></p><p>记住我:<input id="remember" v-model="remember" type="checkbox"></p><div id="subDiv"><input type="button" class="button" value="登录" @click="submit"><input type="reset" class="button" value="重置">   <a href="register.html">没有账号？</a></div></form></div></div><script>new Vue({el: "#app",data: {username:'',password:'',remember:'',message:'',},mounted(){//记住账号密码操作，username和password为Cookie名称//console.log(location.search)//console.log(document.cookie);let strCookie = document.cookie;//获取Cookielet arrCookie = strCookie.split(";");//多个cookie值是以;分隔的，用split把cookie分割开并赋值给数组arrCookiefor (let i = 0; i < arrCookie.length; i++) {//历遍数组/*原来割好的数组是：username=zhangsan，再用split('=')分割成：username zhangsan 这样可以通过arr[0] arr[1]来分别获取username和zhangsan*/let arr = arrCookie[i].split("=");//console.log(arr)if(arr[0]==='username'){//如果有相应的Cookie，运用v-model赋值this.username = arr[1];// trim() 函数移除字符串两侧的空白字符或其他预定义字符。}else if(arr[0].trim()==='password'){this.password = arr[1]}}},methods:{submit(){axios.get("http://localhost:8080/brand-case/loginServlet?username=" + this.username + "&password=" + this.password + "&remember=" + this.remember).then((res)=>{if(res.data==="success"){location.href = 'http://localhost:8080/brand-case/brand.html?'+new Date().getMilliseconds()}else {this.message = "账号或密码错误"}})}}})</script></body></html>

4.2LoginServlet

package com.web.servlet;import com.pojo.User;import com.service.UserService;import javax.servlet.*;import javax.servlet.http.*;import javax.servlet.annotation.*;import java.io.IOException;@WebServlet("/loginServlet")public class LoginServlet extends HttpServlet {/*** 登录验证*/private UserService service = new UserService();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 1.获取用户名密码String username = request.getParameter("username");String password = request.getParameter("password");// 获取复选框数据String remember = request.getParameter("remember");// 2.调用service查询User user = service.login(username,password);// 3.判断if(user != null){// 登陆成功跳转到查询所有的BrandServlet// 判断用户是否勾选记住我空指针异常if("true".equals(remember)){// 勾选了发送Cookie// 1.创建Cookie对象Cookie c_username = new Cookie("username",username);Cookie c_password = new Cookie("password",password);// 设置Cookie存活时间c_username.setMaxAge(60 * 60 * 24 * 7);c_password.setMaxAge(60 * 60 * 24 * 7);// 2.发送response.addCookie(c_username);response.addCookie(c_password);}// 将登陆成功后的User对象存储到sessionHttpSession session = request.getSession();session.setAttribute("user",user);response.getWriter().write("success");}else {// 登陆失败response.getWriter().write("error");}}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}}

4.3LoginFilter

package com.web.filter;import javax.servlet.*;import javax.servlet.annotation.WebFilter;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpSession;import java.io.IOException;/*** 登陆验证的过滤器*/@WebFilter("/*")public class LoginFilter implements Filter {@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {HttpServletRequest req = (HttpServletRequest) request;// 判断访问路径资源是否和登陆注册相关String[] urls = {"login.html","/element-ui/","/imgs/","/css/","/js/","/loginServlet","register.html","/registerServlet","/checkCodeServlet"};// 获取当前访问的资源路径String url = req.getRequestURL().toString();// 循环判断for (String u : urls) {if(url.contains(u)){// 找到了// 放行chain.doFilter(request, response);return;}}// 1.判断session中是否有userHttpSession session = req.getSession();Object user = session.getAttribute("user");// 2.判断user是否为nullif(user !=null){// 登陆过了// 放行chain.doFilter(request, response);}else {// 没有登陆存储提示信息跳转到登陆页面//req.getRequestDispatcher("/login.html").forward(req,response);req.getRequestDispatcher("/login.html?"+System.currentTimeMillis()).forward(req,response);}}public void init(FilterConfig config) throws ServletException {}public void destroy() {}}

5.后台主页面

5.1Brand

package com.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) {panyName = 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 +'}';}}

5.2BrandMapper

package com.mapper;import com.pojo.Brand;import org.apache.ibatis.annotations.Param;import java.util.List;public interface BrandMapper {//查询所有List<Brand> SelectAll();//添加数据void add(Brand brand);//修改数据void update(Brand brand);//删除单个数据，通过idvoid deleteById(Brand brand);//批量删除数据void deleteByIds(@Param("ids") int[] ids);//分页查询List<Brand> selectByPage(@Param("begin") int begin,@Param("size") int size);//查询数据总数int selectTotalCount();//在条件查询的基础上进行分页查询List<Brand> selectByPageAndCondition(@Param("begin") int begin,@Param("size") int size,@Param("brand") Brand brand);//通过条件查询符合的数据总数int selectTotalCountByCondition(Brand brand);}

5.3BrandMapper.xml

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperPUBLIC "-////DTD Mapper 3.0//EN""/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.mapper.BrandMapper"><resultMap id="brandResultMap" type="brand"><result property="brandName" column="brand_name" /><result property="companyName" column="company_name" /></resultMap><insert id="add">insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status});</insert><update id="update">update tb_brand set brand_name=#{brandName},company_name=#{companyName},ordered=#{ordered},description=#{description},status=#{status} where id=#{id};</update><delete id="deleteById">delete from tb_brand where id=#{id};</delete><delete id="deleteByIds">delete from tb_brand where id in<foreach collection="ids" item="id" separator="," open="(" close=")">#{id}</foreach></delete><select id="SelectAll" resultMap="brandResultMap">select * from tb_brand;</select><select id="selectByPage" resultMap="brandResultMap">select * from tb_brand limit #{begin},#{size};</select><select id="selectTotalCount" resultType="java.lang.Integer">select count(*) from tb_brand;</select><select id="selectByPageAndCondition" resultMap="brandResultMap">select *from tb_brand<where><if test="brand.brandName != null and brand.brandName != '' ">and brand_name like #{brand.brandName}</if><if test="panyName != null and panyName != '' ">and company_name like #{panyName}</if><if test="brand.status != null">and status = #{brand.status}</if></where>limit #{begin} , #{size}</select><select id="selectTotalCountByCondition" resultType="java.lang.Integer">select count(*)from tb_brand<where><if test="brandName != null and brandName != '' ">and brand_name like #{brandName}</if><if test="companyName != null and companyName != '' ">and company_name like #{companyName}</if><if test="status != null">and status = #{status}</if></where></select></mapper>

5.4BrandService

package com.service;import com.pojo.Brand;import com.pojo.PageBean;import java.util.List;//原本方法可在BrandService直接实现，现在为了方便管理和动态处理，在接口实现类BrandServiceImpl实现public interface BrandService {//查询所有/*这个建立的不是接口，是类public class BrandService {SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();public List<Brand> selectAll(){SqlSession sqlSession = sqlSessionFactory.openSession();BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);List<Brand> brands = mapper.SelectAll();sqlSession.close();return brands;}}*/List<Brand> SelectAll();//添加数据void add(Brand brand);//修改数据void update(Brand brand);//删除单个数据，通过idvoid deleteById(Brand brand);//批量删除数据void deleteByIds(int[] ids);//分页查询，(当前页码，每页展示数据数)PageBean<Brand> selectByPage(int currentPage,int pageSize);//分页条件查询，(当前页码，每页展示数据数，条件)PageBean<Brand> selectByPageAndCondition(int currentPage,int pageSize,Brand brand);}

5.5BrandServiceImpl

package com.service.impl;import com.mapper.BrandMapper;import com.pojo.Brand;import com.pojo.PageBean;import com.service.BrandService;import com.util.SqlSessionFactoryUtils;import org.apache.ibatis.session.SqlSession;import org.apache.ibatis.session.SqlSessionFactory;import java.util.List;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 void add(Brand brand) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 调用方法mapper.add(brand);//5. 执行操作，提交事务mit();//6. 释放资源sqlSession.close();}@Overridepublic void update(Brand brand) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 调用方法mapper.update(brand);//5. 执行操作，提交事务mit();//6. 释放资源sqlSession.close();}@Overridepublic void deleteById(Brand brand) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 调用方法mapper.deleteById(brand);//5. 执行操作，提交事务mit();//6. 释放资源sqlSession.close();}@Overridepublic void deleteByIds(int[] ids) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 调用方法mapper.deleteByIds(ids);//5. 执行操作，提交事务mit();//6. 释放资源sqlSession.close();}@Overridepublic PageBean<Brand> selectByPage(int currentPage, int pageSize) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4.1 计算开始索引int begin=(currentPage-1)*pageSize;//4.2. 计算查询条目数int size=pageSize;//5. 查询当前页数据List<Brand> brands = mapper.selectByPage(begin, size);//6. 查询总记录数int totalCount = mapper.selectTotalCount();//补充：如果最后一页没有数据不够导致没有显示完，自动补充空白行，美观Brand brand1 = null;int number1=totalCount-(currentPage-1)*pageSize;if(number1<pageSize){int number2=pageSize-number1;for (int i = 1; i <=number2 ; i++) {brands.add(brand1);}}//7. 封装pageBean对象PageBean<Brand> pageBean=new PageBean<>();pageBean.setRows(brands);pageBean.setTotalCount(totalCount);//8. 释放资源sqlSession.close();return pageBean;}@Overridepublic PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 计算开始索引int begin = (currentPage - 1) * pageSize;// 计算查询条目数int size = pageSize;// 处理brand条件，模糊表达式String brandName = brand.getBrandName();if (brandName != null && brandName.length() > 0) {brand.setBrandName("%" + brandName + "%");}String companyName = brand.getCompanyName();if (companyName != null && companyName.length() > 0) {brand.setCompanyName("%" + companyName + "%");}//5. 查询当前页数据List<Brand> rows = mapper.selectByPageAndCondition(begin, size, brand);//6. 查询总记录数int totalCount = mapper.selectTotalCountByCondition(brand);//补充：如果最后一页没有数据不够导致没有显示完，自动补充空白行，美观Brand brand1 = null;int number1=totalCount-(currentPage-1)*pageSize;if(number1<pageSize){int number2=pageSize-number1;for (int i = 1; i <=number2 ; i++) {rows.add(brand1);}}//7. 封装PageBean对象PageBean<Brand> pageBean = new PageBean<>();pageBean.setRows(rows);pageBean.setTotalCount(totalCount);//8. 释放资源sqlSession.close();return pageBean;}}

5.6BaseServlet

package com.web.servlet;/*替换HttpServlet，根据请求的最后一段路径来进行方法分发* */import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;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 {//1.获取请求的路径String uri = req.getRequestURI(); // 例如路径为：/brand-case/brand/selectAll//2. 获取最后一段路径，方法名//从路径的后面找到第一个“/”所处位置，然后最后的路径截下来，不携带“/”字符，如“selectAll”int index = uri.lastIndexOf('/');//将index位置开始进行索引，返回字符串(方法名)String methodName = uri.substring(index + 1); // 获取到资源的二级路径 selectAll//3. 执行方法//3.1 获取BrandServlet /UserServlet 字节码对象 Class/*this为谁调用用它(this所在的方法，如service方法)，它(this)代表谁如：service方法被BrandServlet调用，this代表BrandServlet*///System.out.println(this);//下面是通过this获得字节码对象Class<? extends BaseServlet> cls =this.getClass();//3.2 获取方法 Method对象try {Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);//3.3 执行方法method.invoke(this,req,resp);} catch (NoSuchMethodException e) {e.printStackTrace();} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}}}

5.7BrandServlet

package com.web.servlet;import com.alibaba.fastjson.JSON;import com.pojo.Brand;import com.pojo.PageBean;import com.service.BrandService;import com.service.impl.BrandServiceImpl;import javax.servlet.ServletException;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.List;@WebServlet("/brand/*")public class BrandServlet extends BaseServlet{//提供impl接口，减小耦合性，可以后进行动态获取实现类，只需要改变BrandServiceImplprivate BrandService brandService = new BrandServiceImpl();public void SelectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{//System.out.println("selectAll.....");//1. 调用service查询List<Brand> brands = brandService.SelectAll();//2. 转为JSON(用的Fastjson)String jsonString = JSON.toJSONString(brands);//3. 写数据//告知浏览器响应的数据是什么，告知浏览器使用什么字符集进行解码response.setContentType("text/json;charset=utf-8");response.getWriter().write(jsonString);}public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{//System.out.println("Add.....");request.setCharacterEncoding("UTF-8");//1. 接收品牌数据BufferedReader br = request.getReader();String params = br.readLine();//json字符串//转为Brand对象Brand brand = JSON.parseObject(params, Brand.class);//2. 调用service添加brandService.add(brand);//3. 响应成功的标识response.getWriter().write("success");}public void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{request.setCharacterEncoding("UTF-8");//1. 接收品牌数据BufferedReader br = request.getReader();String params = br.readLine();//json字符串//转为Brand对象Brand brand = JSON.parseObject(params, Brand.class);//2. 调用service修改brandService.update(brand);//3. 响应成功的标识response.getWriter().write("success");}public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{//1. 接收品牌数据BufferedReader br = request.getReader();String params = br.readLine();//json字符串//转为Brand对象Brand brand = JSON.parseObject(params, Brand.class);//2. 调用service修改brandService.deleteById(brand);//3. 响应成功的标识response.getWriter().write("success");}public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{//1. 接收品牌数据，像这样的[1,2,3,4]，所以还用JSONBufferedReader br = request.getReader();String params = br.readLine();//json字符串//转为 int[]数组int[] ids = JSON.parseObject(params, int[].class);//2. 调用service修改brandService.deleteByIds(ids);//3. 响应成功的标识response.getWriter().write("success");}//分页查询public void selectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{//1. 接收参数，(当前页码，每页展示条数) 如：url?currentPage=1&pageSize=20String currentPageX = request.getParameter("currentPage");String pageSizeX = request.getParameter("pageSize");int currentPage = Integer.parseInt(currentPageX);int pageSize = Integer.parseInt(pageSizeX);//2. 调用servicePageBean<Brand> pageBean = brandService.selectByPage(currentPage, pageSize);//2. 转为JSON(用的Fastjson)String jsonString = JSON.toJSONString(pageBean);//3. 写数据//告知浏览器响应的数据是什么，告知浏览器使用什么字符集进行解码response.setContentType("text/json;charset=utf-8");response.getWriter().write(jsonString);}//条件分页查询public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接收当前页码和每页展示条数 url?currentPage=1&pageSize=5String _currentPage = request.getParameter("currentPage");String _pageSize = request.getParameter("pageSize");int currentPage = Integer.parseInt(_currentPage);int pageSize = Integer.parseInt(_pageSize);// 获取查询条件对象BufferedReader br = request.getReader();String params = br.readLine();//json字符串//转为 BrandBrand brand = JSON.parseObject(params, Brand.class);//2. 调用service查询PageBean<Brand> pageBean = brandService.selectByPageAndCondition(currentPage,pageSize,brand);//2. 转为JSONString jsonString = JSON.toJSONString(pageBean);//3. 写数据response.setContentType("text/json;charset=utf-8");response.getWriter().write(jsonString);}}

5.8PageBean

package com.pojo;import java.util.List;//分页查询的javabean/*为可以应用其他数据，创造一个泛型T可在创建PageBean对象时进行指定，提高数据通用性*/public class PageBean<T> {//总记录数private int totalCount;//当前页数据private List<T> 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;}@Overridepublic String toString() {return "PageBean{" +"totalCount=" + totalCount +", rows=" + rows +'}';}}

5.9brand.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>主页面</title><style>.el-table .warning-row {background: white;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="appLoading"><span><h1>Loading...</h1></span></div><div id="app" style="display: none"><el-form :inline="true" :model="brand" class="demo-form-inline"><el-form-item label="当前状态"><el-select v-model="brand.status" placeholder="当前状态" clearable><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="panyName" placeholder="企业名称" clearable></el-input></el-form-item><el-form-item label="品牌名称"><el-input v-model="brand.brandName" placeholder="品牌名称" clearable></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><el-row><el-button type="danger" plain @click="deleteByIds">批量删除</el-button><el-button type="primary" plain @click="AddData">新增</el-button></el-row><el-dialogtitle="添加品牌":visible.sync="AddDialogVisible"width="30%"@close="close"><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="panyName"></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-text="启用"inactive-text="禁用"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="AddDialogVisible = false">取消</el-button></el-form-item></el-form></el-dialog><el-dialogtitle="修改品牌":visible.sync="UpdateDialogVisible"width="30%"@close="close"><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="panyName"></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-text="启用"inactive-text="禁用"active-value="1"inactive-value="0"></el-switch></el-form-item><el-form-item><el-button type="primary" @click="updateBrand">修改</el-button><el-button @click="Updatecancel">取消</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-columnprop="id"label="ID"width="50"align="center"></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="statusStr"align="center"label="当前状态"></el-table-column><el-table-columnalign="center"label="操作"><template slot-scope="scope"><el-row><el-button type="primary" @click="beforeUpdate(scope.row)">修改</el-button><el-button type="danger" @click="deleteById(scope.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="[8, 10, 15, 20]":page-size="8"layout="total, sizes, prev, pager, next, jumper":total="totalCount"></el-pagination></div><script src="js/vue.js"></script><script src="element-ui/lib/index.js"></script><script src="js/axios-0.18.0.js"></script><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><script>new Vue({el: "#app",//页面加载完毕后发送 ajax 请求，要用mountedmounted(){//加载完成后，div加载页面变为none，主页面显示document.getElementById('app').style.display = 'block';document.getElementById('appLoading').style.display = 'none';//将查询所有操作封装为了一个方法，以便以后调用this.selectAll();/*var _this = this;axios({method:"get",url:"http://localhost:8080/brand-case/SelectAllServlet"}).then(function (resp) {//将表格的值tableData赋值响应得到的集合_this.tableData = resp.data;})*/},methods: {//查询所有数据的方法selectAll(){/*var _this = this;axios({method:"get",// url:"http://localhost:8080/brand-case/SelectAllServlet"url:"http://localhost:8080/brand-case/brand/SelectAll",}).then(function (resp) {//将表格的值tableData赋值响应得到的集合_this.tableData = resp.data;})*///分页查询//页面挂载完成后及添加后修改后正在使用此方法var _this = this;axios({method:"get",//分页查询：url:"http://localhost:8080/brand-case/brand/selectByPage?currentPage="+ _this.currentPage+"&pageSize="+_this.pageSize,}).then(function (resp) {//此时返回的数据为pageBean对象，具有一个brand数据集合，一个数据总数//将表格的值tableData赋值响应得到的集合_this.tableData = resp.data.rows;// {rows:[],totalCount:100}//设置总记录数_this.totalCount = resp.data.totalCount;})},//分页条件查询，大范围：全部分页和条件分页均可用，不过全部分页默认data为空//搜索框查询和分页后查询正在使用selectByPageAndCondition(){//分页条件查询axios({method:"post",url:"http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,data:this.brand/*then里匿名函数的this特点：需要在成功的回调函数（也就是then 函数中的匿名函数）中使用this，都需要在外边使用 _this 记录一下 this 所指向的对象；因为在外边的 this 表示的是 Vue 对象，而回调函数中的 this 表示的是window对象。*//*箭头函数的作用：替换（简化）匿名函数。then(箭头函数)里面的this是vue不是window。*///所有的function (resp){}均可替换为resp =>{}，且不再需要this的转化}).then(resp =>{//补充：如果分页查询最后一页没有数据不够导致没有显示完，// BrandServiceImpl里的分页查询方法会自动补充空白行，美观//设置表格数据this.tableData = resp.data.rows; // {rows:[],totalCount:100}//设置总记录数this.totalCount = resp.data.totalCount;})},//Element自带表格方法，表格颜色tableRowClassName({row, rowIndex}) {if (rowIndex%2===1) {return 'warning-row';} else{return 'success-row';}return '';},// 复选框选中后执行的方法handleSelectionChange(val) {console.log(this.multipleSelection);//返回brand集合this.multipleSelection = val;},// 搜索框查询方法onSubmit() {console.log(this.brand);//点击查询后，自动回到数据第一页this.currentPage=1;this.selectByPageAndCondition();},// 添加数据addBrand(){//console.log(this.brand);var _this=this;//发送ajax异步请求，添加数据axios({method: "post",// url:"http://localhost:8080/brand-case/AddServlet",url:"http://localhost:8080/brand-case/brand/add",data:_this.brand}).then(function (resp) {if(resp.data=="success"){//添加成功//1.关闭窗口_this.AddDialogVisible = false;//2.重新查询数据//该操作结束后，回到第一页，查询全部，清除brand数据，防止干扰下次操作_this.currentPage=1;_this.selectAll();_this.clear();//3.弹出消息提示_this.$message({message: '恭喜你，添加成功',type: 'success'});}else {_this.$message.error('添加数据失败');}})},//修改绑定数据beforeUpdate(row){/*注意：问题：一旦表单的数据被改变，表格中相对应的数据也会直接跟着改变，且无论是点击确定还是点击取消按钮，表格的数据依旧会被修改。原因：因为row是Object对象类型，如果直接赋值的话，就变成了浅拷贝，复制的是地址，导致在表单中改变值的时候表格中的数据也跟着改变，所以要进行深拷贝。解决方法：JSON.parse(JSON.stringify(obj)) 这行代码的意思就是利用 JSON.stringify 将 js 对象序列化（JSON字符串），再使用 JSON.parse 来反序列化（还原） js 对象。序列化的作用是存储和传输。*///this.brand=row;this.brand = JSON.parse(JSON.stringify(row));this.UpdateDialogVisible=true;//控制修改页面表单按钮if(row.status=="1"){this.brand.status="1";}else{this.brand.status="0";}},//修改数据updateBrand(){var _this=this;axios({method:"post",url:"http://localhost:8080/brand-case/brand/update",data:this.brand}).then(function (resp){if (resp.data=="success"){//修改成功_this.UpdateDialogVisible = false;//该操作结束后，回到第一页，查询全部，清除brand数据，防止干扰下次操作//修改操作，既没有添加数据，又没有删除数据，不需要回到第一页的操作_this.selectByPageAndCondition();_this.clear();_this.$message({message: '恭喜你，修改完成',type: 'success'});}else {_this.$message.error('修改数据失败');}})},//修改表单点击取消后触发Updatecancel(){this.UpdateDialogVisible = false;//清除brand数据，防止干扰下次操作this.clear();},//关闭添加和修改表单时，点击×号close(){//清除brand数据，防止干扰下次操作this.clear();},//删除单个数据deleteById(row){this.brand = JSON.parse(JSON.stringify(row));this.$confirm('是否删除该品牌, 请继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//用户点击确定删除var _this=this;axios({method:"post",url:"http://localhost:8080/brand-case/brand/deleteById",data:_this.brand}).then(function (resp){if (resp.data=="success"){//删除成功//该操作结束后，回到第一页，查询全部，清除brand数据，防止干扰下次操作_this.currentPage=1;_this.selectAll();_this.clear();_this.$message({type: 'success',message: '删除成功!'});}else {_this.$message.error('删除数据失败');}})}).catch(() => {_this.$message({type: 'info',message: '已取消删除'});});},//复选框批量删除deleteByIds(){//这是批量选中后的数据模型，可以从 `multipleSelection` 数据模型中获取所选数据的id值//console.log(this.multipleSelection);//如果复选框选中则可进行批量删除，否则弹出未选中提示框if(this.multipleSelection.length==0){this.$alert('请先进行多选，然后点击批量删除', '消息提示', {confirmButtonText: '确定'});}else{//弹出确认框this.$confirm('正在批量删除数据, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//用户点击确定删除//1.创建id数组 [1,2,3,4],从this.multipleSelection获取for (let i = 0; i < this.multipleSelection.length; i++) {let selectionElement = this.multipleSelection[i];this.selectedIds[i]=selectionElement.id;}//2.发送ajax请求var _this=this;axios({method: "post",url:"http://localhost:8080/brand-case/brand/deleteByIds",data:_this.selectedIds}).then(function (resp) {if(resp.data=="success"){//批量删除成功//1.重新查询数据_this.currentPage=1;_this.selectAll();_this.clear();//2.弹出消息提示_this.$message({message: '恭喜你，批量删除成功',type: 'success'});}else {_this.$message.error('批量删除失败');}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});}},//模型清空操作，防止新增操作时，新增页面具有默认数据clear(){this.brand.brandName="";panyName="";this.brand.ordered="";this.brand.description="";this.brand.status="";},//点击新增按钮操作AddData(){this.clear();this.AddDialogVisible = true;},//分页handleSizeChange(val) {//console.log(`每页 ${val} 条`);//重新设置每页显示条数this.pageSize=val;this.selectByPageAndCondition();},handleCurrentChange(val) {//console.log(`当前页: ${val}`);//重新设置当前页码this.currentPage=val;this.selectByPageAndCondition();}},data() {return {//每页显示的条数pageSize:8,//总记录数totalCount:100,// 当前页码currentPage: 1,// 添加数据对话框是否展示的标记AddDialogVisible: false,// 修改数据对话框是否展示的标记UpdateDialogVisible: false,// 品牌模型数据brand: {status: '',brandName: '',companyName: '',id:"",ordered:"",description:""},//被选中的id数组selectedIds:[],// 复选框选中数据集合multipleSelection: [],// 表格数据//初始设置8个初数据，防止进入主页面时产生闪烁干扰，影响体验tableData: [{id:"",brandName: '',companyName: '',ordered:"",status: ''}, {id:"",brandName: '',companyName: '',ordered:"",status: ''}, {id:"",brandName: '',companyName: '',ordered:"",status: ''}, {id:"",brandName: '',companyName: '',ordered:"",status: ''},{id:"",brandName: '',companyName: '',ordered:"",status: ''}, {id:"",brandName: '',companyName: '',ordered:"",status: ''}, {id:"",brandName: '',companyName: '',ordered:"",status: ''}, {id:"",brandName: '',companyName: '',ordered:"",status: ''}]}}})</script></body></html>

6.工程结构

7.代码下载
Gitte：品牌后台管理系统: JavaWeb综合案例——品牌后台管理系统 mybatis+maven+filter+ajax+json+js+html+css+element+VUE ()
CSDN：黑马程序员最新版JavaWeb综合案例——品牌后台管理系统-Java文档类资源-CSDN文库/download/weixin_59798969/86399430

可以点个免费的赞吗！！！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。