为了账号安全,请及时绑定邮箱和手机立即绑定

使用 node 模拟请求接口

使用 Vue 写项目肯定会遇到一个问题,如何模拟服务端请求数据,那这就需要用到 node.js 了。这篇我们讲解一下如何使用 node.js 模拟服务器端请求数据。

一、 初始化并创建一个项目

vue init webpack-simple node-demo
cd node-demo
npm i
cnpm i vuex axios -S

二、编写接口

build 文件下的 webpack.dev.conf.js 文件中加入

express 基于 node.js 后端框架,负责路由,业务逻辑,数据库操作,页面和数据响应。
即架构中的业务层,对前端的请求进行响应,需要数据库的拉取数据库内容,需要判断处理的返回处理结果,请求页面文件的返回html文件

const express = require('express')// 通过 node 访问模拟数据const app = express();// 使用 express 框架启动一个服务器// 1. 读取文件var appData = require('../data.json')var seller = appData.sellervar goods = appData.goodsvar ratings = appData.ratings// 2. 使用 express 来配置路由,指定借口请求var apiRoutes = express.Router()  //定义一个路由// 暴露 API 接口app.use('/api',apiRoutes)

build 文件下的 webpack.dev.conf.js 文件中的 devServer 中加入

// 添加接口数据
    before(app){      // 配置请求路由和响应
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0, //错误码
          data: seller
        })
      })

      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0, //错误码
          data: goods
        })
      })

      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0, //错误码
          data: ratings
        })
      })
    }

如下图:


700

700

三、使用 axios 请求数据

在组件中直接请求数据就好了

<template>  
    <div class="seller">
        <h1>{{seller}}</h1>
    </div></template><script>import axios from 'axios'export default {
    data(){        return {            seller:''
        }
    },
    mounted(){        //请求地址
        axios.get('/api/seller').then(resp => {            this.seller = resp.data.data.name
        })
    }
}</script>


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
8380
获赞与收藏
109

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消