The address of the column of the series of articles :

Shandong University Network Security shooting range experimental platform

---

The content of this issue ：

• The jump of the shooting range plate
• Turn on the target

---

One 、 Introduction to the shooting range at this stage

The current project , We made several target environments , such as sql Inject , however Not deployed to docker in
So our target page also has a front end views Under the folder , Sure url visit , It is planned to realize this form of shooting range first , In a few weeks, we will deploy to docker, This is the final version , Can be accessed and attacked by multiple users , Open and destroy the container to prevent the server from being damaged .

Two 、 Page design

1. Shooting range plate
Click on the title SQL-Char Enter the title details page

The main content of the page is placed in a card in ：

<!--  card -->
    <div>
      <el-card style="width: 80%;height:65vh; margin: 150px; margin-top:110px; background-color: #0B1746;border-color: #1E90FF">
        <h1 style="color: white;">{
   {probleminfo.problemname}}</h1>
        <div style="text-align: left;">
          <h3 style="display:inline-block; color: white;"> The difficulty coefficient :</h3>
          <el-rate style="display:inline-block;" v-model="probleminfo.problemratio" disabled/>
        </div>
        <div style="text-align: left;">
          <h3 style="color: white;display:inline-block;"> Title Description :</h3>
          <p style="display:inline-block;color: #DCDCDC">{
   {probleminfo.problemcontent}}</p>
        </div>
        <div style="text-align: left;height:150px;margin-top: 20px;">
          <el-button style="background-color: #0B1746;color: white;width: 200px" @click="dialogVisible=true">
            <h3> Click to get the target scene </h3>
          </el-button>
        </div>
        <div style="">
          <el-input v-model="input" placeholder="flag{}" style="width:60%;display:block;margin-left: 20%" clearable />
          <el-button style="width: 100px;margin-top: 20px" type="primary" :icon="Edit" circle> Submit </el-button>
        </div>
      </el-card>
    </div>

Then there's a back button on top

 <div style="float: left;margin:30px; margin-left: 150px">
      <el-button style="background-color: #0B1746;color: white;" @click="goback"> return </el-button>
    </div>

our Click to get the shooting range scene The button needs to be bound with an event , Open a pop-up window
Let's write the pop-up window first ：

<el-dialog v-model="dialogVisible" width="300px">
<!-- v-loading="loading"-->
      <h @click="gotopage" style="cursor: pointer;">https://xxx.xx.xx.x</h>
    </el-dialog>

The effect is as follows ： Pop up a small window , It shows an address , The user clicks to enter the target environment to do questions

3、 ... and 、 Function realization

3.1、 Jump route with parameters

We need to take the title content from the database , Title （problemcontent,problemname). The problem is how to know the subject id（ Primary key ）
We need to implement the title of the first page id To the second page , Then use this id Go find all the information . So we must implement jump route with parameters .
1. Click trigger method gotopro

2. Jump route with parameters is in router.push Add a query Parameters , Pass on .

gotopro(problemid){
    
      this.$router.push({
    path:'/bugpage',query: {
    id:problemid}})
    },

3. Then the routing effect jumps as follows ：

3.2、 Render a new page

Now the new page has received problemid. Then go to the back-end interface /problem/getinfobyid Check all the information on the subject , Then assign the value to the front-end variable ：

 getprobleminfo(){
    
      request.get("/problem/getinfobyid",{
    
        params:{
    
          problemid:this.probleminfo.problemid
        }
      }).then(res =>{
    
        this.probleminfo.problemname=res.data.problemname;
        this.probleminfo.problemcontent=res.data.problemcontent;
      })
    }

The effect is as follows ：Name and content It's all loaded out

3.3、 Turn on the target

Our target route is and problemid The associated ：

    gotopage(){
    
      let href='http://localhost:8080/#'+this.probleminfo.problemid;
      window.open(href);
    },

such , Click the web link （ Write casually ）, You can jump to the target page .

Next time I'll introduce the target plane page