1.添加web界面

在resources包下的static包中导入需要用的包，编写html。

 1.1测试一下

 页面控制台中成功获取数据

 1.2页面显示:查询全部信息

1.3添加功能实现

 新建按钮的点击事件为   @click="handleCreate()"

点击新建后弹出添加页面，该页面的确定提交按钮点击事件为  @click="handleAdd()"

数据模型名字为formData

对应的一些代码

//钩子函数，VUE对象初始化完成后自动执行
        created() {
            //调用查询全部数据的操作
            this.getAll();
        },

        methods: {
            //列表
            getAll() {
                //测试
                // console.log("run...")
                //发送异步请求get请求发送到/books里面，然后then会返回的数据进行编程
                axios.get("/books").then((res)=>{
                   //调试
                   //  console.log(res.data);
                   this.dataList = res.data.data;

                });

            },

            //弹出添加窗口
            handleCreate() {

                //让添加窗口显示出来
                this.dialogFormVisible = true;
                //在显示窗口之前，先清空一下表单
                this.resetForm();
            },

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

            //添加
            handleAdd () {
                //弹出的新增窗口中的提交按钮
                //新增对应后端我们写的post请求
                // 发请求的时候要把表单数据提交过去:表单名称：formData
                axios.post("/books",this.formData).then((res)=>{
                    //p判断操作是否成功
                    if(res.data.flag){
                        //关闭弹窗
                        this.dialogFormVisible = false;
                        //给用户新建成功的信息
                        this.$message.success("添加成功");
                    }else {
                        this.$message.error("添加失败");
                    }
                    // //刷新数据
                    // this.getAll();
                }).finally(()=>{
                    //不管是否成功都需要刷新一下数据
                    this.getAll();
                });

            },

            //取消
            cancel(){
                //关闭新建的弹窗
                this.dialogFormVisible=false;
                //给用户提示信息success是绿色小弹窗提示，error是红色小弹窗提示，info是灰色小弹窗显示
                this.$message.info("当前操作取消")
            },

 1.4删除功能实现

删除按钮的点击事件：@click="handleDelete(scope.row)"

 // 删除
            handleDelete(row) {
                //通过控制台查看row数据是什么东西
                // console.log(row);


                //2.带有删除提醒的代码
                this.$confirm("此操作永久删除当前信息，是否继续？","提示",{type: "info"}).then(()=>{
                   //测试
                    // console.log("success");

                    axios.delete("/books/"+row.id).then((res)=>{

                        if(res.data.flag){
                            //给用户删除成功的信息
                            this.$message.success("删除成功");
                        }else {
                            this.$message.error("删除失败");
                        }

                    }).finally(()=>{

                        this.getAll();

                    });

                }).catch(()=>{
                    //测试
                    // console.log("fail");

                    this.$message.info("取消删除操作");

                });


            },

 1.5修改功能

修改按钮的点击事件 @click="handleUpdate(scope.row)"

编辑窗口为dialogFormVisible4Edit

数据模型是formData

要在cancel里面也加上 this.dialogFormVisible4Edit = false;才能实现点击取消，关闭弹窗

//弹出编辑窗口
            handleUpdate(row) {

                axios.get("/books/"+row.id).then((res)=>{

                    //判断数据是否存在
                    if(res.data.flag && res.data.data != null){
                        this.dialogFormVisible4Edit = true;
                        this.formData = res.data.data;
                    }else {
                        this.$message.error("数据同步失败，自动刷新");
                    }

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

            },

            //修改
            handleEdit() {

                axios.put("/books", this.formData).then((res)=>{

                    if(res.data.flag){
                        //1.关闭弹层
                        this.dialogFormVisible4Edit = false;
                        this.$message.success("修改成功");
                    }else {
                        this.$message.error("修改失败");
                    }
                }).finally(()=>{
                    this.getAll();
                });

            },

 1.6异常统一处理器

基础篇-46-异常消息处理_哔哩哔哩_bilibili

新建一个表现层的工具类：ProjectExceptionAdvice.java

在controller中修改返回的信息，添加msg

在R中新增一个属性msg

 1.7添加分页功能

基础篇-47-分页_哔哩哔哩_bilibili

1.8条件查询

基础篇-49-条件查询_哔哩哔哩_bilibili