十二周学习笔记和总结

2018-08-11 本文已影响0人水水壶

这周学习 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++) { %>
  <div class="pic">
    <img src="/images/<%= files[i] %>" alt="pic">
  </div>
<% } %>

3. 公共模板复用

目录路径：

|-- views
  |-- partials（文件夹，中文意思部分/组件）
    |-- header.ejs（公共的部分）        
  |-- album.ejs

在 album.ejs 里引入公共部分：

<% include partials/header %>

四、文件上传

1. html 写文件上传代码

<form action="/upload" method="POST" enctype="multipart/form-data">
  <div class="form-group">
    <input type="file" name="photo" id="exampleInputFile">
    <p class="help-block">请选择一张照片进行上传</p>
  </div>

  <button class="btn btn-primary" type="submit">上传</button>
</form>

注意事项：

文件上传请求方式一定要是 post；
文件上传在 form 标签里一定要加上 enctype="multipart/form-data";
form 标签 action 属性表示请求地址；
<button type="submit">上传</button> 按钮只有 type=submit 时，点击按钮才会出发 action 那个请求地址；
<input type="file" name="photo" id="exampleInputFile"> 文本框 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 <url>

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> 回退到哪一次备份，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 <pgkName> --save 下载包，并记录到 package.json 中的 dependencies 属性里；
npm install <pgkName> --save-dev 下载包，并记录到 package.json 中的 devDependencies 属性里；
npm run <script> package.json 里有个 script 属性，可以自定义脚本。

八、英文学习

import vt 导入
repository n. 仓库
private adj 私有的
public adj 公共的
commit vt 提交
Initialize 初始化 / 创建
album n.相册

十二周学习笔记和总结

一、express

1. 概述

2.代码

3. res 对象

4. 设置模板引擎

5. 设置静态页面资源目录

二、path

1. 概述

2. path.join()

2. path.dirname()

3. path.basename()

4. path.extname()

5. process.cwd() 和 __dirname

三、ejs

1. 变量

2. 循环

3. 公共模板复用

四、文件上传

1. html 写文件上传代码

2. nodejs 处理图片上传

五、git

1. 从 github 上拉代码

2. 往 github 提交代码

3. 查看工作区和本地仓库的差异

4. 撤回老版本

六、supervisor

七、npm 复习

八、英文学习

猜你喜欢

热点阅读