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