1.nodejs:一种js解释器
单页面程序:(浏览器端渲染语言)打包之后只有一个页面,不利于SEO做检索,一般情况下部署在静态服务器(apache)下
问:什么是浏览器端渲染?
多页面程序:(服务器端渲染)
多页面程序开发:nuxt(Vue)/next(react)
使用nuxt(vue)
在node环境中npx create-nuxt-app 名称
nodejs相关api:
1)http:(网络模块)提供HTTP服务器功能
2)fs:与文件系统交互
3)url(统一资源定位符):解析url字符串,hostname\port\pathname
4)querystring 解析URL的查询字符串
5)utils:提供一系列实用小工具
6)path:处理文件路径 路径解析、获取目录、获取文件后缀
7)crypto:提供加密和解密功能,基本上是对openSSL的包装
2.处理异常
1)try-catch
try{
代码
}catch(error){
...
}
2)回调函数
fs.readFile('./a.txt',(error,data){
})
3.js任务调度:单线程,非阻塞io
1)执行栈
进程:一个应用程序,
线程:一个进程中可以包括多个线程
顺序解析执行,当遇到异步操作的时候,会将异步操作挂起,
继续执行同步操作,直到所有同步任务执行完毕。
console.log('start');
setTimeout(()=>{
console.log('timeout1');
},1000)
setTimeout(()=>{
console.log('timeout2');
},500)
console.log('end');
结果:start end timeout1 timeout2
2)事件循环
当执行栈中所有同步代码执行完毕,执行栈为空,
检查微任务队列中是否包含微任务,如果有,
清空微任务队列,然后查看宏任务队列,如果有,取出第一个
进行执行;继续检查微任务队列...
3)事件队列(异步操作)
4)宏任务队列
timmer
io
requestAnimationFrame
5)微任务队列
Promise.resolve().then()
process.nextTick()
假如在微任务中出现了await,js会将await后面的任务放到之后
的微任务队列中,在之后的事件循环过程中遍历它
4.回流、重绘
重绘:dom中样式的改变
回流
API调用
1.开发需求
1)利用http模块及相关api开发一个模拟apache的静态服务器
2)利用http模块及相关api开发一个服务器程序(咨询后台)
判断用户请求是否为静态资源:看是否有后缀(extname),a.html就为静态资源,article/pages为接口
如何获取get参数:查询字符串
如何获取post参数:查询字符串、json、headers
为做区分:200是HTTP请求状态码,20000是后台业务相应的状态码
浏览器如何验证http缓冲中的缓存内容是否过期
第一次请求服务器时,后台服务器会在响应头中,将资源的版本号及时间返回过来
第二次请求服务器,浏览器在请求头中自动携带了资源的版本号及时间,服务器接收
请求后,验证缓存资源是否过期:
如果过期,状态码返回200,将最新的资源返回过去
如果没过期,状态码返回304,表示浏览器中缓存的资源还未过期
1.http:
1)接受参数
get:
/user/findById?id=5
req.url
引入url模块(nodejs)内置模块
require('url')
let urlObj=url.parse('req.url') //解析url,将地址解析为对象
{
port:'3000',
pathName:' /user/findById',
search:'?id=5',
query:'id=5'
}
引入querystring模块(nodejs内置模块)
let qs=require('querystring')
let id=qs.parse('urlObj.query').id //5
post(参数保存在请求体中,表单数据、json数据)
//on:监听事件;chunk为二进制数据
req.on('data',(chunk)={
let data=chunk.toString();//将二进制数据转换为字符串
let obj=qs.parse(data);//将字符串转换为对象
})
2)给出响应
//给出响应头
res.writeHead(200,'OK',{
"Content-Type":"application/json"
})
//给出响应体
res.write(JSON.stringify({
status:20000,//服务器的业务状态码
message:'查询成功',//服务器的响应信息
data:null,
timestamp:new Date().getTime(),//时间戳
}))
//结束响应
res.end();//该api在http模块非常重要,如果不写则本次请求不完整,相当于响应一直没有结束
2.http缓存机制
私有缓存、共享缓存
缓存机制
浏览器第一次向服务器请求时,
服务器在响应头中,返回资源的版本号以及最后修改时间
{
etag:'',
last-modified:
}
浏览器第二次请求服务器时,
浏览器在请求头中自动携带资源的版本信息以及最后修改时间(让服务器去验证浏览器缓存的资源是否过期),
服务器接收到请求后,验证缓存资源的版本信息,
如果验证失败,说明缓存已经过期,响应200状态码,并且将最新的资源返回给浏览器
如果验证成功,说明缓存未过期,响应304状态码,浏览器在接收到304响应的时候,确定自己的缓存没有过期,可以继续使用
3.http超文本传输协议版本号
1.0 1.1(目前使用最多) 2.0
4.三次握手、四次挥手(HTTP/1.0)
握手:建立连接,保证通讯双方的接收、发送能力都是正常的
挥手:断开连接,保证通信双方在断开连接时,已经完成了全部数据交互
nodemon:保存完代码后,自动构建运行服务 cnpm i -g nodemon
中间件:
body-parser(将用户携带的请求体参数进行解析,挂载到req.body上
serve-static(在服务器内部搭建静态服务器,供前端项目部署)
安装:cnpm i -S serve-static
cors(处理服务器跨域问题,可以配置请求白名单)
cookie-parser(解析用户写道的cookie)
跨域存在的意义:保证服务器的安全性,进而保证数据安全
跨域解决方案:
1)将前后端项目部署在同一个域中
2)配置访问的白名单,通过cors(处理跨域问题)中间件来完成
脚手架
通过应用生成器工具 express-generator可以快速创建一个应用的骨架
npx express-generator (先检索再下载)
cnpm install
npm run start
访问:localhost:3000
mysql
安装 cnpm install mysql --save
导入数据库 const mysql=require('mysql')
创建数据库连接实例(可以放在方法中):
const connection =mysql.createConnection({
host:'localhost', //主机名/阿里云
user:'briup', //用户名(有就添加权限,没有就创建)
password:'briupSH', //密码
database:'briup-sc-01', //数据库名
})
建立连接 connection.connect()
数据库操作 const sql='select * from tab_student'
connection.query(sql,(error,result)=>{
if(error) throw error
console.log(result)
})
断开连接:connection.end()
1)数据库定义语言:数据的创建、删除、修改;数据库中表的创建、修改、删除
(可以用可视化工具navicat)
2)数据库更新语言:数据库表中数据的增删改查
tab_student表
增:insert into tab_student(name,age) values('zs',12);
删:delete from tab_student where id=5;
改:update tab_student set name='lisi' where id=5
查:select * from tab_student;
select name from tab_student;
select count(*) as total from tab_student
egg框架(官方文档 egg.org)
koa框架是面向企业级开发;egg奉行“约定优于配置”,基于koa开发
结构:router:路由器(控制项目路由);
controller:控制器(接收参数,调用service,响应结果)
service:提供服务(复杂数据)
router调用controller,controller调用service,
写代码时先写service,再写controller,最后定义router
安装egg-mysql:cnpm i -S egg-mysql
在config文件中的plugin.js中进行配置:
mysql:{
enable:true, //插件的开启
package:'egg-mysql'
}
config.default.js是详细的配置信息,包括端口号等
egg项目初始化
mkdir egg-app01 & cd egg-app01
npm init egg (--type=simple
cnpm install
npm run dev
egg框架中的config文件主要用于配置插件等配置信息
app用于写源码的文件
内置对象
1.Application 全局应用对象,一个项目维护一个Application
2.context 上下文对象,每次连接触发(http),都会生成一个context对象,
该对象保存了本次连接的重要数据
比如:this.ctx.query
this.ctx.request.body
express
res.send()
res.json()
3.csrf egg脚手架内置的安全组件,demo阶段可以直接关闭
post方法携带数据,demo阶段将csrf关闭就不会在拦截
config.default.js:
security:{
csrf:{
enable:false,
}
}
分页查询:page:1 pageSize:5 =>limit 0,5
page:2 pageSize:5 =>limit 5,5
limit (page-1)*pageSize,pageSize
select * from tab_student limit 0,5
//0表示开始查询的索引位置,5表示5条数据
select count(*) as total from tab_student