NO--12模拟服务器端请求之node.js
最近几天项目上线,工作比较忙,没时间更博了,好在今天有点时间并且同事问道我一个问题,正好一块解决
使用 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的更多相关文章
- 本地Vue项目跨域请求本地Node.js服务器的配置方法
前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...
- 【node.js】GET/POST请求、Web 模块
获取GET请求内容 node.js 中 url 模块中的 parse 函数提供了这个功能. var http = require('http'); var url = require('url'); ...
- node.js浅见
看过很多朋友node.js代码敲得很好,但是对于概念还是很生疏.个人认为,代码是树叶,树干搭起来才是王道. 1.简述node.js的适用场景: IIO密集而非计算密集的情景:高并发微数据(比如账号系统 ...
- Node.js快速入门
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...
- 最流行的Node.js应用开发框架简介
最流行的Node.js应用开发框架简介 快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.j ...
- 当今最流行的Node.js应用开发框架简介
快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.js的最基本功能来编写代码构建应用是一个非 ...
- 走进Node.js 之 HTTP实现分析
作者:正龙(沪江Web前端开发工程师) 本文为原创文章,转载请注明作者及出处 上文"走进Node.js启动过程"中我们算是成功入门了.既然Node.js的强项是处理网络请求,那我们 ...
- 深入浅出Node.js(上)
(一):什么是Node.js Node.js从2009年诞生至今,已经发展了两年有余,其成长的速度有目共睹.从在github的访问量超过Rails,到去年底Node.jsS创始人Ryan Dalh加盟 ...
- Node.js Learning Notes
简介 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事件驱动I/O服务 ...
随机推荐
- chmod chown llinux文件及目录的权限介绍
linux 文件或目录的读.写.执行权限说明: chmod :设置文件或目录权限. u:所有者 g:所在组 o:其他组 a:所有人(u.g.o的总和) chmod -R 文件1/文件2….. ...
- ASCII码查看
字母对照表: ASCII可显示字符: ASCII控制字符:
- openlayer3 基础学习一创建&显示地图
<!doctype html> <html lang="en"> <head> <link rel="stylesheet&qu ...
- MyBatis 中的级联
MyBatis 的级联分为 3 种. 1.鉴别器(discriminator):它是根据某些条件决定采用具体实现类级联的方案,比如体检表要根据性别去区分. 2.一对一(association):比如学 ...
- sqoop导入时删除string类型字段的特殊字符
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/sheismylife/article/details/29384357 假设你指定了\n为sqoop ...
- sublime出现 unable download.......
I managed to fix this by changing my package settings. I made my osx downloader preference curl, and ...
- Python2.7-bz2
bz2模块,提供 bz2 压缩的接口,一般使用 BZ2File 类来完成操作,操作的文件是后缀为“.bz2”的文件 1.模块方法 bz2.compress(data[, compresslevel]) ...
- js 正则表达式验证密码、邮箱格式.....
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- C++使用默认参数的构造函数
我们可以想象一个这样的场景:某一天书店整理库存,发现了一些非常老的书,为了尽快清空库存,店主想了一下,决定开展一个大甩卖活动,所有的这些书全部以五美元的价格出售.此时如果需要尽快将这些书的信息录入到书 ...
- Xcode 备忘
一. 打印一堆乱七八糟的东西: Edit Scheme... --> Run --> Arguments,在 Environment Variables 里添加 OS_ACTIVITY_M ...