暑期微基础学java的3天。

最新推荐文章于 2024-10-01 18:51:18 发布

四季豆学java

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量72

点赞数 2

文章标签： java python 开发语言

本文链接：https://blog.csdn.net/wst321456/article/details/131554223

版权

基于day1框架以及day2的数据规范，连接前端来实现前后端互通。

在添加前端后，要进行静态资源放行，在Config文件夹中创建SpringMvcSupport.java类，使得能够放行静态数据（在类名上要添加Configuration让spring能够扫描到）。

@Configuration
public class SpringMvcSupport extends WebMvcConfigurationSupport {


    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/pages/**").addResourceLocations("/pages/");
        registry.addResourceHandler("/css/**").addResourceLocations("/css/");
        registry.addResourceHandler("/js/**").addResourceLocations("/js/");
        registry.addResourceHandler("/plugins/**").addResourceLocations("/plugins/");
    }
}

写完后要在SpringMvcConfig.java类中扫描到该文件，则要在表头的扫描里面加上Config层，使得Spring能够扫描到。

@ComponentScan({"com.wst.controller","com.wst.config"})

使得能够在网页上显示数据库里图书的内容，则要在前端网页上添加Contrller层的方法，并且显示里面的数据，展示在前端网页上（使用ajax请求来实现网页的异步刷新，（这边注意如果有项目名要在Controller方法前加上项目名地址，不然后以绝对地址访问，使得404找不到网页）并且将查询到的data数据传给前端的dataList数据里显示在页面上）：

methods: {
                //列表
                getAll() {
                    //发送ajax请求
                    axios.get("/Springmvc/books").then((res)=>{
                        this.dataList = res.data.data;
                    })

                },

添加功能：

在网页上点击新建按钮能够弹出新建的页面，在新建页面里面添加数据点击确定能够将数据显示到网页上。

1.点击新建能够跳出新建页面（将显示属性调整为true）：

  //弹出添加窗口
                handleCreate() {
                    this.dialogFormVisible = true;
                },

2.在新建页面里面点击确定按钮，执行handleAdd方法，使用ajax的post提交方法，调用Controller层的books并且携带from表单的数据传给后端（在添加成功数据后，要将显示的新建页给隐藏，就dialogFromVisible的属性改为false,并且再次调用上述的getAll方法实现异步刷新表单数据，让刚刚添加的数据显示到页面上）。

 handleAdd () {
                    axios.post("/Springmvc/books",this.formData).then((res)=>{
                        //如果操作成功 关闭弹窗并且显示添加的数据
                        this.dialogFormVisible = false;
                        this.getAll();
                    });
                },

思考，基于day1框架搭建，在save update 等方法中只是单单的返回了true不存在成功和失败，这使得在Controller层只能接收到成功的数据，不能进行成功失败的判断，这时候我们就要重新修改之前的代码，使得能够存在成功失败两个状态。

首先我们要在dao层修改里面的方法，使得传出来的数据改成int类型（修改数据影响的行数），再在Service层调用dao层方法的时候判断影响行数是否大于0，如果大于0则为true反之则为false。这样就能让Controller层能够有两个状态来进行传递，也能让前端得到数据的传递是否成功从而显示对应的成功失败操作来反馈给用户。

Dao层修改：

public interface BookDao {
//    @Insert("insert into tbl_book values (null,#{type},#{name},#{description})")
    @Insert("insert into tbl_book(type,name,description) values (#{type},#{name},#{description})")
    public int save(Book book);
    @Update("update tbl_book set type=#{type},name=#{name},description=#{description} where id=#{id}")
    public int update(Book book);
    @Delete(("delete from tbl_book where id = #{id}"))
    public int delete(Integer id);
    @Select("select * from tbl_book where id = #{id}")
    public Book getById(Integer id);
    @Select("select * from tbl_book ")
    public List<Book> getAll();
}

Service层修改：

@Service
public class BookServiceImpl implements BookService {

    @Autowired
    private BookDao bookDao; //使用接口需要先注入

    @Override
    public boolean save(Book book) {
        return bookDao.save(book) > 0;
    }

    @Override
    public boolean update(Book book) {
        return bookDao.update(book) > 0;
    }

    @Override
    public boolean delete(Integer id) {
        return bookDao.delete(id) > 0;
    }

    @Override
    public Book getById(Integer id) {
        if (id == -1) {
            throw new BusinessException(Code.BUSINESS_ERR, "输入的数据有误，请重新输入正确的数据");
        }

        //将可能出现的异常进行打包，转换成自定义异常
        try {
            int i = 1 / 0;
        } catch (Exception e) {
            throw new SystemException(Code.SYSTEM_ERR, "服务器访问超时，请重试1！", e);
        }

        Book book = bookDao.getById(id);
        return book;
    }

    @Override
    public List<Book> getAll() {
        List<Book> list = bookDao.getAll();
        return list;
    }
}

修改完，Controller层就能储存成功失败的状态，在前端也能获取到该数据（在前端判断是否成功，成功关闭新建页面，并且显示添加成功，失败则弹出添加失败，如果是其他错误则在数据中显示msg里面的内容弹出）。

handleAdd () {
                    axios.post("/Springmvc/books",this.formData).then((res)=>{
                        //如果操作成功 关闭弹窗并且显示添加的数据

                        if (res.data.code ==20011){
                            this.dialogFormVisible = false;
                            this.$message.success("添加成功");

                        }else if (res.data.code == 20010){
                            this.dialogFormVisible = false;
                            this.$message.error("添加失败")
                        }else {
                            this.$message.error(res.data.msg);

                        }
                    }).finally(()=>{
                        this.getAll();
                    });
                },

出现在添加成功的时候再次添加发现新建页依然有之前的数据，思考如何去掉页面中历史数据，新添加restFrom方法，在调用弹出窗口的方法时候执行这个方法，使得每次点击新建，里面数据都是为空。

 //弹出添加窗口
                handleCreate() {
                    this.dialogFormVisible = true;
                    this.resetForm();
                },

                //重置表单
                resetForm() {
                    this.formData = {};
                },

编辑功能（每一行的数据对应一个编辑和一个删除）：

在前端实现点击编辑按钮弹出编辑框并且在row里面将数据调用并且回显到页面上：

handleUpdate(row) {
                    // console.log(row);
                    //查询数据，根据id查询
                    axios.get("/Springmvc/books/"+row.id).then((res)=>{
                        if (res.data.code ==20041){
                            //展示弹层，加载数据
                            this.formData = res.data.data;
                            this.dialogFormVisible4Edit = true;

                        }else {
                            this.$message.error(res.data.msg);
                        }

                    })


                },

在编辑弹出页点击确认则会将修改的值保存到数据库并且显示在页面上，编辑页面消失：

 handleEdit() {
                    axios.put("/Springmvc/books",this.formData).then((res)=>{
                        //如果操作成功 关闭弹窗并且显示添加的数据
                        if (res.data.code ==20031){
                            this.dialogFormVisible4Edit = false;
                            this.$message.success("编辑成功");

                        }else if (res.data.code == 20030){
                            this.dialogFormVisible4Edit = false;
                            this.$message.error("编辑失败")
                        }else {
                            this.$message.error(res.data.msg);

                        }
                    }).finally(()=>{
                        this.getAll();
                    });
                },

删除功能（删除功能应该增加一个询问提示框，来提示用户是否确定删除）：

在前端页面的handleDelete方法中先添加一个询问框询问是否确认删除，如果确认则进行下一步删除功能，否则返回页面：

 handleDelete(row) {
                    //1.弹出提示框
                    this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
                        type: 'info'
                    }).then(()=>{
                        //2.做删除业务
                        axios.delete("/Springmvc/books/"+row.id).then((res)=>{
                            if (res.data.code ==20021){
                                this.$message.success("删除成功");
                            }else {
                                this.$message.error("删除失败");
                            }
                        }).finally(()=>{
                            this.getAll();
                        });
                    }).catch(()=>{
                        //3.取消删除
                        this.$message.info("取消删除操作");
                    })


                }