【Vue+flask+mysqls+ubantu(nginx) 测试工具平台搭建】(简单版,测试开发入门)

一、整体内容介绍
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.com:80和发起请求的域 http://aaa.cn:80不同,那么这个请求就是跨域请求。
前后端分离的项目中,前端有一个域名,后端也有一个域名,所以需要解决跨域请求问题。
(具体解决方案这里不细讲)
可以参考下方教程
https://www.cnblogs.com/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.net/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.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 运行
  在这里插入图片描述
8、linux
修改txt只读文件,输入vim 文件名
8.1按下:,时候可以输入
8.2保存方法,输入
:w !sudo tee %
8.3保存退出
:q!
8.4从windows直接复制文件到linux可能文本内会有特殊空格出现
使用命令
cat -A 文件名,查看是否有特殊空格

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现登录注册的步骤如下: 1. 前端使用 Vue 框架实现登录注册页面,并通过 Ajax 请求向后端发送登录注册请求。 2. 后端使用 Flask 框架搭建 Web 服务器,接收前端发送的请求,并通过 SQLAlchemy 实现与 MySQL 数据库的交互。 3. 在 MySQL 数据库中创建用户表,用于存储用户信息,包括用户名、密码等。 4. 实现注册功能:前端发送注册请求,后端接收请求后将用户信息插入到用户表中。 5. 实现登录功能:前端发送登录请求,后端接收请求后从用户表中查询用户名和密码,如果匹配成功则返回登录成功的信息,否则返回登录失败的信息。 下面是一个简单的示例代码: 前端代码: ```html <template> <div> <h2>登录</h2> <input v-model="username" placeholder="请输入用户名"> <input v-model="password" placeholder="请输入密码"> <button @click="login">登录</button> <h2>注册</h2> <input v-model="regUsername" placeholder="请输入用户名"> <input v-model="regPassword" placeholder="请输入密码"> <button @click="register">注册</button> </div> </template> <script> import axios from 'axios'; export default { data() { return { username: '', password: '', regUsername: '', regPassword: '', } }, methods: { login() { axios.post('/api/login', { username: this.username, password: this.password, }).then(response => { console.log(response.data); }).catch(error => { console.log(error); }); }, register() { axios.post('/api/register', { username: this.regUsername, password: this.regPassword, }).then(response => { console.log(response.data); }).catch(error => { console.log(error); }); }, } } </script> ``` 后端代码: ```python from flask import Flask, request, jsonify from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://username:password@localhost/dbname' db = SQLAlchemy(app) class User(db.Model): id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(20), unique=True, nullable=False) password = db.Column(db.String(20), nullable=False) @app.route('/api/register', methods=['POST']) def register(): username = request.json['username'] password = request.json['password'] user = User(username=username, password=password) db.session.add(user) db.session.commit() return jsonify({'message': '注册成功'}) @app.route('/api/login', methods=['POST']) def login(): username = request.json['username'] password = request.json['password'] user = User.query.filter_by(username=username, password=password).first() if user: return jsonify({'message': '登录成功'}) else: return jsonify({'message': '用户名或密码错误'}) if __name__ == '__main__': app.run() ``` 其中,`/api/register` 和 `/api/login` 是前端发送请求的地址,通过 `request.json` 获取前端发送的数据,使用 SQLAlchemy 实现数据库操作,最后返回相应的信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值