仿牛客社区项目（十二）发布帖子
发布帖子
- AJAX
- Asynchronous JavaScript and XML
- 异步的JavaScript与XML，不是一门新技术，只是一个新的术语。
- 使用AJAX，网页能够将增量更新呈现在页面上，而不需要刷新整个页面。
- 虽然X代表XML，但目前JSON的使用比XML更加普遍。
- https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX
- 示例
- 使用jQuery发送AJAX请求。
- 实践
- 采用AJAX请求，实现发布帖子的功能。
异步请求：增量更新在页面上，不用刷新整个页面。
通过[jQuery]写，三个参数：访问路径，发送的JSONString字符串，回调函数（参数是服务器返回值)
一、用jQuery发送AJAX请求的示例#
1、取业务数据的JSON字符串#
先引入Fastjson jar包
CommunityUtils下，getJSONString
public class JSONObject extends JSON implements Map<String, Object>,
Cloneable, Serializable, InvocationHandler {}
12
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);
}
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));
}
2、Ajax如何发送异步请求#
在Controller中加一个方法AlphaController.java，服务器处理请求，返回JSONString字符串。
// 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, "操作成功!");
}
12345678
静态页面 ajax-demo.html，用jQuery库发送异步请求，$.ajax $.post $.get都可以，参数有三个：访问路径、提交的数据JSONString类型、回调函数（输入是服务器返回值） 这里对应controller的return CommunityUtil.getJSONString(0, "操作成功!");。
<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>
// 如何发送异步请求,用jquery
function send() {
$.post(//三个参数：访问路径、向服务器提交的数据（JS对象）、回调函数（匿名的）（服务器响应浏览器，浏览器把服务器给的数据data（是字符串）传给该方法）
"/community/alpha/ajax",
{"name":"张三","age":"23"},
function(data){//回调函数
console.log(typeof(data));//证明这个data是字符串类型
console.log(data);//打印data这个内容
data = $.parseJSON(data);//转换成JS类型
console.log(typeof(data));//证明这个data是JS类型
console.log(data.code);
console.log(data.msg);
}
)
}
</script>
</body>
二、实现发布帖子的功能#
1、数据访问层#
DiscussPostMapper接口int insertDiscussPost(DiscussPost discussPost);
@Mapper
public interface DiscussPostMapper {
List<DiscussPost> selectDiscussPosts(int userId, int offset, int limit);
// @Param注解用于给参数取别名,
// 如果只有一个参数,并且在<if>里使用,则必须加别名.
int selectDiscussPostRows(@Param("userId") int userId);
int insertDiscussPost(DiscussPost discussPost);
}
实现该方法discusspost-mapper.xml，用sql语句把上面的方法实现了
<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>
2、业务层#
DiscussPostService，保存帖子，转义HTML标记，过滤敏感词
@Autowired
private DiscussPostMapper discussPostMapper;
@Autowired
private SensitiveFilter sensitiveFilter;
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);
}
3、视图层#
新建DiscussPostController
@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, "发布成功");
}
}
在首页，发布帖子
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);
}
);
}
index.html
“我要发布”，只有在登录时才能显示。th:if="${loginUser!=null}"
<button type="button" class="btn btn-primary btn-sm position-absolute rt-0" data-toggle="modal" data-target="#publishModal"
th:if="${loginUser!=null}">我要发布</button>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· DeepSeek在M芯片Mac上本地化部署