柚子的第一篇博客(菜鸟之路)(mock.js)

我的第一篇****博客
*关于mock.j和vue-cli结合的基础入门
*(前后端分离,前端可以独立后端开发,mock.js可以生成大量的伪造数据,拦截ajax请求后将数据返回到前端,有利于前端功能的开发和简单的调试)

搭建好vue-cli脚手架
打开对应的vue-cli项目文件夹下运行命令 npm isntall mockjs --save-dev
在src文件夹下新建一个文件夹mock,在新建的文件夹mock目录下新建一个mock.js的js文件
在mock.js文件夹写入以下内容:
const Mock =require(‘mockjs’) //引入mock.js Moc是个对象里面有很多的方法
Mock.mock(‘http://test.cn’,(req,res)=>{
return Mock.mock(
{//输出数据
‘name’: ‘@name’,//随机生成姓名
‘age|1-10’: 10, //随机生成数字(年龄)
‘color’:’@color’ //随机生成颜色
}
)
});
想要生成不同的数据可以写很多的接口来调用
如下图

好了数据都已经生成了现在就差调用啦
柚子的第一篇博客(菜鸟之路)(mock.js)
在对应需要数据的组件的 script标签下引入mock的数据data
注意相对文件夹的路径,两个点点是返回上一级的意思根据自己的文件夹路径正确引入即可

运行 npm install axios --save-dev
在mian.js中引入axios
在对应的方法里写this.axios.get(‘api’).then(function(res){console.log(res)})
注意这里不能alert 写console 因为alert出来是[Object Object] console.log后再浏览器控制台打开再去看自己需要的对象的对应的属性数据即可

柚子的第一篇博客(菜鸟之路)(mock.js)

会生成随机的数据表格
我用的element-ui这个vue组件库
简单介绍一下element-ui引入vue的方法

npm install jquery --save-dev
npm install element-ui --save-dev
main.js文件中这样引入

柚子的第一篇博客(菜鸟之路)(mock.js)
楼主是菜鸟还是停留在helloworld
先全局引入jquery
重点来了我这个菜鸟引入element-ui的时候各种报错找不到element-ui的index.css这个文件
很简单是因为文件自动补全的功能一顿tab操作后最后是theme-chalk/index
index后面没有加.css
手动加上.css吧index.css骚年就不会报错了!!
那些改配置文件的操作不适合我这种菜鸟! 先不报错能用就可以了!
柚子的第一篇博客写的只有自己能看懂了
后期不断改进不断总结自己前端开发路上踩到的坑 !
分享给更多和我一样零基础的菜鸟开发者们!

柚子的第一篇博客(菜鸟之路)(mock.js)

相关推荐