node.jsリンクデータベースvueとバックエンドのインタラクションを実現

まずvueフロントエンドの簡単なページを実現し、本ページはvue@cliプロジェクトを構築し、プロジェクトは簡単なログイン登録機能を実現し、expressを利用してネットワーク通信を行う.
1:フロントエンドvueプロジェクト
vueを設定します.config.js:ドメイン間関連の設定(自身は自分のパソコンで2つのサーバを起動し、1つはvueで起動したサービスポートが異なるとドメイン間で問題になる)

module.exports = {
    publicPath: '/',
    devServer: {
        proxy: {
            '/api/login': {
                target: 'http://localhost:3000/login',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api/login': ''
                }
            },
            '/api/register': {
                target: 'http://localhost:3000/register',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api/register': ''
                }
            }
        }
    }
}

login.vue

import axios from "axios";
import api from "../api/index.js"

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      message: "",
      form: {
        username: "",
        password: ""
      }
    }
  },
  async created () {
    console.log("msg is ",this.msg);
    console.log("    ");
    let res = await axios.get(api.data);
    console.log("res is ",res);
    this.message = res.data.message;
  },
  methods: {
    async register() {
      let form = this.form;
      if(this.form.username !== "" && this.form.password !== "") {
        let registerRes = await axios.request({
          url: '/api/register',
          method: "POST",
          data: form
        });
        console.log("registerRes is ",registerRes);
      }
    },
    async login() {
      console.log("username is ",this.form.username);
      console.log("password is ",this.form.password);
      let form = this.form;
      let loginRes = await axios.request({
        url: '/api/login',
        method: "POST",
        data: form,
      });
      console.log("loginRes is ",loginRes);
      
    }
  },
}

2:サービス側index.js

const express = require("express");
const crypto = require("crypto");
const bodyParser = require("body-parser");
const app = express();
const connection = require("../dao/index.js");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.get("/", (req,res) => {
    //   get        query
    console.log(req.query);
    res.send("hello world dfasd");
});
app.get("/data",(req,res) => {
    // res.writeHead("Access-Control-Allow-Origin","*");
    res.setHeader("Access-Control-Allow-Origin","*");
    let data = {
        message: "hello",
        status: 200,
        data: {
            name: "lck",
            age: 34,
            sex: 0
        }
    }
    res.send(JSON.stringify(data));
});
app.post("/login",async (req,res,next) => {
    console.log("req is ",req.body);
    let username = req.body.username;
    let password = req.body.password;
    let self = this;
    let realPassword = Util.md5(Util.md5(password).substr(10,20) + Util.md5(password));
    console.log("realPassword is ",realPassword);
    try {
        const insertRes = await new Promise((resolve,reject) => {
            let addUser = "select * from user where username = ?";
            let queryParams = [username];
            connection.query(addUser,queryParams,(err,result) => {
                try {
                    console.log("result is ",result);
                    resolve(result);
                } catch(e) {
                    console.log("e is ",e);
                    reject();
                }
            })
        });
        if(insertRes.length > 0) {
            console.log("insertRes is ",insertRes[0]);
            console.log("insertRes is ",insertRes[0].password === realPassword);
            if(insertRes[0].password === realPassword) {
                res.send({message: "ok",status: 200});
            } else {
                res.send({message: "    ",status: 200});
            }
        } else {
            res.send({message: "      ",status: 400});
        }
    } catch(e) {
        console.log("e is ",e);
        res.send({message: "no",status: 400});
    }
});
app.post("/register",async (req,res,next) => {
    let hashes = crypto.getHashes();
    let keyhash = crypto.createHmac('md5',req.body.password)
                  .update('I love cupcakes')
                  .digest('hex');
    console.log("hashes is ",keyhash);
    let username = req.body.username;
    let password = req.body.password;
    try {
        const insertRes = await new Promise((resolve,reject) => {
            let addUser = `insert into user(id,username,password,gender) values(null,?,?,?)`;
            let addParams = [username,keyhash,1];
            connection.query(addUser,addParams,(err,result) => {
                console.log("result is ",result);
                resolve(result);
            })
        });
        res.send({message: "ok",status: 200});
    } catch(e) {
        res.send({message: "no",status: 400});
    }
})
let server = app.listen(3000,() => {
    let host = server.address().address;
    let port = server.address().port;
    console.info("host is ",host," port is ",port);
})

dao層index.js

const mysql = require("mysql");
const connection = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "  ",
    database: "    "
});
connection.connect();
module.exports = connection;

これは単純なexpress、mysqlに関する簡単な操作ですが、expressで使用されているプロセス(postリクエストパラメータの受信とリンクデータベースのデータベース操作の具体的な詳細)を記録します.