第九次作业---使用xml映射实现查询、删除、修改、添加

已于 2024-05-27 12:51:15 修改
阅读量267 收藏 3
点赞数 4
分类专栏： Web应用技术 文章标签： xml
于 2024-05-25 18:32:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_peifang/article/details/139189842
版权

一、查询

mapper:  普通查询所有和按条件查询两种方式

public List<Notice> list();

public List<Notice> listByInfo(@Param("title") String title, @Param("author") String author);

NoticeMapper.xml  分别对应两种查询方法

<select id="list" resultType="com.wust.pojo.Notice">
        select id,title ,content, author, createTime, click,download
        from notice
</select>


    <select id="listByInfo" resultType="com.wust.pojo.Notice">
        <include refid="commonSelect"></include>
        <where>
            <if test="title != null and title != ''">
                title like concat('%', #{title}, '%')
            </if>
            <if test="author != null and author != ''">
                and author like concat('%', #{author}, '%')
            </if>
        </where>
    </select>

service：业务处理层，进行分页操作，分页的普通查询和分页的带条件的查询

public PageBean list(Integer page, Integer pageSize);
    
public PageBean listByInfo(Integer page, Integer pageSize,String title,String author);
@Autowired
    private NoticeMapper noticeMapper;

    @Override
    public PageBean list(Integer page, Integer pageSize) {

        PageHelper.startPage(page,pageSize);

        List<Notice> noticeList = noticeMapper.list();
        System.out.println(noticeList);

        PageInfo<Notice> p = new PageInfo<>(noticeList);

        PageBean pageBean = new PageBean(p.getTotal(),p.getList());
        return pageBean;
    }
    @Override
    public PageBean listByInfo(Integer page, Integer pageSize,String title,String author) {

        PageHelper.startPage(page,pageSize);

        List<Notice> noticeList = noticeMapper.listByInfo(title,author);
        System.out.println(noticeList);

        PageInfo<Notice> p = new PageInfo<>(noticeList);

        PageBean pageBean = new PageBean(p.getTotal(),p.getList());
        return pageBean;
    }

controller:

@Autowired
    private NoticeFenYe noticeFenYe;

    // 既能实现分页有能实现按条件查询
    @GetMapping("/{page}/{pageSize}")
    public Result list(@PathVariable Integer page,
                       @PathVariable Integer pageSize,
                       String title,String author ){

        log.info("分页查询，参数：{}，{}，{}，{}",page,pageSize,title,author);

        PageBean pageBean = noticeFenYe.listByInfo(page,pageSize,title,author);
        return Result.success(pageBean);
    }

前端notice.html （最后会附上完整代码）

删除操作按钮部分

​
<el-table-column label="操作">
        <template slot-scope="scope">
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
    </el-table-column>

​

实现界面

二、删除

NoticeMapper: 

 // 删除
    public int deleteById(Integer id);

对mapper进行测试，删除id=2的公告信息，成功删除

NoticeFenYe:


NoticeController:

@DeleteMapping("/{id}")
    public Result delete(@PathVariable("id") Integer id){
        log.info("通过id值删除:",id);
        noticeFenYe.delete(id);
        return Result.success();
    }

前端notice.html 

 handleDelete:function (id) {
                var _this = this;
                if (window.confirm("确定删除？")){
                    axios.delete('/notices/'+id).then(function (response){
                        alert("删除成功！")
                        _this.allList();
                    }).catch(function (error){
                        console.log(error);
                    });
                }
            },

运行结果：删除序号为14的信息

删除结果 14号信息已被删除

（ 删除操作中遇到的问题：请求方法POST请求被禁止

解决方法：

将删除操作改为发送delete请求，修改之后，能成功删除

三、更新

mapper：

xml 映射文件：

<!--更新操作-->
    <select id="selectBId" resultType="com.wust.pojo.Notice">
        select * from notice
        where id = #{id}
    </select>

    <update id="update">
        update notice
            <set>
                <if test="content != null">content = #{content},</if>
                <if test="title != null">title= #{title},</if>
                <if test="author != null">author = #{author},</if>
                <if test="createTime != null">createTime = #{createTime},</if>
                <if test="click != null">click = #{click},</if>
                <if test="download != null">download = #{download},</if>
            </set>
        where id=#{id}
    </update>

service接口：

service的实现

Controller：

@GetMapping("/{id}")
    public Result updatedNotice(@PathVariable("id") Integer id){
//        noticeFenYe.selectBId(id);
        return Result.success(noticeFenYe.selectBId(id));
    }

    @RequestMapping
    public Result update(@RequestBody Notice notice){
        boolean bool = noticeFenYe.update(notice);
        if (bool){
            return Result.success();
        }else {
            return Result.error("更新失败！");
        }
    }

实现编辑的前端html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
  <link rel="stylesheet" href="js/element.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/element.js"></script>
  <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
  <table border="1px">
    <tr>
      <td>序号</td>
      <td><input type="text" v-model="this.id"></td>
    </tr>
    <tr>
      <td>标题</td>
      <td><input type="text" v-model="notice.title"></td>
    </tr>
    <tr>
      <td>内容</td>
      <td><input type="text" v-model="notice.content" ></td>
    </tr>
    <tr>
      <td>作者</td>
      <td><input type="text" v-model="notice.author"></td>
    </tr>
    <tr>
      <td>创建时间</td>
      <td><input type="text" v-model="notice.createTime"></td>
    </tr>
    <tr>
      <td>点击量</td>
      <td><input type="text" v-model="notice.click"></td>
    </tr>
    <tr>
      <td>下载量</td>
      <td><input type="text" v-model="notice.download"></td>
    </tr>
    <tr>
      <td> </td>
      <td><input type="button" @click="update()" value="更新"></td>
    </tr>
  </table>
  {{notice}}
</div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      id:'',
      notice:{}
    },
    mounted(){

    },
    methods:{
      selectById(){
        var url = `notices/${this.id}`
        axios.get(url).then(response=>{
          var baseResult = response.data
          if(baseResult.code == 1){
            this.notice = baseResult.data;
          }
        }).catch( error => {})
      },

      update(){
        var url = 'notices'
        axios.put(url,this.notice).then(res =>{
          var baseResult = res.data
          if (baseResult.code == 1){
            location.href = 'notice.html'
          }else {
            alert(baseResult.message)
          }
        }).catch(err =>{
          console.error(err);
        })
      }

    },
    created(){
      // 获取参数id的值
      this.id = location.href.split("?id=")[1]
      // 通过id查询
      this.selectById();
    }
  })
</script>
</html>

前端notice.html （最后会附上完整代码）

编辑操作按钮部分

​
<el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
                    size="mini"
                    @click="edit(scope.row.id)">编辑</el-button>
           </template>
    </el-table-column>

​

出现的问题：一直更新失败，控制台也没有指出具体的错误位置，一开始显示sql语句错误，但是写测试了，能正常更新，sql语句检查没有问题

更新测试：

后面发现缺少了通过ID查询的方法，加上之后还是有错误，跳转到编辑页面没有原本的信息显示，只有id号显示了，修改之后能够实现更新编辑。

运行结果：

更新成功

四、添加

mapper 和 对应xml文件（注意xml 中sql 语句的写法）：

<!--新增操作-->
    <insert id="insert">
        insert into notice
        (title,content,author,createTime,click,download)
        values
            (#{title},#{content},#{author}, #{createTime}, #{click},#{download})
    </insert>

service 注意在实现接口中不要忘记加注解：

@Override
    public boolean insert(Notice notice){
        int result = noticeMapper.insert(notice);
        return result == 1;  // result等于1说明新增成功，返回boolean类型用于controller中的条件判断
    }

Controller：

@PostMapping
    public Result insert(@RequestBody Notice notice){
        boolean bool = noticeFenYe.insert(notice); // 返回的 bool 的值，成功或失败
        if (bool){
            // bool = 1 成功
            return Result.success();
        }else {
           return Result.error("新增失败！");
        }
    }

新增add.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加公告页面</title>
  <link rel="stylesheet" href="js/element.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/element.js"></script>
  <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <h1 align="center">新增公告信息</h1>
    <table border="1px">
        <tr>
            <td>标题</td>
            <td><input type="text" v-model="notice.title"></td>
        </tr>
        <tr>
            <td>内容</td>
            <td><input type="text" v-model="notice.content" ></td>
        </tr>
        <tr>
            <td>作者</td>
            <td><input type="text" v-model="notice.author"></td>
        </tr>
        <tr>
            <td>创建时间</td>
            <td><input type="text" v-model="notice.createTime"></td>
        </tr>
        <tr>
            <td>点击量</td>
            <td><input type="text" v-model="notice.click"></td>
        </tr>
        <tr>
            <td>下载量</td>
            <td><input type="text" v-model="notice.download"></td>
        </tr>
        <tr>
            <td> </td>
            <td><input type="button" @click="insert()" value="添加"></td>
        </tr>
    </table>

</div>
</body>

<script>
  new Vue({
    el:"#app",
    data:{
        notice:{
            "title":"",
            "content":"",
            "author": "",
            "createTime":"",
            "click":"",
            "download":""
        }

    },

      mounted(){

      },
      methods:{

        insert(){
            var url = 'notices'
            axios.post(url,this.notice).then(res =>{
                var baseResult = res.data
                if (baseResult.code == 1){
                    location.href="notice.html"
                }else {
                    alert((baseResult.message))
                }
            }).catch(err=>{
                console.error(err);
            })
        },
      },
      created(){

      }
  })
</script>
</html>

出现的问题：

1、缺少对id属性的赋值，需要把id属性设置为主键，并且能够自增

2、新增添加前端界面不能正确显示

有两处书写有错误 values里面的赋值

Vue框架中data属性数据的格式错误，需要改成JSON格式

完整的notice.html前端页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告管理</title>
    <link rel="stylesheet" href="js/element.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/element.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body >
<div id="app" style="width: 100%;height: 70%" >
<h1 align="center">图书管理公告管理模块</h1>
    <p align="center">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="标题">
                <el-input v-model="formInline.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="作者">
                <el-input v-model="formInline.author" placeholder="请输入作者"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                    <!--这里也可以用之前的链接的形式-->
                <el-button type="primary" @click="insert">新增</el-button>
            </el-form-item>
        </el-form>
    </p>
<el-table :data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
    <el-table-column
            label="序号"
            prop="id"
            style="width: 10%">
    </el-table-column>
    <el-table-column
            label="标题"
            prop="title"
            style="width: 10%">
    </el-table-column>
    <el-table-column
            label="内容"
            prop="content"
            style="width:10%">
    </el-table-column>
    <el-table-column
            label="作者"
            prop="author"
            style="width:10%">
    </el-table-column>
    <el-table-column
            label="发布时间"
            prop="createTime"
            style="width:10%">
    </el-table-column>
    <el-table-column
            label="点击量"
            prop="click"
            style="width:10%">
    </el-table-column>
    <el-table-column
            label="下载量"
            prop="download"
            style="width:10%">
    </el-table-column>
    <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
                    size="mini"
                    @click="edit(scope.row.id)">编辑</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
    </el-table-column>

</el-table>
    <!-- 分页-->
    <p>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2, 3, 5, 10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </p>
</div>

</body>

<script>
    new Vue({
        el:"#app",
        data:{
            search:'',
            currentPage:1,
            pageSize:10,
            total:null,
            tableData: [],
            formInline:{
                title:'',
                author:''
            },


        },
        // mounted(){
        //     axios.get("noticeList").then(res =>{
        //         if (res.data){
        //             this.tableData=res.data
        //         }
        //     })
        // },
        methods:{
            edit(id) {
                location.href="edit.html?id="+id;
            },
            handleDelete:function (id) {
                var _this = this;
                if (window.confirm("确定删除？")){
                    axios.delete('/notices/'+id).then(function (response){
                        alert("删除成功！")
                        _this.allList();
                    }).catch(function (error){
                        console.log(error);
                    });
                }
            },
            handleSizeChange(val){
                this.pageSize=val;
                this.allList();
                console.log(`每页${val}条`);
            },
            handleCurrentChange(val){
                this.currentPage=val;
                this.allList();
                console.log(`当前页：${val}`);
            },
            // 点击查询按钮 实现查询
            onSubmit() {
                var url = `/notices/${this.currentPage}/${this.pageSize}?title=${encodeURIComponent(this.formInline.title)}&author=${encodeURIComponent(this.formInline.author)}`

                console.log(this.formInline.title);
                console.log(this.formInline.author);

                axios.get(url)
                    .then(res =>{
                        this.tableData = res.data.data.rows;
                        this.total=res.data.data.total;

                        console.log(this.tableData);
                        console.log(this.total);
                    })
                    .catch(error=>{
                        console.error(error);
                    })
            },
            allList(){
                var url = `/notices/${this.currentPage}/${this.pageSize}`
                axios.get(url).then(res =>{
                    if (res.data.code){
                        this.tableData = res.data.data.rows;
                        this.total = res.data.data.total;
                        console.log(this.tableData);
                        console.log(this.total);
                    }
                }).catch(error =>{
                    console.error(error)
                })
            },

            insert(){
                location.href="add.html";
            }

        },
        created(){
            this.allList();
        },
    })
</script>
</html>

实现结果 添加成功：

_Swallow_yyy
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值