【项目】仿牛客网社区开发第3章 Spring Boot 实践开发社区核心功能 2 发布帖子

小灰灰 2024-03-22 11:00 10阅读 0赞

### 【项目】仿牛客网社区开发 ###

#### 文章目录 ####

*   *  【项目】仿牛客网社区开发
     *   *  第3章 Spring Boot 实践 开发社区核心功能
         *   *  2 发布帖子

![在这里插入图片描述][4db792ebd2404b4d9bca45dc9ad0ae17.png_pic_center]

#### 第3章 Spring Boot 实践 开发社区核心功能 ####

##### 2 发布帖子 #####

*  AJAX
    
     *  Asynchronous JavaScript and XML
     *  异步的JavaScript与XML，不是一门新技术，只是一个新的术语。
     *  使用AJAX，网页能够将增量更新呈现在页面上，而不需要刷新整个页面。
     *  虽然X代表XML，但目前JSON的使用比XML更加普遍。
     *  https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX
        
        ![在这里插入图片描述][2cc87bb0452645b096e8e6ee45877759.png_pic_center]
 *  示例
    
     *  使用jQuery发送AJAX请求。
 *  实践
    
     *  采用AJAX请求，实现发布帖子的功能。

这里用到一个新包，用于JSON 处理的，阿里的fastjson

![在这里插入图片描述][4d8ccb194be94c1296196be9723ac4ea.png_pic_center]

然后在通用工具类中新增几个方法

public static String getJSONString(int code, String msg, Map<String, Object> map) {
        
            JSONObject json = new JSONObject();
            json.put("code", code);
            json.put("msg", msg);
            if (map != null) {
        
                for (String key : map.keySet()) {
        
                    json.put(key, map.get(key));
                }
            }
            return json.toJSONString();
        }
    
        public static String getJSONString(int code, String msg) {
        
            return getJSONString(code, msg, null);
        }
    
        public static String getJSONString(int code) {
        
            return getJSONString(code, null, null);
        }

![在这里插入图片描述][e89ebdd8a67d4efe8c0fc287c9bc990e.png_pic_center]

来一个main 测试一下

public static void main(String[] args) {
        
            Map<String, Object> map = new HashMap<>();
            map.put("name", "zhangsan");
            map.put("age", 25);
            System.out.println(getJSONString(0, "ok", map));
        }

运行结果

![在这里插入图片描述][caccbe21f4df4eec88a537c038d854c8.png_pic_center]

没问题

Ajax 示例：

// ajax示例
        @RequestMapping(path = "/ajax", method = RequestMethod.POST)
        @ResponseBody
        public String testAjax(String name, int age) {
        
            System.out.println(name);
            System.out.println(age);
            return CommunityUtil.getJSONString(0, "操作成功!");
        }

![在这里插入图片描述][4c0ae12ad498490db1cdd1dc51f407d7.png_pic_center]

来个新的前端页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>AJAX</title>
    </head>
    <body>
    <p>
        <input type="button" value="发送" onclick="send();">
    </p>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script>
        function send() {
          
            $.post(
                "/community/alpha/ajax",
                {
          "name": "张三", "age": 23},
                function (data) {
          
                    console.log(typeof (data));
                    console.log(data);
    
                    data = $.parseJSON(data);
                    console.log(typeof (data));
                    console.log(data.code);
                    console.log(data.msg);
                }
            );
        }
    </script>
    </body>
    </html>

![在这里插入图片描述][f47d8d20b2084385b7f6706d6986349d.png_pic_center]

启动服务器

![在这里插入图片描述][1e06a81e79154367836066a3ab1db73a.png_pic_center]

没问题

【实现发布帖子的功能】

修改数据层mapper

int insertDiscussPost(DiscussPost discussPost);

添加上这个方法

![在这里插入图片描述][a4707768150141899f1c29ffe65d076c.png_pic_center]

然后在映射文件中实现这个方法

<sql id="insertFields">
            user_id
            , title, content, type, status, create_time, comment_count, score
        </sql>
    
        <insert id="insertDiscussPost" parameterType="DiscussPost">
            insert into discuss_post(<include refid="insertFields"></include>)
            values(#{userId},#{title},#{content},#{type},#{status},#{createTime},#{commentCount},#{score})
        </insert>

![在这里插入图片描述][b1ae3596c85844be81f0a677b38efc09.png_pic_center]

这下就要用到我们那个过滤敏感词工具了

修改业务层

public int addDiscussPost(DiscussPost post) {
        
            if (post == null) {
        
                throw new IllegalArgumentException("参数不能为空!");
            }
    
            // 转义HTML标记
            post.setTitle(HtmlUtils.htmlEscape(post.getTitle()));
            post.setContent(HtmlUtils.htmlEscape(post.getContent()));
            // 过滤敏感词
            post.setTitle(sensitiveFilter.filter(post.getTitle()));
            post.setContent(sensitiveFilter.filter(post.getContent()));
    
            return discussPostMapper.insertDiscussPost(post);
        }

![在这里插入图片描述][2a89cff9b9b241019f3bb9e5b0afd400.png_pic_center]

接着是视图层，新来一个专用的controller

package com.nowcoder.community.controller;
    
    import com.nowcoder.community.entity.DiscussPost;
    import com.nowcoder.community.entity.User;
    import com.nowcoder.community.service.DiscussPostService;
    import com.nowcoder.community.util.CommunityUtil;
    import com.nowcoder.community.util.HostHolder;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.Date;
    
    /**
     * @Projectname: community
     * @Classname: DiscussPostController
     * @Author: Ding Jiaxiong
     * @Date:2023/4/19 9:40
     */
    
    @Controller
    @RequestMapping("/discuss")
    public class DiscussPostController {
        
    
        @Autowired
        private DiscussPostService discussPostService;
    
        @Autowired
        private HostHolder hostHolder;
    
        @RequestMapping(path = "/add", method = RequestMethod.POST)
        @ResponseBody
        public String addDiscussPost(String title, String content) {
        
            User user = hostHolder.getUser();
            if (user == null) {
        
                return CommunityUtil.getJSONString(403, "你还没有登录哦!");
            }
    
            DiscussPost post = new DiscussPost();
            post.setUserId(user.getId());
            post.setTitle(title);
            post.setContent(content);
            post.setCreateTime(new Date());
            discussPostService.addDiscussPost(post);
    
            // 报错的情况,将来统一处理.【现在暂时认为程序会正常进行】
            return CommunityUtil.getJSONString(0, "发布成功!");
        }
    
    }

![在这里插入图片描述][294b7370d9f04d8693ae8ab94566f9f0.png_pic_center]

修改页面模板

![在这里插入图片描述][8994669623d74b4e9286b6dbffe424d4.png_pic_center]

就这个地方进行一个判断，没有用户登录的时候，不能进行帖子的发布，让它压根儿 看不见这个按钮

当然页面没啥改的了，主要是发布按下的时候，请求我们的接口，index.js 文件

$(function () {
        
        $("#publishBtn").click(publish);
    });
    
    function publish() {
        
        $("#publishModal").modal("hide");
    
        // 获取标题和内容
        var title = $("#recipient-name").val();
        var content = $("#message-text").val();
        // 发送异步请求(POST)
        $.post(
            CONTEXT_PATH + "/discuss/add",
            {
        "title": title, "content": content},
            function (data) {
        
                data = $.parseJSON(data);
                // 在提示框中显示返回消息
                $("#hintBody").text(data.msg);
                // 显示提示框
                $("#hintModal").modal("show");
                // 2秒后,自动隐藏提示框
                setTimeout(function () {
        
                    $("#hintModal").modal("hide");
                    // 刷新页面
                    if (data.code == 0) {
        
                        window.location.reload();
                    }
                }, 2000);
            }
        );
    
    }

![在这里插入图片描述][81258830bb07450dbf35739750191784.png_pic_center]

重启服务器，发布测试一下。

![在这里插入图片描述][ac9e0ad4da974048a25283fdb3defc98.png_pic_center]

登录前，看不着

![在这里插入图片描述][87a11870cee548cb92562ea861aa6700.png_pic_center]

登录后，按钮出来了，试一下

![在这里插入图片描述][a5e87eac4fc349649dd15380244716f8.png_pic_center]

发布

![在这里插入图片描述][bab84dbe3b084b6fa4f8fdf49ce07d95.png_pic_center]

发布成功

![在这里插入图片描述][df026f0cf70f4435b1e24a3e563c0e73.png_pic_center]

OK， 没问题，如果是带有敏感词的帖子，会是下面这样

![在这里插入图片描述][c349b97a860e41999c251dd3557997a0.png_pic_center]

发布

![在这里插入图片描述][4be0c03bd08a4a079c9cebfdfa51b5b1.png_pic_center]

发布成功，这里暂时还不能进行帖子详情的查看，直接看一手数据库吧

![在这里插入图片描述][09fdd82124924e5ebe5a5dd4492ab6ae.png_pic_center]

没问题的，敏感词已经被替换了

标题中也可以带有标签

![在这里插入图片描述][a8bf81bfb0e748eb9b99eaabc10c52f8.png_pic_center]

发布

![在这里插入图片描述][fc1f6ed5e82245789dcc2d5dcba7c450.png_pic_center]

![在这里插入图片描述][9232e8c379cf4171b7e1e626104597a1.png_pic_center]

没问题，看看数据库

![在这里插入图片描述][e46a2356283446c7a830827cee1fa861.png_pic_center]

没毛病。确实转义了

[4db792ebd2404b4d9bca45dc9ad0ae17.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/16ad11badb36467b9ea7ac9631bf96fd.png
[2cc87bb0452645b096e8e6ee45877759.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/777d8e197ebf40a7bdb7fe175627a80b.png
[4d8ccb194be94c1296196be9723ac4ea.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/2d32621b0e824e549953ddcc9fc33fc7.png
[e89ebdd8a67d4efe8c0fc287c9bc990e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/ae81c977e8c840f2ba212c6eef94efd9.png
[caccbe21f4df4eec88a537c038d854c8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5aa498cce9974c718f7685fb206bce93.png
[4c0ae12ad498490db1cdd1dc51f407d7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/27d976e0b1484a2a995eb8686e6030d3.png
[f47d8d20b2084385b7f6706d6986349d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d8371084f74f4dea984a962562ab988c.png
[1e06a81e79154367836066a3ab1db73a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d26cf11bf3db4d77adfabe584305920d.png
[a4707768150141899f1c29ffe65d076c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/baaa789a4b4344a8997b54f358dad400.png
[b1ae3596c85844be81f0a677b38efc09.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9b692499093d476a8db1748ef382ae11.png
[2a89cff9b9b241019f3bb9e5b0afd400.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/01e396149c4c4060b326f19ab68bdcfe.png
[294b7370d9f04d8693ae8ab94566f9f0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6d7d770b77ea405fa9fdcea0beae1933.png
[8994669623d74b4e9286b6dbffe424d4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8e4b5f6f192943b691f5ff6052fc8290.png
[81258830bb07450dbf35739750191784.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b35d46f55c844ee19ab9066c694017b1.png
[ac9e0ad4da974048a25283fdb3defc98.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c0a0d953ba2241f5802fc1770d8d9b6a.png
[87a11870cee548cb92562ea861aa6700.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f7c2970c1c8f4a719ed4316b3c49a629.png
[a5e87eac4fc349649dd15380244716f8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6ec1d298cef74786b11e3e643148cfce.png
[bab84dbe3b084b6fa4f8fdf49ce07d95.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/184969d2498b4221a3c63d1e8cab9f28.png
[df026f0cf70f4435b1e24a3e563c0e73.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0b9012fb0e394d02b93e368f3a8d6092.png
[c349b97a860e41999c251dd3557997a0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6d0711065586468ba2bdad4e7462063e.png
[4be0c03bd08a4a079c9cebfdfa51b5b1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/28c7569dd2e9414baa006dfe6fa4c720.png
[09fdd82124924e5ebe5a5dd4492ab6ae.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/85fbb51ba7744c0881598445ec2fcb36.png
[a8bf81bfb0e748eb9b99eaabc10c52f8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/42704afd80374e8793a51ec2c7efb5a8.png
[fc1f6ed5e82245789dcc2d5dcba7c450.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a89792731bdf434e8709bcc7514f26a4.png
[9232e8c379cf4171b7e1e626104597a1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e4b077a51fef45c38a73f257b3151852.png
[e46a2356283446c7a830827cee1fa861.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c8916464655f498c8d023cf9f333b0d0.png