5月8日vue学习总结

学习vue开始到了重要的时刻，本来就抱着前路荆棘的心态前行，没想到碰到了服务器的get请求......没有后端的那几把刷子，还真是调不动这么强大的技术

愁苦之时碰到了神器。强大的前后端分离神器“mock.js”

学了一天终于有了眉目，但是也碰到了及其重大的难题

v-for对数据进行循环的过程中，无法进行。

找到后来才知道在使用item in swipesList的时候，因为mockjs的'newsList|4'会产生四个数组，需要使用item in swipesList.newsList  才可以访问到数组的内部变量，才可以进行相应的调用操作。

 

关于安装mockjs：很少有人关注mockjs这个技术，好像大家的项目api总是那么快的被拿到，我也是找了好久没看懂，学了一下分享一下我的经验：

首先终端对mockjs进行安装（包括安装axios）：cnpm i mockjs           cnpm i axios -S

创建新文件mock.js并在文件中导入mockjs：   import Mock from 'mockjs'

并在main.js中导入mockjs的文件  import '../mock.js'

到此为止部署基本完成

然后在mock.js中写相应的api接口（各个接口可以参考mockjs的官网文档）：

例如：

import Mock from 'mockjs'

 

const data = Mock.mock({
'newsList|4': [
{
id: '@increment()',
title: '@ctitle(10,15)',
content: '@cparagraph(5,15)',
'img_url': '@image',
add_time: '@date(yyyy-MM-dd hh:mm:ss)'
}
]
})

// 定义获取新闻列表的接口
Mock.mock('/api/get','get',() => {
const {newsList} = data
return {
status: 200,
message: '获取新闻列表成功',
list: data,
total: newsList.length
}
})