¿Cómo usar js para escribir la interfaz API en el front-end?

¡Acostúmbrate a escribir juntos! Este es el día 11 de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de abril", haga clic para ver los detalles del evento .

El enfoque del trabajo diario de los desarrolladores front-end modernos es escribir páginas y ajustar interfaces.

Muchos desarrolladores front-end quieren expandir su pila de tecnología, aprender conocimientos de back-end y quieren aprender lenguajes de back-end como Java, Python e incluso C#. De hecho, usar Node para implementar servicios de back-end es muy simple y el próximo paso es el enfoque de hoy: Express.

que es expreso

Express es el marco de Node más popular y es la biblioteca subyacente para muchos otros marcos de Node populares. Proporciona los siguientes mecanismos:

1. Escriba controladores para solicitudes (rutas) que usen diferentes verbos HTTP en diferentes rutas de URL.
2. Se integra un motor de representación de "vista" para generar respuestas mediante la inserción de datos en plantillas.
3. Establezca la configuración común de la aplicación web, como el puerto utilizado para conectarse y dónde representar la plantilla de respuesta.
4. Agregue "middleware" de procesamiento de solicitudes adicional en cualquier lugar de la canalización de procesamiento de solicitudes.

Ahora comience a escribir una interfaz API

Las principales técnicas utilizadas en los siguientes:

Node.js: JavaScript ejecutándose en el lado del servidor

Expreso: marco node.js MVC

MongoDB: base de datos NoSQL

1. Crear un proyecto, crear archivos relacionados

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. Configurar la base de datos

npm install mongoose --save
复制代码

Modificar 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. Configurar el enrutamiento

Modificar 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. Controlador

Modificar 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. Crea una API

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

Cree la API con server.js.

Modificar servidor.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. Empezar a arrancar

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

7. Crear completo

Accede a la API:

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

Obtener todo: OBTENER http://localhost:3000/tasks

Consulta por id: GET http://localhost:3000/tasks/:id

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

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