Vue ?學習第八天

1.

了解了回掉函數的使用，了解了文件的讀取，

?

?

2.Promise 函數講解

console.dir(Promise)

//Promise 函數講解

//1.其是一個構造函數，既然是構造函數，就可以new 一下，然后得到一個實例

//console.dir(Promise) 看一下，

//2.Promise 上有兩個函數，第一個是resolve (成功之后的回掉函數) , reject (失敗之后的回掉函數)

//3.在Promise 構造函數的Prototype 屬性上有一根.then()方法，也就是說只要是Promise 構造的實例，都可以訪問這個方法

//4.如果Promise 表示一個異步操作，那么每當我們new 一個Promise 實例，這個實例就表示一個具體的異步操作，

//5.既然Promise 的實例表示一個異步操作，那么久只能有兩種狀態，

// 5.1 異步執行成功，調用成功的回掉函數，resolve,

//5.2 異步執行失敗,調用失敗的回掉函數，reject ,

//5.3 由于Promise的實例是一個異步操作，所以內部拿到操作的結果后，無法return 把結果返回給調用者，；

//這個時候室內使用回掉函數的形式，把成功或者失敗的結果返回給調用者，

//6.我們可以在new 出來的Promise實例上調用.then()方法，【預先】為這個Promsie 異步操作指定成功和失敗的回掉函數，

//.then(resolve,reject)

?

//注意，這里new 出來的promise ,只是代表形式上的異步操作，

//形式上的異步操作：就是具體執行不清楚，

//var promise = new Promise();

//使用function 執行

// var promise = new Promise(function(){

// //這個function 內部就是執行具體的異步操作，

// });

?

//每當new 一個Promise 實例的時候，就好立即執行其內部 異步操作中的代碼，

//除了創建對象實例以外，內部的也會執行內部代碼，

// 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);

// });

// })

?

//改造升級一下，變成調用的形式，按需執行，

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 執行原理分析。

//beta 2.沒有數據返回，失敗。繼續修改。

//使用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) //這兩個函數沒有定義。

resolve(dataStr) //通過function 傳過來。

})

})

return?promise;//4

}

//誰調用誰指定回掉函數，//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 ,不影響后續的執行。

return?getFileByPath('2.txt')

}).then(function(data){

console.log(data);

//讀取文件3

return?getFileByPath('3.txt')

}).then(function(data){

console.log(data)

})

//上述一旦有問題，后面的就不會執行了，因為沒有指定失敗的。

console.log('okokokok');

?

?

?

?

5.catch統一處理

//在上一個.then() 中返回一個新的promise 實例，可以繼續使用下一個.then() 來處理。

//【單獨處理異常?！?/span>

//讀取文件1

// getFileByPath('11.txt')

// .then(function(data){

// console.log(data)

// //讀取文件2

// return getFileByPath('2.txt')

// },function(err){

// console.log('失敗了'+err.message);

// //return 一個新的 promise ,不影響后續的執行。

// return getFileByPath('2.txt')

// }).then(function(data){

// console.log(data);

// //讀取文件3

// return getFileByPath('3.txt')

// }).then(function(data){

// console.log(data)

// })

// //上述一旦有問題，后面的就不會執行了，因為沒有指定失敗的。

// //因此，需要單獨處理，不要影響后續promise的正常執行，需要單獨為每個promise ，通過 .then 指定一下失敗的回掉。

// console.log('okokokok');

?

//有這樣一個需求，如果某處執行錯誤，我們是不需要處理err,也不需要執行下面的，那么上述使用異常函數就有問題了，

//【統一處理異常?！?/span>

//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 執行失敗了，則立即終止所有的promise,并馬上進入catch中執行。

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 然后建立相關組件頁面。NewsList.vue

<template>

<div>

<h1>這個是新聞列表</h1>

</div>?

</template>

?

<script>

?

</script>

?

<style?lang="scss"?scoped>

</style>

?

6.3 進行配置，進行相關匹配.在router.js中進行兩步配置

6.3.1 導入import?NewsList?from?'./components/news/NewsList.vue';

6.3.2 配置{path :'/home/newslist',component :NewsList}

?

7.NewsList.vue新聞列表的實現。參考MUI中的media-list 實現。

7.1 復制過來，然后進行相關樣式修改

?

?

?

8.獲取數據

8.1 定義導出數據

export default {

?

}

8.2定義數據

export default {

data (){

?

}

}

?

8.3定義方法

export default {

data (){},

methods :{

?

}

}

?

8.4方法內部數據實現

getNewsList(){

this.$http.get('xxxx').then(result?=>{??//發送請求

if(result.body.status?== 0){

//成功--想要彈窗

//對數據進行存儲接收

}else{

//失敗

}

});

}

其中相關的步驟就是發送http請求，對相關狀態進行判斷，獲得數據進行存儲，

8.5 內部的數據展示，通過v-for 實現，

?

【新聞頁面的整體流程實現】

1.NewsList.vue 的實現

2. 相關路由連接的配置實現

3.數據的獲取。先檢查main.js是否安裝了【vue-resource】插件。

4.數據渲染，v-for 循環展示

【特別注意一個插件】。vue-resource是Vue.js的一款插件，它可以通過XMLHttpRequest或JSONP發起請求并處理響應。也就是說，$.ajax能做的事情，vue-resource插件一樣也能做到，而且vue-resource的API更為簡潔。另外，vue-resource還提供了非常有用的inteceptor功能，使用inteceptor可以在請求前和請求后附加一些行為，比如使用inteceptor在ajax請求時顯示loading界面。

【模板整理如下】

<template>

<div>

<ul?class="mui-table-view"><!--1. 做好組件頁面-->

<!-- 3. 將拿到的數據做渲染-->

????????????????<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>發表時間：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.拿數據---

this.$http.get('xxxx').then(result?=>{

if(result.body.status?== 0){

//成功--保存數據到列表上

this.newslist?= result.body.message;

}else{

//失敗---想要彈窗

Toast('獲取新聞數據失敗');

}

});

}

}

}

</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>

?

自己模擬的假數據，然后通過v-for 封裝進去

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. 具體新聞內容的實現。

##實現新聞詳情列表的開發，

1.把列表中的每一項改造為router-link.同時，在跳轉d時候應該提供唯一的Id標識符，

2.創建一個新聞詳情的組件頁面，NewsInfo.vue

3.在路由模塊中，將 新聞詳情的 路由地址 和 組件頁面 對應起來，

?

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>發表時間：{{item.time}}</span>

<span>{{item.clickTotal}}次</span>

</p>

????????????????????????</div>

????????????????????</router-link>

?

9.2 創建頁面 NewsInfo.vue，然后在route.js 中進行配置。基本的框架就行，暫時不實現特效。

<template>

<div>

<h1>新聞詳情-</h1>

</div>

</template>

?

<script>

</script>

<style?lang="scss"?scoped>

</style>

?

9.3根據請求，來到指定的頁面，然后展示指定的數據。前提是要得到指定的id號，那么渲染頁面內容的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>

總結：此處三個重要的點

1.<router-link?:to="'/home/newsinfotest/'+ item.id">?

router-link的組裝形式

2.{path :?'/home/newsinfo/:id',component :?newsinfo},

route.js 中的path匹配規則

3.<h1>test info---{{$route.params.id}}</h1>

組件頁面拿內容的形式

4.嘗試加一個參數--success

答：

route.js 中這樣封裝。

{path :?'/home/newsinfo/:id:title',component :?newsinfo},

路由連接中這樣封裝

<router-link :to=”’/home/newsinfo/’+item.id+item.title”>

在數據獲取中id:?this.$route.params.id, //將url 地址中傳遞過來的id 值，

title :?this.$route.params.title?//標題

?

?

10.實現新聞詳情頁面的頁面布局和數據渲染，

1.頁面布局

2.數據渲染。真實情況是到數據庫拿，我的是模擬的json 對象數據

?

11.繪制評論子組件

1.創建子組件，comment.vue

2.把子組件放到頁面中去，NewsInfo.vue 中，就是實現掛載。

2.1 先倒入子組件，import comment from ‘../subcomponents/comment.vue’

2.2 掛載到父組件的 components :{ } 中，使其成為自己的子組件

components:{

'comment-box'?:?comment?//2.

}

2.3 注冊完畢以后，以標簽的形式使用即可，

<comment-box></comment-box>

?

2.4 發表評論和加載更多按鈕。

【按需倒入組件】

import?{Header,Swipe, SwipeItem,Button} from?'mint-ui'?

Vue.component(Button.name, Button);

【添加】

<mt-button?type="primary"?size="large">發表評論</mt-button>

<mt-button?type="danger"?size="large">加載更多</mt-button>

?

2.5 初始化加載評論數據

根據這個新聞內容的ID 獲取評論數據，那么父組件就要向子組件傳值

<comment-box?:id="this.id"></comment-box>

?

子組件接收，就需要使用props :[] 屬性

?

?

?

?

?

?

?

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的Vue 学习第八天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。