1.フロントエンドの背景は何ですか？
ウィキペディアの要約：
フロントエンドとバックエンドは、プロセスの開始と終了を説明する一般的な用語です。フロントエンドは入力情報を収集するように機能し、バックエンドはそれを処理します。コンピュータプログラムのインターフェーススタイルと視覚的表現はフロントエンドに属しています。
第2に、フロントエンドバックエンドとデータベースの相互作用を実現する方法は？
（1）フロントエンドの静的ページデータの送信と取得
フロントエンドデータをサーバーに送信するには、通常、2つの方法があります。1。フォーム送信; 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>
：背景、オープンサーバの状態/アクイジション・モード差に提出二つのデータは、ということです
情報を受信するためのフォームを返すために、背景を形成するには、新しいページに直接（リフレッシュページ）が表示されます
AJAXはxhr.responseTextによって返された背景情報を受信します
以下是以form表单发送一个POST请求的局部展示 (具体原理须结合后台理解)
以下是以Btn按钮 发送AJAX请求的局部展示 (具体原理须结合后台理解)
（2）バックグラウンドNode.js-dataの受信と返送
私の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
すべてのデータベースを一覧 表示する dbを
使用する/データベースを作成する使用xxx
現在のデータベースを
表示するdb現在のデータベースでコレクションを表示するコレクションを表示する
终端输出前台提交至数据库的数据
MongoDB图形化界面显示前台发送的数据
浏览器打印后台数据返回的数据（返されたデータは、フォアグラウンドのxhr.responseTextを介して受信され、JOSN.paser（）を使用して配列/オブジェクトに変換されます）
3.イラスト
~~~~~~~~~~~~~終了~~~~~~~~~~~~~~
