AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

😧 SpringMVC_day02（四）

2022-12-10 95
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 😧 SpringMVC_day02

4，前后台协议联调


4.1 环境准备


  • 创建一个Web的Maven项目
  • pom.xml添加SSM整合所需jar包
  • 创建对应的配置类
  • 编写Controller、Service接口、Service实现类、Dao接口和模型类
  • resources下提供jdbc.properties配置文件


内容参考前面的项目或者直接使用前面的项目进行本节内容的学习。


最终创建好的项目结构如下:


网络异常，图片无法展示
|


  1. 将资料\SSM功能页面下面的静态资源拷贝到webapp下。


网络异常，图片无法展示
|


  1. 因为添加了静态资源，SpringMVC会拦截，所有需要在SpringConfig的配置类中将静态资源进行放行。


  • 新建SpringMvcSupport


@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中扫描SpringMvcSupport


@Configuration
@ComponentScan({"com.itheima.controller","com.itheima.config"})
@EnableWebMvc
public class SpringMvcConfig {
}


接下来我们就需要将所有的列表查询、新增、修改、删除等功能一个个来实现下。


4.2 列表功能


网络异常，图片无法展示
|


需求:页面加载完后发送异步请求到后台获取列表数据进行展示。


1.找到页面的钩子函数，created()


2.created()方法中调用了this.getAll()方法


3.在getAll()方法中使用axios发送异步请求从后台获取数据


4.访问的路径为http://localhost/books


5.返回数据


返回数据res.data的内容如下:


{
    "data": [
        {
            "id": 1,
            "type": "计算机理论",
            "name": "Spring实战 第五版",
            "description": "Spring入门经典教程，深入理解Spring原理技术内幕"
        },
        {
            "id": 2,
            "type": "计算机理论",
            "name": "Spring 5核心原理与30个类手写实践",
            "description": "十年沉淀之作，手写Spring精华思想"
        },...
    ],
    "code": 20041,
    "msg": ""
}


发送方式:


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

网络异常，图片无法展示
|


4.3 添加功能


网络异常，图片无法展示
|


需求:完成图片的新增功能模块


1.找到页面上的新建按钮，按钮上绑定了@click="handleCreate()"方法


2.在method中找到handleCreate方法，方法中打开新增面板


3.新增面板中找到确定按钮,按钮上绑定了@click="handleAdd()"方法


4.在method中找到handleAdd方法


5.在方法中发送请求和数据，响应成功后将新增面板关闭并重新查询数据


handleCreate打开新增面板


handleCreate() {
    this.dialogFormVisible = true;
},
handleAdd方法发送异步请求并携带数据
handleAdd () {
    //发送ajax请求
    //this.formData是表单中的数据，最后是一个json数据
    axios.post("/books",this.formData).then((res)=>{
        this.dialogFormVisible = false;
        this.getAll();
    });
}


4.4 添加功能状态处理


基础的新增功能已经完成，但是还有一些问题需要解决下:


需求:新增成功是关闭面板，重新查询数据，那么新增失败以后该如何处理?


1.在handlerAdd方法中根据后台返回的数据来进行不同的处理


2.如果后台返回的是成功，则提示成功信息，并关闭面板


3.如果后台返回的是失败，则提示错误信息


(1)修改前端页面


handleAdd () {
    //发送ajax请求
    axios.post("/books",this.formData).then((res)=>{
        //如果操作成功，关闭弹层，显示数据
        if(res.data.code == 20011){
            this.dialogFormVisible = false;
            this.$message.success("添加成功");
        }else if(res.data.code == 20010){
            this.$message.error("添加失败");
        }else{
            this.$message.error(res.data.msg);
        }
    }).finally(()=>{
        this.getAll();
    });
}

(2)后台返回操作结果，将Dao层的增删改方法返回值从void改成int


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

(3)在BookServiceImpl中，增删改方法根据DAO的返回值来决定返回true/false


@Service
public class BookServiceImpl implements BookService {
    @Autowired
    private BookDao bookDao;
    public boolean save(Book book) {
        return bookDao.save(book) > 0;
    }
    public boolean update(Book book) {
        return bookDao.update(book) > 0;
    }
    public boolean delete(Integer id) {
        return bookDao.delete(id) > 0;
    }
    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_TIMEOUT_ERR,"服务器访问超时，请重试!",e);
//        }
        return bookDao.getById(id);
    }
    public List<Book> getAll() {
        return bookDao.getAll();
    }
}


(4)测试错误情况，将图书类别长度设置超出范围即可


网络异常，图片无法展示
|


处理完新增后，会发现新增还存在一个问题，


新增成功后，再次点击新增按钮会发现之前的数据还存在，这个时候就需要在新增的时候将表单内容清空。


resetForm(){
 this.formData = {};
}
handleCreate() {
    this.dialogFormVisible = true;
    this.resetForm();
}


4.5 修改功能


网络异常，图片无法展示
|


需求:完成图书信息的修改功能


1.找到页面中的编辑按钮，该按钮绑定了@click="handleUpdate(scope.row)"


2.在method的handleUpdate方法中发送异步请求根据ID查询图书信息


3.根据后台返回的结果，判断是否查询成功


如果查询成功打开修改面板回显数据，如果失败提示错误信息


4.修改完成后找到修改面板的确定按钮，该按钮绑定了@click="handleEdit()"


5.在method的handleEdit方法中发送异步请求提交修改数据


6.根据后台返回的结果，判断是否修改成功


如果成功提示错误信息，关闭修改面板，重新查询数据，如果失败提示错误信息


scope.row代表的是当前行的行数据，也就是说,scope.row就是选中行对应的json数据，如下:


{
    "id": 1,
    "type": "计算机理论",
    "name": "Spring实战 第五版",
    "description": "Spring入门经典教程，深入理解Spring原理技术内幕"
}


修改handleUpdate方法


//弹出编辑窗口
handleUpdate(row) {
    // console.log(row);   //row.id 查询条件
    //查询数据，根据id查询
    axios.get("/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方法


handleEdit() {
    //发送ajax请求
    axios.put("/books",this.formData).then((res)=>{
        //如果操作成功，关闭弹层，显示数据
        if(res.data.code == 20031){
            this.dialogFormVisible4Edit = false;
            this.$message.success("修改成功");
        }else if(res.data.code == 20030){
            this.$message.error("修改失败");
        }else{
            this.$message.error(res.data.msg);
        }
    }).finally(()=>{
        this.getAll();
    });
}

至此修改功能就已经完成。


4.6 删除功能


网络异常，图片无法展示
|


需求:完成页面的删除功能。


1.找到页面的删除按钮，按钮上绑定了@click="handleDelete(scope.row)"


2.method的handleDelete方法弹出提示框


3.用户点击取消,提示操作已经被取消。


4.用户点击确定，发送异步请求并携带需要删除数据的主键ID


5.根据后台返回结果做不同的操作


如果返回成功，提示成功信息，并重新查询数据


如果返回失败，提示错误信息，并重新查询数据


修改handleDelete方法


handleDelete(row) {
    //1.弹出提示框
    this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
        type:'info'
    }).then(()=>{
        //2.做删除业务
        axios.delete("/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("取消删除操作");
    });
}


接下来，下面是一个完整页面


<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>SpringMVC案例</title>
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1>图书管理</h1>
            </div>
            <div class="app-container">
                <div class="box">
                    <div class="filter-container">
                        <el-input placeholder="图书名称" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
                        <el-button @click="getAll()" class="dalfBut">查询</el-button>
                        <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                    </div>
                    <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                        <el-table-column type="index" align="center" label="序号"></el-table-column>
                        <el-table-column prop="type" label="图书类别" align="center"></el-table-column>
                        <el-table-column prop="name" label="图书名称" align="center"></el-table-column>
                        <el-table-column prop="description" label="描述" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 新增标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="新增图书" :visible.sync="dialogFormVisible">
                            <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="图书类别" prop="type">
                                            <el-input v-model="formData.type"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="图书名称" prop="name">
                                            <el-input v-model="formData.name"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="描述">
                                            <el-input v-model="formData.description" type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="handleAdd()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                    <!-- 编辑标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
                            <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="图书类别" prop="type">
                                            <el-input v-model="formData.type"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="图书名称" prop="name">
                                            <el-input v-model="formData.name"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="描述">
                                            <el-input v-model="formData.description" type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                                <el-button type="primary" @click="handleEdit()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                pagination: {},
    dataList: [],//当前页要展示的列表数据
                formData: {},//表单数据
                dialogFormVisible: false,//控制表单是否可见
                dialogFormVisible4Edit:false,//编辑表单是否可见
                rules: {//校验规则
                    type: [{ required: true, message: '图书类别为必填项', trigger: 'blur' }],
                    name: [{ required: true, message: '图书名称为必填项', trigger: 'blur' }]
                }
            },
            //钩子函数，VUE对象初始化完成后自动执行
            created() {
                this.getAll();
            },
            methods: {
                //列表
                getAll() {
                    //发送ajax请求
                    axios.get("/books").then((res)=>{
                        this.dataList = res.data.data;
                    });
                },
                //弹出添加窗口
                handleCreate() {
                    this.dialogFormVisible = true;
                    this.resetForm();
                },
                //重置表单
                resetForm() {
                    this.formData = {};
                },
                //添加
                handleAdd () {
                    //发送ajax请求
                    axios.post("/books",this.formData).then((res)=>{
                        console.log(res.data);
                        //如果操作成功，关闭弹层，显示数据
                        if(res.data.code == 20011){
                            this.dialogFormVisible = false;
                            this.$message.success("添加成功");
                        }else if(res.data.code == 20010){
                            this.$message.error("添加失败");
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    }).finally(()=>{
                        this.getAll();
                    });
                },
                //弹出编辑窗口
                handleUpdate(row) {
                    // console.log(row);   //row.id 查询条件
                    //查询数据，根据id查询
                    axios.get("/books/"+row.id).then((res)=>{
                        // console.log(res.data.data);
                        if(res.data.code == 20041){
                            //展示弹层，加载数据
                            this.formData = res.data.data;
                            this.dialogFormVisible4Edit = true;
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    });
                },
                //编辑
                handleEdit() {
                    //发送ajax请求
                    axios.put("/books",this.formData).then((res)=>{
                        //如果操作成功，关闭弹层，显示数据
                        if(res.data.code == 20031){
                            this.dialogFormVisible4Edit = false;
                            this.$message.success("修改成功");
                        }else if(res.data.code == 20030){
                            this.$message.error("修改失败");
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    }).finally(()=>{
                        this.getAll();
                    });
                },
                // 删除
                handleDelete(row) {
                    //1.弹出提示框
                    this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
                        type:'info'
                    }).then(()=>{
                        //2.做删除业务
                        axios.delete("/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("取消删除操作");
                    });
                }
            }
        })
    </script>
</html>


文章标签：
Java
前端开发
Maven
数据格式
JSON
Cool架构
目录
相关文章
Cool架构
|
JSON 运维 Java
😧 SpringMVC_day02（五）
😧 SpringMVC_day02
Cool架构
96 1
Cool架构
|
JSON 前端开发 Java
😧 SpringMVC_day01（一）
😧 SpringMVC_day01
Cool架构
110 1
Cool架构
|
Web App开发 JSON Java
😧 SpringMVC_day01（三）
😧 SpringMVC_day01
Cool架构
146 1
Cool架构
|
JSON 前端开发 Java
😧 SpringMVC_day01（二）
😧 SpringMVC_day01
Cool架构
119 1
Cool架构
|
XML 前端开发 Java
😧 SpringBoot（二）
😧 SpringBoot
Cool架构
83 1
Cool架构
|
druid Java 关系型数据库
😧 SpringBoot（四）
😧 SpringBoot
Cool架构
97 0
Cool架构
|
Java 关系型数据库 MySQL
😧 SpringBoot（三）
😧 SpringBoot
Cool架构
96 1
Cool架构
|
前端开发 Java Maven
😧 SpringMVC_day02（二）
😧 SpringMVC_day02
Cool架构
111 0
Cool架构
|
运维 前端开发 Java
😧 SpringMVC_day02（三）
😧 SpringMVC_day02
Cool架构
103 0
Cool架构
|
设计模式 Java 数据库连接
😧 SpringMVC_day02（一）
😧 SpringMVC_day02
Cool架构
76 0