day14-MVC控制优化项目

MVC优化

1.优化servlet

Web 层的 Servlet 个数太多了，不利于管理和编写

优化思路：

1.增删改查的类太多 做提取

优化思想：

1.每次请求都请求不同的servlet类 我们能不能将请求提取 放到同一个类中@WebServlet(“emp/*”)

2.我们借助Servlet类和父类的关系 可以发现 子类继承HttpServlet会在底层中调用父类的service方法

我们在 HttpServlet和实体类servlet中间加入一个BaseServlet 通过这个类对所用请求做处理。

3.当EmpServlet(extends BaseServlet )发送请求的时候 来到父类的service方法中 此时我们对不同请求进行识别。那请求是前端发送的，例如：发送emp/findAll请求 我们设置的请求接收模式为 emp/*，那是不是只需要识别 星号的内容 就可以根据不同的请求执行不同的方法呢？这就是我们的简化思想，我们通过方法获取到请求的参数 切割获取星号部分的内容，只需要将方法名和请求名保持一致，我们就可以通过反射来触发执行该方法。

此时 我们编写BaseServlet

步骤为：

1.创建类BaseServlet 继承HttpServlet

2.获取请求路径 并切割获取第二个/后的内容

3.利用反射获取类

4.传递方法名和参数 触发执行对应请求名称的方法

BaseServlet

package com.itgaohe.web;

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.Method;
/*
 * init用于servlet初始化时调用，只调用一次，后续再次请求将不会再次调用init
 * service：每次请求servlet时都会调用service
 * service方法会调用doGet、doPost方法（HTTPServlet重写了service方法调用了doGet、doPost）
 * 重写了Service就可以不重写doGet、doPost，直接在service中进行了处理
 *
 * 继承BaseServlet的子类servlet会自动调用service方法
 * */
public class BaseServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        //1. 获取请求路径：例如：/brand-case/brand/selectAll
        String uri = req.getRequestURI();
        //2. 获取最后一段路径/方法名,例如：//  获取到资源的二级路径  selectAll
        int index = uri.lastIndexOf('/');
        String methodName = uri.substring(index + 1);

        //2. 执行方法
        //2.1 获取BrandServlet /UserServlet 字节码对象 Class
        Class<? extends BaseServlet> cls = this.getClass();
        //2.2 获取方法 Method对象
        try {
            /*
             * Class<? extends BaseServlet> aClass = this.getClass();
             * this.getClass()获取当前servlet类的class类对象，
             * 进行了泛型约束Class<? extends BaseServlet>， 获取的是BaseServlet或者其子类的类对象
             */
            /* getMethod(methodName,HttpServletRequest.class, HttpServletResponse.class);
             * 获取方法对象（method类对象），需要的参数：需要获取的方法的方法名、HttpServletRequest.class, HttpServletResponse.class
             */
            Method method = cls.getMethod(methodName
                    ,HttpServletRequest.class
                    ,HttpServletResponse.class);
            //4,调用该方法
            /*
             * this：当前类，使用service方法的类，这里是继承BaseServlet的类
             * method.invoke在this这个类中调用method方法
             */
            method.invoke(this,req,resp);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
}

此时简化

EmpServlet

@WebServlet("/emp/*")
public class EmpServlet extends BaseServlet {
    public void findAll(HttpServletRequest request, HttpServletResponse response) throws IOException {
        request.setCharacterEncoding("utf-8");
        EmpService empService = new EmpServiceImpl();
        List<Emp> emp = empService.findEmp();
        String s = JSON.toJSONString(emp);
        /*中文问题*/
        response.setContentType("text/json;charset=utf-8");//text/json
        response.getWriter().write(s);
    }
    public void add(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //接收前端发送的表单数据 json格式
        BufferedReader br = request.getReader();
        String data = br.readLine();
        System.out.println(data);
        //解析参数
        Emp emp = JSON.parseObject(data, Emp.class);
        EmpService es = new EmpServiceImpl();
        int i = es.addEmp(emp);
        //返回响应
        if (i>0){
            response.getWriter().write("success");
        }else {
            response.getWriter().write("failed");
        }
    }
    public void delete(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //接收数据
        String id = request.getParameter("id");
        EmpService es = new EmpServiceImpl();
        int i = es.removeById(Integer.parseInt(id));
        if (i>0){
            response.getWriter().write("success");
        }else {
            response.getWriter().write("error");
        }
    }
    public void update(HttpServletRequest request, HttpServletResponse response) throws IOException {
        BufferedReader br = request.getReader();
        String s = br.readLine();
        Emp emp = JSON.parseObject(s, Emp.class);
        EmpService es = new EmpServiceImpl();
        int i = es.modifyById(emp);
        if (i > 0) {
            response.getWriter().write("success");
        }else {
            response.getWriter().write("error");
        }
    }

}

将对应emp.html页面中的请求设为：

"emp/findAll"
"emp/add"
"emp/update"
"emp/delete"

自行将登录注册简化

建议：将登录注册功能和增删改查功能分开。将登录注册放到LoginServlet中

2.分页查询

2.1 分析前端页面

<div class="block">
      <!--@size-change 当数量改变的时候 触发-->
            <!--@current-change 当页码改变的时候 触发-->
            <!--:current-page 当前页码-->
            <!--:page-sizes 总页码数的分布-->
            <!--:page-size 当前展示的条数-->
            <!--layout 布局的组件-->
            <!--:total 总条数-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="page.pageSizes"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
    </el-pagination>
</div>

元素绑定到

data: {
    personCount:0,
    page: {
        pageSizes: [10, 20, 30, 40],
        pageSize: 10,
        currentPage: 1,
        total: 400
    },
    }

2.2 配置安装

分页插件依赖

 <!--分页插件-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.2.0</version>
    </dependency>

分页插件配置

<!--导入分页助手插件配置-->
<plugins>
    <plugin interceptor="com.github.pagehelper.PageHelper">
        <!--对于数据库内容的识别dialect方言 mysql-->
        <property name="dialect" value="mysql"/>
    </plugin>
</plugins>

2.3 测试分页

EmpServiceImpl

public class EmpServiceImpl implements EmpService {
/*查询所有*/
@Override
public List<Emp> findEmp() {
    SqlSession sqlSession = MybatisUtils.getSqlSession();
    EmpMapper mapper = sqlSession.getMapper(EmpMapper.class);
    PageHelper.startPage(1,3);
    List<Emp> emps = mapper.selectEmp();
    PageInfo<Emp> pageInfo = new PageInfo<>(emps);
    System.out.println(pageInfo);
    return emps;
}
    public static void main(String[] args) {
        EmpServiceImpl es = new EmpServiceImpl();
        List<Emp> emp = es.findEmp();
        System.out.println(emp);
    }

2.4 分页查询功能实现

EmpService

public PageInfo page(Integer pageNow, Integer pageSize);

EmpServiceImpl

//分页查询
public PageInfo page(Integer pageNow,Integer pageSize){
    SqlSession sqlSession = MybatisUtils.getSqlSession();
    EmpMapper mapper = sqlSession.getMapper(EmpMapper.class);
    PageHelper.startPage(pageNow,pageSize);
    List<Emp> emps = mapper.selectEmp();
    PageInfo<Emp> pageInfo = new PageInfo<>(emps);
    return pageInfo;
}

EmpServlet

//分页
public void page(HttpServletRequest request,HttpServletResponse response) throws IOException {
    //1.获取分页参数
    String _pageNow = request.getParameter("pageNow");
    String _pageSize = request.getParameter("pageSize");
    Integer pageNow = 1;
    Integer pageSize = 5;
    //非空判断
    if(_pageNow != null&&!"".equals(_pageNow)){
        pageNow =Integer.parseInt(_pageNow);
    }
    if(_pageSize!=null&&!"".equals(_pageSize)){
        pageSize = Integer.parseInt(_pageSize);
    }
    /*2.调用业务层 完成查询*/
    EmpService es = new EmpServiceImpl();
    PageInfo page = es.page(pageNow, pageSize);
    String jsonString = JSON.toJSONString(page);
    /*中文问题*/
    response.setContentType("text/json;charset=utf8");
    response.getWriter().write(jsonString);
}

前端页面emp.html

将 查询所有的初始化查询修改为分页查询

//分页
axios.get("emp/page?pageNow="+this.page.currentPage+"&pageSize="+this.page.pageSize).then((res)=>{
    // axios.get("EmpServlet").then((res)=>{
    // console.log(res.data)
    //数据封装
    _this.tableData = res.data.list;
    //总条数封装
    _this.page.total = res.data.total;
})

还要考虑当条数和页面数改变的时候发送的请求时不一样的。

此时

// 条目数发生改变
handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
    this.page.pageSize = val;
    this.init();
},
// 页码发生改变
handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
    this.page.currentPage = val
    this.init()
},

适当调整分页数据

data: {
    personCount:0,
    page: {
        pageSizes: [3, 6, 9, 12],
        pageSize: 3,
        currentPage : 1,
        total: 400
    },

最终完成分页功能

3.条件查询

EmpService

List<Emp> findByEmp(Emp emp);

EmpServiceImpl

@Override
public List<Emp> findByEmp(Emp emp) {
    SqlSession sqlSession = MybatisUtils.getSqlSession();
    EmpMapper mapper = sqlSession.getMapper(EmpMapper.class);
    List<Emp> emps = mapper.selectByEmp(emp);
    return emps;
}

EmpMapper

List<Emp> selectByEmp(Emp emp);

EmpMapper.xml

<select id="selectByEmp" resultType="emp">
    select * from emp
    <where>
        <if test="username !=null and username != ''">
              username like concat('%',#{username},'%')
        </if>
        <if test="phone !=null and phone != ''">
            and  phone like concat('%',#{phone},'%')
        </if>
        <if test="address !=null and address != ''">
            and  address like concat('%',#{address},'%')
        </if>
    </where>
</select>

EmpServlet

//条件查询
public void select(HttpServletRequest request,HttpServletResponse response) throws IOException {
    BufferedReader br = request.getReader();
    String line = br.readLine();
    System.out.println("line = " + line);
    Emp emp = JSON.parseObject(line, Emp.class);
    EmpService es = new EmpServiceImpl();
    List<Emp> emps = es.findByEmp(emp);
    System.out.println(emps);
    String jsonString = JSON.toJSONString(emps);
    response.setContentType("text/html;charset=utf-8");
    response.getWriter().write(jsonString);
}

emp.html

// 查询submit
onSelect() {
    console.log('submit!');
    axios.post("emp/select",this.formInline).then((res)=>{
        console.log(res.data.username)
        var _this = this;
        _this.tableData = res.data;
    })
}