vue项目用nodejs实现模拟数据方法
1)在项目根目录(如demo)中创建一个文件夹,如base,将项目中所有的前端文件全部放到base文件夹中,此时项目demo下只有一个文件夹base
2)通过cmd进入命令窗口,直接执行npm install express-generator -g (全局安装express)
3)通过cd命令进入项目demo目录,在demo目录下 执行express mock -e (mock为创建的文件夹名,用来存放node模拟数据);
4)让前端文件base中的端口号与mock中的端口号一致,一般默认为3000,下边标红的为端口号
mock/bin/www.js中的端口 var port = normalizePort(process.env.PORT || '');
base/config/index.js
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/': {
// 测试环境
target: 'http://localhost:', // 接口域名 这里的端口号3000
changeOrigin: true, //是否跨域
pathRewrite: {
'^/': '/' //需要rewrite重写的,
}
}
},
经过以上配置后,就可直接在mock/routes/index.js中写接口文件,这样不管是通过post还是通过get方式,均可获取到对应数据
在mock/app.js中
app.use('/', indexRouter);
app.use('/users', usersRouter);
通过以上配置,默认访问routes/index.js。如需将接口文件放到user.js中,则需要在接口前边添加/users/
webpack中配置文件详解 :https://blog.csdn.net/itKingOne/article/details/70331783?locationNum=3&fps=1
vue项目用nodejs实现模拟数据方法的更多相关文章
- vue项目中使用mockjs模拟接口返回数据
Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...
- Vue项目中v-for无法渲染数据
在Vue项目中,我们想要实现下面的布局效果 后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中 而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...
- Vue项目中jsonp抓取数据实现方式
因为最近在做vue的项目,在前端做数据的时候遇到了数据抓取的难题,查了一些资料,自己也研究了一下,总体来说是搞出来了(基于黄奕老师的项目找出来的经验),废话不多说,直接上代码 ------------ ...
- vue项目刷新页面,使数据不丢失(sessionStorage、localStorage、cookie)
vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.
- vue项目中返回之前页面数据不刷新的问题
利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- vue 项目中使用mock假数据实现前后端分离
也是查了很多的资料,整理出来.实现了前后端的分离,用到的技术vue-cli,webpack,node,json-server.首先全局安装json-server cnpm i json-server ...
- 在vue项目中MD5加密的使用方法
1:安装 npm install --save js-md5 2.引入及使用 方法一:在需要的项目文件中引入 import md5 from 'js-md5'; 使用例子:md5('hello wor ...
- axios在vue项目中的一种封装方法
记录下之前领导封装的axios请求 npm install axios // 安装 单独写个文件配置axios,此处为request.js import axios from 'axios' //自定 ...
随机推荐
- WPF 从文件加载字体
本文告诉大家从文件加载字体.在wpf 使用 fontfamily 显示指定的 ttf 显示字体 假如有字体在 C:\Projects\MyProj\free3of9.ttf ,可以使用 Private ...
- 谷歌眼镜能给Apple Watch带来啥前车之鉴?
当下,你想不听到Apple Watch的消息都难.这款智能手表在三月初发布时,有关它的新闻报道铺天盖地.记者们在博客上对发布会的每个阶段进行了实况报道,苹果粉丝们通过博客. 推特和YouTube视频对 ...
- 让Div居中的方法
1,设置元素宽度和margin值 div{ width : 90%; margin : 0px auto } 2, 定位元素,并设置其左右距离,但,不能设定宽度 div{ position : abs ...
- C# 的逻辑运算
&.^.!和|操作符称为逻辑操作符,用逻辑操作符把运算对象连接起来符合C#语法的式子称为逻辑表达式.逻辑 操作符“!”和“^”只作用于其后的操作数,故称为一元操作符.而“&&” ...
- JAVA 项目 调用外部的WebSerivce接口,入门实例 (一)
前言: 第一次接触WebService,工作需要,调用外部的WebService接口,所以暂时我这里不考虑发布,做个记录,待以后回来可以看看,只是最初级的,所以有何不好.不对的地方,欢迎看到的同僚给予 ...
- SpringBoot(八) Caching (更新中...)
缓存配置 在springboot的主类添加注解@EnableCaching启用缓存支持 参考文档 33. Caching spring framework >>> 8. Cache ...
- Spring中的Bean的配置形式
Spring中Bean的配置形式有两种,基于XML文件的方式和基于注解的方式. 1.基于XML文件的方式配置Bean <?xml version="1.0" encoding ...
- C#设计模式六大原则——接口隔离
接口隔离定义: 一般有两种定义: 1:客户端不应该依赖他不需要的接口 2:类间的依赖关系应该建立在最小的接口上 我们在建立接口时,应该尽量建立单一,不臃肿庞大的接口,应尽量使接口细化,方法尽量 ...
- 委托,匿名方法,lamda快速理解
转载于用五分钟重温委托,匿名方法,Lambda,泛型委托,表达式树 这些对老一代的程序员都是老生常谈的东西,没什么新意,对新生代的程序员却充满着魅力.曾经新生代,好多都经过漫长的学习,理解,实 ...
- 纯web实现游记类手机端应用
初衷 当初的一个学习框架项目,采用sui框架实现的一套手机端页面.今天清理github的时候重新整理了一下,因为设计的确实不错嘛,拿出来大家一起学习...哈哈 说明 采用sui框架 纯html/css ...