详解vue2.0模拟后台json数据


Posted in Javascript onMay 16, 2019

最近在跟着做vue2.0以上版本的一个购物平台,在涉及到模拟后台数据交互的时候,视频里讲的是通过json-server这个插件和express,由于之前的配置都是在build/dev-server.js文件夹下,在vue2.0都没有了,全部整合到了build/webpack.dev.conf.js文件里,通过不断查阅资料后终于模拟成功。

1.首先 npm install vue-resource  --save安装vue-resourse,并且在页面上引用(--save 会把依赖包名称添加到 package.json 文件 dependencies 键下,--save-dev 则添加到 package.json 文件 devDependencies 下)

详解vue2.0模拟后台json数据

2.在项目目录下添加一个xx.json,爱叫啥叫啥~~,但是里面的格式一定要是json格式。如果不确定是否符合json格式,可以点击这里使用工具校验

详解vue2.0模拟后台json数据

3.直接在webpack-dev-conf.js文件中修改

第一步:在const portfinder = require(‘portfinder')后添加

const express = require('express')
const app = express()//请求server
var appData = require('../db.json')//加载本地数据文件
var news = appData.getNewsList//获取对应的本地数据
var products = appData.getproductList
var boards = appData.getBoardList
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

第二步:找到devServer,在里面加上before()方法

devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {
   rewrites: [
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
   ],
  },
  hot: true,
  contentBase: false, // since we use CopyWebpackPlugin.
  compress: true,
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,
  overlay: config.dev.errorOverlay
   ? { warnings: false, errors: true }
   : false,
  publicPath: config.dev.assetsPublicPath,
  proxy: config.dev.proxyTable,
  quiet: true, // necessary for FriendlyErrorsPlugin
  watchOptions: {
   poll: config.dev.poll,
  },
  
//在这里添加,记得前面加上逗号不然会报错  	
before(app) {
 app.get('/api/news', (req, res) => {
  res.json({
   errno: 0,
   data: news
  })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
 }),
 app.get('/api/products', (req, res) => {
  res.json({
   errno: 0,
   data: products
  })
 }),
  app.get('/api/boards', (req, res) => {
  res.json({
   errno: 0,
   data: boards
  })
 })
  
  
  }
  
  
  
  
 },

4.到这里之后记得所有的修改配置都需要重新启动运行命令的:npm run dev才能生效(很重要,否则无法请求到数据)

然后在浏览器就可以请求到我们模拟的数据:

详解vue2.0模拟后台json数据

5.在create()函数中通过get请求json数据后添加到页面中

export default {
		components:{
			slideShow
		},
 
    //请求模拟的json数据
		created: function(){
			this.$http.get('api/news')
			.then((data)=>{
				this.newsList = data.data.data;
        //newsList是先在页面上定义变量,用来装载请求到的数据
			},(err)=>{
				console.log(err)
			}),
			
			this.$http.get('api/products')
			.then((data)=>{
				this.productList = data.data.data;
			},(err)=>{
				console.log(err)
			}),
			
			this.$http.get('api/boards')
			.then((data)=>{
				
				this.boardList = data.data.data;
			},(err)=>{
				console.log(err)
			})
		},

在页面上定义的变量,用来装载请求到的数据

data(){
			return {
			
				
				boardList:[
					
				],
	
				newsList:[
					
				],
				productList:{
					
				}
			}
		},

6.在页面上调用

详解vue2.0模拟后台json数据

页面效果如下:

详解vue2.0模拟后台json数据

以上所述是小编给大家介绍的vue2.0模拟后台json数据详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
express express-session的使用小结
Dec 12 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
详解Vue-Router源码分析路由实现原理
May 15 #Javascript
微信小程序select下拉框实现效果
May 15 #Javascript
详解js常用分割取字符串的方法
May 15 #Javascript
elementUI table表格动态合并的示例代码
May 15 #Javascript
详解VUE调用本地json的使用方法
May 15 #Javascript
微信小程序的mpvue框架快速上手指南
May 15 #Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 #Javascript
You might like
php一些公用函数的集合
2008/03/27 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
php网页病毒清除类
2014/12/08 PHP
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
python列表去重的二种方法
2014/02/14 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python人民币小写转大写辅助工具
2018/06/20 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
python中字符串的编码与解码详析
2020/12/03 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
贷款委托书
2014/08/01 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
演讲开场白和结束语
2015/05/29 职场文书
入党积极分子考察意见
2015/06/02 职场文书
停车场管理制度范本
2015/08/05 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
mysql 索引合并的使用
2021/08/30 MySQL