当前位置:首页 > vue.js技术文章 > Vue模拟数据,实现路由进入商品详情页面的示例

Vue模拟数据,实现路由进入商品详情页面实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:157

这篇文章主要知识点是关于Vue、模拟数据、路由进入商品详情页面、详解vue-cli中模拟数据的两种方法 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

Vue.js快速入门

目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。

查看详情

Vue模拟数据,实现路由进入商品详情页面的示例

一、路由

首先需要配置路由,就是点击good组件进入goodDetail组件

配置路由如下

 {
  path: '/goodDetail',
  component:goodDetail
 }

同时在good组件中写入如下点击事件,路由中加入查询参数,也就是商品的id

//点击路由到商品详细信息页
  selectGood(){
  router.push({
   path: 'goodDetail',
   query:{goodId:this.goodDetail.id}})
  }

二、在goodDetail组件中接收路由参数

goodDetail中的代码如下

export default{
 data(){
  return {
  id: this.$route.query.goodId,
  loading: false,
  selectedGood: []
  }
 },

 created(){
  this.fetchData();
 },

 methods:{
  fetchData(){
  this.loading = true;

  //拿到查询字段,商品的id后进行http请求
  var id = this.id;
  this.$http.get('/api/goods/' + id)
   .then(response => {
   this.selectedGood = response.data.data;
   }, error => {
   console.log(error);
   })

  this.loading = false;
  }
 }
 }

可以看到我这里接收到路由参数的中的商品id后,发送了一个http请求,这时就需要本地mock数据

三、本地模拟数据

首先需要有一个data.json用来存放模拟的数据,然后配置build目录下的dev-server.js如下

//获取mock数据
var appData = require('../data.json');
var goods = appData.goods;

var apiRoutes = express.Router();

apiRoutes.get('/goods', function (req, res) {
 res.json({
 errno: 0,
 data: goods
 });
})

//拿到指定id的商品信息
apiRoutes.get('/goods/:id', function(req, res) {
 var id = req.params.id;
 function selectedGood(id){
 for(var i = 0; i < goods.length; i++) {
  if(goods[i].id == id){
  return goods[i];
  }
 }
 }
 var good = selectedGood(id);
 res.json({
 errno: 0,
 // data: goods[req.params.id]
 data: good
 });
})

app.use('/api', apiRoutes);

以上这篇Vue模拟数据,实现路由进入商品详情页面的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

详解vue-cli中模拟数据的两种方法

详解vue-cli中模拟数据的两种方法 

在main.js中引入vue-resource模块,Vue.use(vueResource).

详解vue-cli中模拟数据的两种方法 

1.使用json-server(不能用post请求)

接下来找到build目录下的webpack.dev.conf.js文件,在const portfinder = require('portfinder')后面引入json-server.

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

现在重启服务器后浏览器地址栏输入localhost:3000能进入如下页面则说明json server启动成功了

详解vue-cli中模拟数据的两种方法 

现在找到config文件夹下的index.js文件,在dev配置中找到proxyTable:{} 并在其中配置

'/api':{
  changeOrigin:true, //示范允许跨域
  target:"http://localhost:3000", //接口的域名
  pathRewrite:{
    '^/api':'' //后面使用重写的新路径,一般不做更改
  }
}

现在可以使用localhost:8080/api/apiName 请求json数据了

详解vue-cli中模拟数据的两种方法 

在项目中通过resource插件进行ajax请求

data (){}前使用钩子函数created:function(){

  this.$http.get('/api/newsList')
    .then(function(res){
      this.newsList = res.data //赋值给data中的newsList
    },function(err){
      console.log(err)
    })
}

详解vue-cli中模拟数据的两种方法 

2.使用express(可以使用post请求)

在项目中新建routes文件并在其中新建api.js,内容如下:

const express = require('express')
const router = express.Router()
const apiData = require('../db.json')
router.post('/:name',(req,res)=>{
  if(apiData[req.params.name]){
    res.json({
      'error':'0',
      data:apiData[req.params.name]
    })
  }else{
    res.send('no such a name')
  }
})

接下来找到build目录下的webpack.dev.conf.js文件,在const portfinder = require('portfinder')后面引入express,如下:

const express = require('express')
 const app = express()
 const api = require('../routes/api.js')
 app.use('/api',api)
 app.listen(3000)

现在找到config文件夹下的index.js文件,在dev配置中找到proxyTable:{} 并在其中配置

'/api':{
  changeOrigin:true, //示范允许跨域
  target:"http://localhost:3000", //接口的域名
  pathRewrite:{
    '^/api':'/api' //后面使用重写的新路径,一般不做更改
  }
}

重启之后,便可以post请求访问数据了.

总结

以上所述是小编给大家介绍的vue-cli中模拟数据的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vue2.0中proxyTable用axios进行、 element-ui中的select下拉列设、 vue组件jsx语法的实例用法、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vue给input file绑定函数获取当前上传的方法

下一篇:vue纯js监听滚动条到底部的知识点实例

展开 +

收起 -

Vue模拟数据 相关内容
详解vue2.5.2如何使用http请求获取静态json数据

这篇文章主要介绍了vue2.5.2使用http请求获取静态json数据的实例代码,需要的朋友可以参考下

查看详情
vue数据初始化initState的实例

Vue 实例在建立的时候会运行一系列的初始化操作,而在这些初始化操作里面,和数据绑定关联最大的是 initState。这篇文章主要介绍了vue数据初始化--initState,需要的朋友可以参考下

查看详情
vue项目持久化存储数据的实例方法

这篇文章主要介绍了vue项目持久化存储数据的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

查看详情
vue中的watch监听数据变化及属性的知识点总结

这篇文章主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧

查看详情
Vue模拟数据 学习笔记
网友NO.389098

详解vue-cli中模拟数据的两种方法

在main.js中引入vue-resource模块,Vue.use(vueResource). 1.使用json-server(不能用post请求) 接下来找到build目录下的 webpack.dev.conf.js 文件,在 const portfinder = require('portfinder') 后面引入 json-server . /*引入json-server*/const jsonServer = require('json-server')/*搭建一个server*/const apiServer = jsonServer.create()/*将db.json关联到server*/const apiRouter = apiServer.router('db.json')const middlewares = jsonServer.defaults()\apiServer.use(apiRouter)apiServer.use(middlewares)/*监听端口*/apiServer.listen(3000,(req,res)={ console.log('jSON Server is running') }) 现在重启服务器后浏览器地址栏输入localhost:3000能进入如下页面则说明json server启动成功了 现在找到config文件夹下的index.js文件,在dev配置中找到proxyTable:{} 并在其中配置 '/api':{ changeOrigin:true, //示范允许跨域 target:"http://localhost:3000", //接口的域名 pathRewrite:{ '^/api':'' //后面使用重写的新路径,一般……

网友NO.900830

利用vue + koa2 + mockjs模拟数据的方法教程

前言 首先说一下这是本人第一次分享东西第一次写,写的不好或者有错误的请大家多包涵支出错误共同进步,好了,话不多说了,来一起看看详细的介绍吧。 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。 3.数据类型丰富 4.通过随机数据,模拟各种场景。 等等优点。 第一步 安装vue-cli项目 不多说网上一大把 需要的朋友们参考这篇文章://www.jb51.net/article/118987.htm,介绍的非常详细。 第二步 因为本地的vue访问本地的mock 1、配置vue代理 在config/index.js里面的proxyTable,因为本地node启动的服务默认访问的是3000端口 所以在target里面配置http://localhost:3000/ proxyTable: { '/api': { target: 'http://localhost:3000/', changeOrigin: true, pathRewrite: { '^/api': '/' } } 2、在vue项目的mianjs中 import axios from 'axios' axios.defaults.baseURL = '……

网友NO.312973

详解在vue-cli项目下简单使用mockjs模拟数据

为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试。大部分情况下,前后端需要同时进行开发。因此便需要mockjs制造随机数据来进行后端接口模拟。 看了官方文档之后一脸懵逼,这些都是什么鬼?????因此总结了一篇文章,来介绍mockjs的简单使用。 首先搭建一个vue项目 不介绍了 安装mockjs npm install mockjs --save-dev 启动项目 npm run dev 创建mock.js文件 在src路径下创建mock.js文件 在main.js引入mock.js文件 mock.js使用 在mock.js文件中写入测试代码 此处箭头函数中的代码可以根据mock的Git官网来进行修改随机数据及属性名称 //引入mockjsconst Mock = require('mockjs')// 获取 mock.Random 对象const Random = Mock.Random;//使用mockjs模拟数据Mock.mock('/api/data', (req, res) = {//当post或get请求到/api/data路由时Mo……

网友NO.714278

vue+mockjs模拟数据实现前后端分离开发的实例代码

本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,分享给大家,也给自己留个笔记。 在项目中尝试了mockjs,mock数据,实现前后端分离开发。 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。 3.数据类型丰富 4.通过随机数据,模拟各种场景。 等等优点。 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模拟数据返回参与相应的数据交互处理,这样真正实现了前后台的分离开发。 与以往的自己模拟的假数据不同,mockjs可以带给我们的是:在后台接口未开发完成之前模拟数据,并返回,完成前台的交互;在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实……

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757