时间:2021-05-26
本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,分享给大家,也给自己留个笔记。
在项目中尝试了mockjs,mock数据,实现前后端分离开发。
关于mockjs,官网描述的是
1.前后端分离
2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
3.数据类型丰富
4.通过随机数据,模拟各种场景。
等等优点。
总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模拟数据返回参与相应的数据交互处理,这样真正实现了前后台的分离开发。
与以往的自己模拟的假数据不同,mockjs可以带给我们的是:在后台接口未开发完成之前模拟数据,并返回,完成前台的交互;在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实的ajax,仅此而已。
下面一步步的来实现vue-cli创建项目并添加一条新闻类的数据模拟接口:
1.安装vue-cli全局脚手架
npm install --global vue-cli2.创建vue项目
vue init webpack mockjs<br>cd mockjs<br>npm install axios --save3.安装mockjs
npm install mockjs --save-dev4.项目目录
axios/api 用来封装axios
Hello.vue 页面首页
NeswCell.vue 新闻组件
router/index.js 路由
main.js 入口js
mock.js mockjs文件
在来看下完成后的效果
5.在入口js(main.js)里引入mockjs
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router' Vue.config.productionTip = false // 引入mockjsrequire('./mock.js') new Vue({ el: '#app', router, template: '<App/>', components: { App }}) Vue.filter('getYMD', function(input) { return input.split(' ')[0];})这里我添加了额一个常用的时间整理过滤器 getYMD
6. 添加一个mock规则(mock.js)
// 引入mockjsconst Mock = require('mockjs');// 获取 mock.Random 对象const Random = Mock.Random;// mock一组数据const produceNewsData = function() { let articles = []; for (let i = 0; i < 100; i++) { let newArticleObject = { title: Random.csentence(5, 30), // Random.csentence( min, max ) thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码 author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名 date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串 } articles.push(newArticleObject) } return { articles: articles }} // Mock.mock( url, post/get , 返回的数据);Mock.mock('/news/index', 'post', produceNewsData);7.在Hello.vue 中请求文档接口,并接收mock数据
<template> <div class="index"> <div v-for="(item, key) in newsListShow"> <news-cell :newsDate="item" :key="key" ></news-cell> </div> </div></template> <script>import api from './../axios/api.js'import NewsCell from './NewsCell.vue' export default { name: 'index', data () { return { newsListShow: [], } }, components: { NewsCell }, created() { this.setNewsApi(); }, methods:{ setNewsApi: function() { api.JH_news('/news/index', 'type=top&key=123456') .then(res => { console.log(res); this.newsListShow = res.articles; }); }, }}</script> <!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.topNav{ width: 100%; background: #ED4040; position: fixed; top:0rem; left: 0; z-index: 10;}.simpleNav{ width: 100%; line-height: 1rem; overflow: hidden; overflow-x: auto; text-align: center; font-size: 0; font-family: '微软雅黑'; white-space: nowrap;}.simpleNav::-webkit-scrollbar{height:0px}.simpleNavBar{ display: inline-block; width: 1.2rem; color:#fff; font-size:0.3rem;}.navActive{ color: #000; border-bottom: 0.05rem solid #000;}.placeholder{ width:100%; height: 1rem;}</style>注意:api.JH_news是我封装的axios函数
axios/api.js如下
import axios from 'axios'import vue from 'vue' axios.defaults.headers.post['Content-Type'] = 'application/x-/Jasonwang911/vue_mockjs以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言现如今前后端分离开发越来越普遍,前端人员写好页面后可以自己模拟一些数据进行代码测试,这样就不必等后端接口,提高了我们开发效率。今天就来分析下前端常用的moc
最近由于工作要求:前端采用vue开发,后端采用springboot开发,前后端分离开发,最后前端页面又整合到后端来。经历多次采坑,总结以下方案:vuebuild
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。我们在
为什么要用mockjs实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试。大部分情况下,前后端需要同时进行
前后端分离开发中必要会遇到的问题—跨域。在使用vue开发的时候,开始为了解决跨域问题。采用的是CORS(Cross-originresourcesharing)