1. ¿Cuál es el fondo del front-end?
Resumen de Wikipedia:
front-end y back-end son términos generales que describen el inicio y el final de un proceso. El front-end actúa para recopilar información de entrada, y el back-end la procesa. El estilo de la interfaz y la presentación visual de los programas de computadora pertenecen al front-end.
Segundo, ¿cómo lograr la interacción entre el front-end y el back-end para la base de datos?
(1) Presentación y adquisición de datos de página estáticos front-end
En general, hay dos formas de enviar datos de front-end al servidor: 1. envío de formulario, 2. envío 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>
La diferencia entre los dos métodos de envío / adquisición de datos cuando se enciende el servidor en segundo plano es:
formulario La información devuelta por el fondo recibido por el formulario se mostrará directamente en la nueva página (actualizar la página)
AJAX recibe la información devuelta en segundo plano a través de xhr.responseText
以下是以form表单发送一个POST请求的局部展示 (具体原理须结合后台理解)
以下是以Btn按钮 发送AJAX请求的局部展示 (具体原理须结合后台理解)
(2) Nodo de fondo.js-recepción y devolución de datos
La forma en que se construye mi servidor Node es a través de Express, que requiere que usted tenga una cierta comprensión del módulo Express de Node.js.
这是 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
Para enviar los datos enviados por el primer plano a la base de datos y devolver los datos de la consulta al primer plano, el servidor primero necesita iniciar la base de datos:
mongod --dbpath La ruta donde se almacenan los datos (una carpeta para almacenar datos)
Las declaraciones SQL comúnmente utilizadas de MongoDB: ( Instrucciones sobre la operación del terminal)
use la base de datos mongo (reinicie un terminal) para
importar datos mongoimportar la
lista de todas las bases de datos mostrar dbs
usar / crear la base de datos usar xxx
ver la base de datos actual db
mostrar la colección en la base de datos actual mostrar colecciones
终端输出前台提交至数据库的数据
MongoDB图形化界面显示前台发送的数据
浏览器打印后台数据返回的数据(Los datos devueltos se reciben a través de xhr.responseText en primer plano y se convierten en una matriz / objeto usando JOSN.paser ())
3. Ilustración
~~~~~~~~~~~~~ FIN ~~~~~~~~~~~~~~
