Catalog

One 、header

Two 、footer

3、 ... and 、 Database design

3.1 Table design

3.2 E-R chart

---

One 、header

header Is the navigation bar of the page , As a component, there are references in every page .

Its appearance is shown in the figure below ：

  The following is the appearance code of the navigation bar ：

<template>
  <div class="menu">
    <el-row>
      <!-- logo part  -->
      <el-col :span="2">
        <h3 @click="goto_home"  style="text-align: center">sducsrp</h3>
      </el-col>
      <!--  Button menu section  -->
      <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">  shooting range  </el-menu-item>
          <el-menu-item index="2" @click="goto_cryptotool"> Password tool </el-menu-item>
          <el-menu-item index="3" @click="goto_forum"> Forum </el-menu-item>
          <el-menu-item index="3" @click="goto_management"> Course management </el-menu-item>
        </el-menu>
      </el-col>
      <!--  User login section  -->
      <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>   Sign in 
            </el-button>
            <el-button type="info" style="background-color: black; border-color: black; padding:0px; float: right" @click="goto_register">
               register 
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider ></el-divider>
  </div>
</template>

script It mainly realizes the function of page Jump , And from   The user information saved in the website extracts the user name to the navigation bar .

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

Two 、footer

At the end of the first page , About our team project and personal introduction

Click to open the corresponding blog/gitee page

  The specific code is as follows ：

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

3、 ... and 、 Database design

3.1 Table design

at present , The database mainly has the following tables ：

The design of the main entity table is as follows ：

● user User table

● problem Range title table

● forum Forum information table

● course The curriculum

3.2 E-R chart

E-R The preliminary design of the drawing is as follows ：