python筆記3--HTTP對外介面sign簽名
1.第一個vue小程式
1、idea安裝外掛vue.js
2、下載vue.
3.程式碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script> </head> <body> <div id="id1"> {{ message }} </div> <script type="text/javascript"> var app = new Vue({ el:"#id1", data:{ message:"hello vue " } }) </script> </body> </html> 顯示 hello vue
在控制檯改變
或者通過:
<div id="app-2"> <span v-bind:title="message"> 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊! </span> </div>
你看到的 v-bind
attribute 被稱為指令。指令帶有字首 v-
,以表示它們是 Vue 提供的特殊 attribute。可能你已經猜到了,它們會在渲染的 DOM 上應用特殊的響應式行為。在這裡,該指令的意思是:“將這個元素節點的 title
attribute 和 Vue 例項的 message
如果你再次開啟瀏覽器的 JavaScript 控制檯,輸入 app2.message = '新訊息'
,就會再一次看到這個綁定了 title
attribute 的 HTML 已經進行了更新。
2、MVVM
MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為抽象化,讓我們將檢視 UI 和業務邏輯分開。當然這些事 ViewModel 已經幫我們做了,它可以取出 Model 的資料同時幫忙處理 View 中由於需要展示內容而涉及的業務邏輯。
前端頁面中,把Model用純JavaScript物件表示,View負責顯示,兩者做到了最大限度的分離。
把Model和View關聯起來的就是ViewModel。ViewModel負責把Model的資料同步到View顯示出來,還負責把View的修改同步回Model。
我們驚訝地發現,改變JavaScript物件的狀態,會導致DOM結構作出對應的變化!這讓我們的關注點從如何操作DOM變成了如何更新JavaScript物件的狀態,而操作JavaScript物件比DOM簡單多了!
設計思想
- 這就是MVVM的設計思想:關注Model的變化,讓MVVM框架去自動更新DOM的狀態,從而把開發者從操作DOM的繁瑣步驟中解脫出來!
3.基礎語法:
條件判斷:if
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
<p v-else>現在你沒看到我</p>
<p v-if="seen">現在你看到我了</p>
<p v-else-if="seen==='a'">現在你看到a</p>
<p v-else>aaaaa</p>
</div>
<script type="text/javascript">
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
迴圈:for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<ul id="id1">
<li v-for="item in iteams">
{{item.message}}
</li>
</ul>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data:{
iteams:[
{message:"space1"},
{message:"space2"},
{message:"space3"}
]
}
})
</script>
</body>
</html>
4.繫結事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="id1">
<button v-on:click="saihello" >clock me</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data: {
message: "space1"
},
methods:{
saihello:function () {
alert(this.message)
}
}
})
</script>
</body>
</html>
5.vue7個屬性
學習vue我們必須之到它的7個屬性,8個 方法,以及7個指令。787原則
-
el屬性
-
- 用來指示vue編譯器從什麼地方開始解析 vue的語法,可以說是一個佔位符。
-
data屬性
-
- 用來組織從view中抽象出來的屬性,可以說將檢視的資料抽象出來存放在data中。
-
template屬性
-
- 用來設定模板,會替換頁面元素,包括佔位符。
-
methods屬性
-
- 放置頁面中的業務邏輯,js方法一般都放置在methods中
-
render屬性
-
- 建立真正的Virtual Dom
-
computed屬性
-
- 用來計算
-
watch屬性
-
- watch:function(new,old){}
- 監聽data中資料的變化
- 兩個引數,一個返回新值,一個返回舊值,
data的三種寫法
在vue中,定義data可以有三種寫法。
1.第一種寫法,物件。
var app = new Vue({
el: '#yanggb',
data: {
yanggb: 'yanggb'
}
})
2.第二種寫法,函式。
var app = new Vue({
el: '#yanggb',
data: function() {
return {
yanggb: 'yanggb'
}
}
})
3.第三種寫法,函式,是第二種寫法的ES6寫法。
var app = new Vue({
el: '#yanggb',
data() {
return {
yanggb: 'yanggb'
}
}
})
三種寫法的區別
在簡單的vue例項應用中,三種寫法幾乎是沒有什麼區別的,因為你定義的#yanggb物件不會被複用。
但是如果是在元件應用的環境中,就可能會存在多個地方呼叫同一個元件的情況,為了不讓多個地方的元件共享同一個data物件,只能返回函式。這個與JavaScript的作用域特性有關,函式自己擁有私有的作用域,函式之間的作用域相互獨立,也就不會出現元件對資料的綁定出現交錯的情況。
6.雙向繫結
- 可以通過 改變js物件(model),改變view
- 藉助v-model繫結model,可以通過改變view 傳遞資料到model
UI控制元件上,表單的input ,selected上建立雙向資料流通.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="id1">
請輸入:<input type="text" value="123" v-model="message"/> {{message}}
<br>
<input type="radio" name="sex" value="male" v-model="sex1" checked>Male
<br>
<input type="radio" name="sex" value="female" v-model="sex1" >Female
<br>
{{sex1}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data: {
message: "space1",
sex1:""
},
})
</script>
</body>
</html>
7.元件
- 自定義標籤
- 可重複使用的vue例項,模板
程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>
<ul id="id1">
//使用模板,傳遞引數給模板
<diy1 v-for="item in items" v-bind:qin="item"></diy1>
</ul>
<script type="text/javascript">
// 建立元件
Vue.component("diy1",{
props:['qin'],
template:" <li>{{qin}}</li>"
})
var app = new Vue({
el:"#id1",
data: {
items:["java","python","c++"]
}
})
</script>
</body>
</html>
元件的組織
通常一個應用會以一棵巢狀的元件樹的形式來組織:
例如,你可能會有頁頭、側邊欄、內容區等元件,每個元件又包含了其它的像導航連結、博文之類的元件。
為了能在模板中使用,這些元件必須先註冊以便 Vue 能夠識別。這裡有兩種元件的註冊型別:全域性註冊和區域性註冊。至此,我們的元件都只是通過 Vue.component
全域性註冊的:
Vue.component('my-component-name', {
// ... options ...
})
全域性註冊的元件可以用在其被註冊之後的任何 (通過 new Vue
) 新建立的 Vue 根例項,也包括其元件樹中的所有子元件的模板中。
到目前為止,關於元件註冊你需要了解的就這些了,如果你閱讀完本頁內容並掌握了它的內容,我們會推薦你再回來把元件註冊讀完。
8.網路通訊
Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
特性
- 從瀏覽器中建立 XMLHttpRequests
- 從 node.js 建立 http 請求
- 支援 Promise API
- 攔截請求和響應
- 轉換請求資料和響應資料
- 取消請求
- 自動轉換 JSON 資料
- 客戶端支援防禦 XSRF
Vue基於 關注度分離 專注於檢視層,少用jquery,頻繁操作DOM樹。
程式碼實現:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="id1">
<div>{{info.name}}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data(){
//請求返回的資料,必須和json字串一樣
return{
info:{
name:"",
url: "",
page: "",
isNonProfit:"",
}
}
},
//進行網路通訊,底部實現是ajax
mounted(){
//鉤子函式
axios.get("./data.json").then(response=>(this.info=response.data))
}
})
</script>
</body>
</html>
9.Vue生命週期
八大鉤子函式
1,beforeCreate():此鉤子函式發生在例項建立之前,此時data,el,methods未初始化,觀測資料和事件初始化完成,
2,created():此鉤子函式data,methods資料初始化;el未初始化
3,beforemount():此鉤子函式內就運用了dom虛擬技術 即是先佔位置 資料不更新 (操作dom時拿不到資料),el未初始化完成
4:mounted():例項掛載完成,
5:beforeupdate():此函式發生在檢視dom資料更新之前,dom虛擬和下載補丁之前,即data更新 當操作dom時拿不到資料,
6:updated():檢視更新完成,
7:beforedestory():此時例項仍未銷燬,this可以使用
8:destoryed():例項銷燬完成,
生命週期圖示
下圖展示了例項的生命週期。你不需要立馬弄明白所有的東西,不過隨著你的不斷學習和使用,它的參考價值會越來越高。
中文版:
10.計算屬性
計算屬性=把計算出來的值,儲存在屬性裡面,在記憶體中執行,虛擬DOM,想象成快取。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="id1">
fun1:{{data1()}}
<br>
fun2:{{data2}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#id1",
data: {
message:"aaaa"
},
methods: {
data1:function () {
return Date()
}
},
computed:{
data2:function () {
this.message;
return Date()
}
}
})
</script>
</body>
</html>
11.插槽slot
Vue 實現了一套內容分發的 API,這套 API 的設計靈感源自 [Web Components 規範草案,將 <slot>
元素作為承載分發內容的出口。
就是在頁面裡面預留 位置 ,提前規劃好位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="id1">
<slot1>
<title2 slot="title" v-bind:title1="messgae"></title2>
<lis slot="lis" v-for=" i in items " v-bind:item="i"></lis>
</slot1>
</div>
<script type="text/javascript">
//插槽
Vue.component('slot1',{
template:" <div>\
<slot name='title'></slot>\
<ul> \
<slot name='lis'></slot>\
</ul>\
</div>"
})
Vue.component('title2',{
props: ['title1'],
template: '<div>{{title1}}</div>'
});
Vue.component('lis',{
props: ['item'],
template:"<li>{{item}}</li>"
});
var app = new Vue({
el: "#id1",
data:{
messgae:"書籍列表",
items:["java","c++","python"]
}
});
</script>
</body>
</html>
自定義事件
<!-- v-on:remove="removelist(index)" 自定義事件remove-->
this.$emit("remove",index) 通過這個把元件的函式 對映到自定義事件上,呼叫自定義事件的函式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="id1">
<slot1>
<title2 slot="title" v-bind:title1="messgae"></title2>
<lis slot="lis" v-for=" (i, index) in items" v-bind:item="i" v-bind:index1="index"
v-on:remove="removelist(index)" v-bind:key="index" >
</lis>
</slot1>
</div>
<script type="text/javascript">
//插槽
Vue.component('slot1',{
template:" <div>\
<slot name='title'></slot>\
<ul> \
<slot name='lis'></slot>\
</ul>\
</div>"
})
Vue.component('title2',{
props: ['title1'],
template: '<div>{{title1}}</div>'
});
Vue.component('lis',{
props: ['item',"index"],
template:"<li>-- {{index}} ----{{item}} <button v-on:click='remove'>刪除</button></li>",
methods:{
// this.$emit("remove",index1)
remove:function (index) {
this.$emit("remove",index)
}
}
});
var app = new Vue({
el: "#id1",
data:{
messgae:"書籍列表",
items:["java","c++","python"]
},
methods: {
//index表示下標
removelist:function (index1) {
console.log("刪除了"+this.items[index1]+"---------")
this.items.splice(index1,1)
}
}
});
</script>
</body>
</html>
12.實際開發
Vue的開發都是基於NodeJS,實際開發採用vue-cli,vue-route路由,vuex做狀態管理,VueUI ,介面一般使用ElementUI(餓了嗎),或者ICE(阿里巴巴)
13.Vue-cli
vue腳手架指的是vue-cli,它是一個專門為單頁面應用快速搭建繁雜的腳手架,它可以輕鬆的建立新的應用程式而且可用於自動生成vue和webpack的專案模板。
vue-cli是有Vue提供的一個官方cli,專門為單頁面應用快速搭建繁雜的腳手架。它是用於自動生成vue.js+webpack的專案模板,是為現代前端工作流提供了 batteries-included的構建設定。只需要幾分鐘的時間就可以執行起來並帶有熱過載,儲存時 lint 校驗,以及生產環境可用的構建版本。
主要的功能
- 統一的目錄結構
- 本地除錯
- 熱部署
- 單元測試
- 整合打包上線
index 會自動載入 main.js 給他的 模板,main.js的模板來自App.vue
專案結構
需要的環境:
nodejs(官網下載)
git
確定 nodejs安裝成功
node -v
npm -v
//淘寶映象
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用npm 安裝 cnpm
1. 需要更改一個安裝路徑
npm config set registry "http://registry.npmjs.org/"
2. 再次使用npm進行全域性安裝cnpm
npm install -g cnpm
3.輸入cnpm -v 即可出現版本號
使用cnpm安裝vue-cli
cnpm install -g vue-cli
vue list
//檢視可以基於那些模板進行建立,通常我們使用webpack
13.1、建立第一個Vue專案
建立Vue專案
vue init webpack myVue
? Project name myvue
? Project description A Vue.js project
? Author helloWorld
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no
初始化並執行
//進入專案,安裝依賴
npm install
//啟動專案
npm run dev
Your application is running here: http://localhost:8080
14、webpack
本質上,webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時,它會遞迴地構建一個依賴關係圖(dependency graph),其中包含應用程式需要的每個模組,然後將所有這些模組打包成一個或多個 bundle。
webpack它是程式碼編譯工具,有入口,出口、loader和外掛
模組的進化
最原始的js載入方式,
<script src="" ></script>
每一個檔案看做一個模組,那麼他們的介面暴露在全域性作用域下。
弊端
- 全域性作用域變數衝突
- 按照
相關推薦
python筆記3--HTTP對外介面sign簽名
前言 一般公司對外的介面都會用到sign簽名,對不同的客戶提供不同的apikey,這樣可以提高介面請求的安全性,避免被人抓包後亂請求。
python筆記(3)---函式(1)
函式以及函式使用的注意事項(1) 目錄函式的基本定義方式指定引數的位置和引數的初始化方式引數的預設值指定位置的引數傳遞方式指定引數的傳遞方式小結:函式的返回值函式中的函式(子函式):lambda函式
python筆記3
1.富文字編輯器 from selenium import webdriver import time as t driver=webdriver.Chrome() driver.maximize_window()
python介面自動化-實現sign簽名(MD5加密)
本文內容皆為作者原創,碼字不易,如需轉載,請註明出處:https://www.cnblogs.com/temari/p/13513636.html
PYTHON實現SIGN簽名的過程解析
sign簽名是用於提供給外部(第三方)呼叫的介面,呼叫方需要提供正確的appkey鑰匙才能呼叫,確保了介面的安全性。
spring boot:給介面增加簽名驗證(spring boot 2.3.1)
一,為什麼要給介面做簽名驗證? 1,app客戶端在與服務端通訊時,通常都是以介面的形式實現,
C# HTTP請求對外介面、第三方介面公用類
/// <summary> /// 網路資料請求公共函式 /// </summary> public class HttpWebRequestCommon
20200917-Python學習筆記3
編碼 ASCII編碼一個位元組 Unicode編碼通常兩個位元組 字母A用ASCII編碼是十進位制的65,二進位制的01000001
Python學習筆記3:條件控制/迴圈語句
1.條件控制 條件語句其實就是通過一條或多條語句的執行結果是True還是False來決定執行後面的程式碼塊。
Python 爬蟲+百度地圖API(http/https介面)
本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯絡我們以作處理
python 中任務 6.3 構建並評分分類模型 學習筆記3
技術標籤:第6章 使用scikit-learn構建模型 文章目錄 任務6.3 構建並評價分類模型6.3.1 使用sklearn 估計器構建分類模型程式碼6-17 使用sklearn估計器構建SVM模型sklearn 庫常用分類演算法函式程式碼 6-18 分類
python學習筆記3-關於檔案的複製、重新命名、移動、刪除操作
上一篇記錄了關於資料夾下檔案的遍歷的程式實現,今天學習一下關於檔案的複製、重新命名、移動和刪除的操作;對於檔案的操作,主要依賴OS模組和shutil模組;下面直接以例子來說明關於檔案的複製、重新命名、移動和刪
python學習筆記3
列表、元組 序列結構一、列表1.建立1.1 []建立1.2 list()建立1.3 range()建立整數列表1.4 推導式生成列表
Python筆記 之使用HTTP訪問網頁
技術標籤:python筆記pythonwebhttps Python程式碼 程式碼下載 import http.client defaultsite = \'fashion.sina.com.cn\'
Python基礎班筆記3
技術標籤:學習筆記 2021/1/19 Python語法 表示式 • 表示式,是由數字、算符、數字分組符號(括號)、自由變數和約束變數等以能求得數值的有意義排列方法所得的組合 • 表示式特點 • 表示式一般僅僅用於計算一
Python二級備考筆記3 成績計算
1.比賽成績計算 型別:Python 組合資料型別
計算 HMAC-SHA1 阿里雲訊息佇列RocketMQ版簽名機制案例以及http呼叫介面案例
使用請求引數構造規範化的請求字串private static final String ENCODING = \"UTF-8\"; private static String percentEncode(String value) throws UnsupportedEncodingException {
通訊介面應用筆記3:使用W5500實現Modbus TCP伺服器
前面我們設計實現了W5500的驅動程式,也講解了驅動的使用方式。在最近一次的專案應用中,正好有一個使用W5500實現TCP通訊的需求,所以我們就使用該驅動程式輕鬆實現。這一篇中我們就來說一說基於我們W5500通訊驅
【python基礎筆記-3】decimal模組解決浮點數計算精度問題
通過Decimal(\'123.456\')物件例項化後做 + - * / 等運算子操作計算結果不會出現精度問題。
全棧微信小程式商城 學習筆記10.3 編寫支付介面
Pay服務層 <?php namespace app\\api\\service; use app\\api\\model\\Order as OrderModel; use app\\lib\\exception\\OrderException;