JavaWeb（13.Vue&Element（下））

13-Vue&Element

今日目标：

• 能够使用VUE中常用指令和插值表达式
• 能够使用VUE生命周期函数 mounted
• 能够进行简单的 Element 页面修改
• 能够完成查询所有功能
• 能够完成添加功能

四、性能优化

1、Servlet代码优化

创建BaseServlet，作用为替换HttpServlet

package com.itheima.web.servlet;
/*
替换HttpServlet，根据请求的最后一段路径来进行方法分发；
 */
public class BaseServlet extends HttpServlet {

    //根据请求的最后一段路径来进行方法分发
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取请求路径
        String uri = request.getRequestURI();  //   /brand-case/brand/selectAll
      
        //2.获取最后一段路径，方法名
        int index = uri.lastIndexOf('/');
        String methodName = uri.substring(index + 1);  // selectAll
      
        //2.执行方法
        //2.1 获取BrandServlet或者UserServlet 字节码对象 Class
          //谁调用我（this 所在的方法），我（this）代表谁
          //System.out.println(this); // BaseServlet的子类BrandServlet或者UserServlet;
        Class<? extends BaseServlet> cls = this.getClass();

        //2.2 获取方法 Method对象
        try {
            Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            //2.3 执行方法
            method.invoke(this,request,response);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }
}

创建BrandServlet，里面以后可以编写各个公司的增删改查

package com.itheima.web.servlet;

@WebServlet("/brand/*")
public class BrandServlet extends BaseServlet{
    public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("brand selectAll...");
    }

    public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        System.out.println("brand add...");
    }
}

创建UserServlet，里面以后可以编写各个员工的增删改查

package com.itheima.web.servlet;

@WebServlet("/user/*")
public class UserServlet extends BaseServlet{
    public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("user selectAll...");
    }

    public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        System.out.println("user add...");
    }
}

2、Servlet代码优化——使用

使用以上的方法，我们改进一下查看所有，添加数据的功能;（在BrandServlet中修改）
因为之前我们实现过，所以这里要做的就是粘贴复制了
首先将BrandService提到成员变量的位置，

private BrandService brandService = new BrandServiceImpl();

然后将查看所有和添加数据的代码复制到selectAll与add方法中

        //1. 调用service查询
        List<Brand> brands = brandService.selectAll();
        //2. 转为JSON
        String jsonString = JSON.toJSONString(brands);
        //3. 写数据
        response.setContentType("text/json;charset=utf-8"); //告知浏览器响应的数据是什么， 告知浏览器使用什么字符集进行解码
        response.getWriter().write(jsonString);

        //1. 接收品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串
        //转为Brand对象
        Brand brand = JSON.parseObject(params, Brand.class);
        //2. 调用service添加
        brandService.add(brand);
        //3. 响应成功的标识
        response.getWriter().write("success");

再将前端的代码的路径改一下：
将
"http://localhost:8080/brand-case/selectAllServlet"
"http://localhost:8080/brand-case/addServlet"
改为：
"http://localhost:8080/brand-case/brand/selectAll"
"http://localhost:8080/brand-case/brand/add"

运行程序，浏览器搜索：http://localhost:8080/brand-case/brand.html，可以查看全部和添加数据啦！

3.批量删除

3.1、后台

1、先写Dao层
BrandMapper.java中添加：

  /**
     * 添加数据
     * @param ids
     */
    void deleteByIds(@Param("ids") int[] ids);

在BrandMapper.xml中添加

   <delete id="deleteByIds">
        delete from tb_brand where id in
        <foreach collection="ids" item="id" separator="," open="(" close=")">
            #{id}
        </foreach>
    </delete>

2、再写service层
在BrandService接口中定义

 /**
     * 批量删除数据
     *
     * @param ids
     */
    void deleteByIds(int[] ids);

在BrandServiceImpl.java中定义：

  @Override
    public void deleteByIds(int[] ids) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        mapper.deleteByIds(ids);
        sqlSession.commit();//提交事务

        //5. 释放资源
        sqlSession.close();
    }

3、再写Web层的Servlet
在BrandServlet.java中定义

   public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        //1. 接收数据 [1,2,3]
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串
        //转为 int[]
        int[] ids = JSON.parseObject(params, int[].class);
        //2. 调用service删除
        brandService.deleteByIds(ids);
        //3. 响应成功的标识
        response.getWriter().write("success");
    }

3.2、前端

1、给批量删除按钮添加单击事件

2、在methods: { }中定义deleteByIds()的方法：

            //批量删除
            deleteByIds() {
                //1、创建id数组 [1,2,3]，从this.multipleSelection 获取即可
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    let selectionElement = this.multipleSelection[i];
                    this.selectedIds = selectionElement.id;
                }
                // 2、发送ajax请求，批量删除
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case/brand/deleteByIds",
                    data: _this.selectedIds
                }).then(function (resp) {
                    if (resp.data == "success") {
                        //删除成功

                        // 重新查询数据
                        _this.selectAll();
                        // 弹出消息提示
                        _this.$message({
                            message: '恭喜你，删除成功',
                            type: 'success'
                        });
                    }
                })
            }

3、在Data中添加一个模型，代表被选中的数组

 //被选中的批量删除的id数组
   selectedIds:[],