hello world
`); 161 | }); 162 | 163 | app.listen(8080); //设置访问端口号 164 | 165 | ``` 166 | 167 | 168 | 命令行进入项目文件夹后，键入 169 | 170 | ``` 171 | node app.js 172 | ``` 173 | 174 | 175 | 即已开启服务器，接下来只需在浏览器中运行 http://localhost:8080/ 就可以访问到服务器得到响应后的数据 176 | 177 | -------------------------------------------------------------------------------- /Express/day4/文档/2-Express路由.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ### 一、Express路由简介 4 | 5 | 路由表示应用程序端点 (URI) 的定义以及响应客户端请求的方式。它包含一个请求方时（methods）、路径（path）和路由匹配时的函数（callback）; 6 | 7 | ``` 8 | app.methods(path, callback); 9 | ``` 10 | 11 | ### 二、Express路由方法 12 | 13 | Express方法源于 HTTP 方法之一，附加到 express 类的实例。它可请求的方法包括： 14 | 15 | get、post、put、head、delete、options、trace、copy、lock、mkcol、move、purge、propfind、proppatch、unlock、report、mkactivity、checkout、merge、m-search、notify、subscribe、unsubscribe、patch、search 和 connect。 16 | 17 | ### 三、路径 18 | 19 | Express路径包含三种表达形式，分别为字符串、字符串模式、正则表达式 20 | 21 | #### 1.字符串路径 22 | 23 | ``` 24 | app.get("/login",function(req,res){ 25 | res.send("heng... women"); 26 | }) 27 | ``` 28 | 29 | 30 | 此路径地址将与/login匹配 31 | 32 | #### 2.字符串模式路径 33 | 34 | 此路由路径将与`acd`和相匹配`abcd`。 35 | 36 | ```javascript 37 | app.get('/ab?cd', function (req, res) { 38 | res.send('ab?cd') 39 | }) 40 | ``` 41 | 42 | 这条路线的路径将会匹配`abcd`，`abbcd`，`abbbcd`，等等。 43 | 44 | ```javascript 45 | app.get('/ab+cd', function (req, res) { 46 | res.send('ab+cd') 47 | }) 48 | ``` 49 | 50 | 这条路线的路径将会匹配`abcd`，`abxcd`，`abRANDOMcd`，`ab123cd`，等。 51 | 52 | ```javascript 53 | app.get('/ab*cd', function (req, res) { 54 | res.send('ab*cd') 55 | }) 56 | ``` 57 | 58 | 此路由路径将与`/abe`和相匹配`/abcde`。 59 | 60 | ```javascript 61 | app.get('/ab(cd)?e', function (req, res) { 62 | res.send('ab(cd)?e') 63 | }) 64 | ``` 65 | 66 | #### 3.正则表达式路径 67 | 68 | 此路由路径将匹配其中带有“ a”的任何内容。 69 | 70 | ```javascript 71 | app.get(/a/, function (req, res) { 72 | res.send('/a/') 73 | }) 74 | ``` 75 | 76 | 这条路线的路径将匹配`butterfly`和`dragonfly`，但不`butterflyman`，`dragonflyman`等。 77 | 78 | ```javascript 79 | app.get(/.*fly$/, function (req, res) { 80 | res.send('/.*fly$/') 81 | }) 82 | ``` 83 | 84 | #### 85 | 86 | ### 四、基础路由 87 | 88 | ``` 89 | const express = require("express"); 90 | var app = express(); 91 | 92 | app.get("/",function(req,res){ 93 | res.send(`主页
`); 94 | }); 95 | app.get("/login",function(req,res){ 96 | res.send(“登录页面”); 97 | }); 98 | app.get("/registe",function(req,res){ 99 | res.send(“注册页面”); 100 | }); 101 | 102 | app.listen(8080); 103 | ``` 104 | 105 | 106 | 输入http://127.0.0.1:8080/login和http://127.0.0.1:8080/registe都能进入不同路由。 107 | 108 | ### 五、动态路由 109 | 110 | ### 路线参数 111 | 112 | 路由参数被命名为URL段，用于捕获URL中在其位置处指定的值。捕获的值将填充到`req.params`对象中，并将路径中指定的route参数的名称作为其各自的键。 113 | 114 | ``` 115 | Route path: /users/:userId/books/:bookId 116 | Request URL: http://localhost:3000/users/34/books/8989 117 | req.params: { "userId": "34", "bookId": "8989" } 118 | ``` 119 | 120 | 要使用路由参数定义路由，只需在路由路径中指定路由参数，如下所示。 121 | 122 | ```javascript 123 | app.get('/users/:userId/books/:bookId', function (req, res) { 124 | res.send(req.params) 125 | }) 126 | ``` 127 | 128 | 路径参数的名称必须由“文字字符”（[A-Za-z0-9_]）组成。 129 | 130 | 由于连字符（`-`）和点（`.`）是按字面解释的，因此可以将它们与路由参数一起使用，以实现有用的目的。 131 | 132 | ``` 133 | Route path: /flights/:from-:to 134 | Request URL: http://localhost:3000/flights/LAX-SFO 135 | req.params: { "from": "LAX", "to": "SFO" } 136 | Route path: /plantae/:genus.:species 137 | Request URL: http://localhost:3000/plantae/Prunus.persica 138 | req.params: { "genus": "Prunus", "species": "persica" } 139 | ``` 140 | 141 | 要更好地控制可以由route参数匹配的确切字符串，可以在括号（`()`）后面附加一个正则表达式： 142 | 143 | ``` 144 | Route path: /user/:userId(\d+) 145 | Request URL: http://localhost:3000/user/42 146 | req.params: {"userId": "42"} 147 | ``` 148 | 149 | 由于正则表达式通常是文字字符串的一部分，因此请确保`\`使用其他反斜杠对所有字符进行转义，例如`\\d+`。 150 | 151 | 在Express 4.x中，[不以常规方式解释正则表达式中](https://github.com/expressjs/express/issues/2495)[的`*`字符](https://github.com/expressjs/express/issues/2495)。解决方法是使用`{0,}`代替`*`。这可能会在Express 5中修复。 152 | 153 | ## 路线处理程序 154 | 155 | 您可以提供行为类似于[中间件的](http://www.expressjs.com.cn/en/guide/using-middleware.html)多个回调函数来处理请求。唯一的例外是这些回调可能会调用`next('route')`以绕过其余的路由回调。您可以使用此机制在路由上施加先决条件，然后在没有理由继续使用当前路由的情况下将控制权传递给后续路由。 156 | 157 | 路由处理程序可以采用函数，函数数组或二者组合的形式，如以下示例所示。 158 | 159 | 单个回调函数可以处理路由。例如： 160 | 161 | ```javascript 162 | app.get('/example/a', function (req, res) { 163 | res.send('Hello from A!') 164 | }) 165 | ``` 166 | 167 | 多个回调函数可以处理一条路由（确保指定了`next`对象）。例如： 168 | 169 | ```javascript 170 | app.get('/example/b', function (req, res, next) { 171 | console.log('the response will be sent by the next function ...') 172 | next() 173 | }, function (req, res) { 174 | res.send('Hello from B!') 175 | }) 176 | ``` 177 | 178 | 回调函数数组可以处理路由。例如： 179 | 180 | ```javascript 181 | var cb0 = function (req, res, next) { 182 | console.log('CB0') 183 | next() 184 | } 185 | 186 | var cb1 = function (req, res, next) { 187 | console.log('CB1') 188 | next() 189 | } 190 | 191 | var cb2 = function (req, res) { 192 | res.send('Hello from C!') 193 | } 194 | 195 | app.get('/example/c', [cb0, cb1, cb2]) 196 | ``` 197 | 198 | 独立功能和功能数组的组合可以处理路由。例如： 199 | 200 | ```javascript 201 | var cb0 = function (req, res, next) { 202 | console.log('CB0') 203 | next() 204 | } 205 | 206 | var cb1 = function (req, res, next) { 207 | console.log('CB1') 208 | next() 209 | } 210 | 211 | app.get('/example/d', [cb0, cb1], function (req, res, next) { 212 | console.log('the response will be sent by the next function ...') 213 | next() 214 | }, function (req, res) { 215 | res.send('Hello from D!') 216 | }) 217 | ``` 218 | 219 | ## 应对方法 220 | 221 | `res`下表中响应对象（）上的方法可以将响应发送到客户端，并终止请求-响应周期。如果从路由处理程序中未调用这些方法，则客户端请求将被挂起。 222 | 223 | | 方法 | 描述 | 224 | | ------------------------------------------------------------ | ------------------------------------------------------ | 225 | | [res.download()](http://www.expressjs.com.cn/en/4x/api.html#res.download) | 提示要下载的文件。 | 226 | | [res.end（）](http://www.expressjs.com.cn/en/4x/api.html#res.end) | 结束响应过程。 | 227 | | [res.json（）](http://www.expressjs.com.cn/en/4x/api.html#res.json) | 发送JSON响应。 | 228 | | [res.jsonp（）](http://www.expressjs.com.cn/en/4x/api.html#res.jsonp) | 发送带有JSONP支持的JSON响应。 | 229 | | [res.redirect（）](http://www.expressjs.com.cn/en/4x/api.html#res.redirect) | 重定向请求。 | 230 | | [res.render（）](http://www.expressjs.com.cn/en/4x/api.html#res.render) | 渲染视图模板。 | 231 | | [res.send（）](http://www.expressjs.com.cn/en/4x/api.html#res.send) | 发送各种类型的响应。 | 232 | | [res.sendFile（）](http://www.expressjs.com.cn/en/4x/api.html#res.sendFile) | 将文件作为八位字节流发送。 | 233 | | [res.sendStatus（）](http://www.expressjs.com.cn/en/4x/api.html#res.sendStatus) | 设置响应状态代码，并将其字符串表示形式发送为响应正文。 | 234 | 235 | ## app.route（） 236 | 237 | 您可以使用来为路由路径创建可链接的路由处理程序`app.route()`。由于路径是在单个位置指定的，因此创建模块化路由非常有帮助，减少冗余和错别字也很有帮助。有关路由的更多信息，请参见：[Router（）文档](http://www.expressjs.com.cn/en/4x/api.html#router)。 238 | 239 | 这是使用定义的链式路由处理程序的示例`app.route()`。 240 | 241 | ```javascript 242 | app.route('/book') 243 | .get(function (req, res) { 244 | res.send('Get a random book') 245 | }) 246 | .post(function (req, res) { 247 | res.send('Add a book') 248 | }) 249 | .put(function (req, res) { 250 | res.send('Update the book') 251 | }) 252 | ``` 253 | 254 | ## 快速路由器 255 | 256 | 使用`express.Router`该类创建模块化的，可安装的路由处理程序。一个`Router`实例是一个完整的中间件和路由系统; 因此，它通常被称为“迷你应用程序”。 257 | 258 | 以下示例将路由器创建为模块，在其中加载中间件功能，定义一些路由，并将路由器模块安装在主应用程序的路径上。 259 | 260 | `birds.js`在app目录中创建一个名为以下内容的路由器文件： 261 | 262 | ```javascript 263 | var express = require('express') 264 | var router = express.Router() 265 | 266 | // middleware that is specific to this router 267 | router.use(function timeLog (req, res, next) { 268 | console.log('Time: ', Date.now()) 269 | next() 270 | }) 271 | // define the home page route 272 | router.get('/', function (req, res) { 273 | res.send('Birds home page') 274 | }) 275 | // define the about route 276 | router.get('/about', function (req, res) { 277 | res.send('About birds') 278 | }) 279 | 280 | module.exports = router 281 | ``` 282 | 283 | 然后，在应用程序中加载路由器模块： 284 | 285 | ```javascript 286 | var birds = require('./birds') 287 | // ... 288 | app.use('/birds', birds) 289 | ``` 290 | 291 | 该应用程序现在将能够处理对`/birds`和的请求`/birds/about`，以及调用`timeLog`特定于该路线的中间件功能。 -------------------------------------------------------------------------------- /Express/day4/文档/3-EJS模板.md: -------------------------------------------------------------------------------- 1 | ### 一、简介 2 | 3 | 相比于jade模板引擎，ejs对原HTML语言就未作出结构上的改变，只不过在其交互数据方面做出了些许修改，相比于jade更加简单易用。因此其学习成本是很低的。您也可参考ejs官网：https://ejs.bootcss.com/ 4 | 5 | ### 二、ejs基本使用 6 | 7 | 这里我们使用如下配置文件： 8 | 9 | 我们啊可以通过下面的方式实现基本的ejs操作： 10 | app.js文件： 11 | 12 | ``` 13 | const express=require("express"); 14 | const ejs=require("ejs"); 15 | const fs=require("fs"); 16 | 17 | var app=express(); 18 | 19 | //引用ejs 20 | app.set('views',"public"); //设置视图的对应目录 21 | app.set("view engine","ejs"); //设置默认的模板引擎 22 | app.engine('ejs', ejs.__express); //定义模板引擎 23 | 24 | app.get("/",function(req,res){ 25 | res.render("index.ejs",{title: "express
"}); 26 | }); 27 | 28 | app.listen(8080); 29 | ``` 30 | 31 | 32 | ejs文件： 33 | 34 | ```HTML 35 | 36 | 37 | 38 | 39 |
47 |
51 |
52 |
53 | ```
54 |
55 | 这时我们会得到如下图的结果：
56 |
57 | 由此可以知道：
58 |
59 | ```
60 | <% xxx %>：里面写入的是js语法，
61 | <%= xxx %>：里面是服务端发送给ejs模板转义后的变量，输出为原html
62 | <%- xxx %>：里面也是服务端发送给ejs模板后的变量，不过他会把html输出来
63 | <%# 注释标签，不执行、不输出内容
64 | ```
65 |
66 | 同理res.render()函数也是支持回调的：
67 |
68 | ```
69 | res.render('user', { name: 'Tobi' }, function(err, html) {
70 | console.log(html);
71 | });
72 | ```
73 |
74 |
75 | 这样我们即可将看到heml的内容。另外值得说明的是ejs模块也有ejs.render()和ejs.renderFile()方法，他在这里与res.render()作用类似，如下：
76 |
77 | ```
78 | ejs.render(str, data, options);
79 |
80 | ejs.renderFile(filename, data, options, function(err, str){
81 | // str => 输出绘制后的 HTML
82 | });
83 | ```
84 |
85 | ### 三、ejs标签各种含义
86 |
87 | ```
88 | <% '脚本' 标签，用于流程控制，无输出。
89 | <%_ 删除其前面的空格符
90 | <%= 输出数据到模板（输出是转义 HTML 标签）
91 | <%- 输出非转义的数据到模板
92 | <%# 注释标签，不执行、不输出内容
93 | <%% 输出字符串 '<%'
94 | %> 一般结束标签
95 | -%> 删除紧随其后的换行符
96 | _%> 将结束标签后面的空格符删除
97 | ```
98 |
99 |
100 | 以上就为ejs基本用法，往后对数据库操作就直接把json数据从服务器返送给模板引擎就行；
101 |
102 |
--------------------------------------------------------------------------------
/Express/day4/文档/3-获取GET参数.md:
--------------------------------------------------------------------------------
1 | ### 一、关于get请求
2 |
3 | 一般在网站开发中，get都用作数据获取和查询，类似于数据库中的查询操作，当服务器解析前台资源后即传输相应内容；而查询字符串是在URL上进行的，形如：
4 |
5 | ```
6 | http://localhost:8080/login?goods1=0001&goods2=0002
7 | ```
8 |
9 |
10 |
11 | ### 二、获取前台get请求
12 |
13 | 通过req.query可以获得用户发送的get请求，之后通过node操作将相应数据返回给用户。
14 |
15 | 如果发送的是：
16 |
17 | ```
18 | http://localhost:8080/login?goods1=0001&goods2=0002
19 | ```
20 |
21 |
22 | 响应的话则通过：
23 |
24 | ```
25 | req.query
26 | ```
27 |
28 |
29 | 他会获取到全部数据，或
30 |
31 | ```
32 | req.query.goods1
33 | req.query.goods2
34 | ```
35 |
36 |
37 | 来单独或去每一个数据。总之不同的需求对应不同的业务，大家按自己的需要来获取；
38 |
39 | ### 三、实例
40 |
41 | 下面通过一个实例来对获取get参数进行一个总结：
42 |
43 | HTML:
44 |
45 | ```
46 |
47 |
48 |
49 |
50 | 获取变量：
48 | <%- title %> 49 | <%= title %> 50 |登陆
44 | 53 | 54 | 55 | 56 | ``` 57 | 58 | APP.JS 59 | 60 | ``` 61 | var express = require('express'); 62 | var path = require('path') 63 | var app = express(); 64 | var sqlQuery = require('./lcMysql') 65 | 66 | // view engine setup 67 | app.set('views', path.join(__dirname, 'views')); 68 | app.set('view engine', 'ejs'); 69 | app.use(express.static(path.join(__dirname, 'public'))); 70 | //解析post提交的数据 71 | app.use(express.urlencoded()) 72 | 73 | //搜索首页 74 | app.get('/',(req,res)=>{ 75 | res.render('index.ejs') 76 | }) 77 | 78 | //登陆页 79 | app.get('/login',(req,res)=>{ 80 | res.render('login') 81 | }) 82 | //处理登陆请求 83 | app.post('/login',async (req,res)=>{ 84 | //获取用户名和密码 85 | let username = req.body.username 86 | let password = req.body.password 87 | //查询数据库是否由此用户名和密码 88 | let sqlStr = 'select * from user where username = ? and password = ?'; 89 | let arr = [username,password]; 90 | let result = await sqlQuery(sqlStr,arr) 91 | if(result.length == 0 ){ 92 | res.send("登陆失败") 93 | }else{ 94 | res.send("登陆成功") 95 | } 96 | 97 | }) 98 | 99 | 100 | 101 | module.exports = app; 102 | 103 | ``` 104 | 105 | -------------------------------------------------------------------------------- /Express/day4/文档/5-中间件.md: -------------------------------------------------------------------------------- 1 | # 中间件 2 | 3 | 从字面意思，我们可以了解到它大概就是做中间代理操作，事实也是如此；大多数情况下，中间件就是在做接收到请求和发送响应中间的一系列操作。事实上，express是一个路由和中间件的web框架，Express 应用程序基本上是一系列中间件函数的调用。 4 | 5 | 6 | 7 | 1.浏览器发送请求 8 | 9 | 2.express接受请求 10 | 11 | 中间处理的过程 12 | 13 | 3.路由函数处理渲染（req,res） 14 | 15 | 4.res.render渲染 16 | 17 | 18 | 19 | 中间件函数可以执行以下任务： 20 | 21 | * 执行任何代码。 22 | * 对请求和响应对象进行更改。 23 | * 结束请求/响应循环。 24 | * 调用堆栈中的下一个中间件函数。 25 | 26 | 中间件也分为应用层中间件、路由中间件、内置中间件、错误处理中间件和第三方中间件。下面分别对以下进行说明： 27 | 28 | ### 1.应用层中间件 29 | 30 | 应用级中间键绑定到app对象使用app.use和app.METHOD()-需要处理http请求的方法，例如GET、PUT、POST，将之前的get或者post替换为use就行。 31 | 例如下面实例： 32 | 33 | ``` 34 | const express=require("express"); 35 | 36 | var app=express(); 37 | 38 | //匹配路由之前的操作 39 | app.use(function(req,res,next()){ 40 | console.log("访问之前"); 41 | }); 42 | 43 | app.get("/",function(req,res){ 44 | res.send("主页"); 45 | }); 46 | 47 | app.listen(8080); 48 | ``` 49 | 50 | 51 | 这时我们会发现http://localhost:8080/地址一直在加载，但命令行里显示了“访问之前”，说明程序并不会同步执行，如果使用next来是路由继续向下匹配，那么就能又得到主页数据了： 52 | 53 | ``` 54 | const express=require("express"); 55 | 56 | var app=express(); 57 | 58 | //匹配路由之前的操作 59 | app.use(function(req,res,next){ 60 | console.log("访问之前"); 61 | next(); 62 | }); 63 | 64 | app.get("/",function(req,res){ 65 | res.send("主页"); 66 | }); 67 | 68 | app.listen(8080); 69 | ``` 70 | 71 | 72 | 当然也可以简化写法： 73 | 74 | ``` 75 | const express=require("express"); 76 | 77 | var app=express(); 78 | 79 | app.use(function(req,res,next){ 80 | console.log("访问之前"); 81 | next(); 82 | },function(req,res){ 83 | res.send("主页"); 84 | }); 85 | 86 | app.listen(8080); 87 | ``` 88 | 89 | 因此，在进行路由匹配之前或再录又要继续向下执行时想做个操作，那么应用层中间件无疑是好的选择。 90 | 91 | ### 2.路由中间件 92 | 93 | 路由级中间件和应用级中间件类似，只不过他需要绑定express.Router(); 94 | 95 | 96 | 97 | ``` 98 | var router = express.Router() 99 | ``` 100 | 101 | 102 | 在匹配路由时，我们使用 router.use() 或 router.VERB() ,路由中间件结合多次callback可用于用户登录及用户状态检测。 103 | 104 | ``` 105 | const express = require("express"); 106 | var app = express(); 107 | var router=express.Router(); 108 | 109 | router.use("/",function(req,res,next){ 110 | console.log("匹配前"); 111 | next(); 112 | }); 113 | 114 | router.use("/user",function(req,res,next){ 115 | console.log("匹配地址：",req.originalUrl); 116 | next(); 117 | },function(req,res){ 118 | res.send("用户登录"); 119 | }); 120 | 121 | app.use("/",router); 122 | 123 | app.listen(8080); 124 | ``` 125 | 126 | 127 | 总之在检测用户登录和引导用户应该访问哪个页面是，路由中间件绝对好用。 128 | 129 | ### 3.错误处理中间件 130 | 131 | 顾名思义，它是指当我们匹配不到路由时所执行的操作。错误处理中间件和其他中间件基本一样，只不过其需要开发者提供4个自变量参数。 132 | 133 | ``` 134 | app.use((err, req, res, next) => { 135 | res.sendStatus(err.httpStatusCode).json(err); 136 | }); 137 | ``` 138 | 139 | 140 | 一般情况下，我们把错误处理放在最下面，这样我们即可对错误进行集中处理。 141 | 142 | ``` 143 | const express=require("express"); 144 | 145 | var app=express(); 146 | 147 | app.get("/",function(req,res,next){ 148 | const err=new Error('Not Found'); 149 | res.send("主页"); 150 | next(err); 151 | }); 152 | 153 | app.use("/user",function(err,req,res,next){ 154 | console.log("用户登录"); 155 | next(err); 156 | },function(req,res,next){ 157 | res.send("用户登录"); 158 | next(); 159 | }); 160 | 161 | app.use(function(req,res){ 162 | res.status(404).send("未找到指定页面"); 163 | }); 164 | 165 | app.listen(8080); 166 | ``` 167 | 168 | 169 | 170 | ### 4.内置中间件 171 | 172 | 从版本4.x开始，Express不再依赖Content，也就是说Express以前的内置中间件作为单独模块，express.static是Express的唯一内置中间件。 173 | 174 | ``` 175 | express.static(root, [options]); 176 | ``` 177 | 178 | 通过express.static我们可以指定要加载的静态资源。 179 | 180 | ### 5.第三方中间件 181 | 182 | 形如之前我们的body-parser，采用引入外部模块的方式来获得更多的应用操作。如后期的cookie和session。 183 | 184 | ``` 185 | var express = require('express'); 186 | var app = express(); 187 | var cookieParser = require('cookie-parser'); 188 | ``` 189 | 190 | 191 | 以上就是关于express中间件类型，在实际项目中，中间件都是必不可少的，因此熟悉使用各种中间件会加快项目的开发效率。 192 | 193 | -------------------------------------------------------------------------------- /Express/day4/文档/6-使用cookie.md: -------------------------------------------------------------------------------- 1 | ### 一、关于Cookie 2 | 3 | 在我们关闭一个登录过的网址并重新打开它后，我们的登录信息依然没有丢失；当我们浏览了商品后历史记录里出现了我们点击过的商品；当我们推回到首页后，推荐商品也为我们选出了相似物品；事实上当我们有过此类操作后，浏览器会将我们的操作信息保存到cookie上面。阿进而言之，cookie就是储存在用户本地终端上的数据。 4 | 5 | **Cookie的特点** 6 | 7 | 1. cookie保存在浏览器本地，只要不过期关闭浏览器也会存在。 8 | 2. 正常情况下cookie不加密，用户可轻松看到 9 | 3. 用户可以删除或者禁用cookie 10 | 4. cookie可以被篡改 11 | 5. cookie可用于攻击 12 | 6. cookie存储量很小，大小一般是4k 13 | 7. 发送请求自动带上登录信息 14 | 15 | ### 二、Cookie的安装及使用 16 | 17 | #### 1.安装 18 | 19 | ``` 20 | cnpm install cookie-parser --save 21 | ``` 22 | 23 | #### 2.引入 24 | 25 | ``` 26 | const cookieParser=require("cookie-parser"); 27 | ``` 28 | 29 | #### 3.设置中间件 30 | 31 | ``` 32 | app.use(cookieParser()); 33 | ``` 34 | 35 | #### 4.设置cookie 36 | 37 | ``` 38 | res.cookie("name",'zhangsan',{maxAge: 900000, httpOnly: true}); 39 | //res.cookie(名称,值,{配置信息}) 40 | ``` 41 | 42 | 关于设置cookie的参数说明： 43 | 44 | 1. domain: 域名 45 | 2. name=value：键值对，可以设置要保存的 Key/Value，注意这里的 name 不能和其他属性项的名字一样 46 | 3. Expires： 过期时间（秒），在设置的某个时间点后该 Cookie 就会失效，如 expires=Wednesday, 09-Nov-99 23:12:40 GMT。 47 | 4. maxAge： 最大失效时间（毫秒），设置在多少后失效 。 48 | 5. secure： 当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效 。 49 | 6. Path： 表示 在那个路由下可以访问到cookie。 50 | 7. httpOnly：是微软对 COOKIE 做的扩展。如果在 COOKIE 中设置了“httpOnly”属性，则通过程序（JS 脚本、applet 等）将无法读取到COOKIE 信息，防止 XSS 攻击的产生 。 51 | 8. singed：表示是否签名cookie, 设为true 会对这个 cookie 签名，这样就需要用 res.signedCookies 而不是 res.cookies 访问它。被篡改的签名 cookie 会被服务器拒绝，并且 cookie 值会重置为它的原始值。 52 | 53 | #### 5.获取cookie 54 | 55 | ``` 56 | req.cookies.name; 57 | ``` 58 | 59 | 60 | 下面是一个基础实例： 61 | 62 | ``` 63 | const express=require("express"); 64 | const cookieParser=require("cookie-parser"); 65 | 66 | var app=express(); 67 | 68 | //设置中间件 69 | app.use(cookieParser()); 70 | 71 | app.get("/",function(req,res){ 72 | res.send("首页"); 73 | }); 74 | 75 | //设置cookie 76 | app.get("/set",function(req,res){ 77 | res.cookie("userName",'张三',{maxAge: 20000, httpOnly: true}); 78 | res.send("设置cookie成功"); 79 | }); 80 | 81 | //获取cookie 82 | app.get("/get",function(req,res){ 83 | console.log(req.cookies.userName); 84 | res.send("获取cookie成功，cookie为："+ req.cookies.userName); 85 | }); 86 | 87 | app.listen(8080); 88 | ``` 89 | 90 | 91 | 当访问set路由后会设置cookie，当访问get路由后会获取到设置的cookie值。当然你也可以在其他页面继续获取当前cookie，以实现cookie共享。 92 | 93 | ### 三、多个二级域名共享cookie 94 | 95 | 只需要增加res.cookie中option对象的值，即可实现对相应路由下多个二级路由的cookie进行共享，代码如下： 96 | 97 | ``` 98 | const express=require("express"); 99 | const cookieParser=require("cookie-parser"); 100 | 101 | var app=express(); 102 | 103 | //设置中间件 104 | app.use(cookieParser()); 105 | 106 | app.get("/",function(req,res){ 107 | res.send("首页"); 108 | }); 109 | 110 | //设置cookie 111 | app.get("/set",function(req,res){ 112 | res.cookie("userName",'张三',{maxAge: 200000, httpOnly: true,domain: "ccc.com"}); 113 | res.send("设置cookie成功"); 114 | }); 115 | 116 | //获取cookie 117 | app.get("/get",function(req,res){ 118 | console.log(req.cookies.userName); 119 | res.send("获取cookie成功，cookie为："+ req.cookies.userName); 120 | }); 121 | 122 | app.listen(8080); 123 | ``` 124 | 125 | 我们可以看到 126 | 127 | 不同的二级域名也能访问到相同的cookie，只要满足ccc.com这个顶级域名就行。 -------------------------------------------------------------------------------- /Express/day4/文档/7-Cookie加密.md: -------------------------------------------------------------------------------- 1 | ### 一、关于cookie加密 2 | 3 | cookie加密是让客户端用户无法的获取cookie明文信息，是数据安全的重要部分；一般的我们可以在保存cookie时对cookie信息进行加密，或者在res.cookie中对option对象的signed属性设置设置成true即可。 4 | 5 | ### 二、使用 signed 属性进行cookie加密 6 | 7 | 如下列代码： 8 | 9 | ``` 10 | const express = require("express"); 11 | const cookieParser = require("cookie-parser"); 12 | 13 | var app = express(); 14 | app.use(cookieParser('secret')); 15 | 16 | app.get("/",function(req,res){ 17 | res.send("主页"); 18 | }); 19 | 20 | //获取cookie 21 | app.use(function(req,res,next){ 22 | console.log(req.signedCookies.name); 23 | next(); 24 | }); 25 | 26 | //设置cookie 27 | app.use(function(req,res,next){ 28 | console.log(res.cookie("name","zhangsan",{httpOnly: true,maxAge: 200000,signed: true})); 29 | res.end("cookie为："+req.signedCookies.name); 30 | }); 31 | 32 | app.listen(8080); 33 | ``` 34 | 35 | **签名原理** 36 | Express用于对cookie签名，而cookie-parser则是实现对签名的解析。实质是把cookie设置的值和cookieParser(‘secret’);中的secret进行hmac加密，之后和cookie值加“.”的方式拼接起来。 37 | 当option中signed设置为true后，底层会将cookie的值与“secret”进行hmac加密； 38 | 39 | **如何解析** 40 | cookie-parser中间件在解析签名cookie时做了两件事： 41 | 42 | 1. 将签名cookie对应的原始值提取出来 43 | 2. 验证签名cookie是否合法 44 | 45 | ### 3、直接对cookie值加密 46 | 47 | node为我们提供了一个核心安全模块“crypto”，它提供了很多安全相关的功能，如摘要运算、加密、电子签名等。 48 | 这是，我们便可很轻易的封装一个加密模块： 49 | 50 | ``` 51 | const crypto=require('crypto'); 52 | 53 | module.exports={ 54 | //MD5封装 55 | MD5_SUFFIX:'s5w84&&d4d473885s2025s5*4s2', 56 | md5:function(str){ 57 | var obj=crypto.createHash('md5'); 58 | obj.update(str); 59 | return obj.digest('hex'); 60 | } 61 | } 62 | ``` 63 | 64 | 65 | 之后只需要进行相应导入即可 66 | 67 | ``` 68 | const common=require('./MD5'); 69 | 70 | var str='123456'; 71 | var str=common.md5(str+'s5w84&&d4d473885s2025s5*4s2'); 72 | console.log(str); 73 | ``` 74 | 75 | 76 | 设置cookie代码如下： 77 | 78 | ``` 79 | const express=require("express"); 80 | const cookieParser=require("cookie-parser"); 81 | var cry = require('./md5'); 82 | 83 | var app=express(); 84 | 85 | var str='hello-123'; 86 | var str=cry.md5(str+'s5w84&&d4d473885s2025s5*4s2'); 87 | 88 | //设置中间件 89 | app.use(cookieParser()); 90 | 91 | //获取加密cookie 92 | app.use(function(req,res,next){ 93 | console.log(req.cookies.userName); 94 | next(); 95 | }); 96 | 97 | //设置并加密cookie 98 | app.use(function(req,res,next){ 99 | res.cookie("userName", str, {maxAge: 5*60*1000, httpOnly: true}); 100 | res.end("set ok"); 101 | }); 102 | 103 | app.listen(8080); 104 | ``` 105 | 106 | 如果是在判断登录时，只需将用户输入的账号进行同样加密操作在进行比较即可知道账户是否正确。 107 | crypto所涉及的加密方式有很多，推荐大家都写模块引用，这样更方便后期的维护。 108 | 109 | -------------------------------------------------------------------------------- /Express/day4/文档/8-session应用.md: -------------------------------------------------------------------------------- 1 | ### 一、关于session 2 | 3 | session是另一种记录客户状态的机制，与cookie保存在客户端浏览器不同，session保存在服务器当中； 4 | 当客户端访问服务器时，服务器会生成一个session对象，对象中保存的是key:value值，同时服务器会将key传回给客户端的cookie当中；当用户第二次访问服务器时，就会把cookie当中的key传回到服务器中，最后服务器会吧value值返回给客户端。 5 | 因此上面的key则是全局唯一的标识，客户端和服务端依靠这个全局唯一的标识来访问会话信息数据。 6 | 7 | ### 二、设置session 8 | 9 | 我们使用express-session模块来设置session 10 | 11 | ##### 1.安装express-session 12 | 13 | ``` 14 | cnpm install express-session --save 15 | ``` 16 | 17 | ##### 2.引入express-session模块 18 | 19 | ``` 20 | const session=require("express-session"); 21 | ``` 22 | 23 | ##### 3.设置session 24 | 25 | ``` 26 | session(options); 27 | ``` 28 | 29 | 30 | 如下列代码： 31 | 32 | ``` 33 | const express=require("express"); 34 | const session=require("express-session"); 35 | 36 | var app=express(); 37 | 38 | //配置中间件 39 | app.use(session({ 40 | secret: "keyboard cat", 41 | resave: false, 42 | saveUninitialized: true, 43 | cookie: ('name', 'value',{maxAge: 5*60*1000,secure: false}) 44 | })); 45 | 46 | app.use('/login',function(req,res){ 47 | //设置session 48 | req.session.userinfo='张三'; 49 | res.send("登陆成功！"); 50 | }); 51 | 52 | app.use('/',function(req,res){ 53 | //获取session 54 | if(req.session.userinfo){ 55 | res.send("hello "+req.session.userinfo+"，welcome"); 56 | }else{ 57 | res.send("未登陆"); 58 | } 59 | }); 60 | 61 | app.listen(8080); 62 | ``` 63 | 64 | 在session(option)中对session进行设置 65 | 66 | ### 三、session的常用方法 67 | 68 | ``` 69 | //设置session 70 | req.session.username="张三" 71 | 72 | //获取session 73 | req.session.username 74 | 75 | //重新设置cookie的过期时间 76 | req.session.cookie.maxAge=1000; 77 | 78 | //销毁session 79 | req.session.destroy(function(err){ 80 | 81 | }) 82 | ``` 83 | 84 | 85 | 以下演示通过销毁session的方式来退出登录 86 | 87 | ``` 88 | const express=require("express"); 89 | const session=require("express-session"); 90 | 91 | var app=express(); 92 | 93 | //配置中间件 94 | app.use(session({ 95 | secret: "keyboard cat", 96 | resave: false, 97 | saveUninitialized: true, 98 | cookie: ('name', 'value',{ maxAge: 5*60*1000, 99 | secure: false, 100 | name: "seName", 101 | resave: false}) 102 | })); 103 | 104 | app.use('/login',function(req,res){ 105 | //设置session 106 | req.session.userinfo='张三'; 107 | res.send("登陆成功！"); 108 | }); 109 | 110 | app.use('/loginOut',function(req,res){ 111 | //注销session 112 | req.session.destroy(function(err){ 113 | res.send("退出登录！"+err); 114 | }); 115 | }); 116 | 117 | app.use('/',function(req,res){ 118 | //获取session 119 | if(req.session.userinfo){ 120 | res.send("hello "+req.session.userinfo+"，welcome to index"); 121 | }else{ 122 | res.send("未登陆"); 123 | } 124 | }); 125 | 126 | app.listen(8080); 127 | ``` 128 | 129 | 当我们进入到主页时，未显示任何信息，进入login路由后，自动设置session，这是回到主页则显示session信息，之后进入loginOut路由已注销session信息，再回到首页显示为登陆。 130 | 131 | -------------------------------------------------------------------------------- /Express/day4/文档/sobooks登陆功能.md: -------------------------------------------------------------------------------- 1 | # sobooks登陆功能 2 | 3 | ### 1-引入session和cookie相关模块 4 | 5 | ``` 6 | var cookieParser = require('cookie-parser'); 7 | //引入session模块 8 | let session = require('express-session'); 9 | ``` 10 | 11 | ### 2-引入session 12 | 13 | ``` 14 | app.use(session({ 15 | secret: "xzsagjasoigjasoi", 16 | resave:true,//强制保存session 17 | cookie:{ 18 | maxAge:7*24*60*60*1000,//设置session的有效期为1周 19 | }, 20 | saveUninitialized:true//是否保存初始化的session 21 | })) 22 | ``` 23 | 24 | ### 3-引入cookie中间件 25 | 26 | ``` 27 | app.use(cookieParser('secret')); 28 | ``` 29 | 30 | ### 4-写判断是否登陆的中间件 31 | 32 | ``` 33 | function isLoginMid(req,res,next){ 34 | if(req.session.username==undefined){ 35 | res.render('info',{ 36 | title:"未登录", 37 | content:"尚未登陆，请进入登陆页面登陆", 38 | href:"/login", 39 | hrefTxt:"登录页" 40 | }) 41 | }else{ 42 | //一登录进入正常页面 43 | next() 44 | } 45 | } 46 | ``` 47 | 48 | ### 5-引入一个跳转的模板信息页面 49 | 50 | 可以显示登陆成功或者失败的信息内容，并且可以在一定时间内进行跳转。 51 | 52 | ```HTML 53 | 54 | 55 | 56 | 57 | 58 | 59 |<%-title%>
63 |<%-content%>
64 |5秒后跳转至：<%-hrefTxt%>
65 | 76 | 77 | 78 | ``` 79 | 80 | ### 6-登陆页面 81 | 82 | ```javascript 83 | 93 | ``` 94 | 95 | ### 7-处理POST方式提交的请求 96 | 97 | 1-获取表单提交的数据 98 | 99 | 2-查询表单提交的账号密码是否正确 100 | 101 | 3-如果正确，设置session,req.session.username = user.username; 102 | 103 | 4-显示登陆是否成功信息 104 | 105 | ``` 106 | router.post('/',async function(req,res){ 107 | console.log(req.body) 108 | //根据提交的邮箱和密码判断是否是正确的账号密码 109 | let strSql = "select * from user where mail=? and password = ?" 110 | let arr = [req.body.mail,req.body.password] 111 | let result = await sqlQuery(strSql,arr) 112 | if(result.length!=0){ 113 | //登陆成功 114 | user = result[0]; 115 | req.session.username = user.username; 116 | res.render('info',{ 117 | title:"登陆成功", 118 | content:"账号密码正确，即将进入首页", 119 | href:"/", 120 | hrefTxt:"首页" 121 | }) 122 | }else{ 123 | res.render('info',{ 124 | title:"登陆失败", 125 | content:"账号或密码不正确，即将进入登录页", 126 | href:"/login", 127 | hrefTxt:"登录页" 128 | }) 129 | } 130 | }) 131 | ``` 132 | 133 | -------------------------------------------------------------------------------- /Express/day5/文档/11-文件上传.md: -------------------------------------------------------------------------------- 1 | ### 一、multer中间件 2 | 3 | 再上传文件时，我们通常会使用到他。Multer用于处理multipart/form-data 类型的表单数据。首先我们先安装它： 4 | 5 | ``` 6 | cnpm install multer --save 7 | ``` 8 | 9 | ### 二、使用 10 | 11 | 首先在form表单中我们需要设置enctype为：multipart/form-data表单类型。同时我们也需要用到fs模块对文件重命名。下面是单文件上传实例： 12 | 13 | ``` 14 | 15 | 16 | 17 | 18 |Node在一线企业中的运用
作为中间层
我们通常说前端和后端，前端负责用户界面，而后端负责提供数据和业务接口。现在我们在两者间加入一层，前端并不是直接去请求后端业务接口，而是请求到中间层。再由中间层去请求业务接口,看一下示意图：
整个流程可以描述为：客户端直接请求到中间层的Node服务，Node服务分析请求，看需要哪个页面，再去请求对应数据，拿到数据后和模版结合成用户看到页面，再给到客户端。
那么有的人可能会觉得，这种模式不是更麻烦了吗？其实不然，我们来看看 中间层的优点 ：
- 减轻客户端内存，项目用户体验好。不会像mvvm模式的项目把页面渲染和数据请求都压在客户端，而是在服务端完成。
- SEO性好，不像mvvm模式页面由js生成，而是在服务器渲染好html 字符，有利于网页被搜索到。
- 保持了前后端分离的优点和目的，即解放后端，后端可以继续以接口的形式写业务代码。
- 前端可以操控的范围增多，甚至可以做服务器，数据库层面的优化，比如中间层中常常用nginx，redis来优化项目，应对高并发。
中间层模式是一种开发模式上的进步，为什么这么好的模式我从来没有听说过呢？因为这种模式成本过高，如果没有一定量级的项目没必要去采用。
做项目构建工具
这里说的项目构建工具，我相信大家都用过，我们的webpack，vue-cli都是输入项目构建工具。那么大家觉得这一类工具神奇好用方便的同时，有没有想过这些工具是拿什么语言写的？其实它们并不难，这些工具都是用Node来写的。
很多公司都会开发自己公司的项目构建工具，帮助公司项目做的更标准更方便，一个好的项目构建工具，会极大的加快整个公司的项目开发效率。
这一类的项目构建工具一般都要很多的文件操作，Node对于i/o流的操作，在目前的主流后端语言中数一数二。所以越来越多的公司选择用Node来做项目构建工具。
做一些小型网站后端
用Node做后端，可能是大多数人认为的Node作用。其实真正在企业之中，很少会让你去用Node去做后端。 所以一般来说都是做一些小型或者个人站的后端。
- Node.js是什么？
Node.js 诞生于 2009 年，由 Joyent 的员工 Ryan Dahl 开发而成, 目前官网最新版本已经更新到 12.0.0版本，最新稳定的是10.15.3。Node.js 不是一门语言也不是框架，它只是基于 Google V8 引擎的 JavaScript 运行时环境，同时结合 Libuv 扩展了 JavaScript 功能，使之支持 io、fs 等只有语言才有的特性，使得 JavaScript 能够同时具有 DOM 操作(浏览器)和 I/O、文件读写、操作数据库(服务器端)等能力，是目前最简单的全栈式语言。
这里我们可以简单理解Node.js是一个内置有chrome V8引擎的JavaScript运行环境，他可以使原本在浏览器中运行的JavaScript有能力跑后端，从而操作我们数据库，进行文件读写等。
目前市面上高密集的I/O模型，比如 Web 开发，微服务，前端构建等都有做Node.js的身影。不少大型网站都是使用 Node.js 作为后台开发语言的，比如 淘宝 双十一、去哪儿网 的 PC 端核心业务等。另外我们一些前端工具譬如VSCode,webpack等也是有Node.js开发。
Node.js的包管理工具，npm已经成为世界开源包管理中最大的生态，功能强大，目前单月使用者接近1000万。
- Node.js特点（记住三句话）
- 事件驱动
- 非阻塞IO模型（异步）
- 轻量和高效
我们在开发的过程中，每次改完代码之后都必须重启服务器，显然这样的操作效率是比较低，这里给大家推荐个工具，nodemon,nodemon可以帮我们实时监听项目中代码的变化，并且自动重启服务，而且配置简单。
- 安装：
npm install -g nodemon - 使用
nodemon运行项目，取代之前的node app.js。
nodemon [your app.js]
项目运行之后，nodemon会自动监听代码的改动，并且重新启动服务，大大增加我们开发效率。
nodemon常见配置
- 在命令行指定应用的端口号：
nodemon ./server.js localhost 8080 - 查看帮助，帮助里面有很多选项都是一目了然：
nodemon -h 或者 nodemon --help - 运行 debug 模式：
nodemon --debug ./server.js 80 - 手动重启项目：
Nodemon命令运行的终端 窗口中输入rs两个字符，然后再按下回车键，就能手动重启Nodemon了。
npm英文全称：node package manager，npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。 我们平时开发项目都是需要使用npm下载依赖，常见的npm命令总结如下：
npm -v：查看npm版本。npm init：初始化后会出现一个package.json配置文件。可以在后面加上-y，快速跳过问答式界面。npm install：会根据项目中的package.json文件自动下载项目所需的全部依赖。npm install 包名 --save-dev(npm install 包名 -D)：安装的包只用于开发环境，不用于生产环境，会出现在package.json文件中的devDependencies属性中。npm install 包名 --save(npm install 包名 -S)：安装的包需要发布到生产环境的，会出现在package.json文件中的dependencies属性中。npm list：查看当前目录下已安装的node包。npm list -g：查看全局已经安装过的node包。npm --help：查看npm帮助命令。npm update 包名：更新指定包。npm uninstall 包名：卸载指定包。npm config list：查看配置信息。npm 指定命令 --help：查看指定命令的帮助。npm info 指定包名：查看远程npm上指定包的所有版本信息。npm config set registry https://registry.npm.taobao.org： 修改包下载源，此例修改为了淘宝镜像。npm root：查看当前包的安装路径。npm root -g：查看全局的包的安装路径。npm ls 包名：查看本地安装的指定包及版本信息，没有显示empty。npm ls 包名 -g：查看全局安装的指定包及版本信息，没有显示empty。
姓名：{{item}}
9 |这是首页
")
11 | })
12 | ```
13 |
14 | ### 2. 获取正则路径创建正则对象
15 |
16 | ```
17 | let reg = new RegExp(regStr,'igs');
18 | ```
19 |
20 | ### 3.匹配路径，并调用相对应的函数
21 |
22 | ```
23 | if(reg.test(req.url)){
24 | this.reqEvent[key](req,res)
25 | resState = true
26 | break;
27 | }
28 | ```
29 |
30 | ### 4.判断是否正则路径响应过，如果响应过，将不再响应，不能重复响应，会报错
31 |
32 | ```javascript
33 | if(!resState){
34 | if(pathObj.dir==this.staticDir){
35 | res.setHeader("content-type",this.getContentType(pathObj.ext))
36 | let rs = fs.createReadStream('./static/'+pathObj.base)
37 | rs.pipe(res)
38 | }else{
39 | res.setHeader("content-type","text/html;charset=utf-8")
40 | res.end("404!页面找不到
") 41 | } 42 | } 43 | ``` 44 | 45 | -------------------------------------------------------------------------------- /Node/day7/4-梳理框架流程.md: -------------------------------------------------------------------------------- 1 | # 4-梳理框架流程 2 | 3 | ### 1浏览器发送请求 4 | 5 | 1. 用户输入网址地址 6 | 7 | ``` 8 | http://127.0.0.1/ 9 | ``` 10 | 11 | 2. 浏览器根据请求转变成HTTP的请求包 12 | 13 | ``` 14 | GET / HTTP/1.1 15 | Host: 127.0.0.1 16 | Connection: keep-alive 17 | Pragma: no-cache 18 | Cache-Control: no-cache 19 | Upgrade-Insecure-Requests: 1 20 | User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36 21 | Sec-Fetch-Mode: navigate 22 | Sec-Fetch-User: ?1 23 | Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3 24 | Sec-Fetch-Site: none 25 | Accept-Encoding: gzip, deflate, br 26 | Accept-Language: zh-CN,zh;q=0.9 27 | ``` 28 | 29 | ### 2服务器接受到请求 30 | 31 | 1. http模块里中实例化的server对象，server对象监听每一次浏览器发送过来的请求，每次的请求都会触发`request`事件 32 | 33 | ``` 34 | this.server.on('request',(req,res)=>{}) 35 | ``` 36 | 37 | 2. 将HTTP的请求包转化成req的请求对象，并且传入到请求事件触发的函数中。 38 | 3. 会创建生成1个res响应对象，这个对象可以帮助我们快速的实现HTTP的响应 39 | 40 | ### 3解析请求路径，调用不同的页面渲染函数 41 | 42 | 1. 正则匹配方式进行对路径的匹配 43 | 2. 以匹配的正则字符串作为KEY，找到需要调用执行的渲染函数 44 | 45 | ```javascript 46 | //循环匹配正则路径 47 | for(let key in this.reqEvent){ 48 | 49 | let regStr = key 50 | let reg = new RegExp(regStr,'igs'); 51 | console.log(regStr,reg) 52 | if(reg.test(req.url)){ 53 | this.reqEvent[key](req,res) 54 | resState = true 55 | break; 56 | } 57 | } 58 | ``` 59 | 60 | 3. 调用页面的执行函数 61 | 62 | ``` 63 | app.on('/movies/[01]',(req,res)=>{})//这里的箭头函数即为真正匹配到的页面时执行的函数 64 | ``` 65 | 66 | 4. 调用模板的渲染函数 67 | 68 | ``` 69 | res.render(movies[index],'./template/index0.html') 70 | ``` 71 | 72 | 5. 执行渲染函数 73 | 74 | ```javascript 75 | function render(options,path){ 76 | fs.readFile(path,{encoding:"utf-8",flag:"r"},(err,data)=>{ 77 | if(err){ 78 | console.log(err) 79 | }else{ 80 | //数组变量的替换 81 | data = replaceArr(data,options) 82 | //单个变量的替换 83 | data = replaceVar(data,options) 84 | //最终输出渲染出来的HTML 85 | this.end(data) 86 | } 87 | }) 88 | } 89 | ``` 90 | 91 | 6. 数组变量的替换 92 | 93 | ```javascript 94 | function replaceArr(data,options){ 95 | //匹配循环的变量，并且替换循环的内容 96 | let reg = /\{\%for \{(.*?)\} \%\}(.*?)\{\%endfor\%\}/igs 97 | while(result = reg.exec(data)){ 98 | let strKey = result[1].trim();//提取变量时，去掉左右两边的空格 99 | //通过KEY值获取数组内容 100 | let strValueArr = options[strKey] 101 | let listStr = "" 102 | strValueArr.forEach((item,i)=>{ 103 | //替换每一项内容里的变量 104 | listStr = listStr + replaceVar(result[2],{"item":item}) 105 | }) 106 | data = data.replace(result[0],listStr) 107 | } 108 | return data; 109 | } 110 | ``` 111 | 112 | 7. 单个变量的替换 113 | 114 | ```javascript 115 | function replaceVar(data,options){ 116 | let reg = /\{\{(.*?)\}\}/igs 117 | let result; 118 | console.log(options) 119 | while(result = reg.exec(data)){ 120 | //去除2边的空白 121 | let strKey = result[1].trim() 122 | 123 | console.log(strKey)// item,item.abc 124 | let strValue = eval('options.'+strKey);//执行字符串作为JS表达式，并将计算出来的结果返回 125 | data = data.replace(result[0],strValue) 126 | } 127 | return data 128 | } 129 | ``` 130 | 131 | 132 | 133 | ### 4如果是请求静态文件，那么就按照静态文件的形式输出 134 | 135 | 1. 首先判断是否响应过，如果没有响应过，可以判断是否为静态文件，如果是静态文件就正常的输出 136 | 2. 否则，就输出404 137 | 138 | ```javascript 139 | if(!resState){ 140 | if(pathObj.dir==this.staticDir){ 141 | res.setHeader("content-type",this.getContentType(pathObj.ext)) 142 | let rs = fs.createReadStream('./static/'+pathObj.base) 143 | rs.pipe(res) 144 | }else{ 145 | res.setHeader("content-type","text/html;charset=utf-8") 146 | res.end("404!页面找不到
") 147 | } 148 | } 149 | ``` 150 | 151 | -------------------------------------------------------------------------------- /Node/day8/文档/1node总结.md: -------------------------------------------------------------------------------- 1 | Node：一门后端语言（服务器端的程序语言），能够连接数据库存取数据，能够接受和处理网络请求（服务器的响应，发送请求去获取数据），单线程事件驱动，异步执行，不等待，提高IO（input和ouput）的处理速度和效率。 2 | 3 | 服务器：本质上是一台PC主机（linux系统，windows系统），部署了后端语言的执行环境，并且能够长时间提供网络服务。 4 | 5 | ### 事件驱动 6 | 7 | node本身提供了事件对象，帮助我们快速订阅者模式，或者观察者模式，或者事件模式。 8 | 9 | ``` 10 | //事件的订阅 11 | event.on(‘林俊杰演唱会’，()=>{订阅门票}) 12 | //事件的触发 13 | event.emit(‘林俊杰演唱会’) 14 | ``` 15 | 16 | ### 读写事件 17 | 18 | ``` 19 | fs.readfile('path',读取配置,(err,data)=>{}) 20 | fs.writeFile('path',写入数据，写入配置，()=>{}) 21 | ``` 22 | 23 | ### 读写的promise封装 24 | 25 | ```javascript 26 | let fs = require('fs') 27 | function fsRead(path){ 28 | return new Promise(function(resolve,reject){ 29 | fs.readFile(path,{flag:'r',encoding:"utf-8"},function(err,data){ 30 | if(err){ 31 | //console.log(err) 32 | //失败执行的内容 33 | reject(err) 34 | 35 | }else{ 36 | //console.log(data) 37 | //成功执行的内容 38 | resolve(data) 39 | } 40 | //console.log(456) 41 | }) 42 | }) 43 | } 44 | 45 | 46 | function fsWrite(path,content){ 47 | return new Promise(function(resolve,reject){ 48 | fs.writeFile(path,content,{flag:"a",encoding:"utf-8"},function(err){ 49 | if(err){ 50 | //console.log("写入内容出错") 51 | reject(err) 52 | }else{ 53 | resolve(err) 54 | //console.log("写入内容成功") 55 | } 56 | }) 57 | }) 58 | } 59 | 60 | function fsDir(path){ 61 | return new Promise(function(resolve,reject){ 62 | fs.mkdir(path,function(err){ 63 | if(err){ 64 | reject(err) 65 | }else{ 66 | resolve("成功创建目录") 67 | } 68 | }) 69 | }) 70 | } 71 | 72 | module.exports = {fsRead,fsWrite,fsDir} 73 | ``` 74 | 75 | #### 使用方式 76 | 77 | ``` 78 | (async function(){ 79 | let data = await fsRead('path') 80 | })() 81 | ``` 82 | 83 | ### 网络请求数据 84 | 85 | request,axios:效率比较高，单局限性比较大 86 | 87 | puppeteer:效率低，局限性比较小 88 | 89 | 重点掌握的是：页面的分析，数据存放的位置，以及响应内容。 90 | 91 | ### 网络响应数据 92 | 93 | http.createServer：就可以创建1个服务器去监听某个端口，并且通过请求事件来处理每个发送过来的请求。 94 | 95 | server.on('request',(req,res)=>{ 96 | 97 | req:请求数据都会放在请求对象里 98 | 99 | res：能够做出响应对象 100 | 101 | }) 102 | 103 | ### 路由 104 | 105 | 根据不同的路径去响应不同的内容 106 | 107 | ```javascript 108 | //循环匹配正则路径 109 | for(let key in this.reqEvent){ 110 | res.setHeader("content-type","text/html;charset=utf-8") 111 | let regStr = key 112 | let reg = new RegExp(regStr,'igs'); 113 | //console.log(regStr,reg) 114 | if(reg.test(req.url)){ 115 | this.reqEvent[key](req,res) 116 | resState = true 117 | break; 118 | } 119 | } 120 | ``` 121 | 122 | ### 模板 123 | 124 | 会有个固定样式和结构的HTML模板，根据请求的数据不同，显示页面内容。例如新闻网站 125 | 126 | ```javascript 127 | function render(options,path){ 128 | fs.readFile(path,{encoding:"utf-8",flag:"r"},(err,data)=>{ 129 | if(err){ 130 | console.log(err) 131 | }else{ 132 | try { 133 | data = replaceArr(data,options) 134 | data = replaceVar(data,options) 135 | } catch (error) { 136 | console.log(error) 137 | } 138 | 139 | this.end(data) 140 | } 141 | }) 142 | } 143 | ``` 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /Node/day8/文档/2npm上传包.md: -------------------------------------------------------------------------------- 1 | # 2. NPM上传包 2 | 3 | ### 1. 创建文件夹 4 | 5 | ### 2. npm包的初始化 6 | 7 | ``` 8 | npm init 9 | ``` 10 | 11 | ### 3. npm包信息的设置 12 | 13 | ```json 14 | { 15 | "name": "lcfs", 16 | "version": "0.1.0", 17 | "description": "将原生的fs模块进行promise封装，可以快速的使用async_await模式", 18 | "main": "lcfs.js", 19 | "scripts": { 20 | "test": "echo \"Error: no test specified\" && exit 1" 21 | }, 22 | "keywords": [ 23 | "fs", 24 | "promise封装" 25 | ], 26 | "author": "陈鹏", 27 | "license": "ISC" 28 | } 29 | ``` 30 | 31 | ### 4. 注册NPM官网账号 32 | 33 | ### 5. NPM官网账号需要邮箱验证 34 | 35 | ### 6. 本机登陆NPM 36 | 37 | ``` 38 | npm login 39 | ``` 40 | 41 | ### 7. 发布NPM包 42 | 43 | ``` 44 | npm publish 45 | ``` 46 | 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # -front_end_notebook 2 | -------------------------------------------------------------------------------- /mysql/day1/Node连接MySQL.md: -------------------------------------------------------------------------------- 1 | # Node.js 连接 MySQL 2 | 3 | 介绍如何使用 Node.js 来连接 MySQL，并对数据库进行操作。 4 | 5 | ### 安装驱动 6 | 7 | 本教程使用了[淘宝定制的 cnpm 命令](https://www.runoob.com/nodejs/nodejs-npm.html#taobaonpm)进行安装： 8 | 9 | ``` 10 | $ cnpm install mysql 11 | ``` 12 | 13 | ### 连接数据库 14 | 15 | 在以下实例中根据你的实际配置修改数据库用户名、及密码及数据库名： 16 | 17 | ## test.js 文件代码： 18 | 19 | ```javascript 20 | var mysql = require('mysql'); 21 | var connection = mysql.createConnection({ 22 | host : 'localhost', 23 | user : 'root', 24 | password : '123456', 25 | database : 'test' 26 | }); 27 | 28 | connection.connect(); 29 | 30 | connection.query('SELECT 1 + 1 AS solution', function (error, results, fields) { 31 | if (error) throw error; 32 | console.log('The solution is: ', results[0].solution); 33 | }); 34 | ``` 35 | 36 | 执行以下命令输出结果为： 37 | 38 | $ node test.js 39 | The solution is: 2 40 | 41 | 42 | 43 | ## 数据库操作( CURD ) 44 | 45 | 在进行数据库操作前，你需要将本站提供的 Websites 表 SQL 文件[websites.sql](https://static.runoob.com/download/websites.sql) 导入到你的 MySQL 数据库中。 46 | 47 | 本教程测试的 MySQL 用户名为 root，密码为 123456，数据库为 test，你需要根据自己配置情况修改。 48 | 49 | ### 查询数据 50 | 51 | 将上面我们提供的 SQL 文件导入数据库后，执行以下代码即可查询出数据： 52 | 53 | ## 查询数据 54 | 55 | ```javascript 56 | var mysql = require('mysql'); 57 | 58 | var connection = mysql.createConnection({ 59 | host : 'localhost', 60 | user : 'root', 61 | password : '123456', 62 | port: '3306', 63 | database: 'test' 64 | }); 65 | 66 | connection.connect(); 67 | 68 | var sql = 'SELECT * FROM websites'; 69 | //查 70 | connection.query(sql,function (err, result) { 71 | if(err){ 72 | console.log('[SELECT ERROR] - ',err.message); 73 | return; 74 | } 75 | 76 | console.log('------SELECT------'); 77 | console.log(result); 78 | console.log('------------------'); 79 | }); 80 | 81 | connection.end(); 82 | ``` 83 | 84 | 执行以下命令输出就结果为： 85 | 86 | ``` 87 | $ node test.js 88 | --------------------------SELECT---------------------------- 89 | [ RowDataPacket { 90 | id: 1, 91 | name: 'Google', 92 | url: 'https://www.google.cm/', 93 | alexa: 1, 94 | country: 'USA' }, 95 | RowDataPacket { 96 | id: 2, 97 | name: '淘宝', 98 | url: 'https://www.taobao.com/', 99 | alexa: 13, 100 | country: 'CN' } 101 | ] 102 | ------------------------------------------------------------ 103 | ``` 104 | 105 | ### 插入数据 106 | 107 | 我们可以向数据表 websties 插入数据： 108 | 109 | ## 插入数据 110 | 111 | ```javascript 112 | var mysql = require('mysql'); 113 | 114 | var connection = mysql.createConnection({ 115 | host : 'localhost', 116 | user : 'root', 117 | password : '123456', 118 | port: '3306', 119 | database: 'test' 120 | }); 121 | 122 | connection.connect(); 123 | 124 | var addSql = 'INSERT INTO websites(Id,name,url,alexa,country) VALUES(0,?,?,?,?)'; 125 | var addSqlParams = ['工具', 'https://c.sxb.com','23453', 'CN']; 126 | //增 127 | connection.query(addSql,addSqlParams,function (err, result) { 128 | if(err){ 129 | console.log('[INSERT ERROR] - ',err.message); 130 | return; 131 | } 132 | 133 | console.log('------INSERT------'); 134 | //console.log('INSERT ID:',result.insertId); 135 | console.log('INSERT ID:',result); 136 | console.log('--------------\n\n'); 137 | }); 138 | 139 | connection.end(); 140 | ``` 141 | 142 | 执行以下命令输出就结果为： 143 | 144 | ``` 145 | $ node test.js 146 | --------------------------INSERT---------------------------- 147 | INSERT ID: OkPacket { 148 | fieldCount: 0, 149 | affectedRows: 1, 150 | insertId: 6, 151 | serverStatus: 2, 152 | warningCount: 0, 153 | message: '', 154 | protocol41: true, 155 | changedRows: 0 } 156 | ----------------------------------------------------------------- 157 | ``` 158 | 159 | 执行成功后，查看数据表，即可以看到添加的数据 160 | 161 | ### 更新数据 162 | 163 | 我们也可以对数据库的数据进行修改： 164 | 165 | ## 更新数据 166 | 167 | ```javascript 168 | var mysql = require('mysql'); 169 | 170 | var connection = mysql.createConnection({ 171 | host : 'localhost', 172 | user : 'root', 173 | password : '123456', 174 | port: '3306', 175 | database: 'test' 176 | }); 177 | 178 | connection.connect(); 179 | 180 | var modSql = 'UPDATE websites SET name = ?,url = ? WHERE Id = ?'; 181 | var modSqlParams = ['移动站', 'https://m.sxt.com',6]; 182 | //改 183 | connection.query(modSql,modSqlParams,function (err, result) { 184 | if(err){ 185 | console.log('[UPDATE ERROR] - ',err.message); 186 | return; 187 | } 188 | console.log('--------UPDATE--------'); 189 | console.log('UPDATE affectedRows',result.affectedRows); 190 | console.log('----------\n\n'); 191 | }); 192 | 193 | connection.end(); 194 | ``` 195 | 196 | 执行以下命令输出就结果为： 197 | 198 | ``` 199 | --------------------------UPDATE---------------------------- 200 | UPDATE affectedRows 1 201 | ----------------------------------------------------------------- 202 | ``` 203 | 204 | 执行成功后，查看数据表 205 | 206 | ### 删除数据 207 | 208 | 我们可以使用以下代码来删除 id 为 6 的数据: 209 | 210 | ## 删除数据 211 | 212 | ```javascript 213 | var mysql = require('mysql'); 214 | 215 | var connection = mysql.createConnection({ 216 | host : 'localhost', 217 | user : 'root', 218 | password : '123456', 219 | port: '3306', 220 | database: 'test' 221 | }); 222 | 223 | connection.connect(); 224 | 225 | var delSql = 'DELETE FROM websites where id=6'; 226 | //删 227 | connection.query(delSql,function (err, result) { 228 | if(err){ 229 | console.log('[DELETE ERROR] - ',err.message); 230 | return; 231 | } 232 | 233 | console.log('-----DELETE-------'); 234 | console.log('DELETE affectedRows',result.affectedRows); 235 | console.log('----------------\n\n'); 236 | }); 237 | 238 | connection.end(); 239 | ``` 240 | 241 | 执行以下命令输出就结果为： 242 | 243 | ``` 244 | --------------------------DELETE---------------------------- 245 | DELETE affectedRows 1 246 | ----------------------------------------------------------------- 247 | ``` 248 | 249 | 执行成功后，查看数据表 -------------------------------------------------------------------------------- /mysql/day1/数据库.md: -------------------------------------------------------------------------------- 1 | 数据库：专门用于存放数据地方。sqlServer,mysql,sqlite 2 | 3 | 数据库分类：关系型数据库（mysql)，非关系型数据库（nosql,mongodb）,图谱数据库（大数据建立知识图谱） 4 | 5 | 6 | 7 | ### 1. Mysql下载 8 | 9 | ``` 10 | https://dev.mysql.com/downloads/ 11 | ``` 12 | 13 | ### 2. 选择 [MySQL Community Server](https://dev.mysql.com/downloads/mysql/) 14 | 15 | ### 3. 下载页面 16 | 17 | ``` 18 | https://dev.mysql.com/downloads/windows/installer/8.0.html 19 | ``` 20 | 21 | 22 | 23 | ### 4. 安装MySQL 24 | 25 | 注意： 26 | 27 | 1. 仅安装server-only 28 | 2. 选择mysql.5x密码验证 29 | 30 | ### 5. 测试是否安装成功 31 | 32 | 1. 打开mysql8.0 cline client 33 | 2. 输入账号密码能够进入数据库 34 | 35 | ### 6. 安装navicat 36 | 37 | ### 7. 破解navicat 38 | 39 | 安装好后，点击打开PatchNavicat.exe 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /mysql/day3/文档/3-子查询.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |子查询
- 查询支持嵌套使用
- 查询各学生的语文、数学、英语的成绩
什么是子查询
当一个查询是另一个查询的条件时,这个查询称之为子查询(内层查询)
什么时候用？
当查询需求比较复杂，一次性查询无法得到结果，需要多次查询时，
例如：给出一个部门名称，需要获得该部门所有的员工信息
分析：
1.需要先确定部门的id
2.然后才能通过id确定员工
解决问题的方式是把一个复杂的问题拆分为若干个简单的问题
2. 如何使用？
首先明确子查询就是一个普通的查询,当一个查询需要作为子查询使用时,用括号包裹即可
3. 需要注意
in中的子查询只能包含一个列
例如：查询财务部有哪些人
正确的写法：select name from emp where dept_id in (select id from dept where name = "财务");
错误的写法：select name from emp where dept_id in (select * from dept where name = "财务");
关键字：exists
exists后跟子查询，子查询有结果是为True，没有结果时为False。为True时外层执行，为False外层不执行
如何使用？
select from emp where exists (select from emp where salary > 1000);
前面 exists 后面 229 | 如果 后面 查询有结果时，前面 才会执行
子查询
- 查询支持嵌套使用
- 查询各学生的语文、数学、英语的成绩
什么是子查询
当一个查询是另一个查询的条件时,这个查询称之为子查询(内层查询)
什么时候用？
当查询需求比较复杂，一次性查询无法得到结果，需要多次查询时，
例如：给出一个部门名称，需要获得该部门所有的员工信息
分析：
1.需要先确定部门的id
2.然后才能通过id确定员工
解决问题的方式是把一个复杂的问题拆分为若干个简单的问题
2. 如何使用？
首先明确子查询就是一个普通的查询,当一个查询需要作为子查询使用时,用括号包裹即可
3. 需要注意
in中的子查询只能包含一个列
例如：查询财务部有哪些人
正确的写法：select name from emp where dept_id in (select id from dept where name = "财务");
错误的写法：select name from emp where dept_id in (select * from dept where name = "财务");
关键字：exists
exists后跟子查询，子查询有结果是为True，没有结果时为False。为True时外层执行，为False外层不执行
如何使用？
select from emp where exists (select from emp where salary > 1000);
前面 exists 后面 229 | 如果 后面 查询有结果时，前面 才会执行