Vue 学习第八天
Vue ?學(xué)習(xí)第八天
1.
了解了回掉函數(shù)的使用，了解了文件的讀取，
?
?
2.Promise 函數(shù)講解
console.dir(Promise)
//Promise 函數(shù)講解
//1.其是一個構(gòu)造函數(shù)，既然是構(gòu)造函數(shù)，就可以new 一下，然后得到一個實例
//console.dir(Promise) 看一下，
//2.Promise 上有兩個函數(shù)，第一個是resolve (成功之后的回掉函數(shù)) , reject (失敗之后的回掉函數(shù))
//3.在Promise 構(gòu)造函數(shù)的Prototype 屬性上有一根.then()方法，也就是說只要是Promise 構(gòu)造的實例，都可以訪問這個方法
//4.如果Promise 表示一個異步操作，那么每當(dāng)我們new 一個Promise 實例，這個實例就表示一個具體的異步操作，
//5.既然Promise 的實例表示一個異步操作，那么久只能有兩種狀態(tài)，
// 5.1 異步執(zhí)行成功，調(diào)用成功的回掉函數(shù)，resolve,
//5.2 異步執(zhí)行失敗,調(diào)用失敗的回掉函數(shù)，reject ,
//5.3 由于Promise的實例是一個異步操作，所以內(nèi)部拿到操作的結(jié)果后，無法return 把結(jié)果返回給調(diào)用者，；
//這個時候室內(nèi)使用回掉函數(shù)的形式，把成功或者失敗的結(jié)果返回給調(diào)用者，
//6.我們可以在new 出來的Promise實例上調(diào)用.then()方法，【預(yù)先】為這個Promsie 異步操作指定成功和失敗的回掉函數(shù)，
//.then(resolve,reject)
?
//注意，這里new 出來的promise ,只是代表形式上的異步操作，
//形式上的異步操作：就是具體執(zhí)行不清楚，
//var promise = new Promise();
//使用function 執(zhí)行
// var promise = new Promise(function(){
// //這個function 內(nèi)部就是執(zhí)行具體的異步操作，
// });
?
//每當(dāng)new 一個Promise 實例的時候，就好立即執(zhí)行其內(nèi)部 異步操作中的代碼，
//除了創(chuàng)建對象實例以外，內(nèi)部的也會執(zhí)行內(nèi)部代碼，
// const fs = require('fs');
// const path = require('path');
// var promise = new Promise(function(){
// fs.readFile('2.txt','utf-8',(err,dataStr)=>{
// if(err) throw err;
// console.log(dataStr);
// });
// })
?
//改造升級一下，變成調(diào)用的形式，按需執(zhí)行，
const?fs?= require('fs');
const?path?= require('path')
?
function?getFileByPath(filePath){
var?promise?= new?Promise(function(){
fs.readFile(filePath,'utf-8',(err,dataStr)=>{
if(err) throw?err;
console.log(dataStr);
})
})
}
?
getFileByPath('2.txt');
?
?
3.promise 執(zhí)行原理分析。
//beta 2.沒有數(shù)據(jù)返回，失敗。繼續(xù)修改。
//使用resolve和reject
const?fs?= require('fs');
const?path?= require('path')
function?getFileByPath(filePath){//1
var?promise?= new?Promise(function(resolve,reject){//3
fs.readFile(filePath,'utf-8',(err,dataStr)=>{ //7
// if(err) throw err;
// console.log(dataStr);
if(err) return?reject(err) //這兩個函數(shù)沒有定義。
resolve(dataStr) //通過function 傳過來。
})
})
return?promise;//4
}
//誰調(diào)用誰指定回掉函數(shù)，//5
var?p?= getFileByPath('2.txt');//2
var?result?= p.then(function(dataStr){//6
// console.log(dataStr + 'ooo');
return?dataStr;
},function(err){
return?err;
//console.log(err +'ooo');
})
console.log(result)
?
?
?
4.對異常的處理--單獨處理
getFileByPath('11.txt')
.then(function(data){
console.log(data)
//讀取文件2
return?getFileByPath('2.txt')
},function(err){
console.log('失敗了'+err.message);
//return 一個新的 promise ,不影響后續(xù)的執(zhí)行。
return?getFileByPath('2.txt')
}).then(function(data){
console.log(data);
//讀取文件3
return?getFileByPath('3.txt')
}).then(function(data){
console.log(data)
})
//上述一旦有問題，后面的就不會執(zhí)行了，因為沒有指定失敗的。
console.log('okokokok');
?
?
?
?
5.catch統(tǒng)一處理
//在上一個.then() 中返回一個新的promise 實例，可以繼續(xù)使用下一個.then() 來處理。
//【單獨處理異常。】
//讀取文件1
// getFileByPath('11.txt')
// .then(function(data){
// console.log(data)
// //讀取文件2
// return getFileByPath('2.txt')
// },function(err){
// console.log('失敗了'+err.message);
// //return 一個新的 promise ,不影響后續(xù)的執(zhí)行。
// return getFileByPath('2.txt')
// }).then(function(data){
// console.log(data);
// //讀取文件3
// return getFileByPath('3.txt')
// }).then(function(data){
// console.log(data)
// })
// //上述一旦有問題，后面的就不會執(zhí)行了，因為沒有指定失敗的。
// //因此，需要單獨處理，不要影響后續(xù)promise的正常執(zhí)行，需要單獨為每個promise ，通過 .then 指定一下失敗的回掉。
// console.log('okokokok');
?
//有這樣一個需求，如果某處執(zhí)行錯誤，我們是不需要處理err,也不需要執(zhí)行下面的，那么上述使用異常函數(shù)就有問題了，
//【統(tǒng)一處理異常。】
//catch 起到作用了，
getFileByPath('1.txt')
.then(function(data){
console.log(data)
//讀取文件2
return?getFileByPath('22.txt')
}).then(function(data){
console.log(data);
//讀取文件3
return?getFileByPath('3.txt')
}).then(function(data){
console.log(data)
}).catch(function(err){
//catch的作用，如果前面有任何的Promise 執(zhí)行失敗了，則立即終止所有的promise,并馬上進(jìn)入catch中執(zhí)行。
console.log('catch異常處理。'+err.message);
})
?
console.log('okokokok');
?
?
6.項目-改造新聞資訊的路由鏈接
6.11先改造連接
<router-link?to="/home/newslist">
???????? <span?class="mui-icon mui-icon-home"></span>
???????? <div?class="mui-media-body">新聞咨詢</div>
</router-link>
?
6.2 然后建立相關(guān)組件頁面。NewsList.vue
<template>
<div>
<h1>這個是新聞列表</h1>
</div>?
</template>
?
<script>
?
</script>
?
<style?lang="scss"?scoped>
</style>
?
6.3 進(jìn)行配置，進(jìn)行相關(guān)匹配.在router.js中進(jìn)行兩步配置
6.3.1 導(dǎo)入import?NewsList?from?'./components/news/NewsList.vue';
6.3.2 配置{path :'/home/newslist',component :NewsList}
?
7.NewsList.vue新聞列表的實現(xiàn)。參考MUI中的media-list 實現(xiàn)。
7.1 復(fù)制過來，然后進(jìn)行相關(guān)樣式修改
?
?
?
8.獲取數(shù)據(jù)
8.1 定義導(dǎo)出數(shù)據(jù)
export default {
?
}
8.2定義數(shù)據(jù)
export default {
data (){
?
}
}
?
8.3定義方法
export default {
data (){},
methods :{
?
}
}
?
8.4方法內(nèi)部數(shù)據(jù)實現(xiàn)
getNewsList(){
this.$http.get('xxxx').then(result?=>{??//發(fā)送請求
if(result.body.status?== 0){
//成功--想要彈窗
//對數(shù)據(jù)進(jìn)行存儲接收
}else{
//失敗
}
});
}
其中相關(guān)的步驟就是發(fā)送http請求，對相關(guān)狀態(tài)進(jìn)行判斷，獲得數(shù)據(jù)進(jìn)行存儲，
8.5 內(nèi)部的數(shù)據(jù)展示，通過v-for 實現(xiàn)，
?
【新聞頁面的整體流程實現(xiàn)】
1.NewsList.vue 的實現(xiàn)
2. 相關(guān)路由連接的配置實現(xiàn)
3.數(shù)據(jù)的獲取。先檢查main.js是否安裝了【vue-resource】插件。
4.數(shù)據(jù)渲染，v-for 循環(huán)展示
【特別注意一個插件】。vue-resource是Vue.js的一款插件，它可以通過XMLHttpRequest或JSONP發(fā)起請求并處理響應(yīng)。也就是說，$.ajax能做的事情，vue-resource插件一樣也能做到，而且vue-resource的API更為簡潔。另外，vue-resource還提供了非常有用的inteceptor功能，使用inteceptor可以在請求前和請求后附加一些行為，比如使用inteceptor在ajax請求時顯示loading界面。
【模板整理如下】
<template>
<div>
<ul?class="mui-table-view"><!--1. 做好組件頁面-->
<!-- 3. 將拿到的數(shù)據(jù)做渲染-->
????????????????<li?class="mui-table-view-cell mui-media"?v-for="item?in?newslist" :key="item.id">?
????????????????????<a?href="javascript:;">
????????????????????????<img?class="mui-media-object mui-pull-left"?src="https://images.gitee.com/uploads/34/2037534_liusongjie-1.png?1531054435">
????????????????????????<div?class="mui-media-body">
????????????????????????????<h1>幸福</h1>
????????????????????????????<p?class='mui-ellipsis'>
<span>發(fā)表時間：2018-07-11 10:56</span>
<span>5次</span>
</p>
????????????????????????</div>
????????????????????</a>
????????????????</li>
????????????</ul>
</div>?
</template>
?
<script>
import?{Toast} from?'mint-ui'
export?default?{
data?(){
return?{
newslist :?[]
}
},
created?() {
this.getNewsList();
},
methods :{
getNewsList(){ //2.拿數(shù)據(jù)---
this.$http.get('xxxx').then(result?=>{
if(result.body.status?== 0){
//成功--保存數(shù)據(jù)到列表上
this.newslist?= result.body.message;
}else{
//失敗---想要彈窗
Toast('獲取新聞數(shù)據(jù)失敗');
}
});
}
}
}
</script>
?
<style?lang="scss"?scoped>
.mui-table-view{
li{
h1{
font-size: 14px;
}
.mui-ellipsis{
font-size: 12px;
color: blue;
display: flex;
justify-content: space-between;
?
}
}
}
</style>
?
自己模擬的假數(shù)據(jù)，然后通過v-for 封裝進(jìn)去
this.newslist?= [
{'id':?'1','title':'幸福','time':'2018-07-11 13:33','clickTotal':'5'},
{'id':?'2','title':'快樂','time':'2018-07-11 13:34','clickTotal':'0'},
{'id':?'3','title':'吉祥','time':'2018-07-11 13:38','clickTotal':'15'}
// ['1','11','1','1'],
// ['2','11','22','21'],
// ['12','11','212','221']
];
?
9. 具體新聞內(nèi)容的實現(xiàn)。
##實現(xiàn)新聞詳情列表的開發(fā)，
1.把列表中的每一項改造為router-link.同時，在跳轉(zhuǎn)d時候應(yīng)該提供唯一的Id標(biāo)識符，
2.創(chuàng)建一個新聞詳情的組件頁面，NewsInfo.vue
3.在路由模塊中，將 新聞詳情的 路由地址 和 組件頁面 對應(yīng)起來，
?
9.1 id 傳過去時的組裝:to="'/home/newsinfo/'+item.id"
<router-link?:to="'/home/newsinfo/'+item.id">
????????????????????????<img?class="mui-media-object mui-pull-left"?src="https://images.gitee.com/uploads/34/2037534_liusongjie-1.png?1531054435">
????????????????????????<div?class="mui-media-body">
????????????????????????????<h1>{{item.title}}</h1>
????????????????????????????<p?class='mui-ellipsis'>
<span>發(fā)表時間：{{item.time}}</span>
<span>{{item.clickTotal}}次</span>
</p>
????????????????????????</div>
????????????????????</router-link>
?
9.2 創(chuàng)建頁面 NewsInfo.vue，然后在route.js 中進(jìn)行配置。基本的框架就行，暫時不實現(xiàn)特效。
<template>
<div>
<h1>新聞詳情-</h1>
</div>
</template>
?
<script>
</script>
<style?lang="scss"?scoped>
</style>
?
9.3根據(jù)請求，來到指定的頁面，然后展示指定的數(shù)據(jù)。前提是要得到指定的id號，那么渲染頁面內(nèi)容的id號則需要得到，
【獲取id】的兩種方式。
1.？？？帶問號的，就是使用this.$route.query(‘id’)
2./id/name/這種形式的，就是使用this.$route.params.id 來獲取。
<template>
<div>
<h1>新聞詳情--{{id}}</h1>
<!--拿到ID 的方式
1. http://localhost:3000/#/home/newsinfo/1 這種使用 parmas 來接收或者this.$route.params里面取
2.http://localhost:3000/#/home/newsinfo/？username=
用vue router的時候可以直接從this.$route.query
-->
</div>
</template>
<script>
export?default?{
data?(){
return?{
id:?this.$route.params.id, //將url 地址中傳遞過來的id 值，
}
}
}
</script>
<style?lang="scss"?scoped>
?
</style>
總結(jié)：此處三個重要的點
1.<router-link?:to="'/home/newsinfotest/'+ item.id">?
router-link的組裝形式
2.{path :?'/home/newsinfo/:id',component :?newsinfo},
route.js 中的path匹配規(guī)則
3.<h1>test info---{{$route.params.id}}</h1>
組件頁面拿內(nèi)容的形式
4.嘗試加一個參數(shù)--success
答：
route.js 中這樣封裝。
{path :?'/home/newsinfo/:id:title',component :?newsinfo},
路由連接中這樣封裝
<router-link :to=”’/home/newsinfo/’+item.id+item.title”>
在數(shù)據(jù)獲取中id:?this.$route.params.id, //將url 地址中傳遞過來的id 值，
title :?this.$route.params.title?//標(biāo)題
?
?
10.實現(xiàn)新聞詳情頁面的頁面布局和數(shù)據(jù)渲染，
1.頁面布局
2.數(shù)據(jù)渲染。真實情況是到數(shù)據(jù)庫拿，我的是模擬的json 對象數(shù)據(jù)
?
11.繪制評論子組件
1.創(chuàng)建子組件，comment.vue
2.把子組件放到頁面中去，NewsInfo.vue 中，就是實現(xiàn)掛載。
2.1 先倒入子組件，import comment from ‘../subcomponents/comment.vue’
2.2 掛載到父組件的 components :{ } 中，使其成為自己的子組件
components:{
'comment-box'?:?comment?//2.
}
2.3 注冊完畢以后，以標(biāo)簽的形式使用即可，
<comment-box></comment-box>
?
2.4 發(fā)表評論和加載更多按鈕。
【按需倒入組件】
import?{Header,Swipe, SwipeItem,Button} from?'mint-ui'?
Vue.component(Button.name, Button);
【添加】
<mt-button?type="primary"?size="large">發(fā)表評論</mt-button>
<mt-button?type="danger"?size="large">加載更多</mt-button>
?
2.5 初始化加載評論數(shù)據(jù)
根據(jù)這個新聞內(nèi)容的ID 獲取評論數(shù)據(jù)，那么父組件就要向子組件傳值
<comment-box?:id="this.id"></comment-box>
?
子組件接收，就需要使用props :[] 屬性
?
?
?
?
?
?
?
?
?
?
?
?
?
總結(jié)
- 上一篇： 卫生间塑钢门铰链怎么安装？
- 下一篇： Vue 第九天学习