JAVA EE：（6）功能实现（一）

风_痕

已于 2022-02-21 11:23:31 修改

阅读量602

点赞数 2

文章标签： java-ee java

于 2022-01-05 00:10:22 首次发布

本文链接：https://blog.csdn.net/qq_45915040/article/details/122314466

版权

一、数据显示功能

见 JAVA EE项目：（5）前端

二、删除功能

mappe.xml

controller

package com.example.demo3.controller;

import com.example.demo3.entity.News;
import com.example.demo3.service.NewsService;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("news")
public class NewsController {
    @Resource
    private NewsService newsService;
    @RequestMapping("index")
    public String getnews(String title){
        return newsService.get(title);
    }
    @RequestMapping("find")
    public List<News> find(){
        return newsService.findAll();
    }
    @RequestMapping("delete")
    public void delete(String title){
        newsService.delete(title);
    }
}

news.html（无确认框，直接删除）

在第一个功能数据显示的html文件的基础上，添加

①给删除按钮添加点击事件，点击后跳转到②中的函数doDelete()

②添加新的script标签，然后创建函数doDelete()，作用是向controller发送请求执行删除操作。最后使用init()更新数据库数据到页面

<script>
    function init() {
        jQuery.post("news/find",function (rst) {
            var trs='';
            for(var i=0;i<rst.length;i++)
            {
                var u=rst[i];
                trs+=`
                 <tr>
                    <td>${u.title}</td>
                    <td>${u.content}</td>
                    <td>${u.date}</td>
                    <td>
                        <a href="#"
                        onclick="doDelete('${u.title}')">删除</a>
<!--                        添加点击事件-->

                        <a href="#">编辑</a>
                    </td>
                </tr>
                `;
            }
            jQuery("#data").html(trs);
            jQuery("#totals").html(rst.length);
        })
    }

    jQuery(function () {
        init();
    });
</script>

<!--新的script-->
<script>
    function doDelete(title) {
        jQuery.post("news/delete",{"title":title},function () {
            //更新数据
            init();
        })
    }
</script>

结果：

news.html（有确认框，先确认再删除）

在第一个功能数据显示的html文件的基础上，添加

①给删除按钮添加点击事件，在网页里点击删除后会跳转到②中的showDeleteDialog函数，并将要删除的数据的title传给该函数

②添加新的script标签，设置函数showDeleteDialog()，作用是弹出提示框，并将要删除的值写在确认框上，用于用户确认

③从bootstrap官网中复制提示框的组件代码，在弹出的提示框中点击确定，跳转到④中的doDelete函数

④再在script中添加另一个函数doDelete()，作用：关闭确认框，并向controller发送请求执行删除操作，然后更新数据到页面

<!-- 删除的提示框 -->
<div class="modal fade" id="delDialog" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>您确定要删除【<span id="title"></span>】吗?</p>
<!--         弹出模态框，确定是否要删除该数据，id为模态框赋值，对应下面的script的jQuery("#title").html(title);-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"
                        onclick="doDelete()">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 删除模态框结束 -->

位置：

<script>
    function init() {
        jQuery.post("news/find",function (rst) {
            var trs='';
            for(var i=0;i<rst.length;i++)
            {
                var u=rst[i];
                trs+=`
                 <tr>
                    <td>${u.title}</td>
                    <td>${u.content}</td>
                    <td>${u.date}</td>
                    <td>
                        <a href="#"
                        onclick="showDeleteDialog('${u.title}')">删除</a>
<!--                       注意这里也有修改-->
                        <a href="#">编辑</a>
                    </td>
                </tr>
                `;
            }

            jQuery("#data").html(trs);
            jQuery("#totals").html(rst.length);
        })
    }
    jQuery(function () {
        init();
    });
</script>
<script>
    //存放新闻的title，必须要写，
    //因为有两个函数都需要title所以要声明一个变量
    var title
    function showDeleteDialog(title_) {
        title = title_;
        //给对应上面的模态框模板里的id=title的span赋值
        jQuery("#title").html(title);
        jQuery("#delDialog").modal('show');
    }
    function doDelete() {
        jQuery.post("news/delete",{"title":title},function () {
            jQuery("#delDialog").modal('hide');
            alert("删除成功!");
            //更新数据
            init();
        })
    }
</script>

效果图：

三、修改功能

存在一个问题，title应该是唯一的，如果数据库中某title已存在，那么修改其他数据时不能将title改成这个某title，但是这里没有考虑，懒得改了，参考下面的增加功能自己琢磨吧

因为update必须有一个属性用来where（看下面的mapper），有一个属性不能显示，也可以新增一个属性id用来查找数据

News

mapper.xml

记得之前的显示数据的mapper要改一下，否则查到的id都是0

controller

news.html

①给编辑按钮添加点击事件，在网页里点击编辑后跳转到②中的showEditDialog函数，并将原数据传给该函数

②添加新的script标签，设置函数showEditDialog()，作用是弹出编辑框，并将原数据传给编辑框，让其显示原数据

③从bootstrap官网中复制编辑框的组件代码，在弹出的编辑框中修改完数据，点击编辑框的确定按钮后跳转到④中的doEdit函数

④再在script中添加另一个函数doEdit()，作用：获取修改后的数据，并向controller发送修改请求和修改后的数据来执行修改操作，然后更新数据到页面

<!-- 修改的提示框 -->
<div class="modal fade" id="editDialog" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editDialogForm">
                    <input type="hidden" name="id" id="id">
<!--                    这个是用来where的，不修改，类型设置为隐藏-->

                    <div class="form-group row">
                        <label class="col-form-label col-3 text-right">新闻标题:</label>
                        <div class="col-8">
                            <input type="text" id="title2" name="title"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-3 text-right">新闻内容:</label>
                        <div class="col-8">
                            <input type="text" id="content" name="content"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-3 text-right">新闻日期:</label>
                        <div class="col-8">
                            <input type="text" name="date" id="date"
                                   class="form-control">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"
                        onclick="doEdit()">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改模态框结束 -->

<a href="#"
    onclick="showEditDialog('${u.id}','${u.title}','${u.content}',
    '${u.date}')">编辑</a>

<script>
    //修改操作
    function showEditDialog(id,title,content,date)
    {
        jQuery("#id").val(id);
        jQuery("#title2").val(title);
        //之前的删除中有一个id为title的了，所以写成title2
        jQuery("#content").val(content);
        jQuery("#date").val(date);
        jQuery("#editDialog").modal('show');
        // val() 方法设置被选元素的值，
        // 这里获取的是原数据的值，然后将其传输到修改框中
    }

    function doEdit()
    {
        //前提：
        //1.表单控件必须提供name属性
        //2.name属性的值必须与后台dto中的属性同名
        var form=jQuery("#editDialogForm").serialize();
        jQuery.post("news/update",form,function () {
            alert("修改成功!");
            jQuery("#editDialog").modal('hide');
            init();
        })
    }
</script>

效果图

四、增加功能(与修改类似)

注：当要插入的数据的title在数据库中存在时插入会失败

NewsMapper

这里的返回值是int，而下面的xml中不用写result...，原因看 JAVA EE项目：（3）Mybatis映射器

NewsMapper.xml

    <insert id="insert" parameterType="com.example.demo3.entity.News">
        INSERT INTO news (title, content, date)
        SELECT #{title},#{content},#{date}
        from DUAL
        where not exists(select id from news where title=#{title});
    </insert>

NewsController

    @RequestMapping("insert")
    public int insert(News news){
        int bool = 0;
        bool = newsService.insert(news);
        return bool;
    }

news.html

①给增加按钮添加点击事件，在网页里点击编辑后跳转到②中的showAddDialog函数

②添加新的script标签，设置函数showAddDialog()，作用是弹出编辑框

③复用了编辑功能的编辑框的组件代码，在弹出的编辑框中填写数据，点击编辑框的确定按钮后跳转到④中的doAdd函数

④再在script中添加另一个函数doAdd()，作用：获取修改后的数据，并向controller发送增加请求来执行插入操作，然后更新数据到页面

<!-- 增加的提示框 -->
<div class="modal fade" id="addDialog" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">增加</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addDialogForm">
                    <div class="form-group row">
                        <label class="col-form-label col-3 text-right">新闻标题:</label>
                        <div class="col-8">
                            <input type="text" id="title3" name="title"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-3 text-right">新闻内容:</label>
                        <div class="col-8">
                            <input type="text" id="content2" name="content"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-3 text-right">新闻日期:</label>
                        <div class="col-8">
                            <input type="text" name="date" id="date2"
                                   class="form-control">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"
                        onclick="doAdd()">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 增加模态框结束 -->

<script>
    //增加操作
    function showAddDialog()
    {
        jQuery("#addDialog").modal('show');
    }

    function doAdd()
    {
        //前提：
        //1.表单控件必须提供name属性
        //2.name属性的值必须与后台dto中的属性同名
        var form=jQuery("#addDialogForm").serialize();
        jQuery.post("news/insert",form,function (rst) {
            if(rst>0)
            {
                alert("添加成功!");
                jQuery("#addDialog").modal('hide');
                init();
            }else{
                alert("添加失败，数据已存在!");
            }
        })
    }
</script>

效果图

五、批量删除功能

风_痕

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JAVA EE：（6）功能实现（一）

一、数据显示功能见JAVA EE项目：（5）前端二、删除功能mappe.xmlcontrollerpackage com.example.demo3.controller;import com.example.demo3.entity.News;import com.example.demo3.service.NewsService;import org.springframework.web.bind.annotation.RequestMapping;imp.
复制链接

扫一扫