实现前端分离开发的vue mockjs仿真数据示例代码

介绍了vue mockjs仿真数据实现前端分离开发的示例代码，分享给大家，给自己留个备注。

在项目中，尝试使用mockjs和mock data来实现前端分离的开发。

关于mockjs，官网描述

1.前端和后端分离

2.在不修改现有代码的情况下，您可以拦截Ajax请求并返回模拟响应数据。

3.丰富的数据类型

4.通过随机数据模拟各种场景。

等等。

综上所述，在后端接口开发完成之前，前端可以用已有的接口文档拦截真实请求上的ajax，按照mockjs的mock data的规则模拟真实接口返回的数据，并返回随机模拟的数据参与相应的数据交互处理，真正实现了前端和后端的分离开发。

与以往我们自己模拟的假数据不同，mockjs可以带给我们：在后台界面开发之前模拟数据，在前台返回完成交互；后台数据完成后，你要做的就是摆脱mockjs:停止拦截真正的ajax，仅此而已。

下面逐步实现vue-cli创建项目和添加新闻数据模拟界面：

1.安装vue-cli全局支架

Npm安装-全局vue-cli 2。创建vue项目

vueinit web pack mock jsbrcd mock jsbrnpm安装axios-save 3。安装mockjs

NPM安装模拟js-save-dev4。项目目录

Axios/api用于封装Axios

Hello.vue页面主页

NeswCell.vue新闻组件

Router/index.js路由

Main.js入口

Mock.js mockjs文件

让我们看看完成后的效果

5.将mockjs引入入口js(main.js)

//要用“import”命令加载的vue构建版本//(仅运行时或独立)已在webpack.base.conf中用别名进行了设置。从“Vue”导入Vue“从App导入”。/App“从导入路由器”。/Router ' vue . config . production tip=false//引入mockjsrequire('。/mock . js ')/* ESL int-disable no-new */new vue({ El : ' # App '，路由器，template: 'App/'，组件： { App }}) Vue.filter('getYMD '，函数(input){ return input . split(')[0]；})这里我添加了一个常用的时间排序过滤器getYMD

6.添加一个模拟规则

//引入mock jsconst mock=require(' mock js ')；//被嘲笑。随机对象常量随机=模拟。随机；//模拟一组数据const product newdata=function(){ let articles=[]；for(设I=0；i 100i ) {让new article object={ title : random . csentence(5，30)，//Random.csentence(min，max)thumbnail _ pic _ s : random . dataimage(' 300 x250 '，pick of mock ')，//Random.dataImage(大小，文本)生成随机Base64图片代码author_name: Random.cname()，//Random.cname()随机生成常用中文名称date : random . date()' ' random . time()//randomRandom.time()返回随机时间字符串} articles . push(new article object)}返回{ articles : articles } }//mock . mock(URL，post/get，返回数据)；Mock.mock('/news/index '，' post '，productenewsdata)；7.请求Hello.vue中的文档接口并接收模拟数据

新闻列表显示'新闻-单元格：新闻数据='项目' :键='键'/新闻-单元格/div/div/模板脚本导入API来自'中的模板div class=' index ' div v-for='(项，键)././axios/api.js "从导入新闻细胞"。/NewsCell。vue ' export default { name : ' index }，data(){ return { NewsListShow :[，} }，components: { NewsCell }，created(){ this。SetNewsAPI()；}，方法： { setnewapi 3360 function(){ API .JH新闻(“/news/index”，“type=topkey=123456”).然后(RES={控制台。日志(RES)；这个。newslistshow=RES . articles});},} }/脚本！-添加"作用域"属性，将半铸钢钢性铸铁(Cast Semi-Steel)限制为此组件-仅样式作用域。TopNav { width : 100%；背景# ED4040位置：固定；top :0 rem left : 0；z指数： 10；}.simpleNav { width : 100%；线高： 1毫米；飞越：隐藏；overflow-x : auto；文本对齐：中心；font-size : 0；字体系列： '微软雅黑；空白： nowrap} .simplenav :-web工具包-滚动条{高度：0 px } .simpleNavBar { display:内联块；宽度： 1.2毫米；color : # fff-size :0。3雷姆；}.导航{ color : # 000 border-bottom : 0.05 rem实心# 000;}.占位符{宽度：100%；height: 1rem}/样式注意：api .JH新闻是我封装的axios函数

axios/api.js如下

从axios '导入axios从vue '导入vue axios。默认值。标题。post[' Content-Type ']=' application/x-www-form-URL编码'//请求拦截器axios。拦截器。请求。使用(function(config){ return config；},函数（错误){返回承诺。拒绝(错误);}) //响应拦截器axios。拦截。回应。use(function(response)){ return response；},函数（错误){返回承诺。拒绝(错误);}) //封装axios的邮政请求导出函数提取(url，参数){ 0返回新的承诺(解析，拒绝)={ axios.post(url，params)).然后(响应={ resolve(响应。数据)；}) .捕捉(错误)={拒绝(错误);}) }))导出默认值JH新闻(url，参数){ 0返回提取(网址，参数)；}} 8.在NewsCell.vue展示数据

模板节='财务列表'节class=' collect ' @ click='跳转页面'放在氘旁边{{newsDate.title}}/h2节class=' Crit clear fix ' img class=' fl ' src=' http :/./资产/图标/眼睛。png ' style=' width :0.24 rem'身高：0。2雷姆；span class=' fl ' { NewsDate。author _ name } }/span/section section class=' Cright ' img src=' http :/./资产/图标/时钟。png ' style=' width :0。2雷姆；身高：0。' 2 remspan { { newdate }。date | Getymd } }/span/section div style=' clear : both '/div/一旁img : src=' Http : NewsDate。缩略图_ pic _ s ' style='边框半径： 0 0.2 rem'/average div style=' clear : both '/div/section/section/template脚本导出默认值{ name : ' NewsCell }，props: { newsDate: Object }，data(){ return } }，computed: { }，methods : {跳转页面： function(){ window。位置。href=这个。新闻日期。URL } }/脚本样式范围。财务-列表{宽度： 100%；高度： 100%;背景-颜色：白色；padd : 0.28雷姆0；边框-底部： 1px实心# ccc}。财务清单。收集{宽度： 92%；margin: 0 auto}。财务清单。收集第(1)种类型的一旁： {宽度： 63%；向左浮动：} .财务清单。收集第(2)种类型的一旁： {宽度： 32%；高度： 2毫米向左浮动：边距-左侧： 0.3毫米；} .财务清单。收集H2 {宽度： 100%；高度： 0.96雷姆；font-size : 0.32 rem颜色： # 333333线高： 0.48雷姆；文本-飞越：省略号；-o-text-overflow:省略号；飞越：隐藏；} .财务清单。收集第(2)种img { width : 100%；高度： 100%;} .财务清单。收集到一边。裂缝{宽度： 45%;向左浮动：页边距-top : 0.66雷姆；} .财务清单。收集到一边。裂缝跨度{显示：块；宽度： 1.4毫米；边距-左：0.05雷姆；空白： nowrap文本-飞越：省略号；-o-text-overflow:省略号；飞越：隐藏；} .财务清单。收集到一边cright { width : 55%；向右浮动：页边距-top : 0.66雷姆；}.财务清单。收集到一边正确的跨度{ display:内联块；余量： 0.04雷姆0 0.05雷姆；}.财务清单。将span { font-size : 0.2 remcolor: # 999999}。财务清单。收集到一边。裂缝img .财务清单。收集到一边Cright img { width: 0.18rem高度： 0.24毫米；边距-top : 0.09雷姆；}/style 9 .所有代码可以查看我的https://github.com/Jasonwang911/vue_mockjs

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。