文章目录
目录
前言
一、重点难点
二、前期准备
1. 创建Web项目，安装连接Tomcat前期工作
2. pom需要引入的坐标与配置
2.引入Vue、element与axios
三、具体步骤
1. 完成一些包的创建和一些工具类的创建等
1. 创建实体类Brand
2. 创建mapper接口与映射文件
3. 新建mybatis-config.xml配置文件
4. 创建工具类SqlSessionFactoryUtils
5. 完成后的目录结构
2. 基本的前端页面
1. 设置首行 - 条件查询
2. 设置批量删除、新增按钮
3. 设置主数据区 - 表格
4. 设置分页工具条
5. 已经完成了基本的页面，最终如下
3. 后端与前端的具体实现
1. 前端读取数据库在表格上显示出来
2. servlet优化（难点）
3. 新增-添加功能
4. 删除功能
5. 修改功能
6. 批量删除功能
7. 分页（难点）
8. 条件查询
9.修改状态里的数据显示
4. 所有代码
前言
此案例从零新建项目一步一步详细讲解的完成此案例。
此案例介绍：通过启动服务器访问到商品展示页面，展示数据库中信息，实现动态的显示出增加数据、删除数据、查询数据、分页展示、搜索筛选等功能。
修改了一些黑马web存在的一些小bug：点击新增按钮，输入数据时，而查询条件中也会跟着变。
补齐了黑马web课程中删除和修改操作。
提示：每个模块写的代码可能存在问题，因为太多了，导致混乱。最下面有完整的、没有错误的代码
用到的技术：
MVC设计模式、axios网络请求库、Vue（JavaScript框架）、Mybatis框架、Mysql数据库、Tomcat服务器、fastjson库、Maven、element（基于Vue框架）、Servlet服务端程序。
一、重点难点
难点：
在我看来最难的还是前端部分，对于模型的创建，每个按钮或是对话框等需要绑定的模型很多很乱。还有难点就是修改bug，展示的是没有bug的，但在编写时总会遗漏、误写等操作。
重点：axios的使用，后端各个模块的逻辑顺序书写。
二、前期准备
1. 创建Web项目，安装连接Tomcat前期工作
1. 选择Maven创建一个项目xz-practice
2. 完成tomcat的安装与连接
（1）编辑pom.xml
提示：把程序设为web项目，需要部署为war包。记得刷新一下。
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>org.example</groupId> <artifactId>xz-practice</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> </project>
（2）编辑标准的web项目结构
提示：webapp在src.main下，是web整体。WEB-INF在webapp下，可以对web进行一些配置等。目前我们只要这个完整的目录结构就好了。
Ctrl + Alt + Shift + s 打开Project Structure项目结构对话框。或者点击右上角小文件夹。
在Project Settings下的Modules里点自己的项目，再点加号来增加Web模块。
下面表示webapp的目录，上面表示的是WEB-INT的目录，双击设置目录，最后点击Apply
WEB-INT：D:\idea_projects\Java_Wab\xz-practice\src\main\webapp\WEB-INF\web.xml
webapp ：D:\idea_projects\Java_Wab\xz-practice\src\main\webapp
最终目录结构
2. pom需要引入的坐标与配置
1. Servlet 添加Servlet依赖才可以使用HttpServlet
2. MyBatis 一种框架，为了封装JDBC，简化开发
3. MySQL 用到MySQL当然需要引入MySQL驱动包
4. fastjson 一种java库，可以将 Java 对象与JSON 格式相互转换，方便前后端传递数据
5. Tomcat 一种服务器，用到它当然要配置
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>org.example</groupId> <artifactId>xz-practice</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <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> </dependencies> <!--Tomcat--> <build> <plugins> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.2</version> </plugin> </plugins> </build> </project>
2.引入Vue、element与axios
1. Vue框架：一种JavaScript前端框架，用来简化前端开发
2. element框架：饿了么公司提供的一些以及写好的Vue框架，直接用来使用，起到美观的作用
3. axios网络请求库：一种轻量级库，简单来说就是发送get或post请求的。
将下面两个文件放置webapp目录下即可
element文件链接-提取码1234vue框架与axios-提取码1234
三、具体步骤
配置完成，接下来完成此项目。
1. 完成一些包的创建和一些工具类的创建等
1. pojo实体类包
2. mapper包以及对应的映射
3. service包
4. web包与包下的servlet包
5. util工具包
1. 创建实体类Brand
所有的属性与数据库数据相互对应
package com.itheima.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;
//省略get和set和toString方法
}2. 创建mapper接口与映射文件
在mapper下新建BrandMapper接口，在resources下的mapper里新建BrandMapper.xml
BrandMapper接口
package com.xz.mapper;
public interface BrandMapper {
}BrandMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xz.mapper.BrandMapper">
</mapper>3. 新建mybatis-config.xml配置文件
resources下新建mybatis-config.xml配置文件，按照自己设置账号密码进行修改
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<!--核心配置文件-->
<configuration>
<!--这里是起别名，我们没有写，那么在xml文件就需要写全限定类名，这里是跟xml中type属性对应的-->
<!-- <typeAliases>-->
<!-- <package name="com.xz.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=true"/>
<property name="username" value="root"/>
<property name="password" value="1234"/>
</dataSource>
</environment>
</environments>
<!-- 关联xml配置的文件 -->
<mappers>
<!--扫描mapper-->
<package name="com.xz.mapper"/>
</mappers>
</configuration>4. 创建工具类SqlSessionFactoryUtils
在util下创建SqlSessionFactory工厂类，为了后期方便获取SqlSession对象执行sql语句
package com.xz.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;
}
}5. 完成后的目录结构
2. 基本的前端页面
利用vue和element编写brand.html
1. 在webapp下新建前端页面brand.html
2. 在写组件之前，先将vue的标准形式写出来，并且将vue需要引入的css、js文件先引出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</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>
new Vue ({
el:"#app"
})
</script>
</body>
</html>3. 在element中找到喜欢的组件：网页
1. 设置首行 - 条件查询
找到From表单 - 行内表单有一条适合我们条件查询，我们点击显示代码来分析下代码
不难看出，script与表单所对应的模型model与点击方法@click
将代码复制到我们的brand.html来，from表单放置div标签内，srcipt放到指定位置。
我们需要完成通过状态、企业名和商品名实现条件查询。加以编辑呈现最终代码和效果如下：
注意：此处将模型更名为selectModel，并修改了数据属性名(status/companyName/brandName)
<el-form>
<el-form :inline="true" :model="selectModel" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="selectModel.status" placeholder="当前状态">
<el-option label="启用" value="0"></el-option>
<el-option label="禁用" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="selectModel.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="商品名称">
<el-input v-model="selectModel.brandName" placeholder="商品名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form><script>
data() {
return {
selectModel: {
status: '',
companyName: '',
brandName:''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
2. 设置批量删除、新增按钮
目前不做实现，只做显示。在element中找到两个按钮即可。
<!--新增、批量删除行-->
<el-button type="danger" round>批量删除</el-button>
<el-button type="success" round>新增</el-button>3. 设置主数据区 - 表格
在element找到Table表格，这里用的第一个 ，复制到html中。完成之后我们考虑每一列。
1. 设置对应的列（品牌名称、企业名称、排序、当前状态）
注意：去除了width属性让其自适应大小，设置align=center使标签名居中
<!--表格数据-->
<el-table-column
prop="brandName"
label="商品名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>假的表格数据模型
data() {
return {
brandData: [{
brandName: '戴尔',
companyName: '戴尔有限公司',
ordered: '100',
status:'0'
},{
brandName: '戴尔',
companyName: '戴尔有限公司',
ordered: '100',
status:'0'
}],
}
} 2. 修改和删除按钮（操作）
目前只做显示。
<!--修改和删除按钮-->
<el-table-column label="操作" align="center">
<el-button type="warning" round>修改</el-button>
<el-button type="danger" round>删除</el-button>
</el-table-column> 3. 设置复选框 - 在Table表格中找到复选框
注意：复选框要完成：1）选中后获取当前的数据-方法。2）建立选中后的数据模型-数据
在表格数据上添加一个多选标签
<!--多选按钮-->
<el-table-column
type="selection"
width="55">
</el-table-column>在整个表格里的参数里加入选中后执行的方法
<el-table
:data="brandData"
style="width: 100%"
@selection-change="handleSelectionChange">
</el-table>methods: {
handleSelectionChange(val) {//多选按钮
this.multipleSelection = val;
}
}在数据里增加数据模型
data() {
return {
//多选按钮
multipleSelection: []
}
} 4. 设置编号
使用type=index
<!--编号-->
<el-table-column
type="index"
width="50"
align="center">
</el-table-column>5. 设置点击新增按钮弹出一个表单对话框
设置一个弹出的对话框
需要设置一个表单模型（addData），和加入一个新增方法（addBrand），并为新增按钮增加点击事件。
<!--添加数据对话框表单-->
<el-dialog
title="新增品牌"
:visible.sync="dialogVisible"
width="30%">
<el-form ref="form" :model="addData" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="addData.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="addData.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="addData.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="addData.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="addData.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="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>addData:{//新增模型数据
brandName:'',
companyName: '',
ordered: '',
description:'',
status:''
},
//默认点击新增按钮前，对话框为关闭状态
dialogVisible : falseaddBrand(){ // 添加数据
console.log(this.addData);
}<!--增加点击方法，使对话框出现-->
<el-button type="danger" round>批量删除</el-button>
<el-button type="success" @click="dialogVisible = true" round>新增</el-button>6.最终效果
4. 设置分页工具条
1. 设置当前页数模型、设置显示的分页方法，书写分页工具条
<!--分页工具条-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>//设置当前页码模型
currentPage: 1//显示分页方法
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}5. 已经完成了基本的页面，最终如下
3. 后端与前端的具体实现
注意：数据库中的数据就不书写了，自行书写
1. 前端读取数据库在表格上显示出来
1）编写BrandMapper接口，用注解的方式写一个查询所有的方法。
分析：不需要参数，需要返回值，返回所有的Brand对象，因此需要返回List<Brand>
@Select("select * from tb_brand")
Brand selectAll(); 2) 编写过程中，我们发现用到数据库中的属性，列如companyName与company_name可能会有冲突，所有我们要加上@ResultMap，因为在resultMap内明确注明映射关系才会调用对应的setter方法。我们再编写BrandMapper接口，并编写BrandMapper.xml文件。
@Select("select * from tb_brand")
@ResultMap("resultMap")
List<Brand> selectAll();<resultMap id="resultMap" type="com.xz.pojo.Brand">
<result property="brandName" column="brand_name" />
<result property="companyName" column="company_name" />
</resultMap>3) service方法的实现。在service包下新建BrandService接口，写出查询所有的抽象方法，并再次再此包下新建impl包，实现BrandService接口，重写所有方法。
知识点：用接口可以用多态创建BrandService对象，方便后期维护，在service中通过工厂创建出SqlSession对象，并虚假的执行sql语句方法，真正执行需要在servlet里写。
package com.xz.service;
import com.xz.pojo.Brand;
import java.util.List;
public interface BrandService {
//查询所有
List<Brand> selectAll();
}package com.xz.service.impl;
import com.xz.mapper.BrandMapper;
import com.xz.pojo.Brand;
import com.xz.service.BrandService;
import com.xz.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import java.util.List;
public class BrandServiceImpl implements BrandService {
//创建SqlSessionFactory 工厂对象
SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();
public List<Brand> selectAll() {
//获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//调用方法
List<Brand> brands = mapper.selectAll();
//释放资源
sqlSession.close();
return brands;
}
}4）编写servlet。
通过获取service对象，真实的执行sql语句，将获取的数据转换为json格式，发送给前端。
注意：服务器无法启动请查看是否为@WebServlet("/SelectAllServlet")忘记写 /
package com.xz.web.servlet;
import com.alibaba.fastjson.JSON;
import com.xz.pojo.Brand;
import com.xz.service.BrandService;
import com.xz.service.impl.BrandServiceImpl;
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.util.List;
@WebServlet("/SelectAllServlet")
public class SelectAllServlet extends HttpServlet {
//获取到service
private BrandService brandService = new BrandServiceImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<Brand> brands = brandService.selectAll();//直接调用查询
String brandsString = JSON.toJSONString(brands);//转换格式
resp.setContentType("text/json;charset=utf-8");//声明传递的是json文件且字符集为utf-8
resp.getWriter().write(brandsString);//写数据，让axios接受
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
}5）测试一下。
启动服务器，输入：http://localhost:8080/xz-practice/SelectAllServlet
6) 前端获取
我们前端写的表格数据模型为brandData，发送请求放在 mounted钩子函数中，响应回来的数据需要赋值给表格绑定的数据模型brandData。
知识点：设置 _this 指向同为 this ，是为了在then(){}中所写 _this 依然指向外部的this
首先我们使用axios，要先导入它的jar包
<script src="js/axios-0.18.0.js"></script>mounted(){
var _this = this;
axios({
method:"get",
url:"http://localhost:8080/brand-case/SelectAllServlet"
}).then(function (resp) {
_this.brandData = resp.data;
})
}此时，输入：http://localhost:8080/xz-practice/brand.html就可以看到数据库中的数据
2. servlet优化（难点）
对于servlet我们每写一个执行sql的语句都要重建一个类去写，且我们有可能遇到不同的类来执行不同的sql语句（比如user也要写查询所有等方法）。我们可以自己定义一个AllServlet方便我们的管理。
需求：编写一个BrandServlet，里面写所有的执行方法。通过输入的url执行不同的方法：比如，xz-practice/selectAll执行查询所有方法，再比如xz-practice/delete执行删除方法，从而在可以方便管理。
知识点：HttpServlet有一个方法service进行数据分发(Post/Get)，我们可以在AllServlet中重写此方法，在此方法只需要完成：1) 获取当前请求路径的最后一个名 2）获取到的名就是我们要执行的方法名 3）反射获取BrandServlet的字节码文件，执行对应的方法
新建AllServlet类，BrandServlet类，BrandServlet继承AllServlet
编写AllServlet类：步骤已经在代码中呈现
package com.xz.web.servlet;
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 AllServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1. 获取传递来的uri
String uri = req.getRequestURI();
//2. 获取uri的最后一个后缀名 - 此后缀名为方法名
int index = uri.lastIndexOf("/"); //返回从最后扫描到的第一个"/"的索引
String modName = uri.substring(index + 1); //方法名
//3. 获取BrandServlet的字节码文件
// 直接用this，因为这是BrandServlet调用的service方法，所以this表示BrandServlet
Class<? extends AllServlet> brandServletClass = this.getClass();
//4. 获取它的方法，第一个参数：方法名。其他参数：为该方法的参数
//我们需要统一参数，把方法的参数都改为 HttpServletRequest与HttpServletResponse
Method method = null;
try {
method = brandServletClass.getMethod(modName, HttpServletRequest.class, HttpServletResponse.class);
//4. 第一个参数：那个类中的方法名。其他参数：为该方法的参数
method.invoke(this,req,resp);
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
}编写BrandServlet类：步骤已经在代码中呈现
package com.xz.web.servlet;
import com.alibaba.fastjson.JSON;
import com.xz.pojo.Brand;
import com.xz.service.BrandService;
import com.xz.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.IOException;
import java.util.List;
@WebServlet("/brand/*")
public class BrandServlet extends AllServlet{
//获取到service
private BrandService brandService = new BrandServiceImpl();
//查询所有方法
public void selectAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<Brand> brands = brandService.selectAll();//直接调用查询
String brandsString = JSON.toJSONString(brands);//转换格式
resp.setContentType("text/json;charset=utf-8");//声明传递的是json文件且字符集为utf-8
resp.getWriter().write(brandsString);//写数据，让axios接受
}
}现在，我们访问查询所有写的地址是：xz-pratice/brand/selectAll
所以我们前端的axios请求url需要修改
mounted(){
var _this = this;
axios({
method:"get",
url:"http://localhost:8080/xz-practice/brand/selectAll"
}).then(function (resp) {
_this.brandData = resp.data;
})
}删除原先的SelectAllServlet。测试下是否依然可以读取到数据库。
3. 新增-添加功能
我们刚刚写了添加表单，此时我们来实现添加数据至数据库
依然按照这个顺序：mapper >>> service >>> servlet >>> html
1. BrandMapper增加sql语句。
分析：新增功能我们需要参数，返回值不需要了。
@Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
void addBrand(Brand brand);2. service编写。接口中增加方法，实现类中实现方法。
BrandService
//新增
void addBrand(Brand brand);BrandServiceImpl
注意：修改数据库需要提交事务
public void addBrand(Brand brand) {
//获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//调用方法
mapper.addBrand(brand);
//改变数据库需要提交事务
sqlSession.commit();
//释放资源
sqlSession.close();
}3. servlet编写。获取axios传递来的json数据，转换为brand对象后，将此brand发送数据库，向前台传递成功的标识。
//新增方法
public void addBrand(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
BufferedReader reader = req.getReader();//获取前台数据 - 流
String json = reader.readLine();//读取流中数据，这是一个json对象
Brand brand = JSON.parseObject(json, Brand.class);//转换为Brand对象
brandService.addBrand(brand);//直接调用增加方法
resp.getWriter().write("yes");//可以发送前端一个成功标识
} 4. 前端编写。在点击新增后，出现一个表单，提交表单的数据模型我们定义为了addData，我们通过axios获取。表单我们直接使用post，在执行之后，我们需要：1）将对话框关闭 2）重新查询一下刷新数据 3）弹出成功的标识 - 这个直接在element去找就好
注意：因为第2步之前我们已经使用钩子函数mounted查询了所有，这个时候我们写一个select方法，就可以方便的完成这两个需求。
在方法里写一个查询所有的方法selectAll
selectAll(){
var _this = this;
axios({
method:"get",
url:"http://localhost:8080/xz-practice/brand/selectAll"
}).then(function (resp) {
_this.brandData = resp.data;
})
}钩子函数mounted只需要调用一下
mounted(){
this.selectAll();//把查询所有的抽出去
}addBrand方法中编写axios，这是我们前面绑定的点击事件
addBrand(){ // 添加数据
var _this = this;
axios({
method: "post",
url:"http://localhost:8080/xz-practice/brand/addBrand",
data:this.addData
}).then(function (resp) {//这里是获取到后端传递来数
if(resp.data == "yes"){
_this.dialogVisible = false;//窗口关闭
_this.selectAll();//重新查一下
// 在弹出成功信息
_this.$message({
message: '添加成功√',
type: 'success'
});
}
})
}5. 测试下在点击新增后，输入数据是否显示添加成功标识，且数据库中已经增加数据。
4. 删除功能
同步骤3相似我们快速写一下
BrandMapper
//删除
@Delete("delete from tb_brand where id = #{id}")
void deleteBrand(Integer id);BrandServiceImpl
提示：我们通过id删除，需要将此对象的id获取出来
public void deleteBrand(Brand brand) {
//获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//调用方法
mapper.deleteBrand(brand.getId());
//改变数据库需要提交事务
sqlSession.commit();
//释放资源
sqlSession.close();
}BrandService
//删除
void deleteBrand(Brand brand);BrandServlet
//删除方法
public void deleteBrand(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
BufferedReader reader = req.getReader();//获取前台数据 - 流
String json = reader.readLine();//读取流中数据，这是一个json对象
Brand brand = JSON.parseObject(json, Brand.class);//转换为Brand对象
brandService.deleteBrand(brand);//直接调用删除方法
resp.getWriter().write("yes");//可以发送前端一个成功标识
}brand.html
这里用到一个新的技术：slot插槽；我们获取表格中此行的数据一般会用到插槽，scope相当于一行的数据， scope.row相当于当前行的数据对象。我们获取到这一行的brand对象，让delete方法带有此行数据row的参数，实现传递本行数据。
重新编辑删除按键。因为修改后期我们也会用到，我们就将两个写在一起。
<!--修改和删除按钮-->
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="warning" round>修改</el-button>
<el-button type="danger" @click="deleteBrand(scope.row)" round>删除</el-button>
</template>
</el-table-column>添加一个删除模型
deleteData:{
id:'',
brandName:'',
companyName: '',
ordered: '',
description:'',
}添加删除方法deleteBrand(row) - 带参数
//删除数据
deleteBrand(row){//我们获取这个script对象
this.deleteData = row;//为删除模型绑定数据
var _this = this;
this.$confirm('您确定要删除这条数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //点击确定后开始删除
axios({
method:"post",
url:"http://localhost:8080/xz-practice/brand/deleteBrand",
data: _this.deleteData
}).then(function (resp) {
if (resp.data == "yes") {
//查询一次
_this.selectAll();
_this.$message({
message: '删除成功√',
type: 'success'
});
}
})
}).catch(() => {//点击取消后的操作
this.$message({
type: 'info',
message: '已取消删除'
});
})
}我们已经完成了删除操作，测试一下吧
5. 修改功能
同步骤3、4相似我们快速写一下
BrandMapper
//修改
@Update("update tb_brand set brand_name = #{brandName},company_name = #{companyName}, ordered = #{ordered},description = #{description},status = #{status} where id = #{id}")
void update(Brand brand);BrandService
//修改
void updateBrand(Brand brand);BrandServiceImpl
public void updateBrand(Brand brand) {
//获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//调用方法
mapper.updateBrand(brand);
//改变数据库需要提交事务
sqlSession.commit();
//释放资源
sqlSession.close();
}BrandServlet
//修改方法
public void updateBrand(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
BufferedReader reader = req.getReader();//获取前台数据 - 流
String json = reader.readLine();//读取流中数据，这是一个json对象
Brand brand = JSON.parseObject(json, Brand.class);//转换为Brand对象
brandService.updateBrand(brand);//直接调用修改方法
resp.getWriter().write("yes");//可以发送前端一个成功标识
} brand.html
这里修改的话，要注意：利用删除功能中获取本行数据的那个方法要改一下，因为我们利用插槽，点击修改后，此时携带着本行的数据，同时要打开一个对话框，因此不能直接的把本行数据传递给后端。所以我们要先写一个方法updateBrandStart，将此行数据赋值到一个我们新建的updateData模型上，并且将对话框设置打开状态。用户填写后点击提交，这时候会执行一个updateBrand方法才会真的把需要修改的数据传递给后台。
修改“修改”和“删除”按钮
<!--修改和删除按钮-->
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="warning" @click="updateBrandStart(scope.row)" round>修改</el-button>
<el-button type="danger" @click="deleteBrand(scope.row)" round>删除</el-button>
</template>
</el-table-column>编写updateData模型
updateData:{
id:'',
brandName:'',
companyName: '',
ordered: '',
description:'',
status:''
}编写updateBrandStrat方法 - 注意注解！！！
updateBrandStart(row){
// 这里JSON.stringify表示将row(script对象)转为json,
// 这里JSON.parse表示将json对象转为script对象
// 目的是为了不让updateData地址指向row，此时的row是我们展示在表格上的数据的模型brandData
// 如果直接写row，那我们在填写对话框时，此时修改数据，表格上的数据也会跟着改变
// 原因就是我们直接用=会将地址赋值，指向了表格上的的数据模型的地址。
this.updateData = JSON.parse(JSON.stringify(row));
this.dialogVisibleUpdate = true;
}编写updateBrand方法
updateBrand(){
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/xz-practice/brand/updateBrand",
data: _this.updateData
}).then(function (resp) {
if (resp.data == "yes") {
//关闭窗口
_this.dialogVisibleUpdate = false;
//再查询一次
_this.selectAll();
_this.$message({
message: '修改成功√',
type: 'success'
});
}
})
}编写弹出的对话框
<!--修改数据对话框表单-->
<el-dialog
title="修改品牌"
:visible.sync="dialogVisibleUpdate"
width="30%">
<el-form ref="form" :model="updateData" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="updateData.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="updateData.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="updateData.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="updateData.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="updateData.status"
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="dialogVisibleUpdate = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>设置默认关闭
dialogVisibleUpdate:false此时，可以测试代码了，查看是否已经完成了此功能。
6. 批量删除功能
依然要按照顺序一步步编写
1. Dao层
用到复杂的sql语句，因为我们要指定要删除的id这个集合，通过读取这个集合数据执行sql语句
我们在xml文件中书写
BrandMapper.xml
<!--以where id in (1,2,..)的方式进行删除-->
<delete id="deleteBrands">
delete from tb_brand where id in
<foreach collection="ids" item="id" open="(" close=")" separator=",">
#{id}
</foreach>
</delete>BrandMapper
//批量删除
@Delete("deleteBrands")
void deleteBrands(Integer[] ids);2. service层
BrandService
//批量删除
void deleteBrands(Integer[] ids);BrandServiceImpl
public void deleteBrands(Integer[] ids) {
//获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//调用方法
mapper.deleteBrands(ids);
//改变数据库需要提交事务
sqlSession.commit();
//释放资源
sqlSession.close();
}3. web层
BrandServlet
//批量删除方法
public void deleteBrands(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
BufferedReader reader = req.getReader();//获取前台数据 - 流
String json = reader.readLine();//读取流中数据，这是一个json对象
Integer[] ids = JSON.parseObject(json, Integer[].class);//转换为Integer[]对象
brandService.deleteBrands(ids);//直接调用删除方法
resp.getWriter().write("yes");//可以发送前端一个成功标识
}4. brand.html
分析：之前写过一个多选按钮，他有对应的方法和模型，这就代表着我们选中后模型中就会有这些数据。
模型
//多选按钮
multipleSelection: []方法
handleSelectionChange(val) {//多选按钮
//这里的multipleSelection模型就是选中的所有的数据
this.multipleSelection = val;
}那么就简单了，我们可以创建一个需要删除id的模型，将id赋值进去，在传递给后端
//需要删除的id们
deleteIds:[]为批量删除按钮添加点击事件
<!--新增、批量删除行-->
<el-button type="danger" @click="deleteBrands" round>批量删除</el-button>
<el-button type="success" @click="dialogVisible = true" round>新增</el-button>编写deleteBrands方法
//删除一组数据
deleteBrands(){
this.$confirm('您确定要删除这些数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //点击确定后开始删除
//先将获取到的需要删除的bran们，将他们的id取出来。
//这里可以用this，但axios中的then内部不可以
for(let i = 0;i < this.multipleSelection.length;i++){
this.deleteIds[i] = this.multipleSelection[i].id;
}
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/xz-practice/brand/deleteBrands",
data: _this.deleteIds
}).then(function (resp) {
console.log(resp.data)
if (resp.data == "yes") {
//查询一次
_this.selectAll();
_this.$message({
message: '删除成功√',
type: 'success'
});
}
})
}).catch(() => {//点击取消后的操作
this.$message({
type: 'info',
message: '已取消删除'
});
})
}到这里代码就已经完成了，测试一下批量删除功能吧。
7. 分页（难点）
分析：对于分页，我们要知道后端需要什么数据，前端需要什么数据。
前端：
1. 前端需要知道一共有几页数据，才能显示总页数的数量。只需要后端查询数据库数据的总数量即可，因为前端可以自己计算出这些数据需要分几页。
2. 前端需要知道一页中展示的数据有哪些，就像之前查询所有的数据，我们要把后端查询到的所有的数据给前端来展示一样。比如前端给后端说：我1页分5条，要第5页数据，那我们要查询到这些brand数据。
后端：
1. 后端需要知道当前在第几页，比如前端通过点第击1页、第2页、第3页或第4页等。
提示：这里获取的数据是我们计算sql语句中limit里的第一个参数。后端有总数量，除以这个页数可以得到我们舍弃前几条数据。比如100条数据，显示第5页，就要舍弃前20条数据。
2. 后端需要知道前端准备一页分多少数据进行展示呢？比如前端说一页展示5条数据，那我们获取到这个数字5后，通过数据库查询这5条数据返回给前端。
提示：这一获取的数据是我们计算sql语句中limit里的第二个参数。
3. 例子说明一下：
假设数据库有100条数据，1页分5条，需要查询第5页的数据：
select * from tb_brand limit 20, 5;
表示前20条数据不看，只看第21、22、23、24、25这5条数据。
分析完成，我们从何入手，当然是跟前面一样的步骤：
编写sql语句。
1. 需要参数：参数是1）舍弃前几条数据 2）展示几条数据，才能查到这些数据
注意：前端给我们的数据：一个是当前在第几页，一个是准备一页分多少数据，这个需要在service层实现，我们现在做的是查询这些数据。也就是说，在mapper里的参数和service里的参数不一定要对上。
2. 需要返回值：返回值返回的是给前端的数据，前面已经分析完，一个是数据库总数量，一个查询后显示的数据。
BrandMapper
提示：1处写了@ResultMap，而2处没写。本来我是两处都写了@ResultMap导致查询获取的总数量为null，修了半天才发现这里有毛病。
以后就记住一点：我们返回的数里面若有一个类与数据库名字不一致才会添加，其他时候不要动。例如：1里返回值带Brand，而Brand类中属性companyName与数据库中属性company_name冲突，因此要加@ResultMap。而2里返回值时Integer，很显然没有什么关系则不用加。
//分页查询
//1. 返回给前端查询这些数据
@Select("select * from tb_brand limit #{begin} , #{number}")
@ResultMap("resultMap")
List<Brand> selectBrandsByPage(@Param("begin") int begin, @Param("number") int number);
//2. 返回给前端一共有这些数据
@Select("select count(*) from tb_brand")
Integer selectSize();我们可以看到发送给前端的有两个类型，我们可以定义一个Bean，把这两种类型放在一个类中
提示：这里我写了sizes。因为刚刚写了size，在前端获取时因为方法同名，导致无法获取这个值
所以，这种敏感词汇还是不要用为好。
package com.xz.pojo;
import java.util.List;
public class SendBean {
private Integer sizes;
private List<Brand> brandsByPage;
public Integer getSizes() {
return sizes;
}
public void setSizes(Integer sizes) {
this.sizes = sizes;
}
public List<Brand> getBrandsByPage() {
return brandsByPage;
}
public void setBrandsByPage(List<Brand> brandsByPage) {
this.brandsByPage = brandsByPage;
}
}编写service层，因为我们定义了bean，只要写一个方法就好啦。
BrandService
//分页查询
SendBean selectByPage(int begin,int number);BrandServiceImpl
//参数是前端给的两个数据：一个是当前在第几页，一个是准备一页分多少数据(这个就是number)
public SendBean selectByPage(int nowPage, int number) {
//获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//先获取到总页数
Integer size = mapper.selectSize();
//计算舍弃前几页，用于查询语句的第一个参数
Integer begin = (nowPage-1)*number;
//执行方法
List<Brand> brands = mapper.selectBrandsByPage(begin, number);
//设置我们的bean
SendBean sendBean = new SendBean();
sendBean.setBrandsByPage(brands);
sendBean.setSize(size);
//释放资源
sqlSession.close();
return sendBean;
}编写servlet层
//分页查询方法
public void selectPage(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Integer nowPage = Integer.parseInt(req.getParameter("nowPage"));//当前页数
Integer number = Integer.parseInt(req.getParameter("number"));//每页显示条数
SendBean sendBean = brandService.selectByPage(nowPage, number);//查询到的SendBean返回前端
String sendBeanString = JSON.toJSONString(sendBean);
resp.setContentType("text/json;charset=utf-8");
resp.getWriter().write(sendBeanString);
}可以先浏览器下测试下代码，在浏览器上书写：
http://localhost:8080/xz-practice/brand/selectByPage?nowPage=1&number=5
编写brand.html
首先我们要观察一下分页工具条那个地方的组件，在代码中注解了
这里一个page-size我们需要建立模型要改变它的数值嘛
这里一个total我们需要建立模型要改变它的数值嘛
分页工具条
<!--分页工具条-->
<!--
@size-change : 每页显示的条目数发生变化时会触发的事件 - 那个下拉的、一页显示多少数据的
@current-change ：当页码发生变化时，触发的事件
:current-page : 一页显示的条数（重要的，要返回后端）
:page-sizes ：设置条目数的选择 - 那个下拉的、一页显示多少数据的
:page-size ：一页显示多少个，这个就是（重要的，要返回后端）
:total：所有页显示的总条数，就是一共有多少数据
-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="sizeCount">
</el-pagination>添加的模型 - 这里给的值都是第一次显示的值，就叫它默认值吧。
//设置当前页码模型
currentPage: 1,
//设置一共多少数据的模型
sizeCount:100,
//设置当前页一共多少数据的模型
pageSize:5 编写查看分页工具条中两个方法
很显然，这里就是点击选择一页几条啊？点击选择第几页啊？val就是那个值
我们把这两个值绑定彼此的模型就可以实时修改了
记得要重新查询一下
handleSizeChange(val) {//分页:选择5条/页那么val值就是5，我们可以就可以设置每页显示大小
// console.log(`每页 ${val} 条`);
this.pageSize = val;
this.selectAll();
},
handleCurrentChange(val) {//选择第5页，那么值就是5，我们可以设置每页显示5
// console.log(`当前页: ${val}`);
this.currentPage = val;
this.selectAll();
}重新编写查询所有方法selectAll()
我们不再显示所有的数据的了，我们需要分页显示
这里可以说一下啊，通过resp.data获取到的是后端给我们的json字符串，这个字符串一个是需要展示的数据们，一个是总页数，我们通过.出他们的名字(这里的名字是我们定义的Bean里的各个属性名)，brandData模型是负责显示的数据模型，sizeCount模型是负责显示总共的页数。
selectAll(){
var _this = this;
axios({
method:"get",
url:"http://localhost:8080/xz-practice/brand/selectByPage?nowPage="+this.currentPage
+"&number="+this.pageSize
}).then(function (resp) {
_this.brandData = resp.data.brandsByPage;
_this.sizeCount = resp.data.sizes;
})
}可以测试一下了，查看是否已经完成了分页查询
8. 条件查询
对于条件查询，我们仔细想一下前端要获取的和后端要获取的。其实跟分页查询的逻辑差不多。
前端：（基本类似）
1. 前端依然需要知道一共有几页数据，这个是需要后端查询满足条件的数据共有几条。
2. 前端依然需要知道一页中展示的数据有哪些，这个也需要后端查询满足条件的数据有哪些。
后端：（有差异）
1. 后端需要知道我们在查询栏上写了什么内容，这个需要前端封装对象传递给后端。
2. 依然是查询操作，我们依然需要获取当前页数与每页显示条数。
sql语句有条件且复杂使用BrandMapper.xml
BrandMapper
//条件查询
//1. 返回给前端查询这些写数据
// 因为依然是查询语句，我们在编写sql语句时依然要有此页显示几条这样的东西
// 知识点：当我们写上@Param时，对于Brand第三个参数，我们获取值时要用#{brand.brandName}的方式
// 而不写@Param时，它会自动识别，直接写#{brandName}
List<Brand> selectBrandsByCondition(@Param("begin") int begin, @Param("number") int number,@Param("brand") Brand brand);
//2. 返回给前端满足条件的这些数据有几条
//传递Brand，就可以通过这个Brand查询到有几条了
Integer selectSizeCondition(Brand brand); BrandMapper.xml
知识点：
resultMap与resultType要看清楚，这俩不做解释(可以查到)，只说结论：如果返回一个值，比如说String或者int，那直接用resultType，如果返回的是一个我们定义的类型，且这个类型数据库数据与我们类中属性名不一致那么就用resultMap。
<!--根据条件查询指定的数据-->
<select id="selectBrandsByCondition" resultMap="resultMap">
select * from tb_brand
<where>
<if test="brand.brandName != null and brand.brandName != '' ">
and brand_name like #{brand.brandName}
</if>
<if test="brand.companyName != null and brand.companyName != '' ">
and company_name like #{brand.companyName}
</if>
<if test="brand.status != null">
and status = #{brand.status}
</if>
</where>
limit #{begin}, #{number}
</select>
<!--根据条件查询指定的数据的数量-->
<select id="selectSizeCondition" resultType="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> BrandService
提示：跟前面一样，我们封装了一个这样的bean就只需要写一个就好了。
//条件查询
SendBean selectByCondition(int nowPage,int number, Brand brand);BrandServiceImpl
提示：模糊查询需要两边加上 %,我们就放到service业务逻辑层处理
//参数是前端给的：一个是当前在第几页，一个是准备一页分多少数据(这个就是number)，一个是Brand
public SendBean selectByCondition(int nowPage, int number, Brand brand) {
//获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
// sql语句里的模糊查询，我们需要加上 % 表示左右边任意的数量
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 + "%");
}
//先获取到满足条件的总页数
Integer size = mapper.selectSizeCondition(brand);
//计算舍弃前几页，用于查询语句的第一个参数
Integer begin = (nowPage - 1) * number;
//执行方法
List<Brand> brands = mapper.selectBrandsByCondition(begin, number, brand);
//设置我们的bean
SendBean sendBean = new SendBean();
sendBean.setBrandsByPage(brands);
sendBean.setSizes(size);
//释放资源
sqlSession.close();
return sendBean;
}BrandServlet
//条件查询方法
public void selectByCondition(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取前端给我封装好的brand的JSON字符串,进行转换
BufferedReader reader = req.getReader();
String brandJson = reader.readLine();
Brand brand = JSON.parseObject(brandJson, Brand.class);
Integer nowPage = Integer.parseInt(req.getParameter("nowPage"));//当前页数
Integer number = Integer.parseInt(req.getParameter("number"));//每页显示条数
SendBean sendBean = brandService.selectByCondition(nowPage, number, brand);//查询到的SendBean返回前端
String sendBeanString = JSON.toJSONString(sendBean);
resp.setContentType("text/json;charset=utf-8");
resp.getWriter().write(sendBeanString);
}brand.html
对于前端页面，我们直接修改seleAll()，为什么可以呢？因为我们之前是根据页面查询，只是附加了一个功能-再根据条件查询。分析下步骤：一开始，我们没有查询数据，我们把一个空的模型传递给后端，后端里sql语句中会发现是空的，那么直接把where条件整个删掉，就满足了之前的分页查询功能。如果输入了数据以后，那么前端会封装到一个模型，通过data把这个模型传递给后端，后端接受这个数据，查询后返回给前端。也就显示出了查询后的结果。
首先是需要用到的模型：
brand:{ //满足条件展示的数据
id:'',
brandName: '',
companyName: '',
ordered: '',
status:'',
description:''
}在条件查询绑定上这个模型，才能获取填写的数据
<!--条件查询行-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.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="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="商品名称">
<el-input v-model="brand.brandName" placeholder="商品名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>看到有一个查询方法，因为分页查询和条件查询结合了，所以只需要重新selectAll()一下就好了。
onSubmit() {
this.selectAll();
}我们再来修改selectAll。
提示：
1. 修改url，我们通过条件查询
2. 修改为post请求，因为需要传递数据模型了
3. 将data写上我们的条件查询框绑定的brand模型
selectAll(){
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/xz-practice/brand/selectByCondition?nowPage="+this.currentPage
+"&number="+this.pageSize,
data:this.brand
}).then(function (resp) {
_this.brandData = resp.data.brandsByPage;
_this.sizeCount = resp.data.sizes;
})
}写完之后我们来分析一下，这selectAll写了第三次，分别是分页查询代替了查询所有；条件查询代替了分页查询；那我们是不是可以删除分页查询和查询所有？答案是：当然可以；
我们可以尝试着删除从mapper >> service >>> servlet 所有关于查询所有和分页查询的注释掉，我们会发现其实一点问题没有。
9.修改状态里的数据显示
我们发现在显示的界面上状态一栏总是显示1或0，我们能否更改显示为启用或禁用。
我们需要知道是在哪儿显示的，在表格区域里查找，可以看到：
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>我们要知道他是怎么显示的，他是通过调用Brand类中的getStatus()获取的数据，当然是0或1了，那我们想要显示启用或者禁用就需要添加一个getNewStauus()方法，用来显示：
在Brand类中添加：
public String getNewStatus(){
if (status == null){
return "未知";
}
return status == 0 ? "禁用":"启用";
}此时再修改表格区域里的prop属性：
<el-table-column
prop="newStatus"
label="当前状态"
align="center">
</el-table-column>可以启动测试一下啦！
4. 所有代码
Brand
package com.xz.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 void setStatus(Integer status) {
this.status = status;
}
public String getNewStatus(){
if (status == null){
return "未知";
}
return status == 0 ? "禁用":"启用";
}
@Override
public String toString() {
return "Brand{" +
"id=" + id +
", brandName='" + brandName + '\'' +
", companyName='" + companyName + '\'' +
", ordered=" + ordered +
", description='" + description + '\'' +
", status=" + status +
'}';
}
}SendBean
package com.xz.pojo;
import java.util.List;
public class SendBean {
private Integer sizes;
private List<Brand> brandsByPage;
public Integer getSizes() {
return sizes;
}
public void setSizes(Integer sizes) {
this.sizes = sizes;
}
public List<Brand> getBrandsByPage() {
return brandsByPage;
}
public void setBrandsByPage(List<Brand> brandsByPage) {
this.brandsByPage = brandsByPage;
}
}BrandMapper
package com.xz.mapper;
import com.xz.pojo.Brand;
import org.apache.ibatis.annotations.*;
import java.util.List;
public interface BrandMapper {
//@Select("select * from tb_brand")
//@ResultMap("resultMap")
//List<Brand> selectAll();
@Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
void addBrand(Brand brand);
//删除
@Delete("delete from tb_brand where id = #{id}")
void deleteBrand(Integer id);
//修改
@Update("update tb_brand set brand_name = #{brandName},company_name = #{companyName}, ordered = #{ordered},description = #{description},status = #{status} where id = #{id}")
void updateBrand(Brand brand);
//批量删除
void deleteBrands(@Param("ids") Integer[] ids);
//分页查询
//1. 返回给前端查询这些数据
//@Select("select * from tb_brand limit #{begin} , #{number}")
//@ResultMap("resultMap")
//List<Brand> selectBrandsByPage(@Param("begin") int begin, @Param("number") int number);
//2. 返回给前端一共有这些数据
//@Select("select count(*) from tb_brand")
//Integer selectSize();
//条件查询
//1. 返回给前端查询这些写数据
// 因为依然是查询语句，我们在编写sql语句时依然要有此页显示几条这样的东西
// 知识点：当我们写上@Param时，对于Brand第三个参数，我们获取值时要用#{brand.brandName}的方式
// 而不写@Param时，它会自动识别，直接写#{brandName}
List<Brand> selectBrandsByCondition(@Param("begin") int begin, @Param("number") int number,@Param("brand") Brand brand);
//2. 返回给前端满足条件的这些数据有几条
//传递Brand，就可以通过这个Brand查询到有几条了
Integer selectSizeCondition(Brand brand);
}BrandMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xz.mapper.BrandMapper">
<resultMap id="resultMap" type="com.xz.pojo.Brand">
<result property="brandName" column="brand_name" />
<result property="companyName" column="company_name" />
</resultMap>
<!--以where id in (1,2,..)的方式进行删除-->
<delete id="deleteBrands">
delete from tb_brand where id in
<foreach collection="ids" item="id" open="(" close=")" separator=",">
#{id}
</foreach>
</delete>
<!--根据条件查询指定的数据-->
<!--ResultType和ResultMap都是执行查询语句时返回的结果集-->
<select id="selectBrandsByCondition" resultMap="resultMap">
select * from tb_brand
<where>
<if test="brand.brandName != null and brand.brandName != '' ">
and brand_name like #{brand.brandName}
</if>
<if test="brand.companyName != null and brand.companyName != '' ">
and company_name like #{brand.companyName}
</if>
<if test="brand.status != null">
and status = #{brand.status}
</if>
</where>
limit #{begin}, #{number}
</select>
<!--根据条件查询指定的数据的数量-->
<select id="selectSizeCondition" resultType="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>BrandService
package com.xz.service;
import com.xz.pojo.Brand;
import com.xz.pojo.SendBean;
public interface BrandService {
//查询所有
//List<Brand> selectAll();
//新增
void addBrand(Brand brand);
//删除
void deleteBrand(Brand brand);
//修改
void updateBrand(Brand brand);
//批量删除
void deleteBrands(Integer[] ids);
//分页查询
//SendBean selectByPage(int nowPage,int number);
//条件查询
SendBean selectByCondition(int nowPage,int number, Brand brand);
}BrandServiceImpl
package com.xz.service.impl;
import com.xz.mapper.BrandMapper;
import com.xz.pojo.Brand;
import com.xz.pojo.SendBean;
import com.xz.service.BrandService;
import com.xz.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import java.util.List;
public class BrandServiceImpl implements BrandService {
//创建SqlSessionFactory 工厂对象
SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();
// public List<Brand> selectAll() {
// //获取SqlSession对象
// SqlSession sqlSession = factory.openSession();
// //获取BrandMapper
// BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
// //调用方法
// List<Brand> brands = mapper.selectAll();
// //释放资源
// sqlSession.close();
// return brands;
// }
public void addBrand(Brand brand) {
//获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//调用方法
mapper.addBrand(brand);
//改变数据库需要提交事务
sqlSession.commit();
//释放资源
sqlSession.close();
}
public void deleteBrand(Brand brand) {
//获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//调用方法
mapper.deleteBrand(brand.getId());
//改变数据库需要提交事务
sqlSession.commit();
//释放资源
sqlSession.close();
}
public void updateBrand(Brand brand) {
//获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//调用方法
mapper.updateBrand(brand);
//改变数据库需要提交事务
sqlSession.commit();
//释放资源
sqlSession.close();
}
public void deleteBrands(Integer[] ids) {
//获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
//调用方法
mapper.deleteBrands(ids);
//改变数据库需要提交事务
sqlSession.commit();
//释放资源
sqlSession.close();
}
//参数是前端给的两个数据：一个是当前在第几页，一个是准备一页分多少数据(这个就是number)
// public SendBean selectByPage(int nowPage, int number) {
// //获取SqlSession对象
// SqlSession sqlSession = factory.openSession();
// //获取BrandMapper
// BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
// //先获取到总页数
// Integer size = mapper.selectSize();
// //计算舍弃前几页，用于查询语句的第一个参数
// Integer begin = (nowPage - 1) * number;
// //执行方法
// List<Brand> brands = mapper.selectBrandsByPage(begin, number);
// //设置我们的bean
// SendBean sendBean = new SendBean();
// sendBean.setBrandsByPage(brands);
// sendBean.setSizes(size);
// //释放资源
// sqlSession.close();
// return sendBean;
// }
//参数是前端给的：一个是当前在第几页，一个是准备一页分多少数据(这个就是number)，一个是Brand
public SendBean selectByCondition(int nowPage, int number, Brand brand) {
//获取SqlSession对象
SqlSession sqlSession = factory.openSession();
//获取BrandMapper
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
// sql语句里的模糊查询，我们需要加上 % 表示左右边任意的数量
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 + "%");
}
//先获取到满足条件的总页数
Integer size = mapper.selectSizeCondition(brand);
//计算舍弃前几页，用于查询语句的第一个参数
Integer begin = (nowPage - 1) * number;
//执行方法
List<Brand> brands = mapper.selectBrandsByCondition(begin, number, brand);
//设置我们的bean
SendBean sendBean = new SendBean();
sendBean.setBrandsByPage(brands);
sendBean.setSizes(size);
//释放资源
sqlSession.close();
return sendBean;
}
}AllServlet
package com.xz.web.servlet;
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 AllServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1. 获取传递来的uri
String uri = req.getRequestURI();
//2. 获取uri的最后一个后缀名 - 此后缀名为方法名
int index = uri.lastIndexOf("/"); //返回从最后扫描到的第一个"/"的索引
String modName = uri.substring(index + 1); //方法名
//3. 获取BrandServlet的字节码文件
// 直接用this，因为这是BrandServlet调用的service方法，所以this表示BrandServlet
Class<? extends AllServlet> brandServletClass = this.getClass();
//4. 获取它的方法，第一个参数：方法名。其他参数：为该方法的参数
//我们需要统一参数，把方法的参数都改为 HttpServletRequest与HttpServletResponse
Method method = null;
try {
method = brandServletClass.getMethod(modName, HttpServletRequest.class, HttpServletResponse.class);
//4. 第一个参数：那个类中的方法名。其他参数：为该方法的参数
method.invoke(this,req,resp);
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
}BrandServlet
package com.xz.web.servlet;
import com.alibaba.fastjson.JSON;
import com.xz.pojo.Brand;
import com.xz.pojo.SendBean;
import com.xz.service.BrandService;
import com.xz.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 AllServlet{
//获取到service
private BrandService brandService = new BrandServiceImpl();
//查询所有方法
// public void selectAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// List<Brand> brands = brandService.selectAll();//直接调用查询
// String brandsString = JSON.toJSONString(brands);//转换格式
// resp.setContentType("text/json;charset=utf-8");//声明传递的是json文件且字符集为utf-8
// resp.getWriter().write(brandsString);//写数据，让axios接受
// }
//新增方法
public void addBrand(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
BufferedReader reader = req.getReader();//获取前台数据 - 流
String json = reader.readLine();//读取流中数据，这是一个json对象
Brand brand = JSON.parseObject(json, Brand.class);//转换为Brand对象
brandService.addBrand(brand);//直接调用增加方法
resp.getWriter().write("yes");//可以发送前端一个成功标识
}
//删除方法
public void deleteBrand(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
BufferedReader reader = req.getReader();//获取前台数据 - 流
String json = reader.readLine();//读取流中数据，这是一个json对象
Brand brand = JSON.parseObject(json, Brand.class);//转换为Brand对象
brandService.deleteBrand(brand);//直接调用删除方法
resp.getWriter().write("yes");//可以发送前端一个成功标识
}
//修改方法
public void updateBrand(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
BufferedReader reader = req.getReader();//获取前台数据 - 流
String json = reader.readLine();//读取流中数据，这是一个json对象
Brand brand = JSON.parseObject(json, Brand.class);//转换为Brand对象
brandService.updateBrand(brand);//直接调用修改方法
resp.getWriter().write("yes");//可以发送前端一个成功标识
}
//批量删除方法
public void deleteBrands(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
BufferedReader reader = req.getReader();//获取前台数据 - 流
String json = reader.readLine();//读取流中数据，这是一个json对象
Integer[] ids = JSON.parseObject(json, Integer[].class);//转换为Integer[]对象
brandService.deleteBrands(ids);//直接调用删除方法
resp.getWriter().write("yes");//可以发送前端一个成功标识
}
//分页查询方法
//分页查询方法
// public void selectPage(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//
// Integer nowPage = Integer.parseInt(req.getParameter("nowPage"));//当前页数
// Integer number = Integer.parseInt(req.getParameter("number"));//每页显示条数
// SendBean sendBean = brandService.selectByPage(nowPage, number);//查询到的SendBean返回前端
// String sendBeanString = JSON.toJSONString(sendBean);
// resp.setContentType("text/json;charset=utf-8");
// resp.getWriter().write(sendBeanString);
//
// }
//条件查询方法
public void selectByCondition(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取前端给我封装好的brand的JSON字符串,进行转换
BufferedReader reader = req.getReader();
String brandJson = reader.readLine();
Brand brand = JSON.parseObject(brandJson, Brand.class);
Integer nowPage = Integer.parseInt(req.getParameter("nowPage"));//当前页数
Integer number = Integer.parseInt(req.getParameter("number"));//每页显示条数
SendBean sendBean = brandService.selectByCondition(nowPage, number, brand);//查询到的SendBean返回前端
String sendBeanString = JSON.toJSONString(sendBean);
resp.setContentType("text/json;charset=utf-8");
resp.getWriter().write(sendBeanString);
}
}brand.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--条件查询行-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.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="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="商品名称">
<el-input v-model="brand.brandName" placeholder="商品名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--新增、批量删除行-->
<el-button type="danger" @click="deleteBrands" round>批量删除</el-button>
<el-button type="success" @click="dialogVisible = true" round>新增</el-button>
<!--新增数据对话框表单-->
<el-dialog
title="新增品牌"
:visible.sync="dialogVisible"
width="30%">
<el-form ref="form" :model="addData" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="addData.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="addData.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="addData.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="addData.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="addData.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="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--修改数据对话框表单-->
<el-dialog
title="修改品牌"
:visible.sync="dialogVisibleUpdate"
width="30%">
<el-form ref="form" :model="updateData" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="updateData.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="updateData.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="updateData.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="updateData.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="updateData.status"
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="dialogVisibleUpdate = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--表格主数据展示区-->
<template>
<el-table
:data="brandData"
style="width: 100%"
@selection-change="handleSelectionChange">
<!--多选按钮-->
<el-table-column
type="selection"
width="55">
</el-table-column>
<!--编号-->
<el-table-column
type="index"
width="50"
align="center">
</el-table-column>
<!--表格数据-->
<el-table-column
prop="brandName"
label="商品名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="newStatus"
label="当前状态"
align="center">
</el-table-column>
<!--修改和删除按钮-->
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="warning" @click="updateBrandStart(scope.row)" round>修改</el-button>
<el-button type="danger" @click="deleteBrand(scope.row)" round>删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!--分页工具条-->
<!--
@size-change : 每页显示的条目数发生变化时会触发的事件 - 那个下拉的、一页显示多少数据的
@current-change ：当页码发生变化时，触发的事件
:current-page : 一页显示的条数（重要的，要返回后端）
:page-sizes ：设置条目数的选择 - 那个下拉的、一页显示多少数据的
:page-size ：一页显示多少个，这个就是（重要的，要返回后端）
:total：所有页显示的总条数，就是一共有多少数据
-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="sizeCount">
</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",
data() {
return {
brandData: [{ //展示的数据
brandName: '',
companyName: '',
ordered: '',
status:'',
}],
brand:{ //满足条件展示的数据
id:'',
brandName: '',
companyName: '',
ordered: '',
status:'',
description:''
},
addData:{//新增模型数据
brandName:'',
companyName: '',
ordered: '',
description:'',
status:''
},
deleteData:{
id:'',
brandName:'',
companyName: '',
ordered: '',
description:'',
status:''
},
updateData:{
id:'',
brandName:'',
companyName: '',
ordered: '',
description:'',
status:''
},
//多选按钮
multipleSelection: [],
//需要删除的id们
deleteIds:[],
//默认点击新增按钮前，对话框为关闭状态
dialogVisible : false,
//默认点击修改按钮前，对话框为关闭状态
dialogVisibleUpdate:false,
//设置当前页码模型
currentPage: 1,
//设置一共多少数据的模型
sizeCount:100,
//设置当前页一共多少数据的模型
pageSize:5
}
},
methods: {
onSubmit() {
this.selectAll();
},
selectAll(){
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/xz-practice/brand/selectByCondition?nowPage="+this.currentPage
+"&number="+this.pageSize,
data:this.brand
}).then(function (resp) {
_this.brandData = resp.data.brandsByPage;
_this.sizeCount = resp.data.sizes;
})
},
handleSelectionChange(val) {//多选按钮
//这里的multipleSelection模型就是选中的所有的数据
this.multipleSelection = val;
},
addBrand(){ // 添加数据
var _this = this;
axios({
method: "post",
url:"http://localhost:8080/xz-practice/brand/addBrand",
data:this.addData
}).then(function (resp) {//这里是获取到后端传递来数
if(resp.data == "yes"){
_this.dialogVisible = false;//窗口关闭
_this.selectAll();//重新查一下
// 在弹出成功信息
_this.$message({
message: '添加成功√',
type: 'success'
});
}
})
},
//删除数据
deleteBrand(row){//我们获取这个script对象
this.deleteData = row;//为删除模型绑定数据
var _this = this;
this.$confirm('您确定要删除这条数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //点击确定后开始删除
axios({
method:"post",
url:"http://localhost:8080/xz-practice/brand/deleteBrand",
data: _this.deleteData
}).then(function (resp) {
if (resp.data == "yes") {
//查询一次
_this.selectAll();
_this.$message({
message: '删除成功√',
type: 'success'
});
}
})
}).catch(() => {//点击取消后的操作
this.$message({
type: 'info',
message: '已取消删除'
});
})
},//删除一组数据
deleteBrands(){
this.$confirm('您确定要删除这些数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //点击确定后开始删除
//先将获取到的需要删除的bran们，将他们的id取出来。
//这里可以用this，但axios中的then内部不可以
for(let i = 0;i < this.multipleSelection.length;i++){
this.deleteIds[i] = this.multipleSelection[i].id;
}
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/xz-practice/brand/deleteBrands",
data: _this.deleteIds
}).then(function (resp) {
if (resp.data == "yes") {
//查询一次
_this.selectAll();
_this.$message({
message: '删除成功√',
type: 'success'
});
}
})
}).catch(() => {//点击取消后的操作
this.$message({
type: 'info',
message: '已取消删除'
});
})
},
updateBrandStart(row){
// 这里JSON.stringify表示将row(script对象)转为json,
// 这里JSON.parse表示将json对象转为script对象
// 目的是为了不让updateData地址指向row，此时的row是我们展示在表格上的数据的模型brandData
// 如果直接写row，那我们在填写对话框时，此时修改数据，表格上的数据也会跟着改变
// 原因就是我们直接用=会将地址赋值，指向了表格上的的数据模型的地址。
this.updateData = JSON.parse(JSON.stringify(row));
this.dialogVisibleUpdate = true;
},
updateBrand(){
var _this = this;
axios({
method: "post",
url: "http://localhost:8080/xz-practice/brand/updateBrand",
data: _this.updateData
}).then(function (resp) {
if (resp.data == "yes") {
//关闭窗口
_this.dialogVisibleUpdate = false;
//再查询一次
_this.selectAll();
_this.$message({
message: '修改成功√',
type: 'success'
});
}
})
},
handleSizeChange(val) {//分页:选择5条/页那么val值就是5，我们可以就可以设置每页显示大小
// console.log(`每页 ${val} 条`);
this.pageSize = val;
this.selectAll();
},
handleCurrentChange(val) {//选择第5页，那么值就是5，我们可以设置每页显示5
// console.log(`当前页: ${val}`);
this.currentPage = val;
this.selectAll();
}
},
mounted(){
this.selectAll();//把查询所有的抽出去
}
})
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
