项目遇到问题积累----持续更新中

（1）时间截取：

从后台获取的时间数据为2018-08-27 13:11，需要截取为2018-08-27

方法如下：

var newdate = str.substr(0, 10)

知识点参考：http://www.w3school.com.cn/jsref/jsref_substr.asp

代码如下：

for(let i = 0; i < response.data.data.length; i++) {
  self.res_[i].create_time = self.res_[i].create_time.substr(0, 11);						
}

另一种方法：

补充知识：

时间戳转换：let dc=new Date(parseInt(self.res_ [0].create_time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');

（2）对后台接口：

axios数据请求：

mounted: function() {
	const self = this;
	//console.log(self.$route);
	let data = {           //后台需要传的参数
	"start": 1,
	"size": 8,
	"sort": 'pv'
    }
    axios({
	    method: 'post',
	    url: self.GLOBAL.baseURL + '/lesson.php/lesson_interface/getLessonList',//后台接口地址
	    data: Qs.stringify(data)
    }).then(function(response) {
	if(response.data.code == '200') {
	    console.log(response.data)
		self.res = response.data.data;
    }
  }).catch(function(error) {
		console.log(error);
    });
}

data中也应返回相应的数值：（数值的定义需根据接口文档对应的参数而定）

export default {
	name: 'index',
	data() {
		return {
			start: '',
			size: '',
			sort: '',
			res: [],
			res_: [],
			msgs: [],
			attr: '',
			column_id: '',
			column: {},
			flag: true,
			"key": ''
			}
		}
    }

将请求数据插入页面相应位置：（图片、链接用属性值，文本用插值表达式）

<div class="body_class">
	<div class="info_class">
	    <div class="free">
		    <span class="font_24 float_left">精品课程</span>
		    <span class="font_blue_18 float_right">更多课程<i class="iconfont icon">&#xe634;</i></span>
	    </div>
	</div>
	<div class="info_video row">
		<router-link class="info_video_class col-md-4 col-lg-3 " tag="div" :to="{name: 'detail'}" v-for="arr in res">
		    <img :src="arr.image" alt="" />
		    <div class="info_text">
			    <p>{{arr.name}}</p>
			    <p>{{arr.username}}</p>
			    <span>{{arr.pv}}</span>
			    <!--<del>￥59</del>-->
			    <span style="text-decoration:line-through;">{{arr.price}}</span>
			    <span>{{arr.activity_price}}</span>
		    </div>
		</router-link>
	</div>
</div>

（3）传key值

export default {
	name: 'zx_study',
	data() {
		return {
			attr: '',
			column_id: '',
			column: {},
			res: [],
			flag: true,
		}
	},
	components: {},
	mounted: function() {
		const self = this;
		console.log(self.$route.query.column_id);
		let data = {
		    "attr": 0,
			"column_id": self.$route.query.column_id,
		}
	    axios({
			method: 'post',
			url: self.GLOBAL.baseURL + '/admin.php/article_interface/getArticleList',
			data: Qs.stringify(data)
			}).then(function(response) {
				if(response.data.code == '200') {
				var column = {
					key: ''
		}
				self.res = response.data.data;
				console.log(self.res);
				for(var i = 0; i < self.res.length; i++) {
					if(self.res[i].column_id == 4) {
						$.extend(self.res[i], column);
						self.res[i].key = '学习资讯'
						}else if(self.res_[i].column_id == 5){
							$.extend(self.res_[i], column);
							self.res_[i].key = 'zhenf'							
						}
					}
				}
			}).catch(function(error) {
				console.log(error);
		       });
	    }
}

（4）跨域

在main.js文件中查看：axios.defaults.withCredentials = true 的影响

（5）价格判断

效果：

代码实现：

<div class="info_video row">
  <router-link class="info_video_class col-md-4 col-lg-3 " tag="div" :to="{name: 'detail',query: { id: arr.id}}" v-for="arr in res">
	<div class="info_css">
	  <img :src="arr.image" alt="" />
	  <div class="info_text">
		<p class="username">{{arr.name}}</p>
		<p class="uname">{{arr.username}}</p>
		<div class="info_span">
		  <span>{{arr.pv}}人看过</span>
		  <span v-if="arr.charge== '0'">免费</span>
		  <span v-if="arr.charge== '1'">{{arr.activity_price}}元</span>
		  <span style="text-decoration:line-through;" v-if="arr.charge== '1' && arr.activity_price!=arr.price" >{{arr.price}}元</span>
	      </div>
	  </div>
	</div>
	<div class="price_f" v-if="arr.activity_price!=arr.price">
	  <img class="price_i" src="@/assets/mark.png" alt="" />
	  <i class="price_y">优惠</i>
	</div>
  </router-link>
</div>

（6）用bootsrap轮播插件，图片不轮播问题解决

html代码：

<div id="demo" class="carousel slide" data-ride="carousel" data-interval="2500">
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <!-- 轮播图片 -->
  <div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="@/assets/information/news_image.png">
      </div>
      <div class="carousel-item">
        <img src="@/assets/information/news_image.png">
      </div>
      <div class="carousel-item">
        <img src="@/assets/information/news_image.png">
      </div>
    </div>
  </div>
  <!-- 左右切换按钮 -->
  <!--<a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>-->
</div>

script代码：

<script>
	//vue中需要引入组件
	import Vue from 'vue'
	import axios from 'axios'
	import Qs from 'qs'
	export default {
		name: 'index_information',
		data() {
			return {}
		},
		mounted: function() {
			const self = this;
			$('.carousel').carousel() //页面加载完成后启动轮播
		},
		watch: {
			'$route' (to, from) {
				$('.carousel').carousel() //路由跳转后启动轮播
			}
		}
	}
</script>