描述：

我在做的时候req,body始终为空。
查了很多帖子都是相同的答案———用body-parser
但是我已经添加了还是没用
最后才知道还需要前端只要用了fromData就需要额外的包，因为node端解决不了。

方法：

multiparty 或者 multer 或者 express-fileupload

我在这里使用的是express-fileupload

用法：

npm i express-fileupload


//在server.js引入
var fileUpload = require('express-fileupload');
app.use(fileUpload());

完整代码在下方：复制就可以直接用

1.前端代码：

这里用vue随手写个from就行
用到axios

<template>
  <div class="from_box">
    <form action="">
      <input type="text"  placeholder="请输入昵称" v-model="name">
      <input type="password" placeholder="请输入密码" v-model="password">
    </form>
    <button class="but" @click="onSubmit()">提交</button>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  name: "from",
  data() {
    return {
        name:'',
        password:''
    };
  },
  methods: {

    onSubmit() {
      /* json格式提交： */
        // let formData = JSON.stringify(this.formMess);
 
      /* formData格式提交： */
    let formData = new FormData();
    formData.append("name",this.name);
    formData.append("password",this.password);


        console.log(formData)
        axios({
	    method:"post",
	    //切记这里的端口和后端端口一样
	    url:"http://localhost:4000/login",
	    headers: {
		  "Content-Type": "multipart/form-data"
	    },
	    data:formData
	}).then((res)=>{
            console.log(res);
        });
    }
  }
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2.后端express：

新建server.js

var express = require('express'); 
var bodyParser = require('body-parser') 

var app = express();
app.use(express.urlencoded({ extended: false }))
app.use(bodyParser.json())
var fileUpload = require('express-fileupload');
app.use(fileUpload());

//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
 });

3.继续在server,js里添加

//连接数据库
var mysql = require('mysql');
var connection = mysql.createConnection({
//自己填写
    host: '', //数据库地址
    port: '',//端口号
    user: '',//用户名
    password: '',//密码
    database: ''//数据库名称
});
connection.connect(function(err){
    if (err) {      
		console.log('连接数据库出错:' + err);
		connection.end();
		return;
	};
	console.log('数据库连接成功');    
});

4.在server.js中编写接口：

// 登录
app.post("/login",function(req,res){
    console.log('req.body:',req.body)
    let {name,password} = req.body
    var  userGetSql = `SELECT * FROM register WHERE name = '${name}' AND password = '${password}'`;
    //查 query
    connection.query(userGetSql,function (err, result) {
        if (err) throw err;
        console.log("result",result)
        if(result.length==0){
            console.log(("用户名或密码错误"))
            res.send({
                code:0,
                message:"用户名或密码错误"
            })
        }else{
            console.log(("登录成功"))
            res.send({
                code:200,
                message:"登录成功"
            })
        }
    });
})

app.listen(4000,()=>{
    console.log('服务在4000端口')
})

5.启动：

node server.js
npm run serve

6.测试：

7.注册：

注册的接口：

app.post("/register",function(req,res){
    var {name,password} = req.body
    var userGetSql = `SELECT * FROM register WHERE name = '${name}'`;
    var addSql = `INSERT INTO register (id,name,password) VALUES (0,?,?)`
    //查 query
    connection.query(userGetSql,function (err, result) {
        if (err){
            console.log('查询出错:' + err);
			return;
        };
        console.log("result",result)
        if(result.length==0){
            var inserInfo = [name, password]
            console.log(("注册成功"))
            connection.query(addSql,inserInfo,function (error, result){
                if (error){
                    console.log('注册出错:' + error);
					return;
                };
                res.send({
                    code:200,
                    message:"注册成功"
                })
            })
        }else{
            console.log(("用户已存在"))
            res.send({
                code:0,
                message:"用户已存在"
            })
        }
    });
})

8.关于数据库：

这是我随便写的一条数据

连接阿里云数据库https://blog.csdn.net/qq_51724721/article/details/125016643?spm=1001.2014.3001.5501