山大网安靶场实验平台项目—个人记录（三）

系列文章专栏地址:

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

---

本期内容：

• 数据库分析与设计（上）
• 前端组件修改
• 前端管理系统开发
• 管理系统的后端编写（上）

---

数据库分析与设计（上）

在上一期，我们完成了简单的后端搭建，并实现了登录。
现在我们需要设计部分系统的数据库，以便后续的工作开展。有些功能还没构思完，所以尽量设计一些独立或者通用的表
数据库设计需要考虑的：1.数据与实体之间的关系 2.主键与外键 3.范式标准：基本表及其字段之间的关系, 应尽量满足第三范式。但是，满足第三范式的数据库设计，往往不是最好的设计。

E-R图就不画了

从需求分析入手。 见山东大学网络安全靶场实验平台——团队进度（一）

首先定义一个User表
属性：userid, username, password, realname, phone, role
userid是主键，自增。而username是用户自己注册使用一般是学号，也可以是别的什么数字（比如老师没有学号，外来人员等等），password不必多说。realname是真实姓名，可以用于教学实名，phone随便加的。role是确定角色，1代表学生，2代表老师。

接着，我们定义problem表
考虑实际场景，每道靶场题目都是网络攻防习题的形式，类似ctf。
我们需要存储problemid和问题地址（待定），题目类型kind，题目答案flag

这里的url和kind待定后面也许需要修改，但可以确定的是problemid作为主键标识题目，同时flag作为答案也存储起来。

定义stuproblem表
用来记录学生做了哪些题，以及相应的时间，userid和problemid作为主键，意味着一个人完成了一道题只会记录一次，考虑到教学需要，我们只记录第一次完成时间，后面的就不记录了，这部分将在后端实现。

定义course表
每一个courseid对应一个Teacherid，一个老师可以教多门课，表的结构如下：

定义stucourse表
用以存储学生选课信息，注意的是courseid和userid共同构成了主键

---

前端组件修改：

上一次我们添加了登良注册功能，这次我们要添加课程管理界面，为老师提供增删课程，查看学生信息，做题进度等。所以需要修改header组件，扩充目录el-menu内容：

        <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#000"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
        >
          <el-menu-item index="1" @click="goto_honeypot"> 靶场 </el-menu-item>
          <el-menu-item index="2" @click="goto_cryptotool">密码工具</el-menu-item>
          <el-menu-item index="3" @click="goto_forum">论坛</el-menu-item>
          <el-menu-item index="3" @click="goto_management">课程管理</el-menu-item>
        </el-menu>

然后在header右侧再加上登录注册按键，最后成果如下：

写上对应的click方法，和路由就完事了。

---

管理系统前端开发

这个界面是面向老师的，老师可以查看自己每个课程的学生信息，包括靶场题目完成进度，然后可以将学生成绩导出，也可以进行一些增删查操作。

实现后的界面如下：

首先定义一个输入框和搜素按钮
然后是设置若干卡片，卡片的数量要由后端去查询得到（老师授课数目）
卡片左上是课程的名称，卡片右上是四个按钮。
卡片中间是一个表格，下面是分页组件。

    <el-card v-for="(courseid, index) in courselist" :key="index" style="padding:5px; margin:20px;">
<!--      按钮-->
      <div class="btngroup" style="width: 100%;">
        <span style="float: left">
          {{courseid.coursename}}
        </span>
        <span style="float: right; margin-bottom:5px">
          <el-button type="info" @click="add">添加学生</el-button>
          <el-button type="info" @click="showQRcode">邀请二维码</el-button>
          <el-button type="info" @click="download">导出成绩</el-button>
          <el-button type="info" @click="Dissolve">解散班级</el-button>
        </span>
      </div>
<!--      卡片表格-->
      <div>
        <el-table :data="tableData" border="true" style="width: 100%;">
          <el-table-column prop="username" label="学号" width="180" />
          <el-table-column prop="realname" label="姓名" width="180" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="AC" label="靶场完成度" />
          <el-table-column  label="操作" width="180">
            <template #default>
              <el-button  @click="handleClick">详情</el-button>
              <el-button @click="deletethis">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            v-model:currentPage="currentPage"
            :page-size="pageSize"
            :disabled="disabled"
            :background="background"
            layout="total, prev, pager, next"
            :total="totalpage"
            @size-change="handleSizeChange"
            @current-change="load"
            style="padding-top: 20px"
        />
      </div>
    </el-card>

点击邀请二维码，弹出二维码，但目前未实现

点击添加学生，弹出一个dialog

不过内容其实有待商榷，因为老师不一定知道学生的真实姓名。密码应当有默认密码，不过这个暂且如此，去开发一下后端。

---

管理系统后端开发（上）

1.新增学生
前端使用了post方法，在click之后把表单信息传到后端/user/save端口

save(){
      request.post("/user/save",this.form).then(res =>{
        console.log(res);
      })
      alert("save");
      this.load();
    }

controller方法

 @PostMapping("/save")
    public Result save(@RequestBody User user){
        if(user.getPassword()==null){
            user.setPassword("123456");//设置默认密码
        }
        userMapper.insert(user);
        return Result.success();
    }

Usermapper继承了 BaseMapper的方法，所以可以插入数据库。

2.显示学生信息和分页查找功能
前端定义方法load，在页面一打开时就加载（即在created方法里调用）。request.get获取信息

load(){
      request.get("/user/page",{
        params:{
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search
        }
      }).then(res =>{
        console.log(res)
        this.tableData=res.data.records
        this.totalpage=res.data.total
      })
    },

把当前的分页信息，和搜索栏信息传入后端，当前页数默认为1，每一页的大小默认为5，搜索栏默认为空。

    @GetMapping("/page")
    public Result findpage(@RequestParam(defaultValue = "1") Integer pageNum,
                           @RequestParam(defaultValue = "5")  Integer pageSize,
                           @RequestParam(defaultValue = "")  String search){
//        Page<Object> page= new Page<>(pageNum,pageSize);
        Page<User> userPage=userMapper.selectPage(new Page<>(pageNum,pageSize), Wrappers.<User>lambdaQuery().like(User::getUsername,search));
        return Result.success(userPage);
    }

测试结果

可以看到信息的data属性的records属性返回了表单内容。
所以我们将.data.records赋值给表单。最后就能加载了。

测试一下搜索：

完成