前端后台到数据库是如何交互的 ! ?

*摘要：
前端（front-end）和后端（back-end）是描述进程开始和结束的通用词汇。前端作用于采集输入信息，后端进行处理。计算机程序的界面样式，视觉呈现属于前端。

1. 前端的静态页面 —— 数据的提交及获取

前端的数据提交至服务器一般有两种方式：1. form表单提交；2. AJAX提交

这是我的 directorys 文件夹下的 index.html 静态页面

	// 1. 下面的form表单通过POST请求，提交一个基本信息到 /insert 路由中
	<form action="/insert" method="POST">
		<input type="text" name="name"><br>
		<input type="text" name="age"><br>
		<input type="radio" name="sex" value="男">男<br>
		<input type="radio" name="sex" value="女">女<br>
		<input type="submit" value="POST">
	</form>
	
	// 2. 通过一个button按钮发送一个AJAX的GET请求到/find 路由中
	<button id="getdata">获取服务端数据</button>
	<script>
        let data;
		document.getElementById("getdata").onclick = function(){
			var xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function(){   //监听状态的变化的事件
				if(xhr.readyState == 4 && xhr.status == 200){
					data = JSON.parse(xhr.responseText)
					console.log(data);
				}	
			}
            // xhr.open("get","/find?page=3&pageAmount=10", true);
            xhr.open("get","/find", true);
			xhr.send(null)
        }
    </script>

在后台服务器开启的状态下两种数据提交/获取方式的不同在于：
　　form 表单接收后台返回的信息会直接显示在新的页面上(刷新页面)
　　AJAX 是通过xhr.responseText接收后台返回信息

以下是以form表单发送一个POST请求的局部展示 (具体原理须结合后台理解)

以下是以Btn按钮 发送AJAX请求的局部展示 (具体原理须结合后台理解)

2. 后台Node.js —— 数据的接收及返回

我的Node服务器搭建的方式是通过Express来实现的，这需要你对Node.js的Express模块有一定了解。

这是 directorys文件夹同级目录下的 mongodb.js ，运行Node服务器即是运行该文件

	// 调用./MongoModule 模块 ，该模块为自定义模块，其中封装着与数据库的具体操作
	let db = require("./MongoModule");
	// Express
	let express = require("express");
	let app = express();
	// index.html 首页
	app.use("/", express.static("./directorys"));
	// 获取GET请求的search 
	let url = require("url");
	/* 获取POST请求的search  */
	let bobyParser = require("body-parser");
	app.use(bobyParser.urlencoded({extended: false}));
	
	/* 
	 *	以下调用insertOne、find等方法即是通过require("./MongoModule")模块封装的与数据库连接后的操作(下面会讲到)
	 *	
	 *	通过app.post("/insert", (req, res) => { ... })路由即是获取前台的form表单提交的基本信息
	 *		这里的req.body中存储的即是前台发送信息，以对象存储 
	 *		eg: { name: 'codingScript', age: '18岁', sex: '男' }
	 *	通过app.get("/find", (req, res) => { ... }路由即是获取前端的AJAX请求信息
	 *	...... 删除、修改同理
	 */
	// 1. 插入
	app.post("/insert", (req, res) => {
	    db.insertOne("home", "mine", req.body, (err, result) => res.send(result));
	});
	
	// 2. 查找 
	app.get("/find", (req, res) => {
	    let query = url.parse(req.url,true).query;
	    let pageAmount = parseInt(query.pageAmount) || 0;
	    let page = parseInt(query.pageAmount * (query.page-1)) || 0;
		db.find({
	        "dbName": "home",                       // 数据库名
	        "collectionName": "mine",               // 集合名
	        "pageAttr": {                       
	            "pageAmount":pageAmount,            // 每页数据量
	            "page":page                         // 第page页
	        },
	        "json": {},                             // 查询条件
	        "sort":{"num":1},                       // 排序     1:升序  -1:降序
	        "callback": function(err, result) {     // 查询结果
	            res.send(result);					// 查询的内容返回到前台
	        }
	    });
	});
	// 3. 删除
	app.get("/delete", (req, res) => {
	    let query = url.parse(req.url,true).query;
	    db.deleteMany("home", "mine", {"num":parseInt(query.num)}, (err, result) => res.send(result));
	});
	
	// 4. 修改
	app.get("/update", (req, res) => {
	    db.updateMany("home", "mine", {"age":"23"},{$set:{"sex":"男"}}, (err, result) => res.send(result));
	});
	
	// 运行服务器   监听127.0.0.1:300端口 (端口号可以任意改)
	app.listen(3000);

这是 directorys文件夹同级目录下的 MongoModule.js ，封装着与数据库的具体操作的模块

// 任何数据库的操作，都是先连接数据库！所以可以将连接数据库封装成函数

// 引入mongodb模块
let MongoClient = require('mongodb').MongoClient;

// 连接数据库 执行相应操作
function _connectDB(dbName, callback) {
    let url = 'mongodb://localhost:27017/' + dbName;    
    MongoClient.connect(url, (err, db) => {
        if(err)     return "数据库连接失败";
        console.log("Database Connect Success"); 
        callback(err,db);
    });
}

// 1. 插入数据
exports.insertOne = function(dbName, collectionName, json, callback) {
    _connectDB(dbName, (err, db) => {
        db.collection(collectionName).insertOne(json, (err, result) => {
            if(err)     return "插入失败";
            callback(err, result);
            db.close();
        });
    });
}

// 2. 删除数据
exports.deleteMany = function(dbName, collectionName, json, callback) {
    _connectDB(dbName, (err, db) => {
        db.collection(collectionName).deleteMany(json, (err, result) => {
            if(err)     return "插入失败";
            callback(err, result);
            db.close();
        });
    });
}

// 3. 修改数据
exports.updateMany = function(dbName, collectionName, jsonOld,jsonNew, callback) {
    _connectDB(dbName, (err, db) => {
        db.collection(collectionName).updateMany(jsonOld, jsonNew, (err, result) => {
            if(err)     return "插入失败";
            callback(err, result);
            db.close();
        });
    });
}

// 4. 查找数据  
exports.find = function(option) {
    _connectDB(option.dbName, (err, db) => {
        db.collection(option.collectionName).find(option.json)
        .limit(option.pageAttr.pageAmount)      // 每页数据量
        .skip(option.pageAttr.page)             // 第page页
        .sort(option.sort)                      // 排序
        .toArray((err, result) => {
            if(err)     return "查询失败";
            option.callback(err, result);
            db.close();
        });
    }); 
}

3. MongoDB

服务器要将前台提交数据发送至数据库，以及将查询的数据返回至前台，首先需要数据库开机：
　　mongod --dbpath 数据存放的路径(某个用于存放数据的文件夹)
　
MongoDB 的常用 sql 语句：（在终端操作的指令）
　　使用数据库 mongo (重开一个终端)
　　导入数据 mongoimport
　　列出所有数据库 show dbs
　　使用/创建 数据库 use xxx
　　查看当前所在数据库 db
　　显示当前数据库中的集合 show collections

终端输出前台提交至数据库的数据

MongoDB图形化界面显示前台发送的数据

浏览器打印后台数据返回的数据（返回的数据在前台通过xhr.responseText进行接收, 用JOSN.paser()进行转换为数组/对象）

4. 图解

~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~