(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"></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>
(7) 后台数据引入时报错
解决如下:
(1)后台获取数据在F12—Network中查看
(2)在script中axios请求成功后赋值
(3)在data返回值中声明
(4)在HTML中用插值表达式表示
笔记而已,未完待续。。(如有错误,望指教,谢谢~)