前端怎么用js写API接口？

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

现代前端开发者每天工作的重点就是写页面，调接口。

许多前端开发想要扩充自己的技术栈，学习后端知识，想学Java，Python甚至C#等后端语言。实际上使用Node非常简单就可以实现后端服务，接下来就是今天的重点：Express。

什么是Express

Express 是最流行的 Node 框架，是许多其它流行 Node 框架的底层库。它提供了以下机制：

为不同 URL 路径中使用不同 HTTP 动词的请求（路由）编写处理程序。
集成了“视图”渲染引擎，以便通过将数据插入模板来生成响应。
设置常见 web 应用设置，比如用于连接的端口，以及渲染响应模板的位置。
在请求处理管道的任何位置添加额外的请求处理“中间件”。

现在开始写一个API接口

下文中用到的主要技术：

Node.js：在服务器端运行的JavaScript

Express：node.js MVC框架

MongoDB：NoSQL数据库

1.创建项目，创建相关文件

mkdir todoApp
cd todoApp
npm init

touch server.js
mkdir api
mkdir api/controllers api/models api/routes
touch api/controllers/taskController.js api/models/taskModel.js api/routes/taskRoutes.js
复制代码

2.设置数据库

npm install mongoose --save
复制代码

修改api/models/taskModel.js，

var mongoose = require("mongoose");
var Schema = mongoose.Schema;

var TaskSchema = new Schema({
  name: {
    type: String,
    required: "Enter the name of the task"
  },
  Created_date: {
    type: Date,
    default: Date.now
  }
});

module.exports = mongoose.model("Tasks", TaskSchema);
复制代码

3.设置路由

修改api/routes/taskRoute.js

module.exports = function(app) {
  var taskList = require('../controllers/taskController');

  app.route('/tasks')
    .get(taskList.all_tasks)
    .post(taskList.create_task);


  app.route('/tasks/:taskId')
    .get(taskList.load_task)
    .put(taskList.update_task)
    .delete(taskList.delete_task);
};
复制代码

4.Controller

修改api/controllers/taskController.js

var mongoose = require("mongoose"),
  Task = mongoose.model("Tasks");

// 查询所有
exports.all_tasks = function(req, res) {
  Task.find({}, function(err, task) {
    if (err) res.send(err);
    res.json(task);
  });
};

// 新增
exports.create_task = function(req, res) {
  var new_task = new Task(req.body);
  new_task.save(function(err, task) {
    if (err) res.send(err);
    res.json(task);
  });
};

// 根据id查询
exports.load_task = function(req, res) {
  Task.findById(req.params.taskId, function(err, task) {
    if (err) res.send(err);
    res.json(task);
  });
};

// 更新
exports.update_task = function(req, res) {
  Task.findOneAndUpdate(
    { _id: req.params.taskId },
    req.body,
    { new: true },
    function(err, task) {
      if (err) res.send(err);
      res.json(task);
    }
  );
};

// 删除
exports.delete_task = function(req, res) {
  Task.remove(
    {
      _id: req.params.taskId
    },
    function(err, task) {
      if (err) res.send(err);
      res.json({ message: "Task successfully deleted" });
    }
  );
};
复制代码

5.创建API

npm install --save-dev nodemon
npm install express --save
复制代码

使用 server.js 构建 API。

修改server.js

var express = require("express"),
  app = express(),
  port = process.env.PORT || 3000,
  mongoose = require("mongoose"),
  Task = require("./api/models/taskModel"), // 加载创建的模型
  bodyParser = require("body-parser");

mongoose.Promise = global.Promise;
mongoose.connect("mongodb://localhost/Tododb");

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var routes = require("./api/routes/taskRoutes");
routes(app); 

app.listen(port); 

console.log("todo list RESTful API server started on: " + port);
复制代码

6.开始启动

//启动数据库
mongod
//启动项目
npm run start
复制代码

7.创建完成

访问API：

新增：POST http://localhost:3000/tasks

获取全部：GET http://localhost:3000/tasks

根据id查询：GET http://localhost:3000/tasks/:id

更新：PUT http://localhost:3000/tasks/:id

删除：DELETE http://localhost:3000/tasks/:id