后端篇
一。虚拟环境弄好
1、新建DTestPlatform文件夹? cd 到对应目录，
2、
python -m venv 虚拟环境名
3、输入命令cd Scripts，进入名为Scripts的文件夹
4、输入命令activate.bat 激活虚拟环境
1.新建项目(安装Django组件)
??? 新建Django项目，到指定的文件夹 DTestPlatform，选择虚拟环境来源指定为DTestPlatform中的python
??? 运行 Tools-manage.py
2.新建应用:
??? pycharm-Tools-manage.py 命令行中? 输入 startapp 应用名称，也可以新建项目的时候更多设置中指定
??? 或命令行
django-admin.py startapp aip_test
??? 修改项目配置文件,到settings.py里，
??????? 1.INSTALLED_APPS中，添加创建的应用名称
??????? 2.找到数据库的配置信息，DATABASES，默认是sqlite，全部删掉并替换为想要的数据库配置
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'aip_test_mysql',
'HOST': '127.0.0.1',
'PORT': 3306,
'USER': 'root', # 分别是数据库的用户名和密码
'PASSWORD': 'mysql',
??????? 3.安装pymysql
pip install pymysql
??????? 4.设置数据库驱动默认为pymysql??? 在应用的的 __init__.py? 文件中添加
?
import pymysql
pymysql.install_as_MySQLdb()3.在应用中设计数据库models
??? 1.到新建的应用里面，在models里面，添加数据库的设计类，代码如下
?
class Module(models.Model):
"""
功能模块数据表的设计
"""
# CharField 是告诉对应数据库的数据是什么类型的，unique是不能重复
name = models.CharField(verbose_name='模块名称', max_length=45, unique=True)
sequence = models.IntegerField(verbose_name='显示顺序', default=0)
class Meta:
# 按照sequence来排序
ordering = ['sequence']
# 默认是 应用名称_module，通过它修改表名
db_table = 'Model'
class Api(models.Model):
"""
接口表
"""
name = models.CharField(verbose_name='接口名称', max_length=45)
method = models.CharField(verbose_name='请求方式', max_length=45, default='GET')
protocol = models.CharField(verbose_name='接口协议', max_length=10, default='HTTP')
url = models.CharField(verbose_name='接口地址', max_length=256, default='')
# 个数具有不确定性，采用json，默认字典自动会转json，body允许为空
params = models.JSONField(verbose_name='查询参数', max_length=256, default=dict)
header = models.JSONField(verbose_name='请求头信息', max_length=256, default=dict)
body = models.JSONField(verbose_name='表单字段及描述信息', max_length=1024, null=True)
types = (
('none', 'none'), ('multipart/form-date', 'multipart/form-data'),
('x-www-form-urlencoded', 'x-www-form-urlencoded'), ('application/json', 'application/json'),
('binary', 'binary'))
# post 请求有几种类型格式，会根据请求方式，消息体类型不一样，加个字段去存储它，choices代表它的值来自到types里选的值。
bodytype = models.CharField(verbose_name='消息体类型', max_length=30, choices=types, default='GET')
status = models.CharField(verbose_name='几口状态', max_length=4, choices=(
('1', '启用'), ('2', '禁用'), ('3', '废弃')), default='启用')
# auto_now_add 这个字段的值会自动生存，不需要我们插入
createtime = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)
updatetime = models.DateTimeField(verbose_name='更新时间')
isbase = models.CharField(verbose_name='是否基线化', max_length=4, choices=(('1', '是'), ('2', '否')), default='否')
# 接口隶属于某个模块，模块表里的模块id号，模块表的主键在Api这个表里面叫外键，所以将外键这一列和Module有关联
# 这里的意思是ForeignKey这一列的值来自于上面设计的Module这个模块表，最好变量名一样，只是小写，好操作
module = models.ForeignKey(verbose_name='所属模块', on_delete=models.CASCADE, to=Module)??? 2.创建数据库，用mysql命令行工具，
create database AipTest_mysql;??? 3.迁移数据库，制作迁移文件，在pycharm-Tools-manage.py 命令行中输入
makemigrations AipTest
??????? 或者 命令行 进入到项目目录
?
python manage.py makemigrations AipTest # 让 Django 知道我们在我们的模型有一些变更，同步修改迁移数据库
python manage.py migrate AipTest # 创建表结构
4.实现数据库增删改查：
??? 1.自己写
??????? 数据库底层操作
??????? 业务逻辑
??? 2.借助于框架生成
资源--核心，一切皆是资源
??? 模块表--资源--取名叫做module
??? 增删改查
??? 借助http协议，完成对数据库资源的增删改查
?? 如下访问的是数据路module表中的数据，module/3/代表module表中主键id为3的这条数据
??? http：192.168.1.105/module
??? 添加
??????? http：192.168.1.105/module
??????? 请求数据：json
??????? 请求方法：post
??? 修改? 修改3中的数据
??????? http：192.168.1.105/module/3/
??????? 请求数据：json
??????? 请求方法：put
??? 删除
??????? http：192.168.1.105/module/3/
??????? 请求方法：delete
??? 查询
??????? http：192.168.1.105/module/3/
??????? 请求方法：get
5.安装djangorestframework，设计视图层
??
pip install djangorestframework
?? 1）设计Views, 到views.py里面去设计
# from django.shortcuts import render
from rest_framework import viewsets
from ApiTest import models, serializer
# Create your views here.
class Moduleview(viewsets.ModelViewSet):
# 把设计的models数据都导入进来绑定，告诉views，要访问的视图、表、数据库是哪个
queryset = models.Module.objects.all()
# 写序列化和反序列化，用哪个序列化类来序列化，这里用自个写的序列化类
serializer_class = serializer.ModuleSerializer
class Apiview(viewsets.ModelViewSet):
# 把设计的models数据都导入进来绑定，告诉views，要访问的视图、表、数据库是哪个
queryset = models.Api.objects.all()
# 写序列化和反序列化，用哪个序列化类来序列化，这里用自个写的序列化类
serializer_class = serializer.ApiSerializer??? 2.数据格式的转换，设计序列化和反序列化的类
??? 前端? 发出的数据: 如
??? {"username":"pip_test", "password":"123456"}
??? 转换成这种格式，序列化和反序列化
??? insert into user(username, password) values("pip_test", "123456")
??? 后台? 数据库端发送到前端：
??? select * from user;
??? 转换成json数据
??? {"username":"pip_test", "password":"123456"}
?? 3.实现序列化，ApiTest中 新建 serializer.py 文件，继承serializers.ModelSerializer
??? 告诉 用 models.Module 来序列化
from rest_framework import serializers
from ApiTest import models
class ModuleSerializer(serializers.ModelSerializer):
"""
Module数据库 的序列化，继承它的话增删改查都有了
"""
# 表述元数据
class Meta:
# 告诉它你想序列化个表，你想序列化表里的哪些字段
model = models.Module
# 序列化所有字段
fields = '__all__'
class ApiSerializer(serializers.ModelSerializer):
"""
Api数据库 的序列化，继承它的话增删改查都有了
"""
# 表述元数据
class Meta:
# 告诉它你想序列化个表，你想序列化表里的哪些字段
model = models.Api
# 序列化所有字段
fields = '__all__'4. 路由层，设计路由规则，让用户输入地址后，能到目标视图，告诉框架这个地址是访问的哪个地方
??? 实现路由，在框架urls里面，设置一切路由交给ApiTest中的urls路由去处理
??? 创建子路由，设置父路由
from django.contrib import admin
from django.urls import path, include
from django.conf.urls import url
from ApiTest import views
from rest_framework import routers
# # 创建一个路由对象，这是子路由
router = routers.DefaultRouter()
# # 注册一个路由，如果用户输入192.168.1.105/module/，就交给views.Moduleview 来处理
router.register('module', views.Moduleview)
router.register('Api', views.Apiview)
# 上层路由，父路由
urlpatterns = [
# 当客户发出了请求为192.168.1.105/aip/，就交给router.urls去处理
# path('aip', include(router.urls)),
# 这样就不用父路由，只用上面的子路由 访问
path('', include(router.urls))
]
5.启动服务 python manage.py runserver
在如apiPst工具中测试
??? post http://127.0.0.1:8000/module/
??????? Body raw 选json，输入json，发起请求，就能在module表中增加数据
??????? {
??????????? "name" : "api_test0003",
??????????? "sequence" : 3
??????? }
??? delete http://127.0.0.1:8000/module/3，就能在module表中删除 第3条数据
6、解决跨域请求问题
1.安装django-cors-headers
pip3 install django-cors-headers2.配置settings.py文件
INSTALLED_APPS = [
...
'corsheaders'，
...
]
# Django3.x以后是MIDDLEWARE，在这上面添加一行，顺序不能有错
MIDDLEWARE_CLASSES = (
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware', # 注意顺序
...
)
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
# CORS_ORIGIN_WHITELIST = (
# '*'
# )
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)前端篇
1、测试开发场景架构及平台
??? 前后端分离:
??????? 前端:Vue--JavaScript
??????? 后端：Python/Java
??? 平台：目标--服务于测试
2、前端核心技术
??? HTML
??????? html标签--内容战士
??????? js--增强脚本
??????? css--美化页面
3、搭建vue开发环境
??? 1）安装nodejs
??????? https://nodejs.org/en/download/
??? 2）安装cnpm：打开命令行
??????? npm install -g cnpm --registry-https://registry.npm.taobao.org
??? 3）搭建vue的开发环境，安装vue的脚手架工具，官方命令行工具
??????? cnpm install --global vue-cli(此命令只需执行一次)
??? 4）创建项目并运行，在项目目录下执行如下命令，publicfronted是项目名
??????? cd /d F:\PycharmProjects
??????? vue init webpack DTestPlatformWeb?????? 创建一个vue项目
?? ?Target directory exists. Continue? Yes
? ??? ? Project?????? dtest_platform_web
?? ?Project description?? 项目说明
?? ?等一段时间
?? ?Install vue-router? Yes
?? ?Use ESLint to lint your code? (Y/n)??? 代码规范
?? ?Set up unit tests (Y/n)? 设置单元测试
4、安装依赖组件
??? 1）npm i install axios -S
??? 2）npm i element-ui -S
??? 3）npm i js-cookie -S
??? 4）npm i install vuex -S
5. Element 引用
main.js中，加入
import ElementUI from 'element-ui'
Vue.use(ElementUI)6.路由设置，src/router里面设置路由跳转
import Test from '../components/Test'
routes: [
{
// 当用户输入/，就打开 components/中的HelloWorld.vue
path: '/hello',
name: 'HelloWorld',
component: HelloWorld
},
{
// 当用户输入/login，就打开 components/Test.vue
path: '/',
name: 'Test',
component: Test
}]7.运行流畅解析
? Vue组件化开发模式
? 1）入口界面：index.html--》? ，它先展示的是App.vue
??? src文件夹中的 main.js(完成所有的组件初始化，开始的地方)
????? 创建一个vue对象，并挂载一个根组件
??? vue组件：
????? 扩展名 .vue
????? 组件内容：
??????? 三部分内容组成：
????????? 模板：html网页：
??????????? <template>
????????????? <div id='test_platfrom'>
??????????????? <p>{{message}}</p>
??????????????? <input type='button' @click='clickme'>嘿嘿</p>
????????????? </div>
??????????? <template>
????????? 模型：javaScript脚本
??????????? 数据 message=‘你好’
??????????? 方法 clickme()
??????????????? 自定义方法
??????????????? 内置的钩子子函数
????????? 样式：
????????????? <style>
??????????????? #api_test {color:red}
????????????? </style>
8.启动开发环境下的web服务
启动开发环境下的web服务
npm run dev
启动web服务
npm run serve
编译
npm run build前后端通信
安装环境
npm install --save axios1、src文件夹下创建utils文件夹，完成后台请求对象
创建http.js和request.js
2、http.js中完成请求方法的定义
import request from "./request"
export function get(url, params={}) {
return request.get(url, {params: params})
}
export function post(url, data={}) {
return request.post(url, data)
}
export function put(url, data={}) {
return request.put(url, data)
}
export function patch(url, data={}) {
return request.patch(url, data)
}
export function del(url, data={}) {
return request.delete(url, data)
}3、request.js中完成创建一个可以访问后端接口的对象
// 核心组件 axios 通过它完成后台请求，restframework 和 java的 spring boot等
import axios from "axios";
// 通过这个一个js对象，来创建一个名字为service 能访问后端接口的对象
const service = axios.create(
{
baseURL:'http://127.0.0.1:8000', // url = baseUrl + 请求路径
timeout:25000,
// 凭证
withCredentials:true
}
)
// 拦截器封装，
export default service4、src文件夹main.js中完成接口请求方法挂载给Vue
import {get, post, put, patch, del} from './utils/http'
//把http中的方法，挂载给Vue的原型去处理，这里的Vue相当于下面的new Vue
Vue.prototype.$get = get
Vue.prototype.$post = post
Vue.prototype.$put = put
Vue.prototype.$patch = patch
Vue.prototype.$del = del
5、.Vue中的<script>部分，定义的方法中，可以通过this.$get()等调用这些方法
methods:{
??? clickme(){
????? //这里调用的get，就是main.js里面挂载的get方法，这里的this，就是指main.js里的new Vue
????? this.$get()
前端例子，ModuleView.vue
<template>
<!-- :data 冒号代表 双向绑定，数据绑定script中定义的data方法中返回的 tableData的值 -->
<el-table
:data="mdate"
:stripe="true"
style="width: 100%">
<el-table-column
prop="id"
label="编号"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="模块名称"
width="180">
</el-table-column>
<el-table-column
prop="sequence"
label="顺序编号">
</el-table-column>
</el-table>
</template>
<script>
export default {
data () {
return {
mdate: []
}
},
mounted () {
// this.$post('/module/', {'name': 'api5', 'sequence': 5}).then(res => {
// console.log(res.statusText)
// })
// this.$put('/module/3/', {'name': 'api3', 'sequence': 3}).then(res => {
//
// })
this.$get('/module/').then(res => {
this.mdate = res.data
})
}
}
</script>
<style scoped>
</style>
部署篇
Nginx 安装
系统平台：CentOS 7 64位。如下链接任意下载
一、安装编译工具及库文件
yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel二、首先要安装 PCRE
PCRE 作用是让 Nginx 支持 Rewrite 功能。
1、下载 PCRE 安装包，先输入su 和root密码进入root模式
[root@bogon src]# cd /usr/local/src/
[root@bogon src]# wget http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz
2、解压安装包:
[root@bogon src]# tar zxvf pcre-8.35.tar.gz3、进入安装包目录
[root@bogon src]# cd pcre-8.354、编译安装?
[root@bogon pcre-8.35]# ./configure
[root@bogon pcre-8.35]# make && make install安装 Nginx
1、下载 Nginx，并解压，下载地址：nginx: download
[root@bogon src]# cd /usr/local/src/
[root@bogon src]# wget http://nginx.org/download/nginx-1.6.2.tar.gz
[root@bogon src]# tar zxvf nginx-1.6.2.tar.gz2、进入安装包目录，编译安装
[root@bogon src]# cd nginx-1.6.2
[root@bogon nginx-1.6.2]# ./configure --prefix=/usr/local/webserver/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/src/pcre-8.35
[root@bogon nginx-1.6.2]# make
[root@bogon nginx-1.6.2]# make install到此，nginx安装完成。
Nginx 配置
创建 Nginx 运行使用的用户 www：
[root@bogon conf]# /usr/sbin/groupadd www
[root@bogon conf]# /usr/sbin/useradd -g www www配置nginx.conf ，将/usr/local/webserver/nginx/conf/nginx.conf替换为以下内容。为了方便权限，
先复制文件到另一个目录， cp? -a? /usr/local/webserver/nginx/conf/nginx.conf? 目标文件夹。
再到目标文件夹修改好，然后再复制到cp? -i? 目标文件夹/nginx.conf /usr/local/webserver/nginx/conf/nginx.conf?
user www www;
worker_processes 2; #设置值和CPU核心数一致
error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; #日志位置和日志级别
pid /usr/local/webserver/nginx/nginx.pid;
#Specifies the value for maximum file descriptors that can be opened by this process.
worker_rlimit_nofile 65535;
events
{
use epoll;
worker_connections 65535;
}
http
{
include mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" $http_x_forwarded_for';
#charset gb2312;
server_names_hash_bucket_size 128;
client_header_buffer_size 32k;
large_client_header_buffers 4 32k;
client_max_body_size 8m;
sendfile on;
tcp_nopush on;
keepalive_timeout 60;
tcp_nodelay on;
fastcgi_connect_timeout 300;
fastcgi_send_timeout 300;
fastcgi_read_timeout 300;
fastcgi_buffer_size 64k;
fastcgi_buffers 4 64k;
fastcgi_busy_buffers_size 128k;
fastcgi_temp_file_write_size 128k;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
#limit_zone crawler $binary_remote_addr 10m;
#下面是server虚拟主机的配置
server
{
listen 8088;#监听端口
server_name localhost;#域名
index index.html index.htm index.php;
root /usr/local/webserver/nginx/html;#站点目录
location ~ .*\.(php|php5)?$
{
#fastcgi_pass unix:/tmp/php-cgi.sock;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fastcgi.conf;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
{
expires 30d;
# access_log off;
}
location ~ .*\.(js|css)?$
{
expires 15d;
# access_log off;
}
access_log off;
}
}检查配置文件nginx.conf的正确性命令：
[root@bogon conf]# /usr/local/webserver/nginx/sbin/nginx -t
?启动nginx
[root@bogon conf]# /usr/local/webserver/nginx/sbin/nginx查看nginx启动情况，有www说明启动成功
ps -ef | grep nginx
?
问题：无法启动nginx，或有异常，先退出命令行，重新打开启动
打开127.0.0.1看到
welcome to nginx的页面说明成功了
Nginx 其他命令
以下包含了 Nginx 常用的几个命令：
/usr/local/webserver/nginx/sbi
目录
n/nginx -s reload # 重新载入配置文件 /usr/local/webserver/nginx/sbin/nginx -s reopen # 重启 Nginx /usr/local/webserver/nginx/sbin/nginx -s stop # 停止 Nginx