2019.7.7——7.24
01 和 02没有关系
01的图片资源自己有
要cnpm i,安装node_modules,然后npm run dev
(接口要改 http://www.liulongbin.top:3000)
day7\02.vms
npm run dev:EADDRINUSE
3000端口被占用
把新闻资讯 改成路由
创建newslist组件
router.js:
import NewsList from './components/new/NewsList.vue'
route:[{
path:'/home/newslist',component:NewList
}]
三部分:
MUI中的media-list.html绘制界面
vue-resource获取数据
渲染真实数据
MUI中的media-list.html绘制界面
把mui-master/examples/helo-mui/exmples/media-list.htm中要的放在NewsList.vue中<template><div>里
更换image src
HomeContainer.vue:
<a></a> => <router-link to="/home/newslist">
跳转后 http://localhost:3000/#/ =》 http://localhost:3000/#/home/newslist
写router-link to的地址时,前面要有/
在comments=》news(文件夹)=》NewsList.vue:
<template>
<div></div>
</template>
<style lang="scss" scoped> //设置样式
.mui-table-view{
li{h1{font-size:14px;}
.mui-ellipsis{font-size:12px;color:#226afff;display:flex;justify-content:space-between;}
}
}
</style>
<script>
export default{
data(){
return {}
},
methods:{
getNewsList(){
this.$http.get('api/getnewsList').then(result=>{
if(result.body.status==0){
}else{
}
})
}
}
}
</script>
渲染数据:
NewsList.vue:
<template>
<li v-for="item in newslist" :key:'item.id'>
<h1>{ {item.title}}</h1><p>{ {item.add_itme}}</p><p>{ {item.click}}</p>
<img :src="item.img_url">
总结:
this.$http.get() 获取data data{}里定义newslist:[] created(){}里挂载getNewsList(),不然没有数据
v-for渲染数据
//Set default values using the global configuration 全局配置
main.js:
设置请求的根路径:
Vue.http.options.root='http://vue.studyit.io';
修改HomeContainer.vue中获取轮播图数据的地址
this.$http.get('api/getlunbo').
这个请求数据的地址没有/
不让最后一行被挡住
首行没被挡住因为App.vue=>app-container设置padding-top 照例设padding-bottom
全局过滤器:main.js
import moment from 'moment'
Vue.filter('dataStr',function(dataStr,pattern="YYYY-MM-DD HH:mm:ss"){
return moment(dataStr).format(pattern)
})
NewsList。vue
{ {item.add_time|dateFormat(YYYY-MM-DD)}}
newslist改造完是newsinfo
点击每一条新闻链接
每一条改成router-link
newlist。vue=》<a>改成<router-link to>
item.id属于表达式
属性用v-bind绑定
创建组件页面newinfo。vue
<template>、<script>、<style>三件套
router.js:
import NewInfo from './components/news/NewsInfo.vue'
routes:[
{path:'/home/newsinfo/:id',conponent:NewInfo}
]
NewsInfo.vue:
1.id操作
{ {$router.params.id}}
export.default{
}
2.标题、样式、内容填充
.newsinfo-container{
padding:0 4px;
.title{}
.subtitle{}
.content{
img{
width:100%
///去掉scoped 不会有全局污染
}
}
}
3.新闻详情 页面布局 和 数据渲染
其中htmll内容 用v-html渲染
img问题
/路由模块中,将新闻详情的 路由地址 和 组件页面对应起来
评论:
subcomment=》comment。vue
三件套
如何封装子组件并引入??
1.·import comment from './comment.vue'·
2.父组件用comments属性
export default{
components:{
"comment-box":comment
}
}
3.将子组件的注册名称以标签形式在页面中引用
button
plain 按钮中空
匿名用户、楼层一栏background-color:#ccc;font-size
获取所有的评论数据到页面中:
父组件传新闻id给comment.vue
this.$http.get("api/getcomments"+this.id+"?pageindex="+this.pageIndex).then()
为“加载更多”绑定点击事件,展现其他页评论
@click="getMore"
问题:
点击“加载更多”,又是第一楼到第十楼,之前的数据没了
this.comments = this.comments.concat(result.body.message);
哪怕翻到第4页 没有数据也没关系
发表评论:
this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageIndex)
getMore() {
// 加载更多
this.pageIndex++;
this.getComments();
}
………………
把评论组织成评论对象,放到comments[]中,不用刷新
如果用getComments方法刷新评论列表,可能只得到最后一页评论,前几页得不到
1.为textarea做双向数据绑定
2.为发表评论按钮绑定事件
3.vue-resource把评论交给服务器
4.用unshift把评论拼接到comments数组开头
地址 /api/postcomments/:artid
加冒号,说明是参数
发布方法:4
methods:{
postComment(){
this.$http.post('api/postcomments/'+$route.params.id,{content:this.msg.trim()}).
then(
function(result){
var cmt={};
this.comments.unshift(cmt);
this.msg="";
///清空
}
)
///接口文档:返回数据格式样例
///.then()里是发送数据成功后对数据的处理
///api写的是content:内容
///.trim()空格
}
}
main.js中配置Vue.http.potions.emulateJSON=true;全局配置
图片:
路由 router-link="home/photolist"