json-server
? 是 NodeJS 的一個包，作用：用來提供假數(shù)據(jù)
? 在沒有服務(wù)器接口的時候，通過這個工具提供一個假數(shù)據(jù)，當有了服務(wù)器接口
? 再替換為真正的真數(shù)據(jù)（服務(wù)器接口數(shù)據(jù)）即可
? 只要提供一個 json 數(shù)據(jù)（文件）給 json-server ，那么 json-server 就可以提供
? 針對于這個 json數(shù)據(jù)的 CRUD 、 分頁、 搜索 等功能
使用步驟：
? 1 全局安裝： npm i -g json-server
? 2 準備一個 json 文件
? 3 在 json 文件所在目錄中，運行命令： json-server todos.json --watch
? 特點：
? 1.json-server提供的接口是：REST API(restful)
? 2.提供的接口沒有跨域問題
查詢的方式：get
? 查詢所有：
? 查詢某一條數(shù)據(jù)（id為2的數(shù)據(jù)）
? http://localhost:3000/todos/2
添加：POST請求
? 接口地址：http://localhost:3000/todos
在軟件中：row--->json
不需要寫id，直接寫
注意點：
在json中寫數(shù)據(jù)格式必須給鍵名加上雙引號
{
"name":"梳頭",
"done":false
}
修改數(shù)據(jù)：PATCH /PUT 請求
? 修改id為2的數(shù)據(jù)
? 接口地址：http：//localhost：3000/todos/2
特點：使用put請求，需要將所有的數(shù)據(jù)，都發(fā)送給接口
patch 打補丁
刪除數(shù)據(jù)：DELETE請求
刪除id為2
接口地址：http://localhost:3000/todos/2
axios的使用
定義
? axios 是一個專門用來發(fā)送ajax請求的包，是一個http客戶端，可以運行在瀏覽器和node中發(fā)送請求
? 注意點：
? axios與vue沒有關(guān)系，就是axios是一個獨立的包
使用：
1.安裝 npm i axios
2.在頁面中引入axios，然后使用
發(fā)送查詢GET請求
查詢 不傳參
axios.get('http://localhost:3000/todos').then(res=>{
console.log('結(jié)果為：',res.data)
})
傳參查詢
// 傳參查詢
axios.get('http://localhost:3000/todos',{
params:{
_page:1,
_limit:2
}
}).then(res=>{
console.log('獲取的結(jié)果為',res.data)
})
添加 POST請求
// 添加 POST
axios
.post('http://localhost:3000/todos',{
name:'關(guān)門',
done:false
})
.then(res=>{
console.log('添加成功',res.data)
});
修改patch/put
// 修改 patch / put
axios
.patch('http://localhost:3000/todos/3',{
name:'養(yǎng)發(fā)'
})
.then(res=>{
console.log('修改成功',res.data)
});
axios.put('http://localhost:3000/todos/3',{
name:'理發(fā)'
}).then(res=>{
console.log('使用put修改成功',res.data)
});
刪除delete
// 刪除delete
axios.delete('http://localhost:3000/todos/3').then(res=>{
console.log('刪除任務(wù)成功',res.data)
});
使用模板拼接字符串
字符串模板拼接字符串
? 利用字符串模板來拼接字符串：
? ${} 作用相當于原來的字符串拼接
? ${} 中可以使用任意的JS表達式
? const msg = 年齡:${age},姓名:${name},是否為成年人:${age>18?'是':'否'}
過濾器的使用
過濾器的語法：通過 | 管道符號，來使用過濾器
作用：使用 date 過濾器，來格式化 curTime 這個數(shù)據(jù)，最終，將格式化后的數(shù)據(jù)輸出
//html
<div id="app">
<!-- 過濾器的語法：通過 | 管道符號，來使用過濾器 -->
<!--
作用：使用 date 過濾器，來格式化 curTime 這個數(shù)據(jù)，最終，將格式化后的數(shù)據(jù)輸出 -->
<p>{{ curTime | date }}</p>
<p>{{ curTime | date }}</p>
<p>{{ curTime | date }}</p>
<p>{{ curTime | date }}</p>
</div>
回調(diào)函數(shù)第一個參數(shù)：表示要格式化的數(shù)據(jù)
后面可以有任意多個參數(shù)，這些參數(shù)都是在 使用過濾器 的時候傳入的
Vue.filter('date', input => {
return moment(input).format('YYYY-MM-DD HH:mm:ss')
})
全局過濾器
調(diào)用本地方法格式化時間
Vue.filter('data',(input)=>{
//調(diào)用本地方法格式化時間
console.log(input.toLocaleString())
return input.toLocaleString()
});
const vm = new Vue({
el: '#app',
data: {
currDate : new Date
}
})
使用moment格式化時間
//使用moment格式化時間
Vue.filter('data',(input)=>{
//調(diào)用comment格式化時間
input = moment(input).format('YYYY-MM-DD HH:mm:ss');
return input;
// return input.toLocaleString()
});
const vm = new Vue({
el: '#app',
data: {
currDate : new Date
}
})
局部過濾器
注意點：
定義局部過濾器，必須在vue的實例當中
//局部過濾器
filters:{
data(input,type){
return moment(input).format(type)
}
}
全局過濾器 和 局部過濾器的不同之處？？？
? 全局過濾器可以在任意 Vue實例（組件） 中使用
? 局部過濾器，只能在當前 Vue實例（組件）中使用
