目录

前言

一、项目介绍

二、项目框架

三、个人分工

四、本周任务完成情况

4.1  Vue安装

4.1.1 node.js安装及配置

4.1.2 安装vue及脚手架

4.1.3 运行Vue项目

4.2 Vue集成ElementUI 

4.3 Vue学习

4.4 界面展示

参考资料

---

前言

本专栏文章是山东大学软件学院大三下项目实训课程的个人工作记录。

一、项目介绍

鉴于学院网安工科实验班缺少专门的实验平台用于教学和日常学习检验成果。本小组旨在搭建一个集渗透测试靶场、密码加解密、漏洞复现的平台，为同学们提供一个练习网安技术的场地，同时也能作为学院的实验平台给相关课程的教学提供检验学习成果的平台乃至改进授课模式。

目前一些开源的攻防实验平台，考虑到常见漏洞的设置，为了避免网络上的恶意黑客真的攻击该漏洞平台导致服务器瘫痪等后果，故几乎只能搭建在本地。因本项目需要真实的用户注册以及使用，项目组决定使用DOCKER容器，将该试验平台部署到容器中，与真实的服务器隔离开，保证了平台以及服务器的安全问题。

依托于购买的阿里云服务器，搭建一个基于web界面的平台并部署到服务器上。在此平台上，搭建两个模块，即攻防实验平台和文件加解密工具。攻防实验平台提供SQL注入、XSS攻击……等基础常见漏洞的练习环境，文件加解密工具利用常用加密算法，如RSA、DES、AES等，提供文本文件或者字符串的加解密工具。

二、项目框架

三、个人分工

根据上述框架，经过小组讨论后，本人主要负责网页平台前端、后端，以及部分漏洞模块。

Web平台的搭建使用Vue+springboot框架。

四、本周任务完成情况

本周主要学习了Vue的相关知识，简单写了部分前端界面。

4.1  Vue安装

4.1.1 node.js安装及配置

1.安装

官网下载最新版本：https://nodejs.org/en/download/
可以下载安装包（安装教程见：https://www.runoob.com/nodejs/nodejs-install-setup.html）
或者下载zip文件找个目录保存，解压下载的文件，然后配置环境变量，将解压文件所在的路径配置到环境变量中。

由于Node.js 中默认安装了 npm，所以不用额外配置就能在全局命令中使用 npm命令，在cmd中测试一下是否安装成功了：输入 node -v 与 npm –v分别查看版本信息。

 2.配置

系统变量下的Path添加上node的路径        D:\xx\nodejs\

用户变量下的Path添加上        D:\xx\nodejs\node_global        D:\xx\nodejs\node_cache，这是nodejs默认的模块调用路径。

4.1.2 安装vue及脚手架

我用的是vscode，所以在vscode中新建终端，输入

npm install -g @vue/cli  进行安装

4.1.3 运行Vue项目

上述安装完成后，新建Vue项目

在终端输入    vue create 项目名    即可新建项目

之后输入     npm run serve 即可运行

4.2 Vue集成ElementUI 

element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。链接：一个 Vue 3 UI 框架 | Element Plus

安装命令：vue add element-plus

4.3 Vue学习

目录结构：

• node_modules：存放库文件
• public：存放配置文件
• src里面有7个部分：
  assets：放静态资源，比如图片
  components：放各种组件
  router：配置路由
  store ：仓库
  views ：放各种页面
  app.vue：是主组件，是页面入口文件，是vue页面资源的首加载项。
  main.js：是配置文件

4.4 界面展示

整个网站主要分为靶场、密码工具、论坛三部分。

首页： 

靶场：

论坛：

参考资料

Vue安装及环境配置、开发工具