本文详细介绍了如何使用Ajax实现社区的发帖功能，从导入依赖、编写工具类、创建示例接口到前端页面的交互。同时展示了帖子发布功能的实现，包括Mapper、Service和Controller层的代码，确保了内容的安全性，如HTML转义和敏感词过滤。最后，演示了帖子详情的查询方法，实现了从前端到后台的数据获取。
🌕开发社区核心功能
2.发布帖子
2.1 Demo了解Ajax
2.1.1 导包
<!--ajax-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.58</version>
</dependency>
2.1.2 CommunityUtil工具类封装方法
CommunityUtil
//
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) {
HashMap<String, Object> map = new HashMap<>();
map.put("name","李四");
map.put("age",21);
System.out.println(getJSONString(1,"成功！",map));
//System.out.println(getJSONString(2,"成功！"));
}
2.1.3 TestController写示例接口
TestController
@RestController
@RequestMapping("/yty")
public class TestController {
//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(1,"操作成功！");
}
}
2.1.4 ajax-demo页面访问controller示例接口
ajax-demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX-demo</title>
</head>
<body>
<p>
<input type="button" value="发送" onclick="send();">
</p>
<!--引入JQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script>
function send() {
$.post(
"/community/yty/ajax",
{"name":"李四","age":21},
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>
2.1.5 测试
浏览器上先访问 静态页面：http://localhost:8080/community/html/ajax-demo.html
然后：
2.2 发布帖子
2.2.1 DiscussPostMapper
/*
*发布帖子
*/
//1.增加/插入帖子
public int insertDiscussPost(DiscussPost discussPost);
2.2.2 discusspost-mapper.xml
<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.2.3 DiscussPostService
/*
*帖子发布
*/
//1.添加/插入帖子
public int addDiscussPost(DiscussPost discussPost){
//1.1 先对参数做判断
if (discussPost == null){
throw new IllegalArgumentException("参数不能为空!");
}
//1.2 转义HTML标记 —— 不让页面显示标签，如<script></script>
discussPost.setTitle(HtmlUtils.htmlEscape(discussPost.getTitle()));
discussPost.setContent(HtmlUtils.htmlEscape(discussPost.getContent()));
//1.3 过滤敏感词
discussPost.setTitle(sensitiveFilter.filter(discussPost.getTitle())); //对帖子标题进行过滤
discussPost.setContent(sensitiveFilter.filter(discussPost.getContent())); //对帖子内容进行过滤
//1.4 实现添加/插入数据功能
//❤ int i = discussPostMapper.insertDiscussPost(discussPost);
//返回是int i，所以直接return+操作方法；
//返回是String Object，所以需要操作方法.var封装数据，然后return封装后的对象参数；
return discussPostMapper.insertDiscussPost(discussPost);
}
2.2.4 DiscussPostController
@Controller
@RequestMapping("/discuss")
public class DiscussPostController {
@Autowired
private DiscussPostService discussPostService;
@Autowired
private HostHolder hostHolder; //获取当前用户
/*
*1.添加/插入帖子
*/
@RequestMapping(path = "/add",method = RequestMethod.POST)
@ResponseBody
public String addDiscussPost(String title,String content){
//1.1 判断当前用户有没有登录
User users = hostHolder.getUsers();
if (users == null){
return CommunityUtil.getJSONString(403,"请先登录再进行此操作！");
}
if (StringUtils.isBlank(title)){
return CommunityUtil.getJSONString(1021,"标题不能为空哦！！");
}
if (StringUtils.isBlank(content)){
return CommunityUtil.getJSONString(1022,"内容不能为空哦！！");
}
//1.2 走到这说明已经登录了，然后就要调service保存这个帖子 —— 保存前要构造一个实体DiscussPost对象
DiscussPost discussPost = new DiscussPost();
discussPost.setUserId(users.getId()); //从hostHolder中取用户id
discussPost.setTitle(title);
discussPost.setContent(content);
discussPost.setCreateTime(new Date());
discussPostService.addDiscussPost(discussPost);
//报错的情况，之后统一异常处理。
return CommunityUtil.getJSONString(0,"发布成功！");
}
}
2.2.5 index.html和index.js修改
2.2.6 测试
结果：
查看数据库：
发现“<”和">"确实被转义了，lt和gt。
然后敏感词也被过滤了！成功！
3.帖子详情
3.1 DiscussPostMapper
//2.查看帖子详情
public DiscussPost selectDiscussPostById(int id);
3.2 discusspost-mapper.xml
<!--查看帖子详情-->
<select id="selectDiscussPostById" resultType="DiscussPost">
select
<include refid="selectFields"></include>
from discuss_post
where
id = #{id}
</select>
3.3 DiscussPostService
//2.查询帖子详情by Id
public DiscussPost findDiscussPostById(int id){
return discussPostMapper.selectDiscussPostById(id);
}
3.4 DiscussPostController
/*
*2.查询帖子详情By Id
*/
@RequestMapping(path = "/detail/{discussPostId}",method = RequestMethod.GET)
public String getDiscussPost(@PathVariable("discussPostId") int discussPostId, Model model){
//2.1查询帖子
DiscussPost post = discussPostService.findDiscussPostById(discussPostId);
model.addAttribute("post",post);
/*这里有点小重要：上面查询到帖子对象后，将结果封装到model返回前端，但是里面有个user_id字段，我们不能将这个显示给前端
*而要通过user_id找到user的头像或者姓名来展示；
*两种方式：一种关联查询，一次查两张表，但是sql语句很复杂并且有冗余
第二种(使用)就是在这里再对user_id做一次查询，查出它的头像或姓名，然后结果一起封装进行展示，但是效率低，查了两次数据库；后期可以用redis完美解决；*/
//2.2 查询帖子作者
User user = userService.findByUserId(post.getUserId());
model.addAttribute("user",user);
return "/site/discuss-detail";
}
3.5 discuss-detail.html页面改造
3.6 测试
点击进去：
成功！
扫一扫
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
