目录
前言:本篇博客主要记录了writeup功能的完善,以及发布writeup功能。
一、writeup的完善
1.1 数据库的完善
通过对数据库中的数据进行填充修改,得到writeup界面如下图所示:
1.2 搜索功能
可以看到,现在每条writeup都能够正确显示。还有两个功能没有实现:搜索和发布
搜索功能可以通过mybatis-plus实现:
其中,selectPage方法中第二个参数作用是模糊查询forum.content是否包含搜索的关键词。
例如,在搜索框中输入“二进制”进行搜索,结果如下图所示:
1.3 配置文件
上述功能成功运行,少不了mybatis-plus的配置文件MybatisPlusConfig.java:
@Configuration
@MapperScan("com.sducsrp.csrp.mapper")
public class MybatisPlusConfig {
// 分页插件最新版
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
}
二、writeup发布功能
2.1 界面
点击发布按钮,跳转到发布界面:
2.2 write.vue
<template>
<div class="write">
<sduheader></sduheader>
<div class="text">
<el-form :model="form" label-width="120px">
<el-form-item label="">
<el-input
placeholder="请输入标题"
v-model="form.title" />
</el-form-item>
<el-form-item label="">
<el-input :rows="10" type="textarea"
placeholder="请输入内容"
v-model="form.content" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">发布</el-button>
<el-button @click="goto_writeup">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import Sduheader from "../components/sduheader.vue";
import request from "@/utils/request";
import router from "@/router";
export default {
components: {
Sduheader,
},
data () {
let goto_writeup = () => {
router.push("/forum");
};
return{
goto_writeup,
user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
form:{},
}
},
methods:{
onSubmit(){
this.form.username=this.user.username;
request.post("/forum/save",this.form).then(res =>{
console.log(res);
})
alert("发表成功!");
router.push("/forum");
}
},
};
</script>
2.3 后端接口
@PostMapping("/save")
public Result save(@RequestBody Forum forum){
String title=forum.getTitle();
String content=forum.getContent();
String username=forum.getUsername();
if(title!=null&&content!=null){
forumMapper.insert(title,content,username);
return Result.success("发表成功!");
}
return Result.error(Constants.CODE_600, "参数错误");
}
SQL语句:
@Insert("insert into forum (title,content,username) values (#{title},#{content},#{username})")
int insert(String title,String content,String username);