Node.js之 express写后端接口

参考

https://blog.csdn.net/studysinklc/article/details/103166451

一

1 首先，新建一个Node.js项目，在项目目录下安装express

npm install express --save

2 可以用express来建立一个最简单的后端server服务

新建一个server.js文件

const express = require('express');
const app = express();

app.get('/', (req, res) => res.send('hello world!'));

app.listen(3000, () => console.log('Example app listening on port 3000!'));

3 在命令行里用 Node server.js 启动

访问成功

二 跨域

为了能在前端调用，必须实现跨域，我们采用Node.js里的cors模块在后端实现跨域

安装cors模块

npm install cors --save

在server.js里调用cors模块

const cors = require('cors');
app.use(cors());

同时我们新加一个test接口，依然是用get方法，返回一个json，供前端调用

app.get('/test', cors(), (req, res, next) => res.json({msg: 'This is a cros test.'}));

完整 server.js

const express = require('express');

const cors = require('cors');

const app = express();

const bodyParser = require('body-parser');

// 调用 cors模块

app.use(cors());

app.use(bodyParser.json());

// 下面是接口 
// http://127.0.0.1:3000/

app.get('/', (req, res) => res.send('Hello!'))

app.get('/get-test', cors(), (req, res, next) => res.json({msg: 'This is a cros test.'}));

app.post('/post-test2', cors(), (req, res, next) => {
    res.setHeader('Content-Type', 'text/plain');
    res.write("your post is: \n");
    res.end(JSON.stringify(req.body));
});


app.listen(3000, () => console.log('Example app listening on port 3000!'));

三 调用本地数据库

参考 https://blog.csdn.net/qq_45152044/article/details/122310270

1 在终端输入：npm i mysql

2 使用mysql模块 (在js文件中编写)

//引入mysql模块
const mysql = require('mysql');

//配置mysql访问方式
const db = mysql.createConnection({
  host:'localhost',
  user:'root',
  //你的mysql密码
  password:'root',
  //你要连接的数据库
  database:'mydb'
});

//接收前端的数据   第一个是接口的名字
app.get('/login',function(request,response){
	  // request 请求，前端向后端请求
	  // response后台给前端的反馈
	  // request.query  前端发过来的get请求数据
  
  //查询语句
  const sql = `select * from user1 where username='${request.query.username}' and password = '${request.query.password}'`
  //在数据库中查询，err是错误信息，data是查询后的结果以对象的形式返回
  db.query(sql,function(err,data){
    if(err){
       console.log(err)
    }else{
      //data.length=1，即长度为1，直接简写
      if(data.length){
        //输入正确登录成功
        response.send({code:200,msg:'登录成功！'})
      }else{
      	//输入账号密码错误
        response.send({code:500,msg:'账号密码错误'})
      }
    }
  })

结果

四 读取本地json文件

app.js 同 上面的 server.js ，启动命令 node app.js

const fs = require("fs"); // 文件模块
const path = require("path"); // 系统路径模块

const express = require("express"); // node.js Web 应用框架
const bodyParser = require("body-parser"); // node.js 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据

const app = express();
app.use(bodyParser.json()); // 返回一个只解析 json 的中间件，最后保存的数据都存放在 request.body 对象上
app.use(
  bodyParser.urlencoded({
    extended: true
  })
); // 返回的对象为任意类型

// 设置跨域访问
app.all("*", function(request, response, next) {
  response.header("Access-Control-Allow-Origin", "*"); // 设置跨域的域名，* 代表允许任意域名跨域
  response.header("Access-Control-Allow-Headers", "X-Requested-With");
  response.header(
    "Access-Control-Allow-Methods",
    "PUT,POST,GET,DELETE,OPTIONS"
  );
  response.header("X-Powered-By", " 3.2.1");
  response.header("Content-Type", "application/json;charset=utf-8");
  next();
});

// get 首页数据
app.get("/api/index.json", (request, response) => {
  request.statusCode = 200;
  const file = path.join(__dirname, "./api/index.json");
  fs.readFile(file, "utf-8", (err, data) => {
    if (err) {
      response.send("文件读取失败！");
    } else {
      response.send(data);
    }
  });
});

// get 城市列表数据
app.get("/api/city.json", (request, response) => {
  request.statusCode = 200;
  const file = path.join(__dirname, "./api/city.json");
  fs.readFile(file, "utf-8", (err, data) => {
    if (err) {
      response.send("文件读取失败！");
    } else {
      response.send(data);
    }
  });
});

// get 详情页数据
app.get("/api/detail.json", (request, response) => {
  request.statusCode = 200;
  const file = path.join(__dirname, "./api/detail.json");
  fs.readFile(file, "utf-8", (err, data) => {
    if (err) {
      response.send("文件读取失败！");
    } else {
      response.send(data);
    }
  });
});

// 配置服务端口

const hostname = "localhost";
const port = 8082;
const server = app.listen(port, hostname, () => {
  console.log(`服务器运行在 http://${hostname}:${port}`);
});

// const hostname = '127.0.0.1';
// const port = 3000;
// const server = app.listen(port,hostname, () => {
//   console.log(`服务器运行在 http://${hostname}:${port}`);
// });

读取的 json文件 为 新建api中的 index.json 等等json文件

{
"ret": true,
"data": {
    
    "swiperList": [{
            "id": "001",
            "src": "https://th.wallhaven.cc/small/96/96w8e8.jpg"
        },
        {
            "id": "002",
            "src": "https://th.wallhaven.cc/small/13/13mk9v.jpg"
        }
    ],
    "iconList": [{
            "id": "001",
            "imgSrc": "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
            "txt": "景点门票"
        },
        {
            "id": "002",
            "imgSrc": "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/f0f00d6dfe038c044dbc9a437f58b0eb.png",
            "txt": "一日游"
        }
    ],
    "recommendList": [
        {
          "id": "001",
          "imgUrl":
            "http://img1.qunarzz.com/sight/p0/1902/84/84696f368bbec10da3.img.jpg_200x200_50323152.jpg",
          "infoTit": "北京世界园艺博览会",
          "infoTxt": "80条评论",
          "infoMoney": "108"
        },
        {
          "id": "002",
          "imgUrl":
            "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg",
          "infoTit": "故宫",
          "infoTxt": "659条评论",
          "infoMoney": "60"
        }
      ],
      "weekendList": [
        {
          "id": "001",
          "imgUrl":
            "http://img1.qunarzz.com/sight/source/1603/6d/2f67ae0659f41f.jpg_r_640x214_bf6cbd0b.jpg",
          "infoTit": "北京赏花好地方",
          "infoTxt": "乱花渐欲迷人眼，京城赏花大搜索"
        },
        {
          "id": "002",
          "imgUrl":
            "http://img1.qunarzz.com/sight/source/1811/f3/86173f863bef61.jpg_r_640x214_52b003ac.jpg",
          "infoTit": "京城周末撒欢",
          "infoTxt": "在帝都过周末，不仅仅是城中游！"
        }
      ]
}
}