Vue 学习第八天
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 :[] 屬性
?
?
?
?
?
?
?
?
?
?
?
?
?
總結
- 上一篇: 卫生间塑钢门铰链怎么安装?
- 下一篇: 问一下佛山瓷砖厂家都有哪些?