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实现模拟数据方法的更多相关文章

  1. vue项目中使用mockjs模拟接口返回数据

    Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...

  2. Vue项目中v-for无法渲染数据

    在Vue项目中,我们想要实现下面的布局效果 后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中 而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...

  3. Vue项目中jsonp抓取数据实现方式

    因为最近在做vue的项目,在前端做数据的时候遇到了数据抓取的难题,查了一些资料,自己也研究了一下,总体来说是搞出来了(基于黄奕老师的项目找出来的经验),废话不多说,直接上代码 ------------ ...

  4. vue项目刷新页面,使数据不丢失(sessionStorage、localStorage、cookie)

    vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.

  5. vue项目中返回之前页面数据不刷新的问题

    利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...

  6. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  7. vue 项目中使用mock假数据实现前后端分离

    也是查了很多的资料,整理出来.实现了前后端的分离,用到的技术vue-cli,webpack,node,json-server.首先全局安装json-server cnpm i json-server ...

  8. 在vue项目中MD5加密的使用方法

    1:安装 npm install --save js-md5 2.引入及使用 方法一:在需要的项目文件中引入 import md5 from 'js-md5'; 使用例子:md5('hello wor ...

  9. axios在vue项目中的一种封装方法

    记录下之前领导封装的axios请求 npm install axios // 安装 单独写个文件配置axios,此处为request.js import axios from 'axios' //自定 ...

随机推荐

  1. 表示层设计模式:Intercepting Filter(截取筛选器)模式

     上下文  问题  影响因素  解决方案  变体  示例  结果上下文  相关模式  致谢  上下文 对于任何一个曾经从头建立 Web 应用程序的人来说,他们都会有这样的体会:这项任务所需要的独立完成 ...

  2. Java基础教程(18)--继承

    一.继承的概念   继承是面向对象中一个非常重要的概念,使用继承可以从逻辑和层次上更好地组织代码,大大提高代码的复用性.在Java中,继承可以使得子类具有父类的属性和方法或者重新定义.追加属性和方法. ...

  3. The request sent by the client was syntactically incorrect.

    HTTP Status 400 - type Status report message description The request sent by the client was syntacti ...

  4. WebApiTestHelpPage

    这是个什么鬼,第一次见到的时候,我也不知道就花几天时间看了下它的代码 在网上搜索WebApiTestHelpPage会出来很多相关页面   但是它们都是介绍怎么用的,要么就是怎么添加注释   它是怎么 ...

  5. 【代码笔记】iOS-archive保存图片到本地

    一,工程图: 二,代码: RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIVi ...

  6. JavaSE——转换流和缓冲流

    转换流: 类 InputStreamReader(字符输入转换流): InputStream 即读取字节流,Reader 为读取字符流. InputStreamReader将字节流转换成字符流.便于一 ...

  7. 网络 私有IP和子网掩码设置

    私有IP不需要花钱 节约使用公网IP有两个方法,一个方法是动态IP(关机回收IP),一个方法是私有IP,尤其是私有IP作用巨大. 私有IP不具有唯一性,不能直接访问公网.比如,我以私有IP192.16 ...

  8. Oracle获取session的trace

    1. 使用参数SQL_TRACE 下面是官网对此参数的说明 SQL_TRACE Property Description Parameter type Boolean Default value fa ...

  9. Oracle Sequence Cache 参数说明

    转自 http://blog.csdn.net/tianlesoftware/article/details/5995051 之前整理的一篇文章: ORACLE SEQUENCE 介绍 http:// ...

  10. Java 性能调优指南之 Java 集合概览

    [编者按]本文作者为拥有十年金融软件开发经验的 Mikhail Vorontsov,文章主要概览了所有标准 Java 集合类型.文章系国内 ITOM 管理平台 OneAPM 编译呈现,以下为正文: 本 ...