转载自:

https://blog.csdn.net/weixin_39728230/article/details/80293892

https://blog.csdn.net/lxkll/article/details/84284429

最近在跟着做vue2.0以上版本的一个购物平台,在涉及到模拟后台数据交互的时候,视频里讲的是通过json-server和express,由于之前的配置都是在build/dev-server.js文件下,dev-server.js在vue2.0都没有了,整合到了build/webpack.dev.conf.js文件里,通过综合几篇博文,最终问题得以解决。

一、模拟后台数据交互,vue中需要使用vue-resource这个组件,首先需要下载该组件:

1. cnpm install vue-resource --save

2. 在main.js文件中引入该组件并使用:

import VueResource from 'vue-resource'

Vue.use( VueResource )

具体如下图:

3. 接下来就可以在任何组件内部使用了:

this.$http.get( ).then( (res)  => {} , (err) => { })   (then前面获取了一个promise对象)

上面步骤是用vue-resource来进行数据请求的大体流程,作为前端,我们只关注前端的开发,所以使用mock data来模拟后台传数据,主要有两种方式:

1)json-server模拟数据;此方法只能发送get请求不能发送post请求

2)express启动数据服务;get请求和post请求都可以发送

二、 json-server

首先npm安装

npm install json-server --save
然后在build/webpack.dev.conf.js中进行配置

将下面代码片段加入到webpack.dev.conf.js中

/*----------------jsonServer---------*/
/*引入json-server*/
const jsonServer = require('json-server')
/*搭建一个server*/
const apiServer = jsonServer.create()
/*将db.json关联到server*/
const apiRouter = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use(apiRouter)
/*监听端口*/
apiServer.listen(3000, () => {
console.log('JSON Server is running')
})

  

配置完成以后,重新npm run dev 启动,浏览器输入localhost:3000,出现如下图,说明配置成功

现在还有一个问题,我们代码的服务端接口是8080,json-server的服务端端口是3000。端口不同,这样请求会存在一个跨域问题,所以这里要做一个服务端代理的配置,配置config/index.js中找到proxyTable,并添加一下内容:

// 配置转化:从3000 => 8080
proxyTable: {
'/api': {
changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
target: 'http://localhost:3000',// 接口的域名
pathRewrite: {
'^/api': ''//后面可以使重写的新路径,一般不做更改
}
}
},

  

注意:配置好后,一定要npm run dev 重新启动项目

当在浏览器地址栏输入:http://localhost:8080/api  就等同于http://localhost:3000端口了

4.要访问并获取数据,就需要有数据(假数据),这时候需要在vue文件夹的根目录下创建一个db.json文件

{
"getNewsList": [
{
"id": 1,
"title": "新闻条目1新闻条目1新闻条目1新闻条目1",
"url": "http://starcraft.com"
},
{
"id": 2,
"title": "新闻条目2新闻条目2新闻条目2新闻条目2",
"url": "http://warcraft.com"
},
{
"id": 3,
"title": "新闻条3新闻条3新闻条3",
"url": "http://overwatch.com"
},
{
"id": 4,
"title": "新闻条4广告发布",
"url": "http://hearstone.com"
}
]
}

将db.json放在根目录下(与index.html在同一目录)

三、express

1. 找到webpack.dev.conf.js文件,

//express 配置server

var apiServer = express()
var bodyParser = require('body-parser')
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require('fs')
apiRouter.route('/:apiName') //接口路径
.all(function (req, res) {
fs.readFile('./db.json', 'utf8', function (err, data) { //读取接口文件
if (err) throw err
var data = JSON.parse(data)
if (data[req.params.apiName]) {
res.json(data[req.params.apiName])
}
else {
res.send('no such api name')
} })
}) apiServer.use(apiRouter);
apiServer.listen(3000, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:' + 3000 + '\n')
})

  2.同样的, 在config/index.js文件下进行proxyTable的配置

proxyTable: {
// 访问/api/时,跳转到3000端口
'/api': {
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
target: 'http://localhost:3000',// 接口的域名
pathRewrite: {
'^/api': ''//后面可以使重写的新路径,一般不做更改
}
}
},

  

最最最重要的是: build和config以及db.json文件中有任何修改,都必须重新 " npm run dev" 一次。另外,这两种方法一旦"npm run dev" 以后,若是改动了以上的文件,必须关闭git bash窗口,重新打开进行 "npm run dev"

vue模拟后端获取数据——json-server与express的更多相关文章

  1. 使用mockjs模拟后端返回的json数据;

    前后端分离开发中最重要的一部就是前后端联调,很多时候后端进度是跟不上前端的,所以需要前端模拟一些数据进行调试,这样前端的进度就可以加快了.后端的小哥哥别打我: 使用mockjs可以很方便的模拟出想要的 ...

  2. JQuery UI之Autocomplete(2)后端获取数据

    1.Autocomplete获取后台数据 首先引入css和js文件,以及对应的HTML代码如下: <link href="../css/jquery-ui.css" rel= ...

  3. ui-grid从后端获取数据后更改数据显示的格式

    从后端获取的数据时是这样的: { "TotalCount":14,"Items": [ { "ProfileId":14, "Na ...

  4. Element(Vue)+Express(Node)模拟服务器获取本地json数据

    网上很多教程说需要在build目录下的dev-server.js文件中配置,但目前最新的vue-cli是没有dev-server.js这个文件的,因为已经被合并到webpack.dev.conf.js ...

  5. vue+jquery使用FormData向后端传递数据和文件,express如何获取

    使用multiparty 模块 下载 cnpm install multiparty --save 前端代码: <template> <div class="add-are ...

  6. datagrid分页 从后端获取数据也很简单

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Datagrid.aspx. ...

  7. Mock(模拟后端接口数据)配合Vuex的使用

    1.下载Mock  cnpm install Mockjs -S 2.新建一个data.js存放新生成的mock文件 编辑mock  并导出 const Mock = require('mockjs' ...

  8. 前端向后端获取数据的三种方法:ajax、axios、fetch

    1.jQuery中的ajax get方法: $.ajax({ url:"v4/api/film/now-playing?t=1539401039415&page=1&coun ...

  9. vue 从后台获取数据并渲染到页面

    一.在 created中调用methods中的方法 二.在methods中通过vuex异步获取后台数据 三.在computed 中计算属性 四.页面中调用computed中的计算后的属性 来自为知笔记 ...

随机推荐

  1. P2336 [SCOI2012]喵星球上的点名(后缀自动机+莫队+dfs序)

    P2336 [SCOI2012]喵星球上的点名 名字怎么存?显然是后缀自动机辣 询问点到多少个喵喵喵其实就是 查询后缀自动机上parent树的一个子树 于是我们考虑莫队 怎么树上莫队呢 我们用dfs序 ...

  2. springmvc StringHttpMessageConverter 中文乱码的几种解决办法(亲测)

    昨天,将一个原来使用JSR 311作为restful实现的测试系统改成了使用spring mvc,最后测试的时候发现输出的json字符串为乱码,从日志可以看出使用的是StringHttpMessage ...

  3. DevExpress GridControl使用方法总结2

    一.如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 二.如何新增一条记录 (1).gridView.AddN ...

  4. Python 人工智能之人脸识别 face_recognition 模块安装

    Python人工智能之人脸识别face_recognition安装 face_recognition 模块使用系统环境搭建 系统环境 Ubuntu / deepin操作系统 Python 3.6 py ...

  5. Git rebase的使用

    rebase 在 Git 中整合来自不同分支的修改主要有两种方法:merge 以及 rebase. 在本节中我们将学习什么是“rebase”,怎样使用“rebase”,并将展示该操作的惊艳之处,以及指 ...

  6. git用法-打补丁【转】

    本文转载自:https://www.cnblogs.com/yandufeng/p/5580765.html 1. git cherry-pick 作用:从一个branch上选择一个commit,添加 ...

  7. CentOS 安装 Gitlab

    源地址 https://mirror.tuna.tsinghua.edu.cn/gitlab-ce/ # 清华源 https://mirrors.tuna.tsinghua.edu.cn/help/g ...

  8. linux内核中的fuse是什么?

    答: 一个用户态文件系统框架,属于内核的一种特性. 1.组成部分 fuse.ko(内核模块) + libfuse.*(用户空间库) + fusemount(挂载工具) 2.参考资料 fuse.txt

  9. git 如何revert指定范围内的commit并且只生成一个新的commit?

    答:一共分成两步 一. revert多个commit并生成多个新的commit git revert <old commit>^..<new commit> 二. 使用reba ...

  10. docker-compose安装与部署项目

    安装: 1.curl安装慢的问题 解决:改用pip安装,需要先安装pip相关,参照: https://www.cnblogs.com/YatHo/p/7815400.html 2.pip安装依赖库re ...