这是一篇关于关于信息发布平台的blog

1. start

1.1 目录结构

1
2
3
4
5
6
7
8
9
10
11
├─app.js             项目入口文件
├─controllers
├─models			存储使用mongoose设计的数据模型
├─node_modules		 第三方包	
├─package.json		 包的描述文件
├─package-lock.json	  第三方包版本锁定文件（npm5 之后才有）
├─public			 公共静态资源
├─routes			 如果业务较多就把路由按照业务分类，存储到router目录中
├─routes.js			 简单一点就把所有的路由都放到这个文件中
├─README.md		 	 项目说明文档
└─views				存储视图目录

1.2 初始化

1
2
3
4
5
6
7
8
9
10
11
12
# 初始化
npm init -y

# 为发布到GitHub做准备
git init

# 安装mongoose
npm i express mongoose

# 安装art-template
npm i art-template express-art-template
# 注意： 在node中除了art-template还有其很多第三方模板引擎可以使用，比如：ejs，jade（pug），handlebars，nunjucks等

2. app.js中配置art-template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const express = require('express');
const path = require('path');

const app = express();

app.use('/public/', express.static(path.join(__dirname, './public/')));
app.use('/node_modules/', express.static(path.join(__dirname, './node_modules/')));

app.engine('html', require('express-art-template'));
// art-template默认就是从 ./views 这个目录获取文件，也可以通过
// 下面的方法修改指定的目录
app.set('views', path.join(__dirname, './views/'));

app.get('/', function (req, res){
    res.render('index.html', {name: 'jack'})
});

app.listen(3000, function (){
    console.log('server is running ...');
});

3. art-template模板继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--layout.html，公共的css和js也在这个页面引进来，同时留几个‘坑’-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
    {{ block 'myCss' }}{{ /block }}
</head>
<body>
{{ include './header.html' }}
<!--在下面留个坑，方便填入内容-->
{{ block 'content' }}
<h1>默认内容</h1>
{{ /block }}

{{ include './footer.html' }}
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
{{ block 'myJs' }}{{ /block }}
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--index.html-->
{{ extend './layout.html' }}

<!--在继承页面写自己的css-->
{{ block 'myCss' }}
<style>
    body { background: lightblue;}
</style>
{{ /block }}
<!--在继承页面更新内容-->
{{ block 'content' }}
<div>
    <h1>i am new content</h1>
</div>
{{ /block }}

<!--在继承页面写自己的js-->
{{ block 'myJs' }}
<script>
    
</script>
{{ /block }}

4. 路由设计

路径 方法 get参数 post参数 是否需要权限 备注
/ GET 渲染首页
/register GET 渲染注册页
/register POST email,nickname,password 处理注册请求
/login GET 渲染登录页面
/login POST email,password 处理登录请求
/logout GET 处理退出请求

5. md5加密

1
2
# 安装加密包
npm install blueimp-md5

使用：

1
2
// 安全起见双层加密
md5(md5(password))

6. SESSION问题

  • express默认不支持 Session 和 Cookie 但是我们可以使用第三方中间件：express-session 来解决
  • 安装：
1
npm install express-session
  • 引入：
1
const session = require('express-session');
  • 配置：
1
2
3
4
5
6
7
8
// 一定要在 app.use(router) 之前
app.use(session({
    // 配置加密字符串，它会在原有加密基础之上和这个字符串拼起来去加密
    // 目的是为了增加安全性，防止客户端恶意伪造
    secret: 'xfkblog',
    resave: false,
    saveUninitialized: false // 当为true时无论你是否使用 Session ，都默认直接给你分配一把钥匙
}));
  • 使用
1
2
3
4
5
//    当把这个插件配置好之后，我们就可以通过 req.session 来发访问和设置 Session 成员了
//    添加 Session 数据：
req.session.foo = 'bar'
//    访问 Session 数据：
req.session.foo
  • 提示： 默认session都是内存存储的，一旦服务器重启就会丢失，真正的开发环境会把session做持久化保存。

7. 重定向问题

1
2
3
4
5
// 服务端重定向只针对同步请求才有效，异步请求无效。此时需要重定向就要在客户端进行
window.location.href = '/'

// 由a链接发起的请求，或者form表单中由action发起的请求可以使用 res.redirect() 方法。
res.redirect('/')

构建项目的完整操作步骤

  • 创建目录结构
  • 整合静态页，模板页
    • extend
    • include
    • block
  • 设计路由，注册，登录，退出
  • 用户注册
    • 客户端：先整理好客户端页面（表单数据的name设置，收集表单数据发送请求）
    • 服务端：
      • 获取客户端发送的表单数据
      • 操作数据库
      • 如果数据库操作失败，响应500
      • 其他根据业务响应不同数据
  • 用户登录
  • 用户退出

遇到的问题以及解决方法

  • 页面资源都加载完了但是，页面显示不正确，原来是bootstrap版本装了最新版

    1
    2
    3
    # npm默认安装最高版本，可按需求安装特定版本
    npm uninstall bootstrap
    npm install bootstrap@3.3.7