携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情
发布帖子
异步请求：当前网页不刷新，还要访问服务器，服务器会返回一些结果，通过这些结果提炼出来的数据对网页做一个局部的刷新（提示、样式等），实现异步请求的技术是AJAX。
演示一下使用 JQuery 发送异步请求的示例
引一个FastJson的包，用这个包里面的 api 处理json字符串的转换，效率更高一点，性能更好一点。
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.75</version>
</dependency>
首先在 CommunityUtil 工具类中加几个处理json字符串的方法，因为服务器给浏览器返回json字符串，
// 返回JSON字符串
// 参数：编码、提示信息、Map（Map里面封装业务数据）
public static String getJSONString(int code, String msg, Map<String, Object> map){
/*
封装成json对象，然后把json对象转换成字符串就得到了一个json格式的字符串
*/
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);
}
写一个html页面 ajax-demo.html，在
<!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);
// 将字符串转换成json对象
data = $.parseJSON(data);
console.log(typeof (data));
console.log(data.code);
console.log(data.msg);
}
);
}
</script>
</body>
</html>
引入 JQuery：在html页面body内加上下面这句话
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
测试：
接下来我们来开发发布帖子的功能
- 数据访问层（dao）
增加插入帖子的方法
int insertDiscussPost(DiscussPost discussPost);
/*
声明插入帖子的功能
*/
然后是对应的mapper配置文件
<sql id="insertFields" >
user_id, title, content, type, status, create_time, comment_count, score
</sql>
<insert id="insertDiscussPost" parameterType="com.nowcoder.community.entity.DiscussPost">
insert into discuss_post(<include refid="insertFields"></include>)
values(#{userId},#{title},#{content},#{type},#{status},#{createTime},#{commentCount},#{score})
</insert>
- 业务层（service）
@Service
public class DiscussPostService {
@Autowired
private DiscussPostMapper discussPostMapper;
@Autowired
private SensitiveFilter sensitiveFilter;
public List<DiscussPost> findDiscussPosts(int userId, int offest, int limit){
return discussPostMapper.selectDiscussPosts(userId, offest, limit);
}
public int findDiscussPostRows(int userId){
return discussPostMapper.selectDiscussPostRows(userId);
}
// 插入帖子
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);
}
}
- 视图层（Controller和页面）
DiscussPostController：
@Component
@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){
// 如果没有登录，直接返回错误信息
// 403 代表没有权限
return CommunityUtil.getJSONString(403, "你还没有登录!");
}
// 可以执行到这里说明已经登录了
DiscussPost post = new DiscussPost();
post.setUserId(user.getId());
post.setTitle(title);
post.setContent(content);
post.setCreateTime(new Date());
// 帖子类型和状态、得分等默认就是0，不用设置
discussPostService.addDiscussPost(post);
// 报错的情况将来统一处理
return CommunityUtil.getJSONString(0, "发布成功!"); // 0 表示是一个正确的状态
}
}
index.html：
index.js：
主页的发布帖子功能里面有js，我们修改一下js
测试
接着在数据库中看一下标签是否被转义以及敏感词是否被过滤
