什么是node.js
就是让js文件可以不依赖浏览器运行的一个环境。想要运行它就得去node.js官网下载个安装环境,否则运行不了。
node.js如何检查配置环境:
- 检查node环境有没有装上:
1.win+r 打开运行,输入node -v 有版本号就可以。 - 配置环境完的两种打开方式:
1.可以去下载一个市面上比较流行的终端环境叫做cmder。
2.在vscode左边工作区域右键,终端打开。
终端的常用命令:
- 路径切换:
1.cd ../ 返回上一级
2.cd 加上路径,直接去到这个路径 - 清屏
1.clear - 删除文件
1.rm -rf 文件夹/文件夹名(慎用 不加文件夹/文件名默认删除所有) - 获取ip地址
1.ipconfig - 运行node
- node 文件名
- 初始化
1.npm init -y - 安装某个模块
npm i 模块名
服务端.js与客户端.js
客户端的js:
客户端js的组成:
1.DOM(文档对象模型):DOM是HTML和XML的API 用于控制文档的内容和结构
2.BOM(浏览器对象模型)可以对浏览器窗口进行访问和操作
3.ECMAScript(javaScript 的核心语法)服务端的js:
客户端js的组成:
1.ECMAScript
2.模块
模块分类:
1.内置模块
2.第三方模块
3.自定义模块
使用步骤:
1.创建一个不带中文名的文件夹
2.再需要用模块的文件夹内打开终端初始化 npm init -y
3.下载模块 终端输入 npm i 模块名 有进度条表示在下载
4.导包:require('模块名') 写代码逻辑
5.运行
- 服务端.js与客户端.js的区别
它们两个的区别在于:客户端的JavaScript主要用来处理页面的交互(常见应用场景如:用户交互,动画特效,表单验证,发ajax请求等)。 而服务器端的JavaScript主要用来处理数据交互(操作数据库,操作文件等)---另外在客户端的ajax操作只能发送请求,而接收请求和做出操作就需要服务器端的javaScript来完成。
内置模块:
内置模块是官方提供的js插件,在npm.js里可以找的到。
常用的几种内置模块:
- url模块:用于处理客户端请求过来的url。
Node.js 中有路径的问题,它的相对路径相对的是终端所处的路径,而不是相对于js文件,所以node.js里的相对路径会有不正确的问题。
解决问题:使用绝对路径但是正常的使用绝对路径肯定不行,所以就用了npm提供的url模块。
获取路径的两个变量
__dirname 获取当前文件夹的绝对路径
__filename 获取当前文件的绝对路径
使用方法:使用__dirname生成文件夹路径,再拼接上后续文件夹路径组成一个绝对路径。
//这种方法要用到\转移符不然终端会解析转移义符
const url = __dirname+'\\data\\index.html';
- path模块 用于处理文件路径
1.上面用转义符的方式万一忘记了怎么办?node.js提供了一个path模块
2.其中path.join()作用:可以把路径拼接起来,会自动调整格式。
3.导入文件:
//使用模块时都要先导入 都是require('模块名')
const path = require('path');
//这种方法会相对简单些但是要导入模块
const url = path.join(__dirname,'./index.html');
- fs文件模块
//导入模块
const fs = reqire('fs');
//1. 文件读取
fs.readFile('index.html',(err,data)=>{
//err 错误信息,没错的话是null
//data 读取的数据,默认是二进制
})
//2.文件保存
fs.writeFile('./info.txt','保存的信息',(err,data)=>{
//err是否出错,成功返回null
})
- 设置允许跨域 cors模块
//导包
const cors = require('cors');
//使用
filename.use(cors());
- http 模块
//可以快速搭建一个静态资源服务器模拟ajax获取数据
//导包
const express = require('express')
//创建一个服务器
const app = express()
//响应的数据
//req 请求 //res 响应//
app.get('/', (req, res) => {
//send express提供的方法,作用:响应数据返回给浏览器
res.send('Hello World!');
})
//启动服务器
app.listen(9998, () => console.log('Example app listening on port 3000!'))
常用的几个第三方模块:
//body-parser模块
const bodyParser = require('body-parser')
//作用解析post请求头
app.use(bodyParser.urlencoded({ extended: false }));
// console.log(req.query);//id保存的位置
// console.log(req.body);//文本保存的位置
//multer模块 作用:储存文件
const multer = require('multer');
//定义一个储存文件的文件夹 //static是文件夹名可以自己写
const static = multer({ dest: 'static/' });
//static.single('icon'),--icon 接收一个key叫icon
//key是不能随便写的,要上传的是是文件就要写对应的key
app.post('/add', static.single('icon'), (req, res) => {}
// console.log(req.file);//文件保存的位置
// console.log(req.body);//文本保存的位置
//express模块 作用:注册路由
const express = require('express');
//创建一个服务器
const app = express()
//注册路由
//如果要发post请求把get改成post即可再导入bod-parser模块
app.get('/ramdom', (req, res) => {
const six = ['笑话1', '笑话2', '笑话3', '笑话4', '笑话5'];
const four = parseInt(Math.random() * six.length);
res.send(six[four]);//返回的要是数组的随机下标
// res.send(four);//报错
})
//启动服务器 9998端口名自定
app.listen(9998, () => console.log('成功'))
中间件
- 中间件的基本概念:
1.在请求跟响应之间的回调函数
2.有几个执行几个,执行到最后再调用注册路由里的逻辑代码返回给浏览器。
3.必须带next()否则后面代码会阻断掉不会执行
// //导包
const express = require('express')
// //生成服务器
const app = express()
//中间件
//use()本质上就是注册一个回调函数生成一个中间件
app.use((req, res, next) => {
// //请求一次打印一次
console.log('LOGGED')
next()//下一个不带后面代码不会执行
})
// //在请求和响应之间的回调函数。
// //写几个执行几个,从上往下执行
// //注册路由
app.get('/admin', (req, res) => {
res.send('Hello World!')
})
// //启动服务器
app.listen(3000, () => {
console.log('success');
})
用一个中间件解决图片无法解析的问题
//可以把储存的文件暴露出去 让外部可以访问
app.use(express.static('filename/'))
//图片的保存不要用相对路径,用绝对路径
//会生成类似这样的地址
const icon = `http://192.168.17.49:6500/${req.file.filename}`
跨域:
- 跨域基本概念
1.浏览器在Ajax调接口时,请求了一个不同源的地址,就会出现跨域问题,出现XMLHttpRequest错误一般都是跨域问题。 - 什么叫不同源地址?
1.一个完成的请求地址包含了三个部分
例:http://127.0.0.1:4399/login
1.协议:http://
2.地址:127.0.0.1
3.端口:4399
只要协议,地址,端口有一个不相同称之为不同源,反之,同源。 - 为什么有跨域的问题?
原因就是浏览器为了保证用户安全,做了同源安全限制,当ajax请求不同源接口时默认是不允许的,因为页面请求不同源接口时就意味着页面和接口所处的服务器是不一样的,请求服务器中是否有恶意代码,无法确定,出于安全,直接不允许。 - 解决跨域方法:
1.用cors模块(主流)
使用方法:下载,导入,使用(app.use(cors())即可
2.cors模块原理:
// 中间件 请求和响应中间执行
app.use((req, res, next) => {
// res也是共享的
// 中间件中 统一设置了允许访问
console.log('设置允许')
res.setHeader('Access-Control-Allow-Origin', '*')
// 继续向后执行
next()
})
原理是相当于设置了一个允许访问的header,浏览器接收到这个响应之后检查是否有这个header有就允许访问,没有就阻止,报错。
3.JSONP实现跨域:
-
原理:
1.script标签的src属性支持跨域访问,没有同源限制
2.服务器接收script标签发送过来的请求,返回另一个函数的调用doIt({"name":"jack","age":18})
3.浏览器接收到这个函数的调用,本地解析为js并执行,只要页面中定义了这个函数就会调用。
通过callback参数 告诉服务器函数名
Jquery 中的 JSONP:
1.$ajax()设置dataType:json 即可
$(function() {
$('input').click(function() {
$.ajax({
url: 'http://127.0.0.1:4399/getInfo',
// JSONP只支持get
dataType: 'jsonp',
success(backData) {
console.log(backData)
}
})
})
})
/*注意:这里的ajax与ajax没有关系,ajax是XMLHTTPRequest
的对象 jsonp是script的src可以发请求。*/
数据库
- 作用
顾名思义一个保存数据的仓库,有着各种安全机制,保证数据的安全,需要通过密码验证等才可以访问。
phpstudy
- 这里的话我并没有独立安装一个数据库,而是安装了一个集成环境
phpstudy 独立安装的需要做些配置,而且要卸载也很难卸载...下载的话直接去phpstudy官网下载即可。 - phpstudy 使用mySQL流程:
1.启动,点击mysql管理器,打开登录信息,建立库,建立表,建立表头,在sql编辑器写代码。
phpstudy SQL语句:
- 常见操作:
1.增(insert):
-- 如果字段的值类型是字符串 要跟上引号
insert into 表名(字段1,字段2,字段3..) values(字段1的值,字段2的值,字段3的值)
-- 插入数据 可以人为设置id
-- insert into hero(id,skill,name,habbit) values(4,'草丛蹲着','盖伦','大宝剑')
-- id会自动生成不需要人为设置
-- insert into hero(skill,name,habbit) values('长枪依旧在','赵信','挑上天');
-- id可以为空,自动设置的,结尾要跟上;不然报错~
-- 注释-- 后面要带空格不然报错~
2.删(delete)
delete from 表名 条件
-- 删除数据 必须跟条件 不然为全部删除!!!
-- delete from hero where id = 5;
-- 条件的写法除了= 还可以写范围
-- delete from hero where id>=6 and id <=9;
3.改(update)
update 表名 set 字段名=值,字段名2=值.. 条件
-- 修改 一般会跟条件否则是全部修改
-- update hero set skill="回血" where id = 16;
-- 可以修改多个
-- update hero set skill="想去哪儿就去哪儿",habbit="旅游" where id >=17 and id<=24;
update hero set skill="变身",name="Niko",habbit="世界和平";
4.查(select)
select 字段 from 表名 条件
-- 从hero表 查询 id,skill,name,habbit
-- 空格才是注释
-- select id,skill,name,habbit from hero
-- 从hero表 查询 所有字段
select * from hero
-- 查询出 hero表中 id = 4的值 字段是所有
select * from hero where id=4
Node第三方模块--mysql
- 使用方法与其它模块是一样的。
// 使用流程
// 导入mysql模块
var mysql = require('mysql')
// 创建数据库的连接
var connection = mysql.createConnection({
// 地址
host: 'localhost',
// 用户名
user: 'root',
// 密码
password: 'root',
// 库的名字
database: 'herodb'
})
// 连接数据库
connection.connect()
// 执行 sql语句
// 参数1 执行的sql语句
// 参数2 回调函数
connection.query('select * from hero;', (error, results, fields) => {
// 参数1 error 是否出错
// 参数2 results 结果 sql语句的执行结果
// 参数3 fields 数据库的字段说明 (表头 ) 用的不多
console.log(error)
console.log(results)
console.log(fields)
})
// 关闭数据库的连接
connection.end()
- mysql模块的增删改查:
1.增(insert)
// 增 insert into hero(skill,name,habbit) values('丢菜刀','蒙多','打针');
const insertSql = `insert into hero(skill,name,habbit) values('丢菜刀','蒙多','打针');`
connection.query(insertSql, (err, results, fileds) => {
if (err == null) {
// 执行成功了
// console.log(results)
// 除了查询语句一般都是受影响的行数 因为只有查询有数据作为结果
console.log(results.affectedRows)
} else {
// 失败啦
console.log('出错啦')
}
})
2.删(delete)
// 删除 delete from hero where id = 28;
const deleteSql = `delete from hero where id = 29;`
// 参数3 不用刻意删除
connection.query(deleteSql, (err, results) => {
if (err == null) {
console.log(results)
} else {
console.log('失败啦!')
}
})
//数据库的删除一般是软删除,可以在建立字段的时候添加一个
//isdelete 为0 删除的时候把isdelete改为1 表示删除,但是数据
//还在。
3.改(update)
// 修改 update hero set skill="绿的发光" where id = 16;
const updateSql = `update hero set skill="黑的发亮" where id = 30;`
connection.query(updateSql, (err, results) => {
if (err == null) {
// affectedRows 重复修改 还是 1
// 通过 message获取修改的结果
// console.log(results)
console.log(results.message)
} else {
console.log('失败啦!')
}
})
4.查(select)
// 查询
const selectSql = `select * from hero where id >=17 and id <=27;`
connection.query(selectSql, (err, results) => {
if (err == null) {
// results 获取到的是 查询出来的结果
console.log(results)
} else {
console.log('失败啦!')
}
})
5.模糊搜索(%%)
//搜索前后带有牛的数据
//牛前面带%表示开头为牛的,牛后面带%表示结尾为牛的,
select * from heroplus where name like '%牛%' or skill like'%牛%';
常见的数据库类型:
- 关系型:
1.它的保存数据类似于表格,使用时要新建一个表格,定义表头,它自己创立了一个ID作为这个表格的标记。常见的:mysql,MSSQL... - 非关系型:
1.它的保存方式类似于js中的对象,以及数组。常见的:mongdb
Node.js模块化:
- common.js一个模块化标准Node遵守了这个标准,node中模块的写法需要遵守它的标准。如:导入规定使用
require
函数 导出(暴露)用的是expprts
函数。