常用技術(shù)架構(gòu)與組件
前端技術(shù)架構(gòu) bootstrap antd vue react
后端技術(shù)架構(gòu) django flask spring boot
數(shù)據(jù)存儲(chǔ) mysql es neo4j
任務(wù)調(diào)度架構(gòu) jenkins
數(shù)據(jù)報(bào)表 echarts vega kibana grafana
測(cè)試平臺(tái)基本流程
后端開發(fā)主要技術(shù)點(diǎn)
- 頁(yè)面渲染：客戶端渲染頁(yè)面（SPA） 服務(wù)端渲染頁(yè)面（模板技術(shù)）
- 數(shù)據(jù)庫(kù)連接技術(shù)：數(shù)據(jù)庫(kù)連接池 數(shù)據(jù)訪問
- 服務(wù)管理：接口 路由 協(xié)議
- 異步任務(wù)調(diào)度：異步 同步 回調(diào)
開發(fā)框架
- 迷你型
- python Flask
- java sparkjava
- 大而全的框架
- python django
- java spring全家桶
Flask
- 路由：get post path 權(quán)限控制
- 請(qǐng)求： get請(qǐng)求 form請(qǐng)求 json請(qǐng)求 cookie管理
- session： 基于cookie的session機(jī)制
- 模板技術(shù)：jinjia2 mustache 建議使用獨(dú)立的前端技術(shù)框架構(gòu)建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)}!'
運(yùn)行方法：
set FLASK_APP=test_flask.py
flask run
訪問方法：
訪問效果
數(shù)據(jù)持久化
傳統(tǒng)數(shù)據(jù)庫(kù)連接方式：pymysql 純sql
ORM模型：sqlalchemy mybatis hebernate
pymysql
connect cursor(游標(biāo)) excute（執(zhí)行） fetch（獲取結(jié)果)
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 對(duì)象關(guān)系映射（object-relational mapping）
簡(jiǎn)介
是一種程序設(shè)計(jì)技術(shù)仪糖，用于實(shí)現(xiàn)面向?qū)ο缶幊陶Z言里不同類型系統(tǒng)的數(shù)據(jù)之間的轉(zhuǎn)換。從效果上說，它其實(shí)是創(chuàng)建了一個(gè)可在編程語言里使用的“虛擬對(duì)象數(shù)據(jù)庫(kù)”
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()
#聲明表結(jié)構(gòu)
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"http://{user}:{password}@{host}/{db}'.format(host=host,db=db,user=user,password=password),echo=True)
#sessionmaker 創(chuàng)建連接
Session = sessionmaker(bind=engine)
session=Session()
#數(shù)據(jù)插入
u1=User(
username='name1',
password='pwd1',
email='123@123'
)
session.add(u1)
session.commit()
#數(shù)據(jù)查詢
u2=session.query(User).filter_by(username='name1').first()
print(u2.username)
前端開發(fā)主要技術(shù)點(diǎn)
vue.js框架
- vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架
- 被設(shè)計(jì)成自頂向上逐層應(yīng)用
- 核心庫(kù)只關(guān)注視圖層，不僅易于上手参滴，還便于與第三方庫(kù)或既有項(xiàng)目整合
- 學(xué)習(xí)vue.js 需要一定的html、css摆寄、javascript基礎(chǔ)
MVVM模式
常用組件庫(kù)
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>
使用明確版本號(hào)和構(gòu)建文件，避免新版本造成的不可預(yù)期的破壞
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
2.npm
通過webpack和CLI安裝使用
使用
- 創(chuàng)建掛載元素
- 引入vue.js
- 創(chuàng)建一個(gè)vue實(shí)例
<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內(nèi)部指令
- v-if v-else 元素是否存在 不存在的話不會(huì)在dom元素中展示
- v-show 元素是否顯示 不管是否顯示都會(huì)在dom元素中展示
- v-for 循環(huán)
- v-on 綁定事件 可以簡(jiǎn)寫成@
- v-bind 綁定動(dòng)態(tài)屬性 可以簡(jiǎn)寫成:
- v-model 綁定數(shù)據(jù) 可以綁定數(shù)據(jù)，若是數(shù)據(jù)發(fā)生更改疾党，也隨之更改
<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 可以簡(jiǎn)寫成@ <button @:click="add">加一</button> -->
<button v-on:click="add">加一</button>
<div>{{count}}</div>
<!---v-bind可以簡(jiǎn)寫成冒號(hào)的方式 <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構(gòu)建，并帶有合理的默認(rèn)配置
webpack是一個(gè)javascript應(yīng)用程序的靜態(tài)模塊打包器
技術(shù)棧
- vue.js 前端頁(yè)面數(shù)據(jù)渲染
- vue-router 路由管理
- vurtify ui組件
- axios 網(wǎng)絡(luò)請(qǐng)求
