vue-cms（1）

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"