最近几天项目上线,工作比较忙,没时间更博了,好在今天有点时间并且同事问道我一个问题,正好一块解决

使用 Vue 写项目肯定会遇到一个问题,如何模拟服务端请求数据,那这就需要用到 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.seller
var goods = appData.goods
var 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
})
})
}

如下图:

 
 
 
 
三、使用 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>

NO--12模拟服务器端请求之node.js的更多相关文章

  1. 本地Vue项目跨域请求本地Node.js服务器的配置方法

    前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...

  2. 【node.js】GET/POST请求、Web 模块

    获取GET请求内容 node.js 中 url 模块中的 parse 函数提供了这个功能. var http = require('http'); var url = require('url'); ...

  3. node.js浅见

    看过很多朋友node.js代码敲得很好,但是对于概念还是很生疏.个人认为,代码是树叶,树干搭起来才是王道. 1.简述node.js的适用场景: IIO密集而非计算密集的情景:高并发微数据(比如账号系统 ...

  4. Node.js快速入门

    Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...

  5. 最流行的Node.js应用开发框架简介

    最流行的Node.js应用开发框架简介 快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.j ...

  6. 当今最流行的Node.js应用开发框架简介

    快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.js的最基本功能来编写代码构建应用是一个非 ...

  7. 走进Node.js 之 HTTP实现分析

    作者:正龙(沪江Web前端开发工程师) 本文为原创文章,转载请注明作者及出处 上文"走进Node.js启动过程"中我们算是成功入门了.既然Node.js的强项是处理网络请求,那我们 ...

  8. 深入浅出Node.js(上)

    (一):什么是Node.js Node.js从2009年诞生至今,已经发展了两年有余,其成长的速度有目共睹.从在github的访问量超过Rails,到去年底Node.jsS创始人Ryan Dalh加盟 ...

  9. Node.js Learning Notes

    简介 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事件驱动I/O服务 ...

随机推荐

  1. python set集合一些基本方法

    set集合是一个无序且不重复的元素集合 这个数据类型没有重复的,而且也没有顺序 一些基本的方法: 添加元素 s1 = {11, 22, 33} s1.add(123)#添加一个新的元素 print(s ...

  2. ArcGIS pro2.3中添加天地图底图

    应用背景: 很多时候,我们需要使用网络上的遥感影像或者百度地图.天地图等在线地图做一些矢量化工作或者其他. 笔者见过很多人都是把百度地图截图,然后把图片导如Arcmap或者Arcgis pro中,然后 ...

  3. npm WARN unmet dependency问题的解决方法

    remove node_modules $ rm -rf node_modules/ run $ npm cache clean 详见这里: http://stackoverflow.com/ques ...

  4. PyQt5--QPixmap

    # -*- coding:utf-8 -*- ''' Created on Sep 20, 2018 @author: SaShuangYiBing Comment: ''' import sys f ...

  5. DOM操作XML文件

    一.IE中的XML(IE低版本才支持) 在统一的正式规范出来以前,浏览器对于 XML 的解决方案各不相同.DOM2 级提出了动态创建 XML DOM 规范,DOM3 进一步增强了 XML DOM. 所 ...

  6. 重复子串(string)

    从\(ckw\)博客上看来的题目,可能是正睿oj上的,但我想我这样没有氪金的自然是写不了的,就口胡一波吧 题意:给定一个字符串,多组询问,每次询问一个子串的权值:一个字符串的权值定义为这个字符串里出现 ...

  7. Android APP的字体设置

    Android系统自带有对字体的设置,这些设置是对字体的显示方式的设置,比如加粗,倾斜,下划线,字号等,但是对于字体本身,比如设置为楷体,隶书等貌似没有.Android系统只有一种默认的,如果需要修改 ...

  8. linux问题解答

    1.Linux如何查询进程?杀死一个进程? ps命令提供进程的一次性查看(瞬时信息),结果不是动态的:top对命令实时监控 ps只是查看进程,而top还可以监视系统性能,如平均负载,cpu和内存的消耗 ...

  9. Node.js实战(十一)之Buffer

    JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文件流时,必须使用到二进制数据.因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门 ...

  10. STL 2—迭代器相关运算——advance(),distance(),next(),prev()

    迭代器的头文件中定义了4个实现迭代器模板的函数模板. 1.advance(iterator,num):将迭代器iterator 移动了num个位置 2.distance(iterator1,itera ...