常用技术架构与组件
前端技术架构 bootstrap antd vue react
后端技术架构 django flask spring boot
数据存储 mysql es neo4j
任务调度架构 jenkins
数据报表 echarts vega kibana grafana
测试平台基本流程
后端开发主要技术点
- 页面渲染：客户端渲染页面（SPA） 服务端渲染页面（模板技术）
- 数据库连接技术：数据库连接池 数据访问
- 服务管理：接口 路由 协议
- 异步任务调度：异步 同步 回调
开发框架
- 迷你型
- python Flask
- java sparkjava
- 大而全的框架
- python django
- java spring全家桶
Flask
- 路由：get post path 权限控制
- 请求： get请求 form请求 json请求 cookie管理
- session： 基于cookie的session机制
- 模板技术：jinjia2 mustache 建议使用独立的前端技术框架构建SPA
from flask import Flask,escape,request
app=Flask(__name__)
@app.route('/')
def hello():
name=request.args.get("name","World")
return f'Hello ,{escape(name)}!'
运行方法：
set FLASK_APP=test_flask.py
flask run
访问方法：
访问效果
数据持久化
传统数据库连接方式：pymysql 纯sql
ORM模型：sqlalchemy mybatis hebernate
pymysql
connect cursor(游标) excute（执行） fetch（获取结果)
import pymysql
db = pymysql.connect(host='localhost',
user='user',
password='password',
db='db',
charset='utf8mb4',
cursorclass=pymysql.cursors.DictCursor)
def test_db():
with db.cursor() as cursor:
#create a new record
sql = 'show tables'
cursor.excute(sql)
res=cursor.fetchall()
print(res)
def test_select():
with db.cursor() as cursor:
#create a new record
sql = 'select * from table1 where name=%s'
cursor.excute(sql,["name1"])
res=cursor.fetchall()
print(res)
ORM 对象关系映射（object-relational mapping）
简介
是一种程序设计技术，用于实现面向对象编程语言里不同类型系统的数据之间的转换。从效果上说，它其实是创建了一个可在编程语言里使用的“虚拟对象数据库”
ORM模型，脱离SQL，编程模式
连接池管理
from sqlalchemy import create_eninge
from sqlalchemy import Column,Integer,String
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker
host='localhost'
user='username'
password='password'
db='dbname'
charset='utf8mb4'
Base=declarative_base()
#声明表结构
class User(Base):
__tablename__ ='tablename1'
id = Column(Integer,primary_key=True)
username=Column(String)
password=Column(String)
email=Column(String)
def test_orm():
engine = create_eninge('mysql+pymysql"//{user}:{password}@{host}/{db}'.format(host=host,db=db,user=user,password=password),echo=True)
#sessionmaker 创建连接
Session = sessionmaker(bind=engine)
session=Session()
#数据插入
u1=User(
username='name1',
password='pwd1',
email='123@123'
)
session.add(u1)
session.commit()
#数据查询
u2=session.query(User).filter_by(username='name1').first()
print(u2.username)
前端开发主要技术点
vue.js框架
- vue.js是一套用于构建用户界面的渐进式框架
- 被设计成自顶向上逐层应用
- 核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
- 学习vue.js 需要一定的html、css、javascript基础
MVVM模式
常用组件库
ElementUI：https://element.eleme.io/#/
Bootstrap Vue：https://bootstrap-vue.org/
Vuetify：https://vuetifyjs.com/zh-Hans/
安装方法
1.cdn
使用最新版
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
使用明确版本号和构建文件，避免新版本造成的不可预期的破坏
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
2.npm
通过webpack和CLI安装使用
使用
- 创建挂载元素
- 引入vue.js
- 创建一个vue实例
<html>
<body>
<div id="app">
{{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello world123'
}
})
</script>
</body>
</html>
vue内部指令
- v-if v-else 元素是否存在 不存在的话不会在dom元素中展示
- v-show 元素是否显示 不管是否显示都会在dom元素中展示
- v-for 循环
- v-on 绑定事件 可以简写成@
- v-bind 绑定动态属性 可以简写成:
- v-model 绑定数据 可以绑定数据，若是数据发生更改，也随之更改
<html>
<body>
<div id="app">{{msg}}
<div v-if="show">展示</div>
<div v-else>不展示</div>
<div v-show="show">show展示</div>
<p v-for="(value,index) in arr">{{value}}:{{index}}</p>
<p v-for="(value,key) in obj">{{value}}:{{key}}</p>
<p v-for="value in obj1">{{value.name}}:{{value.age}}:{{value.sex}}</p>
<!-- v-on 可以简写成@ <button @:click="add">加一</button> -->
<button v-on:click="add">加一</button>
<div>{{count}}</div>
<!---v-bind可以简写成冒号的方式 <div style="height:100px;width:100px;border:1px solid #000" v-bind:style="bgcolor"></div> -->
<div style="height:100px;width:100px;border:1px solid #000" :style="bgcolor"></div>
<input type="text" v-model="text">
<button @click="showtext">打印</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello world123',
show:false,
arr:['a','b'],
obj:{'name':'zhangsan','age':20,'sex':'男'},
obj1:[{'name':'A1','age':20,'sex':'男'},{'name':'A2','age':21, 'sex':'女'},{'name':'A3','age':22,'sex':'男'}],
count:1,
bgcolor:{ backgroundColor: '#ccc'},
text:'123'
},
methods:{
add(){ this.count++ },
showtext(){console.log(this.text)}
}
})
</script>
</body>
</html>
vue生命周期
- beforeCreate
- created
- beforeMount 在dom元素加载完成之前
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
用法示例：
<script>
new Vue({
el:'#app',
data:{ msg:'hello world123', },
methods:{
showtext(){console.log(this.text) } },
created(){
console.log('加载完成')
}
})
vue-cli
基于webpack构建，并带有合理的默认配置
webpack是一个javascript应用程序的静态模块打包器
技术栈
- vue.js 前端页面数据渲染
- vue-router 路由管理
- vurtify ui组件
- axios 网络请求
