1. Johngo学长首页
  2. 技术点详细复盘专题
  3. Python

【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）

• Python • 阅读 51

一、整体内容介绍
1、测试工具平台功能介绍
使用前后端分离的形式，前端使用vue2.0框架，后端使用python flask框架，数据库使用mysql（使用SQLAlchmy框架操作数据库）
vue介绍，flask介绍，SQLAlchmy介绍，抓接口介绍，其他设想（Jenkins自动部署集成），目前技术使用，学习路线。。。
1.1、web开发的演变模式
前后端不分离：后端需要返回前端代码，给到前端渲染

在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。
这种应用模式比较适合纯网页应用，但是当后端对接App时，App可能并不需要后端返回一个HTML网页，而仅仅时数据本身，所以后端原本返回网页的接口不再适用于前端App应用，为了对接App，后端还需要再开发一套接口。

前后端分离：在前后端分离的应用模式中，后端仅返回前端所需的数据

后端不再渲染HTML页面，不再控制前端的效果，至于前端用户看到的什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App由App的处理方式，但如论那种前端，所需要的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。

在前后端分开的应用模式中，前端与后端的耦合度相对较低。

在前后端分离的应用模式中，我们通常将后端开发的每一个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。

后端为主的mvc开发模式

model模型：完成业务逻辑
view视图：负责跟用户交互的界面
Controller 控制器：接受请求-》调用业务类-》派发页面

【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）

【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）

前端为主的mvvm模式
目前前端框架中，最为出色的要属Vue和React了，这俩个框架的核心理念都是数据驱动页面渲染，同时他们都是MVVM模式的框架，MVVM模式中
M表示Modal
Model 是数据, data
V表示View模板
这俩个基本都是不会发生变化，一个页面必然需要数据和渲染俩个部分，
VM表示 View Model
VM 是 vm = new Vue();
VM 用来连接数据和视图, 视图的输入框绑定了v-model, 用户输入后会改变data;
（Model改变也会同步视图更新相关的依赖, 双向绑定就是vm起了作用）

用JavaScript在浏览器中操作HTML，经历了若干发展阶段：

第一阶段，直接用JavaScript操作DOM节点，使用浏览器提供的原生API：

var dom = document.getElementById(‘name’);
dom.innerHTML = ‘Homer’;
dom.style.color = ‘red’;

第二阶段，由于原生API不好用，还要考虑浏览器兼容性，jQuery横空出世，以简洁的API迅速俘获了前端开发者的芳心：

$(‘#name’).text(‘Homer’).css(‘color’, ‘red’);

第三阶段，MVC模式，需要服务器端配合，JavaScript可以在前端修改服务器渲染后的数据。

第四阶段，mvvm模式，MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
MVVM框架来实现同样的功能，我们首先并不关心DOM的结构，而是关心数据如何存储。最简单的数据存储方式是使用JavaScript对象
我们并不操作DOM，而是直接修改JavaScript对象：

vue实例介绍
vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="hello">
    <title>hello</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">{{msg}}</div>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "hello world"
        }
    })
</script>
</body>
</html>

【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）
vue-cli脚手架介绍

npm install -g vue-cli 安装vue-cli
vue init webpack 在当前文件夹下创建vue-cli工程项目
npm install 安装依赖
最后npm run dev 来启动项目，之后就可以在浏览器访问对应域名查看网页

【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）
vue组件库介绍
比较常用的组件库 ElementUI
1、npm i element-ui -S 安装
2、在main.js引入elemntui
【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）
3、在components文件夹下对应的组件内引入以下代码

【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）
vue-cli中组件的写法 
<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
    name:"hello",
    data() {
      return {
        msg:'helloworld'
      };
    },
    methods: {}
}
</script>

<style>

</style>

跨域请求问题介绍
在 HTML 中，, , ,

因为请求域 http://bbb.com:80和发起请求的域 http://aaa.cn:80不同，那么这个请求就是跨域请求。
前后端分离的项目中，前端有一个域名，后端也有一个域名，所以需要解决跨域请求问题。
（具体解决方案这里不细讲）
可以参考下方教程
https://www.cnblogs.com/fengyuexuan/p/11471269.html

flask介绍
Flask是一个轻量级的可定制框架，使用Python语言编写，较其他同类型框架更为灵活、轻便、安全且容易上手。它可以很好地结合MVC模式进行开发，开发人员分工合作，小型团队在短时间内就可以完成功能丰富的中小型网站或Web服务的实现。

【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）
【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）

flask目录结构

【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）
在前后端不分离的模式中，会使用到static和templates两个文件夹，static用于存放js，css文件，templates用于存放html文件。
这里不详细说明
在前后端分离模式中，则只需要编写接口即可，无需后端返回html页面

举例子，前后端不分离模式中，需要通过return 返回’index.html’页面

@app.route('/')
def index():
    """ 显示可在 '/' 访问的 index 页面
"""
    return flask.render_template('index.html')

而在前后端分离模式中，则使用以下方式返回前端请求的数据

@app.route('/getdata', methods=['POST'])
def getdata():
    requestdata = request.json.get('requestdata')   //后端通过这种方式接受前端请求的数据
    res = "这是后端接收到的数据"+requestdata      //后端对数据进行处理
    return jsonify(res=res)                                       //后端返回json格式数据给前端

前端通过ajax异步发送请求，传递数据给后端（vue中使用axios，或者fetch）
举例子，axios请求

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

vue和flask部署ubantu方法介绍
一、vue部署ubantu，nginx服务器
1、对vue项目进行打包，使用命令npm run build
2、在ubantu系统安装nginx服务器（步骤省略）
3、将打包文件配置到nginx安装目录下的conf文件夹中找到配置文件nginx.conf并用文本打开，在配置文件的http模块内加入以下配置，
将打包文件放到D:\demo\dist下（该地址为下方例子）

server {
        listen       8011;
        server_name  127.0.0.1;

        location / {
                root D:\demo\dist;
                try_files $uri $uri/ @router;
                index index.html index.htm;
        }
}

4、配置完成后启动nginx服务，通过http://127.0.0.1:8011就可以访问到我们的项目页面。

二、flask部署ubantu介绍
1、部署并运行nginx（这里不详细介绍）
2、安装python虚拟环境
3、将flask代码放到虚拟环境下
4、运行flask代码启动文件
参考教程
https://blog.csdn.net/qq_40831778/article/details/104639076
flask配置数据库方法
引入Flask-SQLAlchemy模块

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:mysql@127.0.0.1:3306/test'

app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True

app.config['SQLALCHEMY_ECHO'] = True
db = SQLAlchemy(app)

class Role(db.Model):

    __tablename__ = 'roles'

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(64), unique=True)
    us = db.relationship('User', backref='role')

    def __repr__(self):
        return 'Role:%s'% self.name

class User(db.Model):
    __tablename__ = 'users'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(64), unique=True, index=True)
    email = db.Column(db.String(64),unique=True)
    password = db.Column(db.String(64))
    role_id = db.Column(db.Integer, db.ForeignKey('roles.id'))

    def __repr__(self):
        return 'User:%s'%self.name
if __name__ == '__main__':
    app.run(debug=True)

数据库相关操作

创建表：
db.create_all()
删除表
db.drop_all()
插入一条数据
ro1 = Role(name='admin')
db.session.add(ro1)
db.session.commit()

ro2 = Role(name='user')
db.session.add(ro2)
db.session.commit()
一次插入多条数据

简单查询操作

查询:filter_by精确查询
返回名字等于wang的所有人

User.query.filter_by(name='wang').all()

其他补充

一、yarn命令使用

【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）
二、浏览器抓取接口并导入postman，再转换成python文件方法
1找到请求接口，进行复制，之后导入到postman中
【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）
【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）
2.postman转换成python格式
【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）
三、vscode插件安装
前端编写vue推荐使用vscode，同时安装一些常用插件
推荐网站
https://m.php.cn/tool/vscode/475531.html
https://www.infoq.cn/article/02mq2ezihaarupk2z8id

四、vue安装
https://www.runoob.com/vue2/vue-install.html

五、推荐学习vue-cli脚手架
1、安装vue-cli
npm install -g @vue/cli 或者 yarn global add @vue/cli
2、创建一个项目
vue create hello-world

六、常用命令
1、进入到自己电脑的目录上传文件到远程电脑
scp -r F:\（本地文件地址） dw（用户名）@0.0.0.0（域名）:/home/（服务器地址）
2、从远程电脑下载文件到本地
scp -r 服务器地址 本地文件地址（与上面的相反）
3、连接远程服务器
ssh root（用户名）@0.0.0.0（域名），有密码进入后需要输入
4、flask启动命令
source py3venv/bin/activate
cd进入flask文件位置
export FLASK_APP=runapp（runapp为flask入口main文件名）
flask run -h 0.0.0.0
5、远程链接服务器时，保持当前窗口方法，使用screen，避免退出windows命令行窗口时，远程启动的服务关闭，先创建一个screen之后，输入命令启动服务，之后退出screen即可，下次需要修改文件，则再次进入该screen或者杀掉该screen重新创建。
查看当前的
screen -ls
kill某个screen
screen -X -S 27534 kill
screen -X -S 1865 quit
退出当前screen
crtl a then d
进入某个screen
screen -D -r ＜session-id>
screen -r[screen]
6、git常用命令
git
接着输入 git config –global user.name “username” 按下回车
再输入 gir config –global user.email “emali@mail” 再按下回车
git config –global –list

要想让电脑和我们的GitHub定向识别，我们就要创建一把钥匙
输入 ssh-keygen -t rsa 连按三次回车
之后进入C盘用户文件找到.ssh/id_rsa文件，复制粘贴到github对应设置位置
（其他）

7、yarn和npm 常用命令
npm init / yarn init 初始化

mkdir 文件名 / md 文件名

npm install / yarn或yarn install 安装依赖

npm install package -g / yarn global add package 全局安装某个依赖

npm install package –save-dev / yarn add package –dev 安装某个依赖

npm uninstall package –save-dev / yarn remove package –dev 卸载某个依赖

npm run dev 或 npm start / yarn run start 或 yarn start 运行

【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）
8、linux
修改txt只读文件，输入vim 文件名
8.1按下：，时候可以输入
8.2保存方法，输入
:w !sudo tee %
8.3保存退出
:q!

8.4从windows直接复制文件到linux可能文本内会有特殊空格出现
使用命令
cat -A 文件名，查看是否有特殊空格

Original: https://blog.csdn.net/sinat_30329151/article/details/122912943
Author: tony的学习中心
Title: 【Vue+flask+mysqls+ubantu（nginx） 测试工具平台搭建】（简单版，测试开发入门）

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/748160/

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
0

【自取】最近整理的，有需要可以领取学习：



Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言 刷题答案下载！

大家都在看

亲爱的 Coder【最近整理，可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球