当前位置： 首页>大数据>正文

测试平台开发

大数据2024-10-19 07:30:01

常用技术架构与组件

前端技术架构 bootstrap antd vue react
后端技术架构 django flask spring boot
数据存储 mysql es neo4j
任务调度架构 jenkins
数据报表 echarts vega kibana grafana


测试平台开发,第1张
测试平台基本流程

后端开发主要技术点

  • 页面渲染：客户端渲染页面（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

访问方法：


测试平台开发,第2张
访问效果
数据持久化

传统数据库连接方式：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，编程模式


测试平台开发,第3张
连接池管理
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基础
    测试平台开发,第4张
    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 v-bind:style="bgcolor"></div> -->
    <div :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 网络请求

https://www.xamrdz.com/bigdata/7aq1994728.html

相关文章：