VueCLI商城项目开发纪实day.2

Home页第一个板块新闻板块
新闻板块是Home组件中的一个子组件
创建

<template>
	<div id="news">
		<h3>{{ name }}</h3>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				name:"news"
			}
		}
	}
</script>

引入

import newsComponent from '../src/components/home/newsComponent.vue'

配置路由信息

{path:"/home/news",component:newsComponent}

ok

新闻页面板块内容
1，绘制界面
MUI中的media-list缩略图
2，axios获取数据
时间插件用moment来简化操作，很简单的设置全部时间的格式
数据还是自己手写的JSON数据
3，渲染v-for循环，别忘了绑定key值

到这问题不大
下一步新闻列表中的每一项打开对应一个新闻详情都是一个路由对应着，让每一条新闻都带有一个id，点击哪条，就将哪条的id传给新闻详情的组件

<router-link :to=" '/home/news/newsInfo/'+item.id ">

在这绑定路由，路由格式要注意别写错了，写法多种在这，就简单的来
/home/news/newsInfo/id
在传入组件获取传入的id用$route.params.id 可以获取，根据传入id决定组件请求信息，就是最后新闻信息渲染的结果

画新闻信息组件的界面


新闻下方还要有一个评论区，一个项目要有多个地方要用掉评论，所以做一个全局组件，作为评论区
在需要的地方引入调用

//引入评论子组件
	import comment from '../subComponents/commont.vue'
	//在使用的组件中注册组件

评论组件页面

想要让进入每个新闻下面的评论区都有不同的评论展现，而且发布完新评论后再退出去，再进来评论还在，这块费点事，试了几种方法都不行，选了一个感觉实际开发不能这么干的方式：利用localSStorage存储评论信息，感觉这方式找不出比这更差的了：记录下实现：进入组件时判断localStorage中有没有跟传入id匹配的用户信息，正常进入是没有的，让获取的评论=localStorage，等于将评论信息放到localStorage中，以后的评论添加修改都发生在localStorage中，但localStorage存储信息大小只有5M，所以更以后有了真实接口，用个正经的方法，第一个项目就先达成效果，
至此home页新闻区就做好了，下一站，分享区。gogogo~
评论组件：

<template>
	<div class="com">
		<h4>评论区</h4>
		<hr>
		<textarea class="inner" v-model="content">
		</textarea>
		<mt-button size="large" type="primary" @click="send">发送评论</mt-button>
		<ul class="con" v-for="(item,index) in list" :key=index>
			<li><span>{{ index+1 }}楼 匿名用户</span><span>2020-01-05</span></li>
			<p class="text">{{ item.content }}</p>
		</ul>
		<mt-button plain size="large" type="danger" @click="load">加载更多。。。</mt-button>
	</div>
</template>

<script>
	import {
		Toast
	} from 'mint-ui';

	export default {
		data() {
			return {
				list: [],
				content: '',
				newContent: [],

			}
		},
		props: ['conid'],
		mounted() {
			this.getComment();
		},
		methods: {
			send() {
				let user = 'content_' + this.conid;
				let common = {
					"content": this.content
				};
				let newContent = JSON.parse(localStorage.getItem(user));
				newContent.unshift(common);
				localStorage.setItem(user, JSON.stringify(newContent));
				this.list = newContent;
				this.content='';
			},
			getComment() {
				if (JSON.parse(localStorage.getItem('content_' + this.conid)) == null) {
					this.axios.get('/static/json/comment' + this.conid + '.json')
						.then(res => {
							this.list = res.data;
							localStorage.setItem('content_' + this.conid, JSON.stringify(res.data));
						})
						.catch(err => {
							console.log(err)
						})
				} else {
					this.list = JSON.parse(localStorage.getItem('content_' + this.conid));
				}
			},
			load() {
				Toast({
					message: 'Loading...',
					position: 'middle',
					duration: 2000,
					iconClass: 'mui-spinner'
				});
				setTimeout(() => {
					Toast({
						message: '暂时没有更多',
						position: 'middle',
						duration: 1000,
					});
				}, 2000)

			}
		}
	}
</script>

<style scoped>
	.com {
		margin-bottom: 55px;
	}

	.com .inner {
		width: 98%;
		height: 100px;
		margin: 0 3px;
	}

	.com .con {
		padding: 0;
		list-style: none;
		margin: 5px 2px;
	}

	.com .con li {
		border: 1px solid #cccccc;
		display: flex;
		justify-content: space-between;
		background-color: #ccc;
		border-radius: 5px;
	}

	.com .con p {
		margin: 0;
		text-indent: 2em;
		color: #555500;
		border-bottom: 1px solid #000000;
	}

	.mint-button--large {
		max-width: 99%;
		margin: 0 2px;
	}
</style>