山东大学软件学院项目实训-创新实训-网络安全靶场实验平台（八）

本文链接：https://blog.csdn.net/m0_52100140/article/details/124239802

前言：本篇博客主要记录了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);