学习记录-mybatis+vue+elementUi实现新增数据

和之前的学习一样，框架大体差不多，这里也是分为4步骤

步骤一 ① mapper中写SQL语句

---

这里需要注意粘贴复制的时候，参数记得不要写错了，刚刚就是因为多写了一个逗号，爆红。
代码：

/**
     * 添加数据
     * @param brand
     */
    @Insert("insert into tb_brand values (null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
    void add(Brand brand);

步骤二 service层代码

这里有两小步要走

1. BrandService接口中的代码，这里直接粘贴mapper中的原样语句就可以。

之后就要写相应的继承方法，不然会报错
代码：

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

2. 实现接口，切实实现查询功能

这里直接CTRL+ o就可以直接实现接口。再根据之前的经验写代码就可以

/**
     * 新增一条数据
     * @param brand
     */
    @Override
    public void add(Brand brand) {
        SqlSession sqlSession = sqlSessionFactory.openSession();
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        mapper.add(brand); //这个是没有返回值的
        //更改了数据表 需要提交事务
        sqlSession.commit();

        sqlSession.close();
    }

步骤三 ③写servlet代码

首先确定好思路。这是新增一条数据，就需要接收到从前端收过来的值，因此这里也大致分为两步走，首先是从前端接受好brand对象值，然后再传值调用service层代码。最后给一个响应成功的标志就可以了

核心代码：

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

    private BrandService brandService = new BrandServiceImpl();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        BufferedReader br = request.getReader();
        String params = br.readLine();//这个就是接收到的参数字符串

        //转为brand
        Brand brand = JSON.parseObject(params, Brand.class);

        //调用service进行添加
        brandService.add(brand);

        //响应一个成功信号
        response.getWriter().write("success");

    }

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

步骤四 ④写前端代码

首先当然是发送post请求，如果接收到success的成功操作，那我们再进一步操作优化用户体验，比如关闭表单弹窗，重新跳转查询界面，提示添加成功标志。

// 添加数据
            addBrand(){
                // console.log(this.brand);
                //发送axios请求
                that  = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/AddServlet",
                    data:that.brand
                }).then(function (resp){
                    if( resp.data == "success"){
                        //添加成功

                        //1. 关闭窗口
                        that.dialogVisible = false;

                        //2. 重新查询数据
                        that.selectAll();

                        //3. 成功提示
                        that.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                    }
                })
            },

这里的代码都还是比较好上手的！