因為是第一次搞前端專案,所以遇到了很多小白問題,這裡我將它記錄下來,希望大佬們輕噴。
Element.ui
基礎佈局
在基礎佈局Layout中,<el-col>
一行的寬度是span="24",分出更多的列是在這24中分成12+12,8+8+8等
Vuex
Vue-router
路由引數
- 動態路徑引數,使用
$router.params
定義的引數是在路由路徑中表示,例如:/user/:id
,通過$router.params.id
獲取 - 使用查詢字串形式,路徑類似
/path?key=value
,使用$router.query.key
的方式獲取查詢字串的引數 - 在Vue-router的定義中包含
meta
,例如下面展示,可以通過$router.meta.引數
獲得具體常量值
{
path: 'tree',
name: 'Tree',
component: () => import('@/views/tree/index'),
meta: { title: 'Tree', icon: 'tree' }
}
複製程式碼
Vue 生命週期
created
created應該是一個函式(function)
已完成以下的配置:資料觀測 (data observer),屬性和方法的運算,watch/event
事件回撥。然而,掛載階段還沒開始,$el
屬性目前不可見。(所以,可以從伺服器請求資料了)
mounted
el
掛載到例項上後呼叫
beforeDestroy
例項銷燬前呼叫,一般用於解綁adEventListener
監聽的事件
Vue元件
陣列更新方法
Vue 包含一組觀察陣列的變異方法,所以它們也將會觸發檢視更新。這些方法如下:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
由於 JavaScript 的限制,Vue 不能檢測以下變動的陣列:
- 當你利用索引直接設定一個項時,例如:vm.items[indexOfItem] = newValue
- 當你修改陣列的長度時,例如:vm.items.length = newLength
元件建立和註冊
// 1.建立元件
let myComponent = Vue.extend({
template: '<div>Some Component</div>'
});
// 2.註冊元件
Vue.component('my-component', myComponent);
複製程式碼
在Vue.extend()引數傳入的是選項物件,自己建立的元件需要包含在Vue例項掛載的元素範圍內。在Vue.component()註冊的元件是全域性的,可以在任意Vue例項範圍內使用。
區域性註冊如下:
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
new Vue({
el: '#app',
components: {
// 2. 將myComponent元件註冊到Vue例項下
'my-component' : myComponent
}
});
複製程式碼
因為html是大小寫不敏感的,所以元件名稱不要寫為大寫。
Vue.js規定:在定義元件的選項時,data和el選項必須使用函式。
父元件和子元件通訊
在父元件中使用子元件時,通過以下語法將資料傳遞給子元件:
<child-component v-bind:子元件prop="父元件資料屬性"></child-component>
複製程式碼
其中在父模板中屬性名要使用中劃線寫法,比如以下的父模板:
var parentNode = {
template: `
<div class="parent">
<child my-message="aaa"></child>
<child my-message="bbb"></child>
</div>`,
components: {
'child': childNode
}
};
複製程式碼
子模板的程式碼如下:
var childNode = {
template: '<div>{{myMessage}}</div>',
props:['myMessage']
}
複製程式碼
v-ref
$children
Vue.js常用指令
- v-if
- v-show
- v-for
- v-bind
- v-on
- v-else
v-for
在v-for中,可以使用$index來獲取v-for迴圈到第幾個了,從0開始計數
<ul>
<li v-for="item in items">
{{item}}
<button v-on:click="printIndex($index)">Index</button>
</li>
</ul>
複製程式碼
v-show
在不滿足條件時,使用v-show的指令會被新增css的style="display: none;"
v-else
必須跟在v-show或者v-if後面
v-bind
將這個元素繫結一個HTML元素特性,這個繫結行為是需要表示式運算後得的
標準形式: v-bind:argument="expression"
例如:<a href="#" v-bind:class="2>1?'ss':''"></a>
複製程式碼
執行後因為2>1,則html為
<a href="#" class="ss"></a>
複製程式碼
v-on
監聽DOM事件,標準形式和v-bind差不多
v-bind和v-on縮寫
v-bind縮寫為一個冒號,v-on縮寫為@符號
<!--完整語法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--縮寫語法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--完整語法-->
<button v-on:click="greet">Greet</button>
<!--縮寫語法-->
<button @click="greet">Greet</button>
複製程式碼
v-bind:is動態元件
<!-- 元件會在 `currentTabComponent` 改變時改變 -->
<component v-bind:is="currentTabComponent"></component>
複製程式碼
ES6語法問題
正規表示式
在 JavaScript中,正規表示式也是物件。這些模式被用於 RegExp 的 exec 和 test 方法, 以及 String 的 match、replace、search 和 split 方法
Promise
Promise物件是一個建構函式,用來生成Promise例項,其中接收一個函式作為引數
//1. 原型
const promise = new Promise(一個函式)
//2. 具體
const promise = new Promise(function(resolve, reject) {
//這裡執行具體的非同步操作
//Some Code
if (非同步操作成功) {
resolve(value);
} else {
reject(error);
}
複製程式碼
在這個if語句之前promise的狀態都是pending,然後執行resolve時變為resolved,說明非同步操作成功。而操作失敗呼叫reject,promise的狀態由pending變為rejected。
可以通過then來分別指定reject和resolve函式
//1. 傳入指定函式
promise.then(resolve, reject); //reject函式是可選的
//2. 匿名函式
promise.then(function(value) {
//這個函式是非同步操作成功時呼叫的resolve函式
// some code
}, function(error) {
//非同步操作失敗時呼叫的reject函式
// some code
};
複製程式碼
promise是之前用Promise建構函式生成的。
在使用then之後,會返回一個新的Promise例項,這時當前then返回的值會作為下一個then的resolve函式的引數
//1.不包括對錯誤的處理行數reject
promise.then(function(value) {
return someValue;
}).then(function(value) { //這時的value就是之前的someValue
//some code
});
//2.包括reject函式處理
promise.then(
function(value) { // resolve
return someValue;
} //reject省略
).then(
function(value) { //resolve
//some code
},
function(error) { //reject
//some code
}
);
複製程式碼
只要是Promise就能在裡面執行非同步操作,Promise就相當於非同步操作的容器。
在catch函式是then(null, rejection)別名,Promise的錯誤具有冒泡性,會一直往下傳遞,知道被catch捕獲
Concise Properties(物件字面量擴充套件)
當物件屬性和語法識別符號相同時,可以被簡寫。
var x = 2, y = 3;
var o = {
x: x,
y: y
}
複製程式碼
下面的程式碼段和上面的相同
var x = 2, y = 3;
var o = {
x,
y
}
複製程式碼
箭頭表示式
基礎語法
- (引數1,...,引數N) => {函式體}
- 單一引數 => {函式體}
例子:
> var a = b => {return b+1;}
> a(3)
4
複製程式碼
這個函式a就是以b為引數將b加一後返回。參考
高階函式
函式閉包
function add(a) {
return function(b) {
return a + b
}
}
var add3 = add(3)
add3(4) === 3 + 4 //true
複製程式碼
相當於在ES6中寫法為多個箭頭符號:
let add = a => b => a + b
複製程式碼
定義類
注意,定義“類”的方法的時候,前面不需要加上function這個關鍵字,直接把函式定義放進去了就可以了。另外,方法之間不需要逗號分隔,加了會報錯。
//定義類
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
複製程式碼
在類內定義函式
var SomeObject = {
[AFunc]:function(){
return 123;
}
}
//使用
> SomeObject[AFunc]()
123
複製程式碼
這樣有一個物件叫SomeObject,有一個方法叫AFunc
CSS
inherit關鍵字
某個屬性將這個關鍵字作為值,則屬性會繼承父類的屬性
span
{
color: blue;
}
.extra span
{
color: inherit;
}
複製程式碼
選擇最後一個子元素
:last-child選擇權
p:last-child
{
background:#ff0000;
}
複製程式碼
等同於:nth-last-child(1)
p:nth-last-child(1)
{
background:#ff0000;
}
複製程式碼
p:nth-last-child(2)選擇倒數第二個
變數作用域
function square(num) {
total = num * num;
return total;
}
var total = 50;
var number = square(20);
alert(total);
複製程式碼
在這裡因為函式square裡的total沒有用var來宣告,則會改變total的值,在定義一個函式時,我們一定要把它內部的變數全部明確宣告為區域性變數
DOM 選擇器
getElementsByTagName
:可以使用萬用字元,網頁中所有元素都會被返回在返回陣列中document.getElementByTagName("*")
getElementsByClassName
:使用這個方法可以查詢帶有多個類名的元素document.getElementsByClassName("import sale")
在HTML5提供了強大的原生類CSS選擇器querySelector
和querySelectorAll
document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];
複製程式碼
通過obj.setAttribute("屬性")
設定的屬性不會改變網頁原始碼,因為DOM的工作模式:先載入文件靜態內容,再動態重新整理,動態重新整理不影響文件的靜態內容。DOM能夠對頁面內容進行改變(重新整理)卻不需要在瀏覽器裡重新整理頁面
nodeType屬性
通過元素.childNodes
獲得元素的所有子元素,這其中不單單包括<p>
這種,還包括屬性節點和文字節點,他們的nodeType
不同。
- 元素節點的
nodeType
屬性值為1 - 屬性節點的
nodeType
屬性值為2 - 文字節點的
nodeType
屬性值為3
如果JS檔案或者程式碼在HTML文件的<head>
和<script>
中定義呼叫的,他會在HTML文件之前被載入到瀏覽器,此時沒有完整的DOM就不能進行DOM選擇。需要在元素全部載入後再執行,即window.onload
事件中定義回撥函式。
阻止預設事件行為
阻止a標籤click後跳轉到連結
<a id="ss" onclick="fff(this); return false;" href="127.0.0.1">Link!</a>
複製程式碼
html5 history api
使用 back(), forward() 和 go() 方法來完成在使用者歷史記錄中向後和向前的跳轉。
window.history.back()
複製程式碼
HTML5引入了 history.pushState() 和 history.replaceState() 方法,它們分別可以新增和修改歷史記錄條目。這些方法通常與window.onpopstate 配合使用。猜測路由的原理是history.pushState
然後觸發window.onpopstate
事件,然後重新渲染相關區域性頁面,還有攔截<a>
預設的跳轉操作(Todo:還需要了解Vuex原始碼)
Math.ceil Math.floor Math.round
Math.ceil
是向上取整, Math.floor
是向下取整,Math.round
是四捨五入。
> var a = 14/47
> var a = a*100
> a
29.78723404255319
> Math.ceil(a)
30
> Math.round(a)
30
> Math.floor(a)
29
複製程式碼
javascript繼承
比如一個建構函式SS
function SS() {
this.name = "ss"
}
複製程式碼
一個父類建構函式DD
function DD() {
this.ddd = "ff"
}
複製程式碼
那麼如果需要SS構造出來的物件能夠繼承DD中的方法和屬性,就需要prototype
指定DD函式建立出來的物件
>SS.prototype = new DD()
>var ss = new SS()
>ss.ddd
ff
複製程式碼
小細節
setTimeout和setInternval
在使用完後必須呼叫clearInterval和clearTimeout來清除定時器。在HTML5規範中規定定時器的定時時間不能小於4ms,如果是小於4ms,則預設為4ms,所以在這個例子中的0,預設的是4ms。定時器計時的執行緒和js引擎執行執行緒不一樣,當計時器到時會被加入js引擎執行執行緒的事件佇列等待執行, 所以計時到時後,不是等到你回撥函式執行完才開始再次計時,而是加入事件佇列後就開始在計時執行緒裡計時了,參考
json支援的型別
型別 | 描述 |
---|---|
數字型(Number) | JavaScript 中的雙精度浮點型格式 |
字串型(String) | 雙引號包裹的 Unicode 字元和反斜槓轉義字元 |
布林型(Boolean) | true 或 false |
陣列(Array) | 有序的值序列 |
值(Value) | 可以是字串,數字,true 或 false,null 等等 |
物件(Object) | 無序的鍵:值對集合 |
空格(Whitespace) | 可用於任意符號對之間 |
null | 空 |
後端
flask-cros解決跨域問題
安裝flask-cros
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
複製程式碼
post得到bad request ,http code 400
這是因為我在前端用axios中設定為json型別傳送請求,所以在後端POST的表單來接收就是錯誤的,因為傳送到後端的http頭部資訊中Accept: application/json
,所以在POST的處理函式用需要使用request.get_json()
@app.route('/detail', methods=["POST"])
def get_event_detail():
data = request.get_json()
複製程式碼
mysql資料庫配置
對於mysql,預設配置/etc/mysql/my.conf中是bind-address = 127.0.0.1,所以如果需要遠端訪問mysql需要改為存放mysql伺服器的IP地址。可以通過執行下面語句來檢視,如果沒修改前mysql只會監聽來自本機的IP地址
> netstat -an | grep 3306
複製程式碼
同時需要修改遠端訪問使用者的許可權,比如使用者snort,密碼snort,資料庫snort。需要執行下面的命令
grant all privileges on snort.* to snort@'%' identified by "snort";
複製程式碼
mysql資料庫使用
選擇語句中新增distinct
去除重複的結果
select distinct ip_dst from iphdr;
複製程式碼
自然連線:只考慮那些在兩個關係模式中都出現的屬性上取值相同的元素對。
使用between
表示某個值在一個範圍內
select name from instructor where salary between 9000 and 10000;
複製程式碼
獲取從n開始m條記錄:
select * from table_name limit n, m; -- n是開始位置,m是偏移量,可以實現分頁
複製程式碼
集合操作
SQL在關係上的操作union、intersect、except
分別對應數學集合論中的並集、交集、差運算
git配置代理
使用socks5代理,埠是1080,地址是127.0.0.1
git config --global http.proxy socks5://127.0.0.1:1080
git config --global https.proxy socks5://127.0.0.1:1080
複製程式碼
檢視git config配置資訊
git config --list
複製程式碼