vue 虚拟服务器,vue+webpack项目中使用dev-server搭建虚拟服务器，请求json文件数据，实现先后台分离开发...

在项目开发中，先后台分离，作了假数据，项目使用vue2.0重构，后台也推到重来了，为了避免耽误开发进程，我作了虚拟的数据请求，使用vue-cli脚手架搭建的项目文件中dev-server搭建虚拟api请求，访问本身mock的假数据虚拟请求后台的模式，具体作法以下vue

在build/dev-server.js文件中ios

在var app = express()这个实例的下面添加以下代码vue-cli

//本地json-server服务器搭建代码//引入数据库文件

var appData = require('../mock.json')//引入数据库

var getBoardList =appData.getBoardListvar apiRoutes =express.Router()//使用api的方法来建立链接时候的请求

apiRoutes.post('/getBoardList', function (req, res) {

res.json({

errno:0,

data: getBoardList

});

})//调用api

app.use('/api', apiRoutes)

其中数据库

appData 依赖的mock.json文件是本身mock的假数据的文件，根据先后台需求本身mock或者使用mock.js制做假数据

数据大概格式以下

{"getBoardList": {"logn":"0","msg": {"name": "精灵","sign": "一只可爱的小精灵","src": "","phoneNub": "15120171717","six": "未知","job": "私人金融专家","add": "北京市朝阳区将台"}

}

getBoardList是一个接口，

var getBoardList =appData.getBoardList 就是在appData定义了这一个接口数据。

var apiRoutes =express.Router() 是建立了一个api的路由，apiRoutes.post是建立一个post接口，这个post接口有一个req和一个res参数，分别执行请求和返回，当返回的时候会给咱们一个

json，这个json包括一个状态码errno和返回的数据data(data指向了接口数据getBoardList)。

而后当咱们调用api的时候app.use('/api', apiRoutes)，就能正常使用这个服务了

这里我使用了vue2.0推荐的axios请求数据，代码以下

this.$http.post('/api/getBoardList')

.then(function (response) {

console.log(response.data.data);

alert('成功了');

})

.catch(function (code) {

alert('失败了');

console.log(code);

});

打开浏览器的控制台的network，你会发现已经产生了网络请求

同时，数据也愉快的返回回来了：express

若是想添加接口数据，继续在dev-server.js中添加就能够了，post，get等等均可以。npm

注意，每次更改dev-server.js后须要从新npm run dev启动项目json

vue 虚拟服务器,vue+webpack项目中使用dev-server搭建虚拟服务器，请求json文件数据，实现先后台分离开发...相关推荐

自己虚拟服务器都用json可以吗,vue+webpack项目中使用dev-server搭建虚拟服务器，请求json文件数据，实现前后台分离开发...
在项目开发中,前后台分离,做了假数据,项目使用vue2.0重构,后台也推到重来了,为了不耽误开发进程,我做了虚拟的数据请求,使用vue-cli脚手架搭建的项目文件中dev-server搭建虚拟api请 ...
vuecli启动的服务器位置,webpack – 在vue cli 3生成的项目中启动dev服务器
我使用npm i -g @ vue / cli在我的 Windows系统上全局安装了vue cli 3. 然后我使用vue create vue-project生成了一个项目我通过提示选择了所需的插 ...
vuecli启动的服务器位置,在vue cli 3生成的项目中启动dev服务器
我在我的Windows系统上使用全局安装了vue cli 3 npm i -g @vue/cli. 然后我使用生成了一个项目 vue create vue-project 我通过提示选择了所需的插件. ...
java http 服务器搭建_基于http.server搭建局域网服务器过程解析
不知道大家有没有遇到过这样的情况, 在做项目或者研发的时候,迫切想要将一个文件传输给另一台电脑,却找不到u盘,于是麻烦的通过登陆qq.微信等社交软件 ,或者邮箱等工具进行传输,十分麻烦,让人苦恼.都说 ...
webpack项目中使用vue
webpack项目中使用vue 第一步:运行 npm i vue –S 安装vue 第二步:在src->index.js入口文件中,通过 import Vue from 'vue' 来导入vue ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
vue(vue-cli+vue-router)+babel+webpack项目搭建入门（四）
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<四> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...
vue(vue-cli+vue-router)+babel+webpack项目搭建入门（第二步）
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<二> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...
vue(vue-cli+vue-router)+babel+webpack项目搭建入门(三)
vue(vue-cli+vue-router)+babel+webpack项目搭建入门<三> 本系列文章将介绍基于vue+webpack的前端项目的构建过程.文章分为四章内容,第一章介绍开 ...

vue 虚拟服务器,vue+webpack项目中使用dev-server搭建虚拟服务器，请求json文件数据，实现先后台分离开发...

vue 虚拟服务器,vue+webpack项目中使用dev-server搭建虚拟服务器，请求json文件数据，实现先后台分离开发...相关推荐

最新文章

热门文章