学习记录-mybatis+vue+elementUi实现品牌查询

news2024/11/18 21:25:24

和以往不同的是，这一次使用了vue和axios来接收后端传过来的参数，并且新建了impl文件来继承service层的接口。该过程实现一共分为4步骤

步骤一 ①mapper mapper 写mapper接口

其实就是写SQL语句了，第一步就是写SQL。这里使用的是注解开发，没有在配置文件中写语句。
查询的SQL语句：

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

步骤二 ②写service层代码

1. 新建BrandService接口。

以后就是按表来操作，这是brand表，就用这个名字，如果是user表就用UserService这个名字
下面是接口的代码，其实就是一个方法，和mapper中的方法名是一样的。
代码：

public interface BrandMapper {
    /**
     * 查询所有
     * @return
     */
    @Select("select * from tb_brand")
    @ResultMap("brandResultMap")
    List<Brand>  selectAll();
}

2. 写一个Java文件`实现刚写的接口。`

这里才是真正的实现service功能的作用，之前的接口文件可以认作一个管理的东西。以后所有的实现代码都一个一个罗列在现在这个文件里面，成为一个一个的方法。统一多了
代码：

public class BrandServiceImpl implements BrandService {
    SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();

    @Override
    public List<Brand> selectAll() {
        SqlSession sqlSession = sqlSessionFactory.openSession();
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        List<Brand> brands = mapper.selectAll();
        sqlSession.close();
        return brands;
    }
}

在这里插入图片描述

步骤三③写servlet的代码

目前这里跟之前学习的差不多。不做过多说明。只是有一点，在继承service方法的时候，用的是： private BrandService brandService = new BrandServiceImpl();。

核心代码：

@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);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

步骤四 ④通过aixos接收数据

前端的内容已经布置好了，只需接收数据即可。
接收的核心代码：

mounted(){
            var that  = this;
            axios({
                method:"get",
                url:"http://localhost:8080/SelectAllServlet"
            }).then(function (resp){
                that.tableData =  resp.data;
            })
        },