Django+Vue+ElementUi 环境搭建 day1

Day1

📌前言

毕业设计的设想是做一个渗透测试系统，包含信息收集模块和漏洞扫描模块和插件模块，这都是老生常谈，有很多的类似系统，我的最终设想是做成一个 Web 版的 Goby。

这个系统将彻底杀死 web 渗透，他会将繁琐的手工测试取代，测试的内容涵盖所有可能存在的漏洞点，未来的测试人员只需要输入目标即可自动化完成渗透测试。

我觉得要将安全从业人员从繁琐的的手工测试中解脱出来是十分伟大而意义深远的事情。

着眼未来，将人力资源浪费在重复枯燥的渗透测试中是十分可惜的。

所以我决定做这件事，道阻且长，但我不会放弃。

我想使用 Django + Vue 开发成一个前后端分离的系统，顺带学习一下 Vue。

重复造轮子不可取，但我只是想把毕业设计做了的同时学习一下安全工具的开发，对于我来说，这是一件艰巨且充满挑战的任务。

每次完成任务都记录一下，方便下次开发的顺利进行。

🚥环境搭建

开发工具Vscode、Python=3.7.0、Django=3.2.13、nodejs=v14.18.1、npm=6.14.15、mysql（后期添加）

开发工具：VsCode

插件安装：中文汉化、Python、

下载链接：https://code.visualstudio.com/Download

安装教程：https://www.runoob.com/w3cnote/vscode-tutorial.html

开发语言：Python

创建虚拟环境：推荐 virtualenv

pip 安装 Django

下载链接：https://www.python.org/downloads/windows/

安装教程: https://www.runoob.com/python3/python3-install.html

框架：Django

下载链接：https://www.djangoproject.com/download/

安装教程：https://www.runoob.com/django/django-install.html

Node.js

下载链接：https://nodejs.org/en/download/

安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

数据库：mysql

下载链接：https://dev.mysql.com/downloads/mysql/

安装教程：https://www.runoob.com/mysql/mysql-tutorial.html

🔧一、Django

1.创建项目

django-admin startproject PentestWeb

2.数据库配置

安装完MySQL 建好数据库

cmd窗口登录MySQL：mysql -uroot -p

安装python的pymysql包：pip install pymysql

创建数据库：create DATABASE 数据库名称 DEFAULT CHARSET utf8;

配置数据库：在setting.py 查找 DATABASES

修改数据库连接信息:

 DATABASES = {

 'default': {

     # 'ENGINE': 'django.db.backends.sqlite3',

     # 'NAME': BASE_DIR / 'db.sqlite3',

     # 自定义数据库

​     'ENGINE': 'django.db.backends.mysql',  # 数据库引擎

​     'NAME': 'Django_ElementUI',  # 数据库名称

​     'HOST': '127.0.0.1',  # 数据库地址，本机 ip 地址 127.0.0.1

​     'PORT': 3306,  # 端口

​     'USER': 'root',  # 数据库用户名

​     'PASSWORD': '',  # 数据库密码

 }

 }

引入模块：在 init.py文件里增加：

import pymysql

pymysql.install_as_MySQLdb()

3.创建模型并且设计数据库表

python manage.py startapp InfoScan

创建好 app 之后，进入 models.py 文件，创建数据库类：

from django.db import models
class Student(models.Model):
 
    student_name = models.CharField(max_length=64)
 
    student_sex = models.CharField(max_length=3)
 
    create_time = models.DateTimeField(auto_now_add=True)
 
    def __str__(self):
 
        return self.student_name,self.id

4.注册app

在INSTALLED_APPS中 添加’InfoScan’:

INSTALLED_APPS = [
    'InfoScan',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

5.生成数据库迁移文件

python manage.py migrate
python manage.py makemigrations

6.创建视图处理函数

作为接口 给前端调用

# Create your views here.
 
from __future__ import unicode_literals
import json
from django.core import serializers
from django.http import JsonResponse
from django.shortcuts import render
from django.views.decorators.http import require_http_methods
from myApp.models import Student

#创建view
 
#add_student 接受一个get请求 网数据里添加一条student 数据
 
@require_http_methods(["GET"])
 
def add_student(request):
    response = {}
 
    try:
 
        student = Student(student_name=request.GET.get('student_name'))
 
        student.save()
 
        response['msg']="success"
 
        response['error_num']=0
 
    except Exception as e:
 
            response['msg'] = str(e)
 
            response['error_num'] = 1
 
    return JsonResponse(response)
 
# show_students返回所有的学生列表（通过JsonResponse返回能被前端识别的json格式数据）
 
@require_http_methods(["GET"])
 
def show_students(request):
    response = {}
    try:
        students = Student.objects.filter()
        response['list'] = json.loads(serializers.serialize("json", students))
        response['msg'] = 'success'
        response['error_num'] = 0
    except Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1
    return JsonResponse(response)

7.配置路由

InfoScan app 下面新增 urls.py 文件

创建分支路由，把新增的两个视图函数放进来

from django.conf.urls import url
from . import views

urlpatterns = [
    url('add_student/',views.add_student),
    url('show_students/',views.show_students),

]

将分支路由加到项目文件夹下的主路由中urls.py

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView
from django.conf.urls import include
from InfoScan import urls

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(urls)),
    path('', TemplateView.as_view(template_name='index.html')),
]

🔧二、Vue

1.安装脚手架

npm install -g vue-cli

2.新建前端工程项目

vue-init webpack ptvue

https://www.jianshu.com/p/9f1bb706311a

3.安装依赖包

cd ptvue
npm install
# 尝试一下是否可以运行
npm dev	

4.安装ElementUI

cd ptvue
npm i element-ui -S
# 如果提示缺失依赖，安装就好了
npm install -g core-js@3.1.1


--save 安装依赖到 mode_modules 目录下,写入dependencies节点, npm install 时下载该依赖,一般安装生成环境所用依赖, 如 vue, element-ui, echarts…
-g 全局安装,不在 mode_modules 目录下,不写入节点, npm install 时不下载该依赖.

5.创建vue页面

在src/component下，新建组件Student.vue

调用之前在Django项目里的api实现相应的功能

<template>
 
  <div class="home">
 
    <el-row display="margin-top:10px">
 
        <el-input v-model="input" placeholder="请输入学生姓名" style="display:inline-table; width: 30%; float:left"></el-input>
 
        <el-button type="primary" @click="addStudent()" style="float:left; margin: 2px;">新增</el-button>
 
    </el-row>
 
    <el-row>
 
        <el-table :data="studentList" style="width: 100%" border>
 
          <el-table-column prop="id" label="编号" min-width="100">
 
            <template slot-scope="scope"> {{ scope.row.pk }} </template>
 
          </el-table-column>
 
          <el-table-column prop="student_name" label="姓名" min-width="100">
 
            <template slot-scope="scope"> {{ scope.row.fields.student_name }} </template>
 
          </el-table-column>
 
          <el-table-column prop="student_sex" label="性别" min-width="100">
 
            <template slot-scope="scope"> {{ scope.row.fields.student_sex }} </template>
 
          </el-table-column>
 
          <el-table-column prop="add_time" label="添加时间" min-width="100">
 
            <template slot-scope="scope"> {{ scope.row.fields.create_time }} </template>
 
          </el-table-column>
 
        </el-table>
 
    </el-row>
 
  </div>
 
</template>
 
 
 
<script>
 
export default {
 
  name: 'Student',
 
  data () {
 
    return {
 
      input: '',
 
      studentList: []
 
    }
 
  },
 
  mounted: function () {
 
    this.showStudents()
 
  },
 
  methods: {
 
    addStudent () {
 
      this.$http.get('http://127.0.0.1:8000/api/add_student?student_name=' + this.input)
 
        .then((response) => {
 
          var res = JSON.parse(response.bodyText)
 
          if (res.error_num === 0) {
 
            this.showStudents()
 
          } else {
 
            this.$message.error('新增学生失败，请重试')
 
            console.log(res['msg'])
 
          }
 
        })
 
    },
 
    showStudents () {
 
      this.$http.get('http://127.0.0.1:8000/api/show_students')
 
        .then((response) => {
 
          var res = JSON.parse(response.bodyText)
 
          console.log(res)
 
          if (res.error_num === 0) {
 
            this.studentList = res['list']
 
            console.log(this.studentList)
 
          } else {
 
            this.$message.error('查询学生失败')
 
            console.log(res['msg'])
 
          }
 
        })
 
    }
 
  }
 
}
 
 
 
</script>
 
 
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
 
<style scoped>
 
h1, h2 {
 
  font-weight: normal;
 
}
 
ul {
 
  list-style-type: none;
 
  padding: 0;
 
}
 
li {
 
  display: inline-block;
 
  margin: 0 10px;
 
}
 
a {
 
  color: #42b983;
 
}
 
</style>

6.配置路由

ptvue/router文件夹下的index.js中增加页面路由:

import HelloWorld from '@/components/HelloWorld'
 
import Student from '@/components/Student'
 
import Vue from 'vue'
 
import Router from 'vue-router'
 
 
 
Vue.use(Router)
 
export default new Router({
 
    routes: [{
 
                path: '/HelloWorld',
 
                name: 'HelloWorld',
 
                component: HelloWorld
 
            },
 
            {
 
                path: '/student',
 
                name: 'Student',
 
                component: Student
 
            }
 
        ]
 
        // eslint-disable-next-line eol-last
 
})

ptvue文件夹下的main.js中引入ElementUI并注册:

// The Vue build version to load with the `import` command
 
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 
import 'default-passive-events'
 
import ElementUI from 'element-ui'
 
import Vue from 'vue'
 
// 引入vue-resource
 
import VueResource from 'vue-resource'
 
// 注册ElementUI组件
 
import '../node_modules/element-ui/lib/theme-chalk/index.css'
 
import App from './App'
 
import router from './router'
 
Vue.config.productionTip = false
 
 
 
// 注册ElementUI组件
 
Vue.use(ElementUI)
 
// 注册VueResource
 
Vue.use(VueResource)
 
 
 
/* eslint-disable no-new */
 
new Vue({
 
    el: '#app',
 
    router,
 
    components: { App },
 
    template: '<App/>'
 
        // eslint-disable-next-line eol-last
 
})

🔗三、整合

1.前端vue项目调用后端引入vue-resource

npm install vue-resource --save

2.解决跨域问题

在Django层注入header，安装django-cors-headers：

python -m pip install django-cors-headers

修改 settings.py:

INSTALLED_APPS = [
    'InfoScan',
    'corsheaders',              # 解决跨域
    'django.contrib.admin',
    ...
]

在MIDDLEWARE_CLASSES添加 ‘corsheaders.middleware.CorsMiddleware’， 同时把csrf的中间件注释掉

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'corsheaders.middleware.CorsMiddleware',                    # 解决跨域
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

继续添加如下代码：

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True

3.增加Django路由

修改settings.py,指向vue项目下的静态资源 dist：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['Ptvue/dist'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                ...
            ],
        },
    },
]

继续添加静态文件路径：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'Ptvue/dist/static')
]

4.重新打包和运行项目

npm run build
python manage.py runserver

💡四、参考链接

https://www.jb51.net/article/167473.htm

https://blog.csdn.net/weixin_42557538/article/details/121017085

https://blog.csdn.net/qq_40722582/article/details/113826647