系列文章专栏地址:

山东大学网络安全靶场实验平台

---

本期内容：

• 靶场板块的构建

---

一、设计页面

在前期我就写了这个模块的大概，只有一个简单的框架，现在需要完成整个的逻辑设置。
首先是这个折叠框：我们将设计成一个组件引用在页面中

<template>
<!--  靶场模块-->
  <div class="honeypot">
    <sduheader></sduheader>
    <bug-card></bug-card>
  </div>
</template>

主要内容如下：element-ui的折叠面板

我找了手风琴效果的，代码结构如下，我设置了10个内容

每一个大类展开后下面会有几道题目，用户点击题目进行做题

这部分的代码，以图中第四栏（CSRF）的举例：

        <el-collapse-item name="4">
          <template #title>
            <h1>
              <i class="el-icon-s-grid"></i>
              CSRF
            </h1>
          </template>
          <div>
            <el-col v-for="(problem, problemid) in CSRFproblemlist" :key="problemid" >
              <el-card class="problem-card" shadow="hover" @click="gotopro(problem.problemid)">
                <h3 style="color: black;margin: 50px"> {
   {problem.problemname}}</h3>
              </el-card>
            </el-col>
          </div>
        </el-collapse-item>

可以看到，我用Template #title重写了这个折叠栏的栏目标题，然后是若干个card（卡片）用v-for循环获取:

v-for="(problem, problemid) in CSRFproblemlist"

CSRPproblemlist在script里定义了:

export default {
    
  data(){
    
    return {
    
      SQLproblemlist:[],
      Forceproblemlist:[],
      XSSproblemlist:[],
      CSRFproblemlist:[
        {
    
          problemid:'0010',
          problemname:'题目名'
        },
        {
    
          problemid:'0011',
              problemname:'题目名'
        }
      ],
      RCEproblemlist:[],
      downloadproblemlist:[],
      SSRFproblemlist:[],
      heartproblemlist:[],
      passwordproblemlist:[],
      Unsafeproblemlist:[],
      drawer:false,
    }
  },

用户点击题目之后，跳转到新页面

tips:
1.设计渐变背景色

.honeypot {
  /*background-image: linear-gradient(to bottom right, #000000, 	#483D8B);*/
  background-image: linear-gradient(to bottom right, #F5F5F5, 	#808A87);
  margin: 0px;
  padding: 0px;
  min-height: 100vh;
}

2.设计卡片的背景图片

.problem-card{
  /*background-image: linear-gradient(to bottom right, #000000, 	#483D8B);*/
  background-image:  url("../assets/img/7.jpg");
  background-size:100% 100%;
  padding:5px;
  margin:20px;
  width: 300px;
  height: 200px;
  border-color:#99a9bf;
  border-width: 5px;
  cursor: pointer;
}

设计后端

想要实现，点开每个折叠栏后显示对应的题目信息，我们先给数据库存点东西
表problem:

然后在后端springboot写实体类problem:

package com.sducsrp.csrp.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("problem")
public class Problem {
    

    @TableId(type = IdType.AUTO)
    private String problemid;
    private String problemname;
    private String problemcontent;
    private String url;
    private String kind;
    private String flag;
}

在controller下创建一个problemcontroller，定义一个方法getinfobytype，意思是通过type来获取problem信息，我们的题目类型有SQL注入，暴力破解等等。。。

package com.sducsrp.csrp.controller;

import com.sducsrp.csrp.common.Result;
import com.sducsrp.csrp.entity.Problem;
import com.sducsrp.csrp.entity.User;
import com.sducsrp.csrp.mapper.ProblemMapper;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/problem")
public class ProblemController {
    
    @Resource
    ProblemMapper problemMapper;

    @GetMapping("/getinfobytype")
    public Result getinfobytype(@RequestParam() String problemtype){
    
        System.out.println(problemtype);
        List<Problem> a= problemMapper.SearchProbleminfo_bytype(problemtype);
        return Result.success(a);
    }
}

写Mapper类：sql语句：select * from problem where kind = #{kind}

package com.sducsrp.csrp.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.sducsrp.csrp.entity.Problem;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface ProblemMapper extends BaseMapper<Problem> {
    

    @Select("select * from problem where kind = #{kind}")
    List<Problem> SearchProbleminfo_bytype(String kind);
}

至此，前端调用后端的/problem/getinfobytype接口时，就可以获得数据库返回的题目信息了。

回到前端：我们给卡片绑定一个点击事件getprobleminfo

methods:{
    
    gotopro(problemid){
    
      this.$router.push({
    path:'/bugpage',query: {
    id:problemid}})
    },
    getprobleminfo(type){
    
      request.get("/problem/getinfobytype",{
    
        params:{
    
          problemtype:type
        }
      }).then(res =>{
    
        var len=res.data.length;
        for (let i = 0; i < len; i++) {
    
          if(type=='sqli'){
    
            this.SQLproblemlist[i]=res.data[i];
          }else if(type=='rce'){
    
            this.RCEproblemlist[i]=res.data[i];
          }else if(type=='force'){
    
            this.Forceproblemlist[i]=res.data[i];
          }else if(type=='filedownload'){
    
            this.downloadproblemlist[i]=res.data[i];
          }
        }
      })
    }

使用request.get，然后对返回的信息分给对应类型的problemlist
成功后的效果图如下：点击SQL-inject可以看到已经获取了数据库的题目信息