一、什么是前端后台 ？

维基百科摘要：
前端（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");// Expresslet 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()进行转换为数组/对象）

三、图解

---

• MongoDB 安装即基本使用，可参考　MongoDB 数据库安装及基本使用-
• 更多 MongoDB 简单操作，可参考　MongoDB 基本操作指令
• MongoDB DOA 层封装，可参考　一图理解 Node.js 访问 MongoDB DAO层封装
• MongoDB 敏感数据加密，可参考　如何用MD5加密数据库的敏感数据 ？