mongoDB
一、后端渲染
前端根据后端返回的json数据,然后来生成htm
l被称为前端渲染,而后端渲染是后端把json与html结合渲染好后返回给浏览器
。
前端:我???
1.1、模板引擎
其实不管谁来渲染页面,都会用到模板引擎,前端渲染页面实际上是操作dom,后端渲染页面是把数据和html字符拼接后返给浏览器
引擎 | 前端 | 后端 |
---|---|---|
angularJs | √ | × |
vue/mustach | √ | √ |
react | √ | √ |
angularTs/mustach | √ | √ |
jade(现在重命名为了pug) | × | √ |
ejs | × | √ |
jquery + art-template | √ | × |
handlerbars | √ | × |
1.2、ejs
1.2.1、ejs介绍
EJS 是一套简单的模板语言,帮你利用普通的 JavaScript 代码生成 HTML 页面。其实还是普通的 JavaScript 代码。
1.2.2、ejs特点
-
纯 JavaScript:
js代码可以直接使用
-
语法简单:
EJS 支持直接在标签内书写简单、直白的 JavaScript 代码。只需让 JavaScript 输出你所需要的 HTML
-
易于调试
调试 EJS 错误(error)很容易:所有错误都是普通的 JavaScript 异常,并且还能输出异常发生的位置。
1.2.3、原理
fs抓取前端静态页面 + ejs + 数据 --》 返回send(data) —》 浏览器
1.2.4、使用
- 后端渲染结果
let ejs = require('ejs')
ejs.renderFile('ejs模板文件',renderData,回调(err,data))
ejs模板 : 后缀名为ejs的html文件
renderData:json对象格式。要渲染到ejs模板文件里的数据,这个对象在ejs模块文件里就是个全局对象
err:错误,null代表没有错误
data: 渲染后的字符|流,即:渲染后的结果
- 后端渲染结果发送给前端
//设置模板文件的路径
app.set('views', path.join(__dirname, 'views'));
//设置模板的引擎
app.set('view engine', 'ejs');
res.render('模板文件名',{数据}) //整合页面和数据,完成渲染,发往浏览器,并结束响应
注意:
模板文件名:不用写扩展名,直接写文件名就行
数据是json对象
实例代码:
//在routes下的.js文件中
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
// render:(后端)渲染。
res.render('index', {
title: '这是首页',
desc:"这里是看书的网站",
books:[
{
id:"01001",
name:"<b>平凡的世界</b>"
},
{
id:"01002",
name:"围城"
}
]
});
});
module.exports = router;
//在views/index.ejs中
<% inclulde('')%>
<h1><%= title %></h1>
<hr/>
<p>Welcome to <%= title %></p>
<p>Welcome to <%= title %></p>
<p>简介:<%= desc %></p>
<ul>
<%
for(let i=0;i<books.length;i++){
%>
<li>
<p>编号:<%=books[i].id%></p>
<p>书名:<%=books[i].name%></p>
<p>书名:<%-books[i].name%></p>
</li>
<%
}
%>
</ul>
这样,在浏览器显示效果和前端渲染一样。
1.2.5、ejs模板文件语法
ejs 结构就是html
语句:所有的代码都写在<%与 %>中间,(与:php和html的混合写法一样)
输出: <%= 数据名|属性名|变量名 + 表达式 %>
非转义输出: <%- 数据名|变量名 + 表达式 %>
载入公共:<%- include(’./hd.ejs’,{数据}) %>
判断
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
更多详情参考>>>>>>>>ejs
1.3、前后端交互流程
后端渲染的流程
用户 - > 地址栏(http[s]请求) -> web服务器(收到) - > nodejs处理请求(返回静态、动态)->请求数据库服务(返回结果)->nodejs(接收)->node渲染页面->浏览器(接收页面,完成最终渲染)
前端渲染的流程
用户 - > http[s]请求 -> web服务器(收到) - > nodejs处理请求(返回静态、动态)->请求数据库服务(返回结果)->nodejs(接收)->返回给前端(渲染)->浏览器(接收页面,完成最终渲染)
二、数据库
之前我们已经学过mysql,可以参考我之前的博客戳这儿!!!
2.1、node + mysql客户端
今天我们简单讲一讲node和mysql的交互
既然node是后端语言,自然可以与数据库进行交互。
- 1、安装+引入
npm install mysql -S
var mysql = require('mysql');
- 2、创建库链接
var connection = mysql.createConnection({
host : 'localhost',//主机名
user : 'root',
password : 'root',
database : 'mydb2001'//库名
});
connection.connect();
- 3、表操作
connection.query('SQL语句', function (error, results, fields) {
if (error) throw error;
console.log('The solution is: ', results== 查询array|| 增删改object);
});
- 4、关闭库
connection.end();
2.2、mongoDB(重点)
今天的重点是学习mongodb数据库
2.2.1、介绍mongodb
非关系型数据库,又叫nosql,缓存型,使用场景多是解决大规模数据集合多重数据种类
mongodb使用内存映射文件(memory-mapped file)来处理对磁盘文件中数据的读写请求。真正的存储(朝硬盘存储)交给操作系统
将MongoDB用作内存数据库(in-memory database),也即,根本就不让MongoDB把数据保存到磁盘中
2.2.2、安装及配置
-
下载
-
配置数据文件存储位置
找到安装路径下的bin目录 -> cmd回车->
mongod --dbpath c:\data\db,
同时也启动了数据库服务,
注意:后面data的路径是手动创建的,路径可以自定义,命令后面改为自己的路径
- 服务端启动: 如果已经启动,忽略这一步骤,下图为启动成功
一般默认启动,在安装路径下的bin目录,打开cmd,输入命令mongod + 回车
注意:使用mongodb过程中此窗口保持打开状态
-
客户端连接
在安装路径下的bin目录,打开cmd,输入命令mongo + 回车
此处我配置了环境变量,故不是在mongodb安装目录下,环境变量配置在后面
注意:可以在环境变量中加入mongodb的安装路径,保证在任何盘符都可以使用命令连接mongodb(进入bin目录,复制路径,粘贴到path里)
福利:mongodb可视化工具 robo 3 t ,提取码:hhhh
安装及配置过程较繁琐,需要静下心来!
2.2.3、mysql 对比 mongodb
2.2.4、mongodb基本命令
- 1、库操作
查: show dbs
db 查看当前库
建(存在该库,就是切换): use 库名
- 2、集合(表)操作
建:db.createCollection('表名',{配置})
//配置:{size:集合的最大容量,capped:true,max:条数|文档数} capped定量
//db.表(集合).isCapped() 返回 true/false 是否是定量
查:show collections / db.getCollectionNames()
删:db.集合.drop()
- 3、文档(row)操作
- 增:
db.集合.save({}) //添加一条
db.集合.insert({}) //添加一条
db.集合.insertOne({}) //添加一条
db.集合.save([{},{}]) //多条
db.集合.insert([{},{}]) //多条
//insert 不会替换相同ID save会
- 删:
db.集合.deleteOne({查询条件}) //一条
db.集合.remove({查询条件},true) //一条
db.集合.remove({查询条件}) //多条
db.集合.remove({}) //清空表
- 改:
db.集合.update({查询条件},{替换条件},[插入false],[全替换false])
//查询条件
{age:22} age == 22
{age:{$gt:22}} age > 22
{age:{$lt:22}} age < 22
{age:{$gte:22}} age>=22
{age:{$lte:22}} age<=22
{age:{$lte:122,$gte:22}} age<=122 && age>=22
{$or:[{age:22},{age:122}]} age==22 or age==122
{key:value,key2:value2} key== value && key2==value2
{name:/正则/}
//替换条件
{$set:{age:12},$inc:{age:-1}}
- 查:
所有:db.集合.find(条件)
条数: db.集合.find().count()
db.集合.find({条件},{指定要显示列区域})
指定要显示列区域
username:1 显示这个区域,其他不显示
username:0 不显示这个区域,其他显示
_id 是默认显示
- 排:
db.集合.find().sort({key:1}) //升
db.集合.find().sort({key:-1}) //降
db.集合.find().sort({key1:1,key2:-1}) // 按照key1升序,key1相同时,按照key2降序
- 限定
db.集合.find().limit(number) //限定
db.集合.find().skip(number) //跳过
db.集合.findOne()//找第一个
db.集合.find().limit(1) //查询第一条
2.2.5、node+mongodb
现在我们来学习mongodb和node的交互
- 1、Mongoose简介
mongoose是nodeJS提供连接 mongodb的一个模块,便捷操作MongoDB的对象模型工具(Mongoose的操作是以对象为单位的) - 2、安装mongoose
npm i mongoose --save
- mongoose连接数据完成增删改查
//1、conndb.js 连接数据库
const mongoose = require('mongoose');
mongoose.connect(
'mongodb://localhost:27017/db2104',
{
useNewUrlParser:true
} //使用解析器来解析本次连接
);
module.exports = mongoose;
// 2、usersdb.js //针对集合users的所有操作(一般来说,增删改查)
let mongoose = require('./conndb'); //引入连接数据库的代码
//模板:创建集合users对应的模板(相当于表结构,在nodejs里创建一个表结构)
let userSchema = new mongoose.Schema({
'userName':String,
'userPass':String
});
//模型:(把数据库中集合users和模板进行对应和绑定)
let UserModel = mongoose.model('users',userSchema);
module.exports = {
//1)、添加
addUser:function(user,success,fail) {
//1)、创建实体
let userEntity = new UserModel({
userName:"敖东",
userPass:"123"
});
userEntity.save((err,data)=>{
if(err){
fail&&fail();
}else{
success&&success();
}
});
}
//2)、查询
queryUser:function(obj,success,fail){
UserModel.find(obj,(err,data)=>{
if(err){
fail&&fail();
}else{
success&&success(data);
}
});
},
//3、删除
removeUser:function(obj,success,fail){
UserModel.remove(obj,(err,data)=>{
if(err){
fail&&fail();
}else{
success&&success(data);
}
});
},
//4、修改
updateUser:function(condationObj,updateObj,success,fail){
UserModel.update(condationObj,updateObj,(err,data)=>{
if(err){
fail&&fail();
}else{
success&&success(data);
}
});
}