admin管理员组文章数量:1638753
一、整体内容介绍
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 控制器:接受请求-》调用业务类-》派发页面
前端为主的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-cli脚手架介绍
npm install -g vue-cli 安装vue-cli
vue init webpack 在当前文件夹下创建vue-cli工程项目
npm install 安装依赖
最后npm run dev 来启动项目,之后就可以在浏览器访问对应域名查看网页
vue组件库介绍
比较常用的组件库 ElementUI
1、npm i element-ui -S 安装
2、在main.js引入elemntui
3、在components文件夹下对应的组件内引入以下代码
vue-cli中组件的写法
<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
name:"hello",
data() {
return {
msg:'helloworld'
};
},
methods: {}
}
</script>
<style>
</style>
跨域请求问题介绍
在 HTML 中,, , ,
因为请求域 http://bbb:80和发起请求的域 http://aaa:80不同,那么这个请求就是跨域请求。
前后端分离的项目中,前端有一个域名,后端也有一个域名,所以需要解决跨域请求问题。
(具体解决方案这里不细讲)
可以参考下方教程
https://wwwblogs/fengyuexuan/p/11471269.html
flask介绍
Flask是一个轻量级的可定制框架,使用Python语言编写,较其他同类型框架更为灵活、轻便、安全且容易上手。它可以很好地结合MVC模式进行开发,开发人员分工合作,小型团队在短时间内就可以完成功能丰富的中小型网站或Web服务的实现。
flask目录结构
在前后端不分离的模式中,会使用到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/qq_40831778/article/details/104639076
flask配置数据库方法
引入Flask-SQLAlchemy模块
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
#设置连接数据库的URL
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:mysql@127.0.0.1:3306/test'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
#查询时会显示原始SQL语句
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')
#repr()方法显示一个可读字符串
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命令使用
二、浏览器抓取接口并导入postman,再转换成python文件方法
1找到请求接口,进行复制,之后导入到postman中
2.postman转换成python格式
三、vscode插件安装
前端编写vue推荐使用vscode,同时安装一些常用插件
推荐网站
https://m.php/tool/vscode/475531.html
https://www.infoq/article/02mq2ezihaarupk2z8id
四、vue安装
https://www.runoob/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 运行
8、linux
修改txt只读文件,输入vim 文件名
8.1按下:,时候可以输入
8.2保存方法,输入
:w !sudo tee %
8.3保存退出
:q!
8.4从windows直接复制文件到linux可能文本内会有特殊空格出现
使用命令
cat -A 文件名,查看是否有特殊空格
版权声明:本文标题:【Vue+flask+mysqls+ubantu(nginx) 测试工具平台搭建】(简单版,测试开发入门) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726163483a1057968.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论