这周学习 express，写了一个网络相册，可以上传自己的图片并展示，代码放到了我的 github。
一、express
1. 概述
jquery 框架简化了原生 js 的写法；
express 简化了原生node js 的写法。
2.代码
const express = require('express');
const app = express();
app.get('/', function(req, res){
res.send('hello world');
});
app.listen(3000, function(){
console.log('服务已启动监听端口3000');
});
3. res 对象
-
res.send('hello world');返回字符串； -
res.json({ name:'yml' });返回 json； -
res.render('index', { name: 'yml' });返回 html； -
res.redirect('/album');重定向到 /album 请求。
4. 设置模板引擎
常见的模板引擎：
- ejs
- jade
- swing
不同的模板引擎语法不同，但是最终都会被翻译成 html 返回给客户端。
experss 中需要设置使用哪种模板引擎，使用前先使用 npm install 下载包。
app.set('view engine', 'ejs'); // 设置 ejs 模板引擎
5. 设置静态页面资源目录
一般来说 css 、js 、图片都放到静态资源目录里。
app.use(express.static(path.join(process.cwd(),'public')));
二、path
1. 概述
path 是 nodejs 自带的包，提供一些方法处理文件路径。
2. path.join()
作用：自动格式化文件路径，帮助补齐斜线 /。
示例：
path.join('C://study', 'public'); => ‘C://study/public’。
2. path.dirname()
作用：获取文件目录路径，截取最后一个斜线 / 之前的部分。
示例：
const src = '/aaa/bbb/cccc/dddd';
path.dirname(src); <= '/aaa/bbb/ccc'
3. path.basename()
作用：获取文件名，截取最后一个斜线 / 之后的部分。
示例：
const src = '/aaa/bbb/ccc/ddd';
path.basename(src); <= 'ddd'
const src = '/aaa/bbb/ccc/ddd.png';
path.basename(src2); <= 'ddd.png'
4. path.extname()
作用：获取文件后缀，最后一个点后面的内容。
示例：
const src = '/aaa/bbb/ccc/ddd';
path.extname(src); <= '' 这里没有后缀，返回空
const src = '/aaa/bbb/ccc/ddd.png';
path.extname(src2); <= 'png'
5. process.cwd() 和 __dirname
process.cwd() 和 __dirname 这两个都是 nodejs 原生自带的 api，在处理路径的时候也会经常遇到。
|-- express-demo
|-- test
|-- index.js
在 express-demo 目录下运行 test/index.js 文件：express-demo> node test/index.js
process.cwd()： /home/yml/express-demo
__dirname： /home/yml/express-demo/test
process.cwd()：在哪个目录下运行 node 程序，就会打印这个目录的路径；
__dirname：运行的 js 所在的目录。
三、ejs
1. 变量
// app.js
res.render('album', { files: files });
// views/album.ejs
<%= files %>
2. 循环
在 ejs 里可以混合写 js 代码和 html 代码，但是 js 代码要写在 <% %> 里面。
<% for (var i = 0; i < files.length; i++) { %>
<% } %>
3. 公共模板复用
目录路径：
|-- views
|-- partials（文件夹，中文意思部分/组件）
|-- header.ejs（公共的部分）
|-- album.ejs
在 album.ejs 里引入公共部分：
<% include partials/header %>
四、文件上传
1. html 写文件上传代码
注意事项：
- 文件上传请求方式一定要是 post；
- 文件上传在 form 标签里一定要加上
enctype="multipart/form-data"; - form 标签 action 属性表示请求地址；
-
按钮只有type=submit时，点击按钮才会出发 action 那个请求地址； -
文本框type="file"表示这是一个上传文件的文本框，name="photo"属性必须有，后端通过 name 属性获取上传文件相关内容。
2. nodejs 处理图片上传
文件上传用到第三方包 formidable，使用前要先安装：$ npm install formidable --save。
const formidable = require('formidable');
const sd = require('silly-datetime');
const fs = require('fs');
// ......
app.post('/upload', function (req, res) {
const form = new formidable.IncomingForm();
form.uploadDir = path.join(process.cwd(), 'public/images'); // 设置上传的文件保存在哪里
// 生成随机数，用于对上传的文件进行重命名。因为可能上传多次上传同一个文件。
const rand = sd.format(new Date(), 'YYYYMMDDHHmm') + Math.floor((Math.random()*10000));
form.parse(req, function(err, fields, files) {
// 不管怎样，先在 public/images 下保存图片
// /aaaa/bbb/cccc/ddd 这个地方获取的值是没有后缀的
const oldPath = files.photo.path;
// /aaa/bbb/ccc/eee.png
const newPath = path.join(path.dirname(oldPath), rand + path.extname(files.photo.name));
// 重命名
fs.renameSync(oldPath, newPath);
res.redirect('/album');
});
})
五、git
1. 从 github 上拉代码
git clone
2. 往 github 提交代码
-
git add .把当前目录下所有修改的内容提交到暂存区； -
git commit -m "备注"把暂存区里的内容提交到 git 本地仓库； -
git pull把 github 上仓库代码同步一次，目的是防止别人改了跟我提交的代码产生冲突； -
git push把本地仓库的代码提交到 github。
3. 查看工作区和本地仓库的差异
git status
4. 撤回老版本
[study-node]$ git log --pretty=oneline
b0b2c3f7ebf480a7d845d26cc8ce71698e902aa5 delete node_modules
9ba327f6dcda2e182fff95d94ca23e77d9c159af init commit
693c7fe41943f8df23eef4b8fc4ca541c014f0f2 Update README.md
ede00a6db4a644f9d7f34d2cae6e2463556a01d1 Initial commit
[study-node]$ git reset --hard b0b2c3f
HEAD is now at b0b2c3f delete node_modules
-
git log --pretty=oneline查看代码备份的记录； -
git reset --hard回退到哪一次备份，commit-id 就换成对应的值。
六、supervisor
每次启动 node 程序之后，只要有修改，都要重启才起作用，这很麻烦。使用 supervisor 包之后会自动监控改了哪些文件，并自动重启。使用前先下载这个包 npm install supervisor --save-dev。
原本启动 node 程序：node app.js，使用 supervisor 启动 node 程序：supervisor node app.js。每次都敲这么长很麻烦，可以在 package.json 里写个脚本，这样每次输入 npm run dev 时 npm 会自动执行 supervisor node app.js 这个命令。
"scripts": {
"dev": "supervisor node app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
七、npm 复习
-
npm init -y快速创建 package.json 文件； -
npm install下载包，并记录到 package.json 中的--save dependencies属性里； -
npm install下载包，并记录到 package.json 中的--save-dev devDependencies属性里； -
npm run