系列文章专栏地址:

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

---

本期内容：

• 靶场板块的跳转
• 开启靶机

---

一、靶场现阶段介绍

目前项目，我们做了几个靶机环境，比如sql注入，但是都没有部署到docker里
所以我们的靶机网页也是存在前端的views文件夹下，可以url访问，计划先实现这种形式的靶场，在几周后我们会部署到docker，这样才算最终版本，能被多个用户访问和攻击，开启和销毁容器防止服务器被损坏。

二、页面设计

1.靶场板块
点击题目SQL-Char进入题目详情页面

页面主要内容放在一个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;">难度系数:</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;">题目描述:</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>点击获取靶机场景</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>提交</el-button>
        </div>
      </el-card>
    </div>

然后上面一个返回按钮

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

我们的点击获取靶场场景按钮需要绑定一个事件，打开一个弹窗
我们先写好弹窗：

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

效果如下：弹出来一个小窗口，上面显示了一个地址，用户点击进入靶机环境做题

三、功能实现

3.1、带参跳转路由

我们要从数据库取出题目内容,题目标题（problemcontent,problemname)。问题在于如何知道题目id（主键）
我们需要实现将第一个页面的题目id传到第二个页面，然后再用这个id去查到所有信息。所以必须实现带参跳转路由。
1.点击触发方法gotopro

2.带参跳转路由就是在router.push后面加上一个query参数，传递。

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

3.然后路由效果跳转如下：

3.2、渲染新页面

现在新页面已经接到了problemid。然后去后端接口/problem/getinfobyid查所有的题目信息，再赋值给前端变量：

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

效果如下：Name和content都加载出来了

3.3、打开靶机

我们的靶机路由是和problemid相关联的：

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

这样，点击网页链接（随便写的），就可以跳转到靶机页面。

下一次介绍靶机页面