（1）全局安装

express npm install -g express-generator


（2）查看是否安装成功

express -v


（3）建立后端服务器文件夹

server express server -e.


（4）进入创建的文件夹

cd server


（5）安装 

npm i

インストールはここまで、ディレクトリの紹介は以下から

次に、vscode でファイルサーバーを開き、コンソールを開き、コマンド npm start を入力します。

次に、ブラウザを開き、デフォルトアドレスhttp://localhost:3000/を入力してWeb ページを開きます。

デフォルトのポート 3000 を使用する場合は、ポート番号を自分で定義できます

server/app.js を開き、ファイルに次のコードを記述します。

// 监听端口
app.listen(888, () => {
  console.log('服务器已经启动');
})

その後、サーバーを再起動します

3.ノードモンをインストールする

nodemon は、ノードファイルを自動的に起動するサードパーティパッケージです。

Node.js プロジェクトを作成してデバッグする場合、プロジェクトのコードを変更すると、頻繁に手動で閉じてから再起動する必要があり、非常に面倒です。プロジェクトファイルの変更を監視できるツール nodemon ( nodemon - npm )を使用できます. コードが変更されると、nodemon は自動的にプロジェクトを再起動します。これにより、開発とデバッグが大幅に容易になります.

ウォッチでコードを検出するため、開発段階でのみ使用でき、

（1）安装 nodemon

npm install -g nodemon


（2）使用 nodemon
传统的方式是运行node app.js命令启动项目，需要手动重启
现在将node命令替换为nodemon命令，使用nodemon app.js启动项目，会自动重启

補足：npm startコマンドで起動する前は、実はnodeを動かしていた

npm start now の代わりに nodemon app.js を使用します

この問題が発生した場合は、キャッシュの問題が原因である可能性があるため、クリーンアップするだけです

それでおしまい

2.書き込みインターフェース

(これをお勧めします) 1 つは、server/routes ファイルの下にルーティングモジュールを作成し、モジュールに書き込むことです。

router.get('/Login', (req, res) => {
  // 前端接口/api/Login， 后端这里用/Login

  // req 请求对象， res 响应对象
  res.send('登录成功'); // 响应'1'回去
})

1つはapp.jsに書くことです

app.get('/login' ,(req, res) =>{
  // 后端收到post传参
  console.log(req.body);
  res.send('登录成功')
});

テストインターフェイスは Postman を使用します

サーバーが get インターフェイスを書き込む場合は取得できますが、投稿を書き込むときにエラー 404 が報告されることに注意してください。

これは、ポストリクエストをエクスプレスで取得するための API がないためです。ボディパーサーミドルウェアを取得するには、サードパーティのパッケージを使用する必要があります。

安装
npm install --save body-parser

配置
var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

使用示例
// 引包
var express = require('express')
var bodyParser = require('body-parser')
var app = express()

// 只要加上这两句配置，则在 post请求对象上会多出一个属性：body
// 也就是可以用 req.body 来获取发送过来的数据 
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))//post
// parse application/json
app.use(bodyParser.json())//post

次に、投稿インターフェイスが使用できるかどうかを確認するコードを書きましょう。

 router.post('/user/emia', (req, res) => {
   // 后端收到post传参
   console.log(req.body);
   res.send({
    status: 0,
    code: 200,
    msg: 'POST请求成功！',
    data: ['123', '456']
   })
 });

ここで投稿インターフェイスを取得できます

3. データベースに接続する

最初の 2 つのステップで、単純なデータを返すいくつかのインターフェースを実際に完成させることができますが、より複雑なインターフェースを完成させたい場合は、データベースに接続する必要があります。ここでは、MySQL データベースを例として取り上げます。

手順は次の 3 つの手順に分かれています。

①MySQLデータベースを操作するためのサードパーティモジュール( mysql )をインストールする

②mysqlモジュールでMySQLデータベースに接続

③mysqlモジュールでSQL文を実行する

1. インストール:

必要に応じて、 MySQL ServerとMySQL Workbenchの 2 つのソフトウェアをインストールするだけで済みます。

住所：

1. MySQL サーバー: データストレージとサービスの提供専用のソフトウェア。

2. MySQL Workbench: MySQL Server に保存されたデータを簡単に操作できる Visual MySQL 管理ツール

彼の記事を参照してください、彼はより詳細に書いています：

https://blog.csdn.net/weixin_43804496/article/details/115846430

2.データベースに接続する

（1）安装mysql模块
npm  install  mysql


（2）配置 mysql 模块
// 1. 导入 mysql 模块
const mysql = require('mysql')
// 2. 建立与 MySQL 数据库的连接关系
const db = mysql.createPool({
  host: '127.0.0.1', // 数据库的 IP 地址
  user: 'root',     // 登录数据库的账号
  password: 'admin123',  // 登录数据库的密码
  database: 'my_db_01',  // 指定要操作哪个数据库
}) 


（3）测试 mysql 模块能否正常工作
调用 db.query() 函数，指定要执行的 SQL 语句，通过回调函数拿到执行的结果：
// 测试 mysql 模块能否正常工作
db.query('select 1', (err, results) => {
  // mysql 模块工作期间报错了
  if(err) return console.log(err.message)
 //打印出[RowDataPacket{‘1’:1}]的结果就证明数据库连接正常  
console.log(results)
})

3.実行

一部だけ見せる

（1）查询数据
// 查询 users 表中所有的数据
const sqlStr = 'select * from users'
db.query(sqlStr, (err, results) => {
  // 查询数据失败
  if (err) return console.log(err.message)
  // 查询数据成功
  // 注意：如果执行的是 select 查询语句，则执行的结果是数组
  console.log(results)
}) 



（2）插入数据
//向users表中，新增一条数据，其中username的值为Spider-Man，password的值为 pcc123
const user = { username: 'Spider-Man', password: 'pcc123' }
// 定义待执行的 SQL 语句，其中英文的？表示占位符
const sqlStr = 'insert into users (username, password) values (?, ?)'
// 执行 SQL 语句，使用数组的形式，依次为？占位符指定的具体的值
db.query(sqlStr, [user.username, user.password], (err, results) => {
  // 执行 SQL 语句失败了
  if (err) return console.log(err.message)
  // 成功了
  // 注意：如果执行的是 insert into 插入语句，则 results 是一个对象
  // 可以通过 affectedRows 属性，来判断是否插入数据成功
  if (results.affectedRows === 1) {
    console.log('插入数据成功!')
  }
})

具体的な接続手順は次のとおりです。

上記の手順はすべて 1 つのファイルに記述されています。ここでは、上記の手順をファイルに分割します。

ステップ 1: インストール

npm  install  mysql

ステップ 2: mysql モジュールをインポートしてモジュールを構成し、ファイル server/conf/db.config.js を作成します。

//导入 mysql 模块
const mysql = require('mysql')


//与 MySQL 数据库的连接
module.exports = {
  host: 'localhost', // 数据库的 IP 地址
  user: 'root',     // mysql登录数据库的账号
  password: 'admin123',  // mysql登录数据库的密码
  port: '3306', // 端口
  database: 'my_db_01',  // 指定要操作哪个数据库名称
}

ステップ 3: mysql クエリ関数をカプセル化し、ファイル server/conf/db.js を作成する

const dbConfig = require('./db.config');

module.exports = {
    query: function(sql, params, callback) {
        //每次使用的时候需要创建链接，数据操作完成之后要关闭连接
        const connection = mysql.createConnection(dbConfig)
        connection.connect(function(err) {
            if (err) {
                throw err
            }
            //开始数据操作
            connection.query(sql, params, function(err, results, fields) {
                if (err) {
                    throw err
                }
                //将查询出来的数据返回给回调函数
                callback &&
                    callback(
                        JSON.parse(JSON.stringify(results)),
                        JSON.parse(JSON.stringify(fields))
                    )
                    //停止链接数据库，必须在查询语句后，要不然一调用这个方法，就直接停止链接，数据操作就会失败
                connection.end(function(err) {
                    if (err) {
                        console.log('关闭数据库连接失败！')
                        throw err
                    }
                })
            })
        })
    },
}

このパッケージは次のように記述できます。

module.exports = {
    query: function(sql, params, callback) {
        //每次使用的时候需要创建链接，数据操作完成之后要关闭连接
        const connection = mysql.createConnection(dbConfig)
        connection.connect(function(err) {
            if (err) {
                throw err
            }
            //事件驱动回调
            connection.query(sql, params, callback)
            //释放连接
            connection.release()
        })
    },
}

ステップ 4: server/routes/index.js を実行する

var express = require('express');
var router = express.Router();
const db = require('../conf/db');

/* GET home page. */
router.get('/List', (req, res, next) => {
    // sql查询user表
    db.query('select * from users', [], function(results, fields) {
        // 以json的形式返回
        res.json({ results })
    })
})
module.exports = router;

ステップ 5: プロジェクトを開始する

ステップ 6: Postman でテストする

4. 注意事項

1.クロスドメイン

cors ミドルウェアを使用してクロスドメインの問題を解決します。

cors は、Express 用のサードパーティ製ミドルウェアです。cors ミドルウェアをインストールして構成することで、クロスドメインの問題を簡単に解決できます。これは、サーバーがリクエストがリソースを取得して使用することを直接許可することと同じです。

app.js

（1）安装中间件 
npm install cors


（2）导入中间件 
const cors = require('cors')


（3）配置中间件，一定注意是在路由之前调用
app.use(cors())

フロントエンド：

vue.config.js にリバースプロキシを入力します。

proxy: {
      //灵活代理；请求前缀为/api时，走下面的代理
      "/api": {
        target: "http://localhost:3000/", //代理服务器把请求转发给url(真正的后台服务器)
        changeOrigin: true, //用于控制请求头中的host值, 允许跨域
        //真正的服务器没有/api，所以要重写路径置空，否则找不到相应的路径
        pathRewrite: {
          "/api": "",
        },
      },
    },

後部：

router.post('/user/emia', (req, res, next) => {
  // 调用res.send方法，向客户端响应结果
  res.header("Access-Control-Allow-Origin", "*"); //只要添加这一句就可以了
  res.send({
    status: 0,
    code: 200,
    msg: 'POST请求成功！',
    data: ['123', '456']
  })
});

node.js+Express フレームワーク、フロントエンドが独自のインターフェースを作成

1. インストール

1.node.js をインストールする

2. Express フレームワークをインストールする