Vue 学习第八天

了解了回掉函数的使用，了解了文件的读取，

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() 来处理。

//【单独处理异常。】

//读取文件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,也不需要执行下面的，那么上述使用异常函数就有问题了，

//【统一处理异常。】

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

</router-link>

6.2 然后建立相关组件页面。NewsList.vue

<div>

<h1>这个是新闻列表</h1>

</div>

</template>

</script>

</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界面。

【模板整理如下】

<div>

</p>

</div>

</a>

</li>

</ul>

</div>

</template>

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>

.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">

<h1>{{item.title}}</h1>

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

</p>

</div>

</router-link>

9.2 创建页面 NewsInfo.vue，然后在route.js 中进行配置。基本的框架就行，暂时不实现特效。

<div>

</div>

</template>

</script>

</style>

9.3根据请求，来到指定的页面，然后展示指定的数据。前提是要得到指定的id号，那么渲染页面内容的id号则需要得到，

【获取id】的两种方式。

1.？？？带问号的，就是使用this.$route.query(‘id’)

2./id/name/这种形式的，就是使用this.$route.params.id 来获取。

<div>

<!--拿到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>

export default {

data (){

return {

id: this.$route.params.id, //将url 地址中传递过来的id 值，

}

</script>

</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 学习第八天

猜你喜欢