vue 学习第八天 -凯发k8官方网
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() 来处理。
//【单独处理异常。】
//读取文件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">
<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">
<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:56span>
<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>
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.
组件页面拿内容的形式
4.尝试加一个参数--success
答：
route.js 中这样封装。
{path : '/home/newsinfo/:id:title',component : newsinfo},
路由连接中这样封装
在数据获取中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 :[] 属性
总结
- 上一篇：
- 下一篇：