持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

综合案例

1.查询所有

后端代码：

1.在BrandMapper接口中定义方法

@Select表示sql查询语句

@ResultMap是对结果的映射集，即将实体类中的属性与数据库中的列名对应上

//查询所有
@Select("select*from tb_brand")
@ResultMap("brandResultMap")
List<Brand> selectAll();

2.在BrandService接口中定义方法

public interface BrandService {
    //查询所有
    List<Brand> selectAll();
}

3.在BrandServiceImpl中

//1.创建SqlSessionFactory工厂对象
SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();
@Override
public List<Brand> selectAll() {
    //2.获取SqlSessionFactory工厂对象
    SqlSession sqlSession = factory.openSession();
    //3.获取BrandMapper
    BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    //4.调用方法
    List<Brand> brands = mapper.selectAll();
    //5.释放资源
    sqlSession.close();

    return brands;
}

4.在selectAllServlet中重写get，post方法

@WebServlet("/selectAllServlet")
public class selectAllServlet extends HttpServlet {
    private BrandService brandService = new BrandServiceImpl();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //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);
    }

前端代码：

PS：记得要先找对应方法的按钮并加上绑定@click=“方法名”

var _this = this

t：上述代码在前端页面中基本都需要使用，原因是this无法在里面使用(不懂)

<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: "#app",
        mounted(){
            //当页面加载完成后，发送异步请求，获取数据
            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/brand-case/selectAllServlet"
            }).then(function (resp) {
                _this.tableData = resp.data;
                
            })
        },

完成上述代码后即可在页面中显示后端数据

t:html的设置只是一种形式，尽量去记住就行了。

添加品牌

后端代码：

1.BrandMapper接口中定义添加方法

@Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
void add(Brand brand);

2.BrandService接口中定义方法

//添加
void add(Brand brand);

3.BrandServiceImpl中实现方法，记得要提交(commit)事务

@Override
public void add(Brand brand) {
    //2.获取SqlSessionFactory工厂对象
    SqlSession sqlSession = factory.openSession();
    //3.获取BrandMapper
    BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    //4.调用方法
    mapper.add(brand);
    sqlSession.commit();//提交事务
    //5.释放资源
    sqlSession.close();
}

4.AddServlet中

注：此时getParams无法转化为json格式，因此采用下面这种方式

private BrandService brandService = new BrandServiceImpl();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //1.接收品牌数据
    BufferedReader br = request.getReader();
    String params = br.readLine();//json字符串
    //2.转为Brand对象
    Brand brand = JSON.parseObject(params, Brand.class);
    //3.调用service添加
    brandService.add(brand);
    //4.响应成功的标识
    response.getWriter().write("success");
}

前端代码：

PS：记得要先找对应方法的按钮并加上绑定@click=“方法名”

this.dialogVisible=false;

t:1.表示将窗口隐藏,一般出现在if语句中，即表示当确定为某条件时，将窗口关闭

2.需要解决新增后不用刷新就能看到新增后的内容。

：直接使用上面的selectAll方法，由于该方法使用次数多，因此直接封装成一个方法

methods: {
    //查询所有数据的方法
    selectAll() {
        //当页面加载完成后，发送异步请求，获取数据
        var _this = this;
        axios({
            method: "get",
            url: "http://localhost:8080/brand-case/selectAllServlet"
        }).then(function (resp) {
            _this.tableData = resp.data;

        })

3.添加成功后，提示添加成功的信息框

//3.定义添加成功的提示
_this.$message({
    message: '恭喜你，添加成功',
    type: 'success'
});

PS：_this真的十分重要，出错了第一时间看看是不是没有使用

完整代码如下

// 添加数据
addBrand(){
    var _this = this;
    //发送ajax请求，添加数据
    axios({
        method:"post",
        url:"http://localhost:8080/brand-case/addServlet",
        data:_this.brand
    }).then(function (resp){
        if(resp.data == "success"){
            //添加成功
            //1.关闭窗口
            _this.dialogVisible=false;
            //2.重新查询数据
            _this.selectAll();
            //3.定义添加成功的提示
            _this.$message({
                message: '恭喜你，添加成功',
                type: 'success'
            });
        }

Servlet代码优化

问题阐述：Web层的Servlet个数太多了，不利于管理和编写

解决方案：将Servlet进行归类，对于同一个实体的操作方法，写到一个Servlet中。比如: BrandServlet、UserServlet，如下图所示

1.先定义一个BaseServlet代替HttpServlet，根据请求的最后一段路径进行方法分发

t:

1.获取请求路径需要用到getRequestURI方法

2.获取最后一段路径，方法名用到2个方法

3.此时在BaseServlet中的this表示”谁调用我，我代表谁“

4.在获取方法Method对象时，由于需要传入参数，因此需要将定义过的方法都统一成传入req，resp，而这两个参数在BaseServlet中的service中的方法都有提供

5.利用反射获得到对应调用方法的Class，Class.getMethod(方法名字,HttpServletRequest.class, HttpServletResponse.class)即可获得到Method对象method

6.最后通过method.invoke(this,req,resp);执行方法

代码实现如下：

public class BaseServlet extends HttpServlet {
    //根据请求的最后一段路径进行方法分发
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.获取请求路径
        String uri = req.getRequestURI();//此时获取到的是/brand-case/brand/selectAll
        //2.获取最后一段路径，方法名
        int index = uri.lastIndexOf("/");
        String methodName = uri.substring(index+1);//  index:/selectAll index+1:selectAll
        //3.执行方法
        //3.1获取BrandServlet字节码对象Class，利用反射
        Class<? extends BaseServlet> cls = this.getClass();

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

    }

还要定义一个BrandServlet继承于BaseServlet

将先前在各方法Servlet中的doGet方法体粘贴至对应方法即可

@WebServlet("/brand/*")
public class BrandServlet extends BaseServlet{
    private BrandService brandService = new BrandServiceImpl();
    public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        //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);
    }
    public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        //1.接收品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串
        //2.转为Brand对象
        Brand brand = JSON.parseObject(params, Brand.class);
        //3.调用service添加
        brandService.add(brand);
        //4.响应成功的标识
        response.getWriter().write("success");
    }

前端代码中的路径也记得一定要修改