作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很严谨的人来说还是踩了很多坑,特别是vue配置方面的东西,例如vue-router,vueX,虽然是跟着视频做的,不过每次都有很多地方配置不正确,会报错,特别是最近在跟着视频做一个前端的web页面其中涉及到前后台数据交互方面的说到模拟后台数据的问题,完全懵逼,刚开始都不知哪个文件怎么配置,终于通过网上各种搜索,弄清楚了一些问题附上链接     https://blog.csdn.net/weixin_39728230/article/details/80293892

一、模拟后台数据接口,一般我们用的ajax但是vue里面要用vue-resource这个组件去请求数据,当然不可避免首先要先下载这个组件,方法如下

1、npm install vue-resource --save

2、main.js文件引入vue-resource:

import VueResource from 'vue-resource'

Vue.use(VueResource)

准备工作就绪以后就可以开始模拟后台数据接口配置了,有两种方法,一种是利用一个插件json-server来模拟还有就是利用express方法,支持get和post请求,据说更加通用

create: function(){//this.$http.get('getList')//ajax请求this.$http.post('getLisst',{userId:123}).then(function(data){console.log(data)//成功回调},function(err){console.log(err)//失败回调
      })},

上面这个是在组件中vue调后台数据的get和post请求的写法,post请求可以带参数传递

接下来重要的来了方法一:安装json-server来配置数据

第一步:安装json-server这里啰嗦一句,vue里面所有需要用到的组件都要用 npm install xxx(组件名)来安装

npm install json-server --save

第二步:安装成功之后,接下来就是配置,这里说一下,之前看视频上说配置是在bulid/dev-server.js文件中配置,结果找了半天没找到,似乎是vue2.0删除了那个文件,把它里面的配置放置在了build/webpack.dev.conf.js这个文件里面,如下图代码可以直接放在该文件最下方

//这里是json-server配置信息
//json-server.js
const jsonServer = require('json-server')
const apiServer = jsonServer.create()
const apiRouter = jsonServer.router('db.json') //数据关联server,db.json与index.html同级
const middlewares = jsonServer.defaults()  apiServer.use(middlewares)
apiServer.use('/api',apiRouter)
apiServer.listen(3000, () => {                 //监听端口  console.log('JSON Server is running')
})  

第三步:配置完webpack.dev.conf.js文件之后,差不多进行了一半,配置里面看到有个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"}]
}

第四步:然后我们看到我们监听的是3000的端口,而我们文件用的是8080的端口,这里就涉及跨域的问题,虽然不是很懂,不过还是知道一些不同端口号什么的不能请求数据(这里不是很懂有机会再回顾一下看看),那接下来就是解决跨域的问题了,不多说,找到config文件夹下面的index.js文件打开加入下面一段代码

 proxyTable:{'/api':'http://localhost:3000/'},

至于位置的话请看下面:

第五步:到这里基本配置完成需要你重新npm run dev一下然后打开网页 http://localhost:8080/api/getNewsList 就可以看到你写的数据

这里代表你的json server启动成功

这里就是你配置的接口数据

方法二:express方法,支持get和post请求,据说更加通用,不过我还没试用,一样的方法

第一步:先找到webpack.dev.conf.js然后在头部引入express:

var express = require('express')  //这里没有写,会提示apiServer = express()这里express()未定义!!

然后在文件底部加上如下代码:

//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('/api', apiRouter);
apiServer.listen(3000, function (err) {  if (err) {  console.log(err)  return  }  console.log('Listening at http://localhost:' + 3000 + '\n')
})  

第二步:然后一样的要配置index.js 里面跨域的问题还有json数据的创建

同上面index.js一样的位置一样的代码

第三步:同样的访问那个链接就可以看到数据

最后,希望能对大家有所帮助,第一次写,有什么需要交流的请多指出,谢谢

转载于:https://www.cnblogs.com/kingsnowcan/p/snow_20180605.html

vue-cli模拟后台数据交互相关推荐

  1. vue项目模拟后台数据

    这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立 我这里为了演示这个过程所以自己编写了 ...

  2. vue --- configureWebpack模拟后台数据

    初识 使用vue/cli搭建的项目可以在vue.config.js中,模拟一个后台(express写法) vue.config.js configureWebpack: {devServer: {// ...

  3. vue + webpack 模拟后台数据

    一.在webpack-dev-conf.js文件中: 1.在const portfinder = require('portfinder')后添加如下内容 const express = requir ...

  4. 【Vue】学习笔记-数据交互

    [Vue]学习笔记-数据交互 概述 安装axios 通过axios向后台获取数据 数据交互的实现 常见错误总结 概述 基于Vue的web项目显示的所有服务端数据,都是通过Ajax获取的.官方推荐使用A ...

  5. --@angularJS--自定义服务与后台数据交互小实例

    1.myService.html: <!DOCTYPE HTML> <html ng-app="app"> <head>     <tit ...

  6. Vue与服务端数据交互 [ axios ]

    Vue生命周期 每个Vue实例在被创建到销毁要经过一系列的过程,这整个过程称为Vue实例的生命周期 Vue在生命周期不同的阶段点会自动运行一些函数, 这些函数称为Vue生命周期的钩子(hook)函数 ...

  7. ajax与后台php,怎么在thinkPHP5中使用ajax实现与后台数据交互

    怎么在thinkPHP5中使用ajax实现与后台数据交互 发布时间:2021-03-20 17:20:01 来源:亿速云 阅读:87 作者:Leah 这篇文章给大家介绍怎么在thinkPHP5中使用a ...

  8. servlet向ajax传递数据库,一、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)...

    背景: 目前业界很流行的MVC(model-view-control)开发模式,理解为 模型是Bean, 视图是 Html/Jsp, 控制是Servlet, 关联数据库的Dao web的运行机制: 数 ...

  9. 实现小程序与SSM后台数据交互

    实现小程序与SSM后台数据交互 项目源码 文章目录 实现小程序与SSM后台数据交互 项目源码 1.controller 2.小程序js 实现效果 1.controller @RequestMappin ...

最新文章

  1. 【实用】几个实用的webstorm、IDEA编辑器窗口快捷键设置,Alt+V垂直复制当前窗口,Alt+Shift+V将当前窗口复制到另一边的分割窗口显示,Alt+Shift+M移动当前活动窗口到另一边
  2. (0050)iOS开发之钥匙串存储
  3. 4、ShardingSphere 之 Sharding-JDBC 实现垂直分库
  4. sql常用crud命令
  5. 【渝粤教育】国家开放大学2018年秋季 0727-21T思想道德修养与法律基础 参考试题
  6. 【CodeForces - 1152C 】Neko does Maths(数学数论,lcm,gcd性质)
  7. 秒级启动万个容器,探秘阿里云容器镜像加速黑科技
  8. 多个tomcat部署的端口问题
  9. linux ssh编译命令,linux下升级 OpenSSH
  10. 每个人都该知道的数字
  11. Idea设置多开窗口
  12. BirtViewer和Struts2框架的整合
  13. VS2017产品密钥
  14. Monkey压力测试
  15. VB中如何声明及使用多维数组,多层数组及动态数组
  16. BIGEMAP谷歌卫星地图下载器
  17. [cogs2482][二分答案]Franky的胡子
  18. 二、《云原生 | Kubernetes篇》Kubernetes学习-K8S安装篇-Kubeadm安装高可用K8S集群--生产环境
  19. 2022 年最佳开源软件出炉
  20. linux 无线网络连接不上网,linux无法连接wifi,不显示wifi

热门文章

  1. 【转】字节跳动(抖音)收购VR眼镜厂商Pico的划时代意义
  2. 【Linux操作系统】进程概念详解
  3. 关闭计算机的几种方法
  4. 618 大促运营必看!4 步教你玩转商品运营
  5. 滴水逆向win32学习笔记1
  6. Nextjs从入坑到发疯,开发起来太抓狂
  7. 雍正王朝上部摘要—摘自电影最top
  8. java类似金山打字的键盘模拟_java实现 swing模仿金山打字 案例源码
  9. 最新实用Python异步爬虫代理池(开源)
  10. 【智能制造】物流装备制造业发展全解读