The address of the column of the series of articles :

Shandong University Network Security shooting range experimental platform

---

The content of this issue ：

• Construction of shooting range plate

---

One 、 Design page

In the early stage, I wrote the outline of this module , There is only one simple framework , Now you need to complete the whole logical setting .
The first is the folding frame ： We will design a component reference in the page

<template>
<!--   Range module -->
  <div class="honeypot">
    <sduheader></sduheader>
    <bug-card></bug-card>
  </div>
</template>

The main contents are as follows ：element-ui The folding panel

I found the accordion effect , The code structure is as follows , I set up 10 A content

After each category is expanded, there will be several questions below , The user clicks the title to do the title

This part of the code , Take the fourth column in the figure （CSRF） Examples ：

        <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>

You can see , I use Template #title Rewrite the column title of this folding column , Then there are several card（ card ） use v-for Cycle to get :

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

CSRPproblemlist stay script It's defined in :

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

After the user clicks the title , Jump to a new page

tips:
1. Design gradient background color

.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. Design the background picture of the card

.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;
}

Design backend

Want to achieve , Click each folding bar to display the corresponding topic information , Let's save something for the database first
surface problem:

And then at the back end springboot Write entity classes 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;
}

stay controller Next create a problemcontroller, Define a method getinfobytype, It means through type To get problem Information , Our topic types are SQL Inject , Brute force cracking and so on ...

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);
    }
}

Write Mapper class ：sql sentence ：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);
}

thus , The front end calls the back end /problem/getinfobytype Interface , You can get the title information returned by the database .

Back to the front ： Click to bind an event to us 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];
          }
        }
      })
    }

Use request.get, The returned information is then assigned to the corresponding type of problemlist
The effect picture after success is as follows ： Click on SQL-inject You can see that the title information of the database has been obtained