node.js 了解

什么是node.js

就是讓js文件可以不依賴瀏覽器運行的一個環(huán)境搁宾。想要運行它就得去node.js官網下載個安裝環(huán)境撕捍，否則運行不了摇锋。

node.js如何檢查配置環(huán)境：

檢查node環(huán)境有沒有裝上：
1.win+r 打開運行驾霜，輸入node -v 有版本號就可以耕餐。
配置環(huán)境完的兩種打開方式：
1.可以去下載一個市面上比較流行的終端環(huán)境叫做cmder。
2.在vscode左邊工作區(qū)域右鍵旺上，終端打開瓶蚂。

終端的常用命令:

路徑切換：
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.創(chuàng)建一個不帶中文名的文件夾
2.再需要用模塊的文件夾內打開終端初始化 npm init -y
3.下載模塊終端輸入 npm i 模塊名有進度條表示在下載
4.導包:require('模塊名') 寫代碼邏輯
5.運行

服務端.js與客戶端.js的區(qū)別
它們兩個的區(qū)別在于：客戶端的JavaScript主要用來處理頁面的交互(常見應用場景如：用戶交互宣吱，動畫特效窃这，表單驗證，發(fā)ajax請求等)征候。而服務器端的JavaScript主要用來處理數據交互（操作數據庫钦听，操作文件等）---另外在客戶端的ajax操作只能發(fā)送請求，而接收請求和做出操作就需要服務器端的javaScript來完成倍奢。

內置模塊:

內置模塊是官方提供的js插件朴上，在npm.js里可以找的到。
常用的幾種內置模塊：

url模塊：用于處理客戶端請求過來的url卒煞。
Node.js 中有路徑的問題痪宰，它的相對路徑相對的是終端所處的路徑，而不是相對于js文件畔裕，所以node.js里的相對路徑會有不正確的問題衣撬。

解決問題:使用絕對路徑但是正常的使用絕對路徑肯定不行，所以就用了npm提供的url模塊扮饶。

獲取路徑的兩個變量
__dirname 獲取當前文件夾的絕對路徑
__filename 獲取當前文件的絕對路徑
使用方法：使用__dirname生成文件夾路徑具练，再拼接上后續(xù)文件夾路徑組成一個絕對路徑。

//這種方法要用到\轉移符不然終端會解析轉移義符
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 模塊

//可以快速搭建一個靜態(tài)資源服務器模擬ajax獲取數據
//導包
const express = require('express')
//創(chuàng)建一個服務器
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');
//創(chuàng)建一個服務器
const app = express()
//注冊路由 
//如果要發(fā)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.有幾個執(zhí)行幾個寨蹋，執(zhí)行到最后再調用注冊路由里的邏輯代碼返回給瀏覽器松蒜。
3.必須帶next()否則后面代碼會阻斷掉不會執(zhí)行

// //導包
 const express = require('express')
// //生成服務器
 const app = express()
 //中間件
 //use()本質上就是注冊一個回調函數生成一個中間件
 app.use((req, res, next) => {
//   //請求一次打印一次
     console.log('LOGGED')
     next()//下一個不帶后面代碼不會執(zhí)行
   })
// //在請求和響應之間的回調函數。
// //寫幾個執(zhí)行幾個已旧，從上往下執(zhí)行
// //注冊路由
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調接口時，請求了一個不同源的地址难述，就會出現(xiàn)跨域問題萤晴，出現(xiàn)XMLHttpRequest錯誤一般都是跨域問題胁后。
什么叫不同源地址嗦枢？
1.一個完成的請求地址包含了三個部分
例：http://127.0.0.1:4399/login
1.協(xié)議:http://
2.地址:127.0.0.1
3.端口:4399
只要協(xié)議，地址文虏，端口有一個不相同稱之為不同源，反之氧秘，同源年鸳。
為什么有跨域的問題？
原因就是瀏覽器為了保證用戶安全丸相，做了同源安全限制搔确，當ajax請求不同源接口時默認是不允許的，因為頁面請求不同源接口時就意味著頁面和接口所處的服務器是不一樣的灭忠，請求服務器中是否有惡意代碼膳算，無法確定，出于安全弛作，直接不允許涕蜂。
解決跨域方法:
1.用cors模塊（主流）
使用方法：下載，導入映琳，使用(app.use(cors())即可
2.cors模塊原理:

// 中間件 請求和響應中間執(zhí)行
app.use((req, res, next) => {
  // res也是共享的
  // 中間件中 統(tǒng)一設置了允許訪問
  console.log('設置允許')
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 繼續(xù)向后執(zhí)行
  next()
})

原理是相當于設置了一個允許訪問的header,瀏覽器接收到這個響應之后檢查是否有這個header有就允許訪問机隙，沒有就阻止，報錯萨西。
3.JSONP實現(xiàn)跨域:

1561350499606.png

原理：
1.script標簽的src屬性支持跨域訪問黍瞧，沒有同源限制
2.服務器接收script標簽發(fā)送過來的請求，返回另一個函數的調用doIt({"name":"jack","age":18})
3.瀏覽器接收到這個函數的調用原杂，本地解析為js并執(zhí)行印颤，只要頁面中定義了這個函數就會調用。

1561351682016.png

通過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可以發(fā)請求年局。*/

數據庫

作用
顧名思義一個保存數據的倉庫，有著各種安全機制咸产，保證數據的安全矢否，需要通過密碼驗證等才可以訪問。

phpstudy

這里的話我并沒有獨立安裝一個數據庫脑溢，而是安裝了一個集成環(huán)境
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')
// 創(chuàng)建數據庫的連接
var connection = mysql.createConnection({
  // 地址
  host: 'localhost',
  // 用戶名
  user: 'root',
  // 密碼
  password: 'root',
  // 庫的名字
  database: 'herodb'
})

// 連接數據庫
connection.connect()

// 執(zhí)行 sql語句
// 參數1 執(zhí)行的sql語句
// 參數2 回調函數
connection.query('select * from hero;', (error, results, fields) => {
  // 參數1 error 是否出錯
  // 參數2 results 結果 sql語句的執(zhí)行結果
  // 參數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) {
    // 執(zhí)行成功了
    // console.log(results)
    // 除了查詢語句一般都是受影響的行數  因為只有查詢有數據作為結果
    console.log(results.affectedRows)
  } else {
    // 失敗啦
    console.log('出錯啦')
  }
})