20行代码实现Express提交表单数据插入Mongo数据库

简单一个Mongo数据库代码demo

一、准备工作

新建文件夹express_form
打开命令行工具cd到当前文件夹输入

npm init

一路enter初始化一个项目

安装我们需要的依赖包

1	npm i express mongoose -s

初始化项目成功~

二、代码实现

后端代码

根目录中创建app.js，按照步骤输入以下代码

1.引入express，并且创建一个实例：

1 2	var express = require('express'); //引入express var app = express(); //创建一个express实例

2.设置静态文件目录，以便我们读取html文件

1	app.use(express.static(__dirname + '/public')); //使用 express.static 中间件来设置静态文件路径，方便读取index.html主页

3.引入mongoose，连接数据库（前提是已经启动好了Mongo数据库）

1 2	var mongoose = require('mongoose'); //引入mongoose mongoose.connect('mongodb://localhost:27017/usertest'); //mongoose连接数据库（前提是已经启动Mongo）

4.创建一个Schema骨架模型，并且设计好user模板

var Schema = mongoose.Schema;  //创建一个Schema模型骨架，并且设置好user模版
var UserSchema = new Schema({
   first_name: {type: String},
   last_name: {type: String}
});

5.发布模型

1	var User = mongoose.model("User",UserSchema); //Schema发布一个User的Model

6.处理请求函数

app.get('/process_get',function (req, res) {  //处理process的get请求
    var user_1 = new User({
        first_name: req.query.first_name,
        last_name: req.query.last_name
    });
    user_1.save(function () {res.send('数据插入成功');});  //插入数据并且提示数据库插入成功
});

7.监听3002端口

1	app.listen(3002,function () { console.log('servering'); });

app.js所有代码总览，真的只有20行😺

var express = require('express'); 
var app = express();  
app.use(express.static(__dirname + '/public'));
var mongoose = require('mongoose'); 
mongoose.connect('mongodb://localhost:27017/usertest'); 
var Schema = mongoose.Schema;  
var UserSchema = new Schema({
   first_name: {type: String},
   last_name: {type: String}
});
var User = mongoose.model("User",UserSchema); 
app.get('/process_get',function (req, res) {  
    var user_1 = new User({
        first_name: req.query.first_name,
        last_name: req.query.last_name
    });
    user_1.save(function () {res.send('数据插入成功');});  
});
app.listen(3002,function () { console.log('servering'); });

前端代码

我们在根目录上创建一个public的文件夹(因为我们上面把静态文件设置在了’/public’下)
新建index.html
输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div style="width: 400px; margin: 0 auto; margin-top: 30px;">
    <form action="http://localhost:3002/process_get" model="get">
        <label>FirstName:</label><input type="text" class="form-control" name="first_name"> <br>
        <label>LastName:</label> <input type="text" class="form-control" name="last_name"> <br>
        <input type="submit" class="btn btn-default" id="submit" value="Submit">
    </form>
</div>

</body>
</html>