当前位置：网站首页>山东大学软件学院项目实训-创新实训-网络安全靶场实验平台（五）

山东大学软件学院项目实训-创新实训-网络安全靶场实验平台（五）

2022-04-23 19:30:00 【番茄炒蛋不加蛋！】

一、header

二、footer

三、数据库的设计

3.1 表的设计

3.2 E-R图

一、header

header是页面的导航条，作为一个组件在每个页面中都有引用。

其外观如下图所示：

以下是导航条外观代码：

<template>
  <div class="menu">
    <el-row>
      <!-- logo部分 -->
      <el-col :span="2">
        <h3 @click="goto_home"  style="text-align: center">sducsrp</h3>
      </el-col>
      <!-- 按钮菜单部分 -->
      <el-col :span="15">
        <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>
      </el-col>
      <!-- 用户登录部分 -->
      <el-col :span="7">
        <div class="header-right">
          <div class="header-user-con">
            {
   {user.realname}}
            <el-button type="info" style="background-color: black; border-color: black; padding:0px; float: right" @click="goto_login">
              <i class="el-icon-finished" style="padding: 0px; margin: 0px"></i>  登录
            </el-button>
            <el-button type="info" style="background-color: black; border-color: black; padding:0px; float: right" @click="goto_register">
              注册
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider ></el-divider>
  </div>
</template>

script主要是实现页面跳转的功能，以及从网站保存的用户信息提取用户名到导航条。

<script>
import router from '../router/index.js'
export default {
  setup() {
    let goto_home=()=>{
      router.push('/');
    };
    let goto_login=()=>{
      router.push('/login');
    };
    let goto_register=()=>{
      router.push('/register');
    };
    let goto_honeypot=()=>{
      router.push('/honeypot')
    };
    let goto_cryptotool=()=>{
      router.push('/cryptotool')
    };
    let goto_forum=()=>{
      router.push('/forum')
    };
    let goto_management=()=>{
      router.push('/management')
    };
    return{
      goto_home,
      goto_login,
      goto_register,
      goto_honeypot,
      goto_cryptotool,
      goto_forum,
      goto_management
    }
  },
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  }
}
</script>

二、footer

在首页的页尾部分，有关于我们团队项目以及个人介绍

点击可打开相应的blog/gitee页面

具体代码如下：

<template>
  <el-row :gutter="10">
    <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
      <div class="grid-content bg-purple">
        <p>WEBSITE</p>
        <a class="aaa" href="https://gitee.com/cgchacker/SduCSRP">Project Code</a><br>
        <a class="aaa" href="https://blog.csdn.net/qq_50860232/category_11649911.html">BLOG</a><br>
      </div>
    </el-col>
    <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
      <div class="grid-content bg-purple">
        <el-divider direction="vertical"></el-divider>
      </div>
    </el-col>
    <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
      <div class="grid-content bg-purple">
        <p>CONTACT US</p>
        <a class="aaa" href="https://blog.csdn.net/qq_50860232">Ling Chen</a><br>
        <a class="aaa" href="https://blog.csdn.net/m0_52100140">Fan Zhijie</a><br>
        <a class="aaa" href="https://blog.csdn.net/m0_51588039">Qiao Jingbo</a><br>
        <a class="aaa" href="https://blog.csdn.net/m0_47470899">Li Hongwei</a><br>
        <a class="aaa" href="https://blog.csdn.net/weixin_50803761">Liu Jingyou</a><br>
      </div>
    </el-col>
    <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
</template>