赞
踩
安装了nodeJs
执行:
- 安装淘宝镜像
-
- npm install -g cnpm --registry=https://registry.npm.taobao.org
-
- 安装 yarn(我使用这个,淘宝镜像总是莫名其妙各种bug。。。)
-
- npm install yarn -g
-
- 接着项目中执行:
-
- yarn add express --save
-
- yarn add body-parser --save
-
- yarn add supervisor --save
-
-
api.js(服务)
- var express = require('express');
- var app = express();
- var bodyParser = require('body-parser');
- var supervisor = require('supervisor');
- //引用bodyParser
- app.use(bodyParser.json()); // for parsing application/json
- app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
- //设置跨域请求
- app.all('*', function(req, res, next) {
- res.header("Access-Control-Allow-Credentials", true);
- res.header("Access-Control-Allow-Origin", "*");
- res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
- res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
- res.header("X-Powered-By", ' 3.2.1');
- res.header("Content-Type", "application/json;charset=utf-8");
- next();
- });
- var questions = [{
- name: 'xiaoming',
- age: 41
- },
- {
- name: 'lihua',
- age: 99
- }
- ];
- //写个接口
- app.get('/api/user', function(req, res) {
- res.status(200),
- res.json(questions)
- });
- app.post('/api/delete', function(req, res) {
- res.json(req.body);
- })
- //配置服务端口
- const port = 8888;
- app.listen(port, () => {
- console.log('Express server listening on port ' + port);
- });
进入api.js所在的目录下,执行下面的命令运行服务,一定要运行服务,不然使用api就会连接失败:
node api.js
热更新: 正常运行node api.js时,如果你更新了接口信息,那么要重新运行一次node api.js,不然刷新页面也渲染不到新的数据,为了解决这个问题,可以用supervisor进行热更新:
在项目中安装了supervisor后,
再进行全局安装一次(可以外部全局装):
yarn add supervisor -g
接着,运行服务时,用 进入api.js所在的根目录下,执行 supervisor app.js,这样就可以做到热更新了
最后如何调用新建立的两个接口?
http://localhost:8888/api/userinfo?age=1
http://localhost:8888/api/delete
我使用的是axios
可以在项目中执行以下命令:
yarn add axios --save
然后执行下面的代码就可以了(记得导入axios再使用):
- axios({
- method: 'GET',
- url: 'http://localhost:8888/api/user',
- params:{age:1},
- dataType: 'json'
- }).then(res => {
- console.log(res);
- }).catch(err => {
-
- })
- //post请求
- axios({
- method: 'post',
- url: 'http://localhost:8888/api/delete',
- data: {
- name: 'lihua',
- age: '45'
- }
- }).then(res => {
- console.log(res);
-
- }).catch(err => {
-
- });
运行项目,查看浏览器,可以看到接口已经被调用,也能看到我们所写进去的数据:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。