JavaWeb综合案例（黑马程序员2023年JavaWeb课程总结，所有功能均实现，包含数据库sql文件）

JavaWeb综合案例（黑马程序员2023年JavaWeb课程总结，所有功能均实现，包含数据库sql文件）

1.案例介绍：

1.前端：Vue.js + element-ui + ajax（axios）+ html

2.后端：maven + mybatis + servlet 

2.项目结构：

3.BrandMapper接口类

1.   package com.itheima.mapper;
2.    
3.   import com.itheima.pojo.Brand;
4.   import org.apache.ibatis.annotations.*;
5.    
6.   import java.util.List;
7.   import java.util.Map;
8.    
9.   public interface BrandMapper {
10.   /**
11.   * 查询所有
12.   *
13.   * @return
14.   */
15.   @Select("select * from tb_brand")
16.   @ResultMap("brandResultMap")
17.   List<Brand> selectAll();
18.    
19.   /**
20.   * dao层添加数据
21.   *
22.   * @param brand
23.   */
24.   @Insert("insert into tb_brand values (null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
25.   void add(Brand brand);
26.    
27.   /**
28.   * 修改字段（修改全部字段你和修改部分字段），我用的是修改全部字段
29.   *sql语句写到了映射文件
30.   * @param brand
31.   * @return
32.   */
33.   int update(Brand brand);
34.    
35.   /**
36.   * 单个删除
37.   * @param id
38.   */
39.   @Delete("delete from tb_brand where id = #{id};")
40.   void deleteById(int id);
41.    
42.   /**
43.   * 批量删除
44.   * @param ids
45.   */
46.   void deleteByIds( @Param("ids")int [] ids);
47.    
48.   /**
49.   * 因为有两个参数，所以要用param注解，我也不知道为啥(分页查询)
50.   * @param begin
51.   * @param size
52.   * @return
53.   */
54.   @Select("select * from tb_brand limit #{begin},#{size}")
55.   @ResultMap("brandResultMap")
56.   List<Brand> selectByPage(@Param("begin") int begin,@Param("size")int size);
57.    
58.   /**
59.   * 查询总记录数
60.   * @return
61.   */
62.   @Select("select Count(*) from tb_brand")
63.   int selectTotalCount();
64.    
65.   /**
66.   * 分页条件查询
67.   * @param begin
68.   * @param size
69.   * @param brand
70.   * @return
71.   */
72.   List<Brand> selectByPageAndCondition(@Param("begin") int begin,@Param("size")int size,@Param("brand") Brand brand);
73.    
74.   /**
75.   * 查询总记录数（分页版本）(根据条件查询)
76.   * @param brand
77.   * @return
78.   */
79.   int selectTotalCountByCondition(Brand brand);
80.   }

4.Brand实体类

1.   package com.itheima.pojo;
2.    
3.   public class Brand {
4.   // id 主键
5.   private Integer id;
6.   // 品牌名称
7.   private String brandName;
8.   // 企业名称
9.   private String companyName;
10.   // 排序字段
11.   private Integer ordered;
12.   // 描述信息
13.   private String description;
14.   // 状态：0：禁用 1：启用
15.   private Integer status;
16.    
17.    
18.   public Integer getId() {
19.   return id;
20.   }
21.    
22.   public void setId(Integer id) {
23.   this.id = id;
24.   }
25.    
26.   public String getBrandName() {
27.   return brandName;
28.   }
29.    
30.   public void setBrandName(String brandName) {
31.   this.brandName = brandName;
32.   }
33.    
34.   public String getCompanyName() {
35.   return companyName;
36.   }
37.    
38.   public void setCompanyName(String companyName) {
39.   this.companyName = companyName;
40.   }
41.    
42.   public Integer getOrdered() {
43.   return ordered;
44.   }
45.    
46.   public void setOrdered(Integer ordered) {
47.   this.ordered = ordered;
48.   }
49.    
50.   public String getDescription() {
51.   return description;
52.   }
53.    
54.   public void setDescription(String description) {
55.   this.description = description;
56.   }
57.    
58.   public Integer getStatus() {
59.   return status;
60.   }
61.   //逻辑视图
62.   public String getStatusStr(){
63.   if (status == null){
64.   return "未知";
65.   }
66.   return status == 0 ? "禁用":"启用";
67.   }
68.    
69.   public void setStatus(Integer status) {
70.   this.status = status;
71.   }
72.    
73.   @Override
74.   public String toString() {
75.   return "Brand{" +
76.   "id=" + id +
77.   ", brandName='" + brandName + '\'' +
78.   ", companyName='" + companyName + '\'' +
79.   ", ordered=" + ordered +
80.   ", description='" + description + '\'' +
81.   ", status=" + status +
82.   '}';
83.   }
84.   }

5.PageBean实体类

1.   package com.itheima.pojo;
2.    
3.   import java.util.List;
4.    
5.   /**
6.   * 分页查询的的JavaBean，目的是为了给前端提供数据
7.   */
8.   public class PageBean<T> {
9.    
10.    
11.   //总记录数
12.   private int totalCount;
13.   //当前页数据,泛型T，是为了更好的适配各种各样的实体
14.   private List<T> rows;
15.    
16.    
17.    
18.   public int getTotalCount() {
19.   return totalCount;
20.   }
21.    
22.   public List<T> getRows() {
23.   return rows;
24.   }
25.    
26.   public void setTotalCount(int totalCount) {
27.   this.totalCount = totalCount;
28.   }
29.    
30.   public void setRows(List<T> rows) {
31.   this.rows = rows;
32.   }
33.   }

6.BrandService接口类

1.   package com.itheima.service;
2.    
3.   import com.itheima.pojo.Brand;
4.   import com.itheima.pojo.PageBean;
5.   import org.apache.ibatis.annotations.Param;
6.    
7.   import java.util.List;
8.    
9.   public interface BrandService {
10.   /**
11.   * 查询所有
12.   *
13.   * @return
14.   */
15.   List<Brand> selectAll();
16.    
17.   /**
18.   * 插入表单
19.   *
20.   * @param brand
21.   */
22.   void add(Brand brand);
23.    
24.   /**
25.   * 部分和全部修改全部有
26.   *
27.   * @param brand
28.   * @return
29.   */
30.   int update(Brand brand);
31.    
32.   /**
33.   * 删除一个
34.   *
35.   * @param id
36.   */
37.   void deleteById(int id);
38.    
39.   /**
40.   * 批量删除
41.   *
42.   * @param ids
43.   */
44.   void deleteByIds(int[] ids);
45.    
46.   /**
47.   * 分页查询
48.   *
49.   * @param currentPage 当前页码
50.   * @param pageSize 每页展示条数
51.   * @return
52.   */
53.   PageBean<Brand> selectByPage(int currentPage, int pageSize);
54.    
55.   /**
56.   * 分页条件查询
57.   * @param currentPage
58.   * @param pageSize
59.   * @param brand
60.   * @return
61.   */
62.   PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand);
63.    
64.   }

7.BrandServiceimpl实现类

1.   package com.itheima.service.impl;
2.    
3.   import com.itheima.mapper.BrandMapper;
4.   import com.itheima.pojo.Brand;
5.   import com.itheima.pojo.PageBean;
6.   import com.itheima.service.BrandService;
7.   import com.itheima.util.SqlSessionFactoryUtils;
8.   import org.apache.ibatis.session.SqlSession;
9.   import org.apache.ibatis.session.SqlSessionFactory;
10.    
11.   import java.util.List;
12.    
13.   public class BrandServiceImpl implements BrandService {
14.   //初始化工具类
15.   private SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();
16.    
17.   /**
18.   * 查询所有
19.   *
20.   * @return
21.   */
22.   @Override
23.   public List<Brand> selectAll() {
24.   //1.获取sqlsession的对象
25.   SqlSession sqlSession = sqlSessionFactory.openSession(true);//自定提交事务
26.   //2.获取BrandMapper映射文件
27.   BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
28.   //3.调取service接口的方法
29.   List<Brand> brands = mapper.selectAll();
30.   //4.释放资源
31.   sqlSession.close();
32.   //5.返回集合
33.   return brands;
34.   }
35.    
36.   /**
37.   * 插入表单
38.   *
39.   * @param brand
40.   */
41.   @Override
42.   public void add(Brand brand) {
43.   //1.获取sqlsession的对象
44.   SqlSession sqlSession = sqlSessionFactory.openSession(true);//自定提交事务
45.   //2.获取BrandMapper映射文件
46.   BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
47.   //3.调取service接口的方法
48.   mapper.add(brand);
49.   //4.释放资源
50.   sqlSession.close();
51.    
52.   }
53.    
54.   /**
55.   * 更新，因为是部分更新，所以全部更新1也能用
56.   *
57.   * @param brand
58.   * @return
59.   */
60.   @Override
61.   public int update(Brand brand) {
62.   //1.获取sqlsession的对象
63.   SqlSession sqlSession = sqlSessionFactory.openSession(true);//自定提交事务
64.   //2.获取BrandMapper映射文件
65.   BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
66.   //3.调取service接口的方法
67.   int update = mapper.update(brand);
68.   //4.释放资源
69.   sqlSession.close();
70.   //5.给返回值
71.   return update;
72.   }
73.    
74.   /**
75.   * 删除一个
76.   *
77.   * @param id
78.   */
79.   @Override
80.   public void deleteById(int id) {
81.   //1.获取sqlsession的对象
82.   SqlSession sqlSession = sqlSessionFactory.openSession(true);//自定提交事务
83.   //2.获取BrandMapper映射文件
84.   BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
85.   //3.调取service接口的方法
86.   mapper.deleteById(id);
87.   //4.释放资源
88.   sqlSession.close();
89.   }
90.    
91.   /**
92.   * 批量删除
93.   *
94.   * @param ids
95.   */
96.   @Override
97.   public void deleteByIds(int[] ids) {
98.   //1.获取sqlsession的对象
99.   SqlSession sqlSession = sqlSessionFactory.openSession(true);//自定提交事务
100.   //2.获取BrandMapper映射文件
101.   BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
102.   //3.调取service接口的方法
103.   mapper.deleteByIds(ids);
104.   //4.释放资源
105.   sqlSession.close();
106.   }
107.    
108.   /**
109.   * 分页查询(学到了新知识，真高兴，激动的不得了)
110.   *
111.   * @param currentPage 当前页码
112.   * @param pageSize 每页展示条数
113.   * @return
114.   */
115.   @Override
116.   public PageBean<Brand> selectByPage(int currentPage, int pageSize) {
117.   //1.获取sqlsession的对象
118.   SqlSession sqlSession = sqlSessionFactory.openSession(true);//自定提交事务
119.   //2.获取BrandMapper映射文件
120.   BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
121.    
122.   //3.计算
123.   int begin = (currentPage - 1) * pageSize;
124.   int size = pageSize;
125.    
126.   //4.查询当前页的数据
127.   List<Brand> rows= mapper.selectByPage(begin, size);
128.    
129.   //5.查询总记录数
130.   int totalCount = mapper.selectTotalCount();
131.    
132.   //6.把rows与totalCount封装成一个PageBean对象
133.   PageBean<Brand> pageBean = new PageBean<>();
134.   pageBean.setRows(rows);
135.   pageBean.setTotalCount(totalCount);
136.    
137.   //7.释放资源
138.   sqlSession.close();
139.    
140.   //8.返回值
141.   return pageBean;
142.   }
143.    
144.   /**
145.   * 分页条件查询
146.   *
147.   * @param currentPage
148.   * @param pageSize
149.   * @param brand
150.   * @return
151.   */
152.   @Override
153.   public PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {
154.   //1.获取sqlsession的对象
155.   SqlSession sqlSession = sqlSessionFactory.openSession(true);//自定提交事务
156.   //2.获取BrandMapper映射文件
157.   BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
158.    
159.   //3.计算,,处理一下brand条件，模糊表达式
160.   int begin = (currentPage - 1) * pageSize;
161.   int size = pageSize;
162.    
163.   //处理brand条件，模糊表达式
164.   String brandName = brand.getBrandName();
165.   if(brandName != null && brandName.length()>0){
166.   brand.setBrandName("%"+brandName+"%");
167.   }
168.   String companyName = brand.getCompanyName();
169.   if(companyName != null && companyName.length()>0){
170.   brand.setCompanyName("%"+companyName+"%");
171.   }
172.    
173.   //4.查询当前页的数据
174.   List<Brand> rows= mapper.selectByPageAndCondition(begin, size,brand);
175.    
176.   //5.查询总记录数
177.   int totalCount = mapper.selectTotalCountByCondition(brand);
178.    
179.   //6.把rows与totalCount封装成一个PageBean对象
180.   PageBean<Brand> pageBean = new PageBean<>();
181.   pageBean.setRows(rows);
182.   pageBean.setTotalCount(totalCount);
183.    
184.   //7.释放资源
185.   sqlSession.close();
186.    
187.   //8.返回值
188.   return pageBean;
189.   }
190.    
191.   }

8.SqlSessionFactoryUtils工具类

1.   package com.itheima.util;
2.    
3.   import org.apache.ibatis.io.Resources;
4.   import org.apache.ibatis.session.SqlSessionFactory;
5.   import org.apache.ibatis.session.SqlSessionFactoryBuilder;
6.    
7.   import java.io.IOException;
8.   import java.io.InputStream;
9.    
10.   public class SqlSessionFactoryUtils {
11.    
12.   private static SqlSessionFactory sqlSessionFactory;
13.    
14.   static {
15.   //静态代码块会随着类的加载而自动执行，且只执行一次
16.   try {
17.   String resource = "mybatis-config.xml";
18.   InputStream inputStream = Resources.getResourceAsStream(resource);
19.   sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
20.   } catch (IOException e) {
21.   e.printStackTrace();
22.   }
23.   }
24.    
25.    
26.   public static SqlSessionFactory getSqlSessionFactory(){
27.   return sqlSessionFactory;
28.   }
29.   }

9.BaseServlet

1.   package com.itheima.web.servlet;
2.    
3.   import javax.servlet.*;
4.   import javax.servlet.http.*;
5.   import javax.servlet.annotation.*;
6.   import java.io.BufferedReader;
7.   import java.io.IOException;
8.   import java.lang.reflect.InvocationTargetException;
9.   import java.lang.reflect.Method;
10.    
11.   /**
12.   * 1.替换HttpServlet的protected service的方法，使之很具请求最后一段路径名来进行方法分发
13.   * 2.重写protected service方法准备重写
14.   */
15.    
16.   public class BaseServlet extends HttpServlet {
17.    
18.   /**
19.   * service的方法是servlet会自动调用的，如果没有复写，就会去调用HttpServlet中的service方法
20.   * 根据请求的最后一段来进行方法分发
21.   */
22.   @Override
23.   protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
24.    
25.   //1.获取请求路径(获取地址栏输入的url地址路径)，短路径,req.getRequestURL()(长路径)
26.   String uri = req.getRequestURI(); //uri形式为/Brand-case/brand/selectAll
27.    
28.   //2.截取 整条路经的最后的执行文件（方法名）（截取字符串）
29.   int index = uri.lastIndexOf("/");//从后往前数 “/” 第一次出现的索引
30.   String methodName = uri.substring(index+1);//由于结果是 /selectAll带斜杆---我不是很理解
31.    
32.   //3.执行方法
33.   //3.1 获取BrandServlet/UserServlet的字节码文件 Class
34.   //this 谁调用我，我代表谁（谁调用this所在的方法，谁就是this，可以是brandServlet，UserServlet，Base的任何子类）
35.   Class<? extends BaseServlet> cls = this.getClass();
36.    
37.   //3.2获取方法method对象()请求参数
38.   try {
39.   //3.2获取方法method对象()请求参数
40.   Method method = cls.getMethod(methodName,HttpServletRequest.class,HttpServletResponse.class);
41.    
42.   //3.3执行方法
43.   method.invoke(this,req,resp);
44.    
45.   } catch (NoSuchMethodException e) {
46.   e.printStackTrace();
47.   } catch (InvocationTargetException e) {
48.   e.printStackTrace();
49.   } catch (IllegalAccessException e) {
50.   e.printStackTrace();
51.   }
52.    
53.    
54.   }
55.   }

10.BrandServlet

1.   package com.itheima.web.servlet;
2.    
3.   import com.alibaba.fastjson.JSON;
4.   import com.alibaba.fastjson.JSONObject;
5.   import com.itheima.pojo.Brand;
6.   import com.itheima.pojo.PageBean;
7.   import com.itheima.service.BrandService;
8.   import com.itheima.service.impl.BrandServiceImpl;
9.    
10.   import javax.servlet.ServletException;
11.   import javax.servlet.annotation.*;
12.   import javax.servlet.http.HttpServletRequest;
13.   import javax.servlet.http.HttpServletResponse;
14.   import java.io.BufferedReader;
15.   import java.io.IOException;
16.   import java.util.List;
17.    
18.   @WebServlet("/brand/*")
19.   public class BrandServlet extends BaseServlet {
20.    
21.   //如果将来service层的代码发生了变化，相对应的servlet的代码也得跟着变，而接口不用变化，
22.   private BrandService brandService = new BrandServiceImpl();
23.    
24.    
25.   /**
26.   * selectAll查询所有
27.   *
28.   * @param request
29.   * @param response
30.   * @throws ServletException
31.   * @throws IOException
32.   */
33.   public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
34.   //1.获取service实现类中的方法
35.   List<Brand> brands = brandService.selectAll();
36.    
37.   //2.把service实现类中返回值改成json格式，
38.   String s = JSON.toJSONString(brands);
39.    
40.   //3.别忘了编码问题，从数据库出来，改成json的格式,并设置data的结果值
41.   response.setContentType("text/json;charset=utf-8");
42.   response.getWriter().write(s);
43.   }
44.    
45.   /**
46.   * 添加数据（暂时没有灵活性的添加数据）
47.   *
48.   * @param request
49.   * @param response
50.   * @throws ServletException
51.   * @throws IOException
52.   */
53.   public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
54.    
55.   //1.获取请求行数据（获取json格式的独特方法JavaWeb）
56.   BufferedReader reader = request.getReader();
57.    
58.   //2.读取请求行数据（json字符串）
59.   String s = reader.readLine();
60.    
61.   //3.把json格式转为java对象
62.   Brand brand = JSONObject.parseObject(s, Brand.class);
63.    
64.   //4.调用BrandServiceImpl方法,并且传入数据
65.   brandService.add(brand);
66.    
67.   //5.相应成功后的数据（如果代码正常执行，给与前端一个相应成功的字符串）
68.   response.getWriter().write("success");
69.   }
70.    
71.   /**
72.   * 删除数据（根据单个的id传入参数，进行传入id）
73.   *
74.   * @param request
75.   * @param response
76.   * @throws ServletException
77.   * @throws IOException
78.   */
79.   public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
80.    
81.   //1.获取请求行数据（获取json格式的独特方法JavaWeb）
82.   BufferedReader reader = request.getReader();
83.    
84.   //2.读取请求行数据（json字符串）
85.   String s = reader.readLine();
86.    
87.   //3.把json格式转为java对象
88.   Brand brand = JSONObject.parseObject(s, Brand.class);
89.    
90.   //4.调用BrandServiceImpl方法,并且传入数据
91.   brandService.deleteById(brand.getId());
92.    
93.   //5.相应成功后的数据（如果代码正常执行，给与前端一个相应成功的字符串）
94.   response.getWriter().write("success");
95.   }
96.    
97.   /**
98.   * 部分数据，和全部数据更新都有了
99.   *
100.   * @param request
101.   * @param response
102.   * @throws ServletException
103.   * @throws IOException
104.   */
105.   public void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
106.    
107.   //1.获取请求行数据（获取json格式的独特方法JavaWeb）
108.   BufferedReader reader = request.getReader();
109.    
110.   //2.读取请求行数据（json字符串）
111.   String s = reader.readLine();
112.    
113.   //3.把json格式转为java对象
114.   Brand brand = JSONObject.parseObject(s, Brand.class);
115.   //4.调用BrandServiceImpl方法,并且传入数据
116.   brandService.update(brand);
117.    
118.   //5.相应成功后的数据（如果代码正常执行，给与前端一个相应成功的字符串）
119.   response.getWriter().write("success");
120.   }
121.    
122.   /**
123.   * 批量删除
124.   *
125.   * @param request
126.   * @param response
127.   * @throws ServletException
128.   * @throws IOException
129.   */
130.   public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
131.    
132.   //1.获取请求行数据（获取json格式的独特方法JavaWeb)(获取数据形式多种多样)
133.   BufferedReader reader = request.getReader();
134.    
135.   //2.读取请求行数据（json字符串）
136.   String s = reader.readLine();
137.    
138.   //3.把json格式转为java对象
139.   int[] ids = JSONObject.parseObject(s, int[].class);
140.    
141.   //4.调用BrandServiceImpl方法,并且传入数据
142.   brandService.deleteByIds(ids);
143.    
144.   //5.相应成功后的数据（如果代码正常执行，给与前端一个相应成功的字符串）
145.   response.getWriter().write("success");
146.   }
147.    
148.   /**
149.   * 分页查询
150.   *
151.   * @param request
152.   * @param response
153.   * @throws ServletException
154.   * @throws IOException
155.   */
156.   public void selectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
157.   //1.获取当前页码handleCurrentChange，和每页展示条数handleSizeChange url?currentPage=1&pageSize=5,把参数放到请求之后
158.   String _currentPage = request.getParameter("currentPage");
159.   String _pageSize = request.getParameter("pageSize");
160.    
161.   //2.把接收的数据，转换成Integer
162.   int currentPage = Integer.parseInt(_currentPage);
163.   int pageSize = Integer.parseInt(_pageSize);
164.    
165.   //3.调用service进行查询
166.   PageBean<Brand> brandPageBean = brandService.selectByPage(currentPage, pageSize);
167.    
168.   //4.把service实现类中返回值改成json格式，
169.   String s = JSON.toJSONString(brandPageBean);
170.    
171.   //5.别忘了编码问题，从数据库出来，改成json的格式,并设置data的结果值
172.   response.setContentType("text/json;charset=utf-8");
173.   response.getWriter().write(s);
174.   }
175.    
176.   /**
177.   * 分页动态条件查询
178.   *
179.   * @param request
180.   * @param response
181.   * @throws ServletException
182.   * @throws IOException
183.   */
184.   public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
185.    
186.   //1.获取当前页码handleCurrentChange，和每页展示条数handleSizeChange url?currentPage=1&pageSize=5,把参数放到请求之后
187.   String _currentPage = request.getParameter("currentPage");
188.   String _pageSize = request.getParameter("pageSize");
189.    
190.   //2.把接收的数据，转换成Integer
191.   int currentPage = Integer.parseInt(_currentPage);
192.   int pageSize = Integer.parseInt(_pageSize);
193.    
194.    
195.   //1.获取请求行数据（获取json格式的独特方法JavaWeb）
196.   BufferedReader reader = request.getReader();
197.    
198.   //2.读取请求行数据（json字符串）
199.   String s = reader.readLine();
200.    
201.   //3.把json格式转为java对象
202.   Brand brand = JSONObject.parseObject(s, Brand.class);
203.    
204.    
205.   //3.调用service进行查询
206.   PageBean<Brand> brandPageBean = brandService.selectByPageAndCondition(currentPage, pageSize, brand);
207.    
208.   //4.把service实现类中返回值改成json格式，
209.   String s2 = JSON.toJSONString(brandPageBean);
210.    
211.   //5.别忘了编码问题，从数据库出来，改成json的格式,并设置data的结果值
212.   response.setContentType("text/json;charset=utf-8");
213.   response.getWriter().write(s2);
214.   }
215.   }
216.    
217.    

11.UserServlet（没有写）

12.BrandMapper.xml映射文件

1.   <?xml version="1.0" encoding="UTF-8" ?>
2.   <!DOCTYPE mapper
3.   PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
4.   "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
5.   <mapper namespace="com.itheima.mapper.BrandMapper">
6.    
7.   <resultMap id="brandResultMap" type="brand">
8.   <result property="brandName" column="brand_name"/>
9.   <result property="companyName" column="company_name"/>
10.   </resultMap>
11.    
12.   <!--
13.   修改部分字段（当然也能修改全部字段）详细内容看https://blog.csdn.net/qq_51272114/article/details/
14.   -->
15.   <update id="update">
16.   update tb_brand
17.   <set>
18.   <if test="companyName != null and companyName != '' ">
19.   company_name=#{companyName},
20.   </if>
21.   <if test="brandName != null and brandName != '' ">
22.   brand_name=#{brandName},
23.   </if>
24.   <if test="ordered != null ">
25.   ordered=#{ordered},
26.   </if>
27.   <if test="description != null and description != '' ">
28.   description=#{description},
29.   </if>
30.   <if test="status != null ">
31.   status=#{status}
32.   </if>
33.   </set>
34.   where id = #{id};
35.   </update>
36.    
37.   <!--
38.   批量删除数据（遍历id集合），详细内容看https://blog.csdn.net/qq_51272114/article/details/
39.   -->
40.   <delete id="deleteByIds">
41.   delete from tb_brand where id in
42.   <foreach collection="ids" item="id" separator="," open="(" close=")">#{id}</foreach>
43.   ;
44.   </delete>
45.    
46.   <!--
47.   f分页条件查询
48.   -->
49.    
50.   <select id="selectByPageAndCondition" resultType="com.itheima.pojo.Brand" resultMap="brandResultMap">
51.   select * from tb_brand
52.   <where>
53.   <if test="brand.status != null">
54.   and status = #{brand.status}
55.   </if>
56.   <if test="brand.companyName != null and brand.companyName != '' ">
57.   and company_name like #{brand.companyName}
58.   </if>
59.   <if test="brand.brandName != null and brand.brandName != ''">
60.   and brand_name like #{brand.brandName}
61.   </if>
62.   </where>
63.   limit #{begin},#{size}
64.   </select>
65.    
66.   <!--
67.   根据条件查询总记录数
68.   -->
69.   <select id="selectTotalCountByCondition" resultType="java.lang.Integer">
70.   select count(*) from tb_brand
71.   <where>
72.   <if test="status != null">
73.   and status = #{status}
74.   </if>
75.   <if test="companyName != null and companyName != '' ">
76.   and company_name like #{companyName}
77.   </if>
78.   <if test="brandName != null and brandName != ''">
79.   and brand_name like #{brandName}
80.   </if>
81.   </where>
82.   </select>
83.   </mapper>

13.mybatis-config.xml连接数据库文件

1.   <?xml version="1.0" encoding="UTF-8" ?>
2.   <!DOCTYPE configuration
3.   PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
4.   "http://mybatis.org/dtd/mybatis-3-config.dtd">
5.   <configuration>
6.    
7.   <typeAliases>
8.   <package name="com.itheima.pojo"/>
9.   </typeAliases>
10.    
11.   <environments default="development">
12.   <environment id="development">
13.   <transactionManager type="JDBC"/>
14.   <dataSource type="POOLED">
15.   <property name="driver" value="com.mysql.jdbc.Driver"/>
16.   <property name="url" value="jdbc:mysql:///db1?useSSL=false"/>
17.   <property name="username" value="root"/>
18.   <property name="password" value="root"/>
19.   </dataSource>
20.   </environment>
21.   </environments>
22.   <mappers>
23.   <!--扫描mapper-->
24.   <package name="com.itheima.mapper"/>
25.   </mappers>
26.   </configuration>

14.brand.html

1.   <!DOCTYPE html>
2.   <html lang="en">
3.   <head>
4.   <meta charset="UTF-8">
5.   <title>Title</title>
6.   <style>
7.   .el-table .warning-row {
8.   background: oldlace;
9.   }
10.    
11.   .el-table .success-row {
12.   background: #f0f9eb;
13.   }
14.   </style>
15.    
16.   </head>
17.   <body>
18.   <div id="app">
19.    
20.   <!--搜索表单-->
21.   <el-form :inline="true" :model="brand" class="demo-form-inline">
22.    
23.   <el-form-item label="当前状态">
24.   <el-select v-model="brand.status" placeholder="当前状态">
25.   <el-option label="启用" value="1"></el-option>
26.   <el-option label="禁用" value="0"></el-option>
27.   </el-select>
28.   </el-form-item>
29.    
30.   <el-form-item label="企业名称">
31.   <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
32.   </el-form-item>
33.    
34.   <el-form-item label="品牌名称">
35.   <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
36.   </el-form-item>
37.    
38.   <el-form-item>
39.   <el-button type="primary" @click="onSubmit">查询</el-button>
40.   </el-form-item>
41.   </el-form>
42.    
43.   <!--按钮-->
44.    
45.   <el-row>
46.    
47.   <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
48.   <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
49.    
50.   </el-row>
51.   <!--添加数据对话框表单-->
52.   <el-dialog
53.   title="新增品牌"
54.   :visible.sync="dialogVisible"
55.   width="30%"
56.   >
57.    
58.   <el-form ref="form" :model="brand" label-width="80px">
59.   <el-form-item label="品牌名称">
60.   <el-input v-model="brand.brandName"></el-input>
61.   </el-form-item>
62.    
63.   <el-form-item label="企业名称">
64.   <el-input v-model="brand.companyName"></el-input>
65.   </el-form-item>
66.    
67.   <el-form-item label="排序">
68.   <el-input v-model="brand.ordered"></el-input>
69.   </el-form-item>
70.    
71.   <el-form-item label="备注">
72.   <el-input type="textarea" v-model="brand.description"></el-input>
73.   </el-form-item>
74.    
75.   <el-form-item label="状态">
76.   <el-switch v-model="brand.status"
77.   active-value="1"
78.   inactive-value="0"
79.   ></el-switch>
80.   </el-form-item>
81.    
82.    
83.   <el-form-item>
84.   <el-button type="primary" @click="addBrand">提交</el-button>
85.   <el-button @click="dialogVisible = false">取消</el-button>
86.   </el-form-item>
87.   </el-form>
88.    
89.   </el-dialog>
90.    
91.   <!--update表单-->
92.   <el-dialog
93.   title="修改品牌"
94.   :visible.sync="updateDialogVisible"
95.   width="30%"
96.   >
97.    
98.   <el-form ref="form" :model="brand" label-width="80px">
99.   <el-input v-model="brand.id" type="hidden"></el-input>
100.   <el-form-item label="品牌名称">
101.   <el-input v-model="brand.brandName"></el-input>
102.   </el-form-item>
103.    
104.   <el-form-item label="企业名称">
105.   <el-input v-model="brand.companyName"></el-input>
106.   </el-form-item>
107.    
108.   <el-form-item label="排序">
109.   <el-input v-model="brand.ordered"></el-input>
110.   </el-form-item>
111.    
112.   <el-form-item label="备注">
113.   <el-input type="textarea" v-model="brand.description"></el-input>
114.   </el-form-item>
115.    
116.   <el-form-item label="状态">
117.   <el-switch v-model="brand.status"
118.   active-value="1"
119.   inactive-value="0"
120.   ></el-switch>
121.   </el-form-item>
122.    
123.   <el-form-item>
124.   <el-button type="primary" @click="updateBrand">提交</el-button>
125.   <el-button @click="updateDialogVisible = false">取消</el-button>
126.   </el-form-item>
127.   </el-form>
128.    
129.   </el-dialog>
130.    
131.   <!--表格-->
132.   <template>
133.   <el-table
134.   :data="tableData"
135.   style="width: 100%"
136.   :row-class-name="tableRowClassName"
137.   @selection-change="handleSelectionChange"
138.   >
139.   <el-table-column
140.   type="selection"
141.   width="55">
142.   </el-table-column>
143.   <el-table-column
144.   type="index"
145.   width="50">
146.   </el-table-column>
147.    
148.   <el-table-column
149.   prop="brandName"
150.   label="品牌名称"
151.   align="center"
152.   >
153.   </el-table-column>
154.   <el-table-column
155.   prop="companyName"
156.   label="企业名称"
157.   align="center"
158.   >
159.   </el-table-column>
160.   <el-table-column
161.   prop="ordered"
162.   align="center"
163.   label="排序">
164.   </el-table-column>
165.   <el-table-column
166.   prop="status"
167.   align="center"
168.   label="当前状态">
169.   </el-table-column>
170.    
171.   <el-table-column
172.   align="center"
173.   label="操作">
174.   <template slot-scope="scope">
175.   <el-row>
176.   <el-button type="primary" @click=startUpdate(scope.row)>修改</el-button>
177.   <el-button type="danger" @click="open(scope.row)">删除</el-button>
178.   </el-row>
179.   </template>
180.    
181.   </el-table-column>
182.    
183.   </el-table>
184.   </template>
185.    
186.   <!--分页工具条-->
187.   <el-pagination
188.   @size-change="handleSizeChange"
189.   @current-change="handleCurrentChange"
190.   :current-page="currentPage"
191.   :page-sizes="[5, 10, 15, 20]"
192.   :page-size="5"
193.   layout="total, sizes, prev, pager, next, jumper"
194.   :total="totalCount"
195.   background
196.   layout="prev, pager, next"
197.   :total="100">
198.   </el-pagination>
199.    
200.   </div>
201.    
202.    
203.   <script src="js/vue.js"></script>
204.   <script src="element-ui/lib/index.js"></script>
205.   <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
206.   <script src="js/axios-0.18.0.js"></script>
207.   <script>
208.   new Vue({
209.   el: "#app",
210.    
211.   mounted() {
212.   //调用selectAll方法直接使用
213.   this.selectAll();
214.   },
215.   methods: {
216.   selectAll() {
217.   //var _this = this;//提生命周期
218.   axios({
219.   method: "post",
220.   url: "http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize + "",
221.   data: this.brand,
222.   }).then(resp => { //新特性，然后就可以在then里面的下划线say no了
223.   this.tableData = resp.data.rows;//此时{rows:[],totalCount:[]}
224.   this.totalCount = resp.data.totalCount;
225.   })
226.   },
227.   tableRowClassName({row, rowIndex}) {
228.   if (rowIndex === 1) {
229.   return 'warning-row';
230.   } else if (rowIndex === 3) {
231.   return 'success-row';
232.   }
233.   return '';
234.   },
235.   // 复选框选中后执行的方法
236.   handleSelectionChange(val) {
237.   this.multipleSelection = val;
238.    
239.   console.log(this.multipleSelection)
240.   },
241.   // 添加数据
242.   addBrand() {
243.   //console.log(this.brand);
244.   //发送Ajax请求，发送json数据
245.   //var _this = this;
246.   axios({
247.   method: "post",
248.   url: "http://localhost:8080/brand-case/brand/add",
249.   data: this.brand
250.   }).then(resp => {
251.   if (resp.data == "success") {
252.   //录入成功，关闭窗口,并且重新查询数据
253.   this.dialogVisible = false;
254.   this.selectAll();
255.   this.$message({
256.   message: '成功添加一条数据',
257.   type: 'success'
258.   });
259.   }
260.   })
261.   },
262.   // 修改数据
263.   updateBrand() {
264.   //console.log(this.brand);可以获取完整数据
265.   //发送Ajax请求，发送json数据
266.   //var _this = this;
267.   axios({
268.   method: "post",
269.   url: "http://localhost:8080/brand-case/brand/update",
270.   data: this.brand
271.   }).then(resp => {
272.   if (resp.data == "success") {
273.   //录入成功，关闭窗口,并且重新查询数据
274.   this.updateDialogVisible = false;
275.   this.selectAll();
276.   this.$message({
277.   message: '成功添加一条数据',
278.   type: 'success'
279.   });
280.   }
281.   })
282.   },
283.   //执行修改的onclick
284.   startUpdate(row) {
285.   // 获取改行已经有的数据，以供填入修改框
286.   // var _this = this
287.   this.brand = JSON.parse(JSON.stringify(row));
288.   // 弹出修改框
289.   this.updateDialogVisible = true;
290.   },
291.   //打开删除的提示框，并根据提示进行操作
292.   open(row) {
293.   this.brand = JSON.parse(JSON.stringify(row));
294.   //var _this = this;
295.   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
296.   confirmButtonText: '确定',
297.   cancelButtonText: '取消',
298.   type: 'warning'
299.   }).then(() => { //确认之后执行axios请求
300.   axios({
301.   method: "post",
302.   url: "http://localhost:8080/brand-case/brand/deleteById",
303.   data: this.brand
304.   }).then(resp => {
305.   if (resp.data == "success") {
306.   //录入成功，关闭窗口,并且重新查询数据
307.   this.selectAll();
308.   this.$message({
309.   message: '删除成功',
310.   type: 'success'
311.   });
312.   }
313.   })
314.    
315.   }).catch(() => { //取消之后执行标签
316.   this.$message({
317.   type: 'info',
318.   message: '已取消删除'
319.   });
320.   });
321.   },
322.   //批量删除的单击事件
323.   deleteByIds() {
324.   //console.log(this.multipleSelection);
325.   //1.创建id数组[1,2,3],从multipleSelection模型里面来的数据
326.   for (let i = 0; i < this.multipleSelection.length; i++) {
327.   let element = this.multipleSelection[i];
328.   //获取遍历后得到id值
329.   this.selectByIds[i] = element.id;
330.   }
331.   //var _this = this;
332.   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
333.   confirmButtonText: '确定',
334.   cancelButtonText: '取消',
335.   type: 'warning'
336.   }).then(() => {
337.   axios({
338.   method: "post",
339.   url: "http://localhost:8080/brand-case/brand/deleteByIds",
340.   data: this.selectByIds
341.   }).then(resp => {
342.   if (resp.data == "success") {
343.   //录入成功，关闭窗口,并且重新查询数据
344.   this.selectAll();
345.   this.$message({
346.   message: '成功删除数据',
347.   type: 'success'
348.   });
349.   }else{
350.   this.$message({
351.   message: '没有数据可以删除',
352.   type: 'info'
353.   });
354.   }
355.   })
356.   }).catch(() => {
357.   this.$message({
358.   type: 'info',
359.   message: '已取消删除'
360.   });
361.   });
362.    
363.   },
364.   //
365.   // 查询方法
366.   onSubmit() {
367.   //console.log(this.brand);
368.   this.selectAll();
369.   },
370.   //每页显示条数
371.   handleSizeChange(val) {
372.   //console.log(`每页 ${val} 条`);
373.   //重新设置当每页显示的条数
374.   this.pageSize = val;
375.   this.selectAll();
376.   },
377.   //当前页码
378.   handleCurrentChange(val) {
379.   //console.log(`当前页: ${val}`);
380.   //重新去设置当前页码，动态改变
381.   this.currentPage = val;
382.   this.selectAll();
383.   }
384.    
385.   },
386.   data() {
387.   return {
388.   pageSize: 5,
389.   //页码的总记录数
390.   totalCount: 100,
391.   // 当前页码
392.   currentPage: 1,
393.   // 添加数据对话框是否展示的标记
394.   dialogVisible: false,
395.   updateDialogVisible: false,
396.   // 品牌模型数据
397.   brand: {
398.   status: '',
399.   brandName: '',
400.   companyName: '',
401.   id: '',
402.   ordered: "",
403.   description: ""
404.   },
405.   //被选中的id数组
406.   selectByIds: [],
407.   // 复选框选中数据集合
408.   multipleSelection: [],
409.   // 表格数据
410.   tableData: [{
411.   brandName: '华为',
412.   companyName: '华为科技有限公司',
413.   ordered: '100',
414.   status: "1"
415.   }, {
416.   brandName: '华为',
417.   companyName: '华为科技有限公司',
418.   ordered: '100',
419.   status: "1"
420.   }, {
421.   brandName: '华为',
422.   companyName: '华为科技有限公司',
423.   ordered: '100',
424.   status: "1"
425.   }, {
426.   brandName: '华为',
427.   companyName: '华为科技有限公司',
428.   ordered: '100',
429.   status: "1"
430.   }]
431.   }
432.   }
433.   })
434.    
435.   </script>
436.    
437.   </body>
438.   </html>

15.pom.xml Maven配置文件

1.   <?xml version="1.0" encoding="UTF-8"?>
2.   <project xmlns="http://maven.apache.org/POM/4.0.0"
3.   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4.   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
5.   <modelVersion>4.0.0</modelVersion>
6.    
7.   <groupId>org.example</groupId>
8.   <artifactId>brand-case</artifactId>
9.   <version>1.0-SNAPSHOT</version>
10.    
11.   <properties>
12.   <maven.compiler.source>18</maven.compiler.source>
13.   <maven.compiler.target>18</maven.compiler.target>
14.   </properties>
15.   <packaging>war</packaging>
16.    
17.   <build>
18.   <plugins>
19.   <!--tomcat 的插件 （相当于在maven内部放置了个tomcat服务器）-->
20.   <plugin>
21.   <groupId>org.apache.tomcat.maven</groupId>
22.   <artifactId>tomcat7-maven-plugin</artifactId>
23.   <version>2.2</version>
24.   </plugin>
25.   <plugin>
26.   <groupId>org.apache.maven.plugins</groupId>
27.   <artifactId>maven-compiler-plugin</artifactId>
28.   <configuration>
29.   <source>17</source>
30.   <target>17</target>
31.   </configuration>
32.   </plugin>
33.   </plugins>
34.   </build>
35.    
36.   <dependencies>
37.   <dependency>
38.   <groupId>javax.servlet</groupId>
39.   <artifactId>javax.servlet-api</artifactId>
40.   <version>3.1.0</version>
41.   <scope>provided</scope>
42.   </dependency>
43.   <!--apache提供的与io适配的工具类，好用-->
44.   <dependency>
45.   <groupId>commons-io</groupId>
46.   <artifactId>commons-io</artifactId>
47.   <version>2.6</version>
48.   </dependency>
49.   <!--mybatis依赖-->
50.   <dependency>
51.   <groupId>org.mybatis</groupId>
52.   <artifactId>mybatis</artifactId>
53.   <version>3.5.5</version>
54.   </dependency>
55.   <!--mysql依赖-->
56.   <dependency>
57.   <groupId>mysql</groupId>
58.   <artifactId>mysql-connector-java</artifactId>
59.   <version>8.0.29</version>
60.   </dependency>
61.   <!--junit依赖-->
62.   <dependency>
63.   <groupId>junit</groupId>
64.   <artifactId>junit</artifactId>
65.   <version>4.13.2</version>
66.   <scope>Test</scope>
67.   </dependency>
68.   <!--添加slf4j-api日志api-->
69.   <dependency>
70.   <groupId>org.slf4j</groupId>
71.   <artifactId>slf4j-api</artifactId>
72.   <version>1.7.36</version>
73.   </dependency>
74.   <!--添加logback-classic依赖-->
75.   <dependency>
76.   <groupId>ch.qos.logback</groupId>
77.   <artifactId>logback-classic</artifactId>
78.   <version>1.2.3</version>
79.   </dependency>
80.   <!--添加logback-core依赖-->
81.   <dependency>
82.   <groupId>ch.qos.logback</groupId>
83.   <artifactId>logback-core</artifactId>
84.   <version>1.2.3</version>
85.   </dependency>
86.   <dependency>
87.   <groupId>jstl</groupId>
88.   <artifactId>jstl</artifactId>
89.   <version>1.2</version>
90.   </dependency>
91.   <dependency>
92.   <groupId>taglibs</groupId>
93.   <artifactId>standard</artifactId>
94.   <version>1.1.2</version>
95.   </dependency>
96.   <dependency>
97.   <groupId>com.alibaba</groupId>
98.   <artifactId>fastjson</artifactId>
99.   <version>1.2.62</version>
100.   </dependency>
101.   </dependencies>
102.   </project>

 16.mysql数据库文件

1.   -- 删除tb_brand表
2.   drop table if exists tb_brand;
3.   -- 创建tb_brand表
4.   create table tb_brand
5.   (
6.   -- id 主键
7.   id int primary key auto_increment,
8.   -- 品牌名称
9.   brand_name varchar(20),
10.   -- 企业名称
11.   company_name varchar(20),
12.   -- 排序字段
13.   ordered int,
14.   -- 描述信息
15.   description varchar(100),
16.   -- 状态：0：禁用 1：启用
17.   status int
18.   );
19.   -- 添加数据
20.   insert into tb_brand (brand_name, company_name, ordered, description, status)
21.   values
22.   ('华为', '华为技术有限公司', 100, '万物互联', 1),
23.   ('小米', '小米科技有限公司', 50, 'are you ok', 1),
24.   ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
25.   ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
26.   ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
27.   ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
28.   ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
29.   ('小米', '小米科技有限公司', 50, 'are you ok', 1),
30.   ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
31.   ('华为', '华为技术有限公司', 100, '万物互联', 1),
32.   ('小米', '小米科技有限公司', 50, 'are you ok', 1),
33.   ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
34.   ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
35.   ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
36.   ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
37.   ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
38.   ('华为', '华为技术有限公司', 100, '万物互联', 1),
39.   ('小米', '小米科技有限公司', 50, 'are you ok', 1),
40.   ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
41.   ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
42.   ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
43.   ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
44.   ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
45.   ('小米', '小米科技有限公司', 50, 'are you ok', 1),
46.   ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
47.   ('华为', '华为技术有限公司', 100, '万物互联', 1),
48.   ('小米', '小米科技有限公司', 50, 'are you ok', 1),
49.   ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
50.   ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
51.   ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
52.   ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
53.   ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
54.   ('华为', '华为技术有限公司', 100, '万物互联', 1),
55.   ('小米', '小米科技有限公司', 50, 'are you ok', 1),
56.   ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
57.   ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
58.   ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
59.   ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
60.   ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
61.   ('小米', '小米科技有限公司', 50, 'are you ok', 1),
62.   ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
63.   ('华为', '华为技术有限公司', 100, '万物互联', 1),
64.   ('小米', '小米科技有限公司', 50, 'are you ok', 1),
65.   ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
66.   ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
67.   ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
68.   ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
69.   ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1)
70.   ;
71.    
72.    
73.   SELECT * FROM tb_brand;

16.成品效果