简单一个Mongo数据库代码demo

一、准备工作

  1. 新建文件夹express_form
  2. 打开命令行工具cd到当前文件夹输入
1
npm init
  1. 一路enter初始化一个项目

image

  1. 安装我们需要的依赖包
1
npm i express mongoose -s
  1. 初始化项目成功~

二、代码实现

后端代码

  • 根目录中创建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模板

1
2
3
4
5
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.处理请求函数

1
2
3
4
5
6
7
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行😺
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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'); });

前端代码

  1. 我们在根目录上创建一个public的文件夹(因为我们上面把静态文件设置在了’/public’下)

  2. 新建index.html

  3. 输入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>

image

三、运行代码查看结果

  1. 在根目录中运行app.js:
1
node app.js
  1. 浏览器打开 http://localhost:3002/index.html

image

  1. 输入表单信息

image

  1. 插入数据成功

image

  1. 查看数据库中是否已经插入数据

image

总结

这个小Demo只是简单粗暴地操作表单提交和数据库插入,目的在于给刚刚入门的小伙伴一个信心,其实前端输入表单数据和后端数据库操作真的不难,在真正的项目中,这20行代码肯定是不够完善的啦,还有更多的知识等着我们去学习~