1. 环境搭建

1.1 创建maven项目

补充相应的文件目录

1.2 修改pom文件及创建相应的基本框架

1.3 创建接口，实体类，映射到xml文件等等

创建xml映射文件
创建接口文件
创建实体类
导入对应的sqlsession工具类
导入对应的brand.html页面

2. 查询所有

2.1 编写接口

注意数据库的列名和实体类的属性名有些不一样，要做处理
resultMap来完成不同名的字段映射

<resultMap id="brandResultMap" type="brand">
	<result property="brandName" column="brand_name"/>
	<result property="companyName" column="company_name"/>
</resultMap>

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

2.2 编写service层及SelectAllServlet

解决耦合，在service层创建BrandService接口，在service目录下创建impl，将实现类放入该目录下

SelectAllServlet中创建BrandService对象时则是写

 private BrandService brandService = new BrandServiceImpl();

而不是写成之前的

BrandService brandService = new BrandService();

这样的目的是，当BrandService的实现发生变化时，只需在SelectAllServlet中更改实现类即可，解决了耦合性

BrandServiceImpl代码

public class BrandServiceImpl implements BrandService {
    //1. 创建SqlSessionFactory 工厂对象
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();
    public List<Brand> selectAll() {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();

        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        List<Brand> brands = mapper.selectAll();

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

SelectAllServlet代码

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

2.3 前端页面

Ajax发生异步请求，获取到列表数据
将数据设置到模型上

mounted(){
	//当页面加载完成后，发送异步请求，获取数据

	this.selectAll();

	var _this = this;

	axios({
		method:"get",
		url:"http://localhost:8080/brand-project/selectAllServlet"
	}).then(function (resp) {
	_this.tableData = resp.data;
	})
},

3. 新增品牌

3.1 接口代码及映射文件

	/**
     * 插入品牌
     * @param brand
     */
    void add(Brand brand);

因为id值是自增，传入null

    <insert id="add">
        insert into tb_brand values (null, #{brandName}, #{companyName}, #{ordered}, #{description}, #{status})
    </insert>

3.2 service层及AddServlet

service接口层

    /**
     * 添加数据
     * @param brand
     */
    void add(Brand brand);

实现类，记得提交事务

    public void add(Brand brand) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();

        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        
        //4. 调用方法
        mapper.add(brand);
        // 提交事务
        sqlSession.commit();
        
        //5. 释放资源
        sqlSession.close();
    }

创建AddServlet

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {

    private BrandService brandService = new BrandServiceImpl();

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

    }

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

3.3 前端代码

点击提交之后，设置页面关闭
并且要重新selectAll（），查询数据实现刷新

			// 添加数据
            addBrand() {
                var _this = this;

                // 发送ajax请求，添加数据
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-project/addServlet",
                    data:_this.brand
                }).then(function (resp) {
                    if(resp.data == "success"){
                        //添加成功

                        //关闭窗口
                        _this.dialogVisible = false;

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

                    }
                })
            },

selectAll代码

// 查询分页数据
selectAll(){
	var _this = this;

	axios({
		method:"get",
		url:"http://localhost:8080/brand-project/selectAllServlet"
		}).then(function (resp) {
			_this.tableData = resp.data;
        })
},