仿牛客学习论坛之发布帖子

最新推荐文章于 2024-05-30 09:19:51 发布

Zhang_Chuangqi

最新推荐文章于 2024-05-30 09:19:51 发布

阅读量861

点赞数

分类专栏：仿牛客论坛文章标签： spring java

本文链接：https://blog.csdn.net/weixin_54240468/article/details/124006811

版权

仿牛客论坛专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本资料来源于牛客网的仿牛客学习论坛，仅供学习和交流使用。
经过了注册和登录功能的开发，我们终于到了正式的功能开发啦！

文章目录

1 测试
2 编写业务

1 测试

1 知识点 ajax

Asynchronous JavavScript and XML
异步的JavaScript与xml, 不是一门新技术，只是一个新的术语；
使用Ajax, 网页能够将增量更新呈现在页面上，而不需要刷新整个页面；
虽然x代表xml, 但目前json的使用比xml更加普遍；
http://develop.mozilla.org/zh-CN/Web/Guide/AJAX

示例

使用jQuery发送AJAX请求；
实践
采用AJAX请求，实现发布帖子的功能。

2 编写json工具类

数据间传输采用json，所以我们在util包中编写json的相关方法。

先在pom.xml配置中引用阿里巴巴的fastjson

<dependency>
	<groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.80</version>
</dependency>

在 CommunityUtil 中编写json工具类

public class CommunityUtil{
	
	// JSON 相关
    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);
    }

	// 此处的main方法用来测试上面的方法类，没有直接编写在test类中
    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));
    }
}

3 编写前端页面接受值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 静态类static下的网页可以直接访问 -->
    <p>
        <input type="button" value="发送" onclick="send()">
    </p>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script>
	// 此处调用的是异步的ajax请求
    function send() {
        $.post(
            "/community/alpha/ajax",
            {"name":"张三", "age":18},
            // 回调完函数后，将服务器返回的数据传到data里
            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>

4 编写controller，测试与前端ajax交互的正确性

public class AlphaController {
	// 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, "操作成功");
    }
}

以上是测试json测试类和ajax请求是否可以正常执行，下面进行业务代码编写。

2 编写业务

1 DAO层增加插入帖子的方法

@Mapper
public interface DiscussPostMapper {
	// 增加帖子
    int insertDiscussPost(DiscussPost discussPost);		
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zcq.community.dao.DiscussPostMapper">
    <insert id="insertDiscussPost" parameterType="DiscussPost">
        insert into discuss_post (<include refid="insertFields"></include>)
        values(#{userId}, #{title}, #{content}, #{type}, #{status}, #{createTime}, #{commentCount}, #{score} )
    </insert>
</mapper>

2 编写service业务逻辑

此处的业务逻辑主要是过滤敏感词。

public class DiscussPostService {
	public int addDiscussPost(DiscussPost post) {
        if (post == null) {
           throw new IllegalArgumentException("参数不能为空");
        }
        // title 和 content 部分需要过滤
        // 标签也要处理
        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);
    }
}

3 编写controller类

@Controller
@RequestMapping("/discuss")
public class DiscussPostController implements CommunityConstant {
	@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, "发布成功");
    }
    
}

4 编写index页面的js点击事件

说明：index.html页面的发布按钮的id为 publishBtn

$(function(){
	$("#publishBtn").click(publish);
});

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

说明：启动测试类后支持 < script > 标签

Zhang_Chuangqi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
仿牛客学习论坛之发布帖子

本资料来源于牛客网的仿牛客学习论坛，仅供学习和交流使用。经过了注册和登录功能的开发，我们终于到了正式的功能开发啦！文章目录1 测试1 知识点 ajax2 编写json工具类3 编写前端页面接受值4 编写controller，测试与前端ajax交互的正确性2 编写业务1 DAO层增加插入帖子的方法2 编写service业务逻辑3 编写controller类4 编写index页面的js点击事件1 测试1 知识点 ajaxAsynchronous JavavScript and XML异步的Java
复制链接

扫一扫