# 多人社区案例

**Repository Path**: zxinc/small_community_cases

## Basic Information

- **Project Name**: 多人社区案例
- **Description**: 多人社区---node综合案例（学完node做的一个项目）
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-02-11
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# node综合web案例

### 1.目录结构

![在这里插入图片描述](https://img-blog.csdnimg.cn/2019021318581138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0OTc4OA==,size_16,color_FFFFFF,t_70)

```
## 使用到的npm包：
```

```javascript
 "dependencies": {
    "art-template": "^4.13.2",
    "blueimp-md5": "^2.10.0",
    "body-parser": "^1.18.3",
    "bootstrap": "^3.3.7",
    "express": "^4.16.4",
    "express-art-template": "^1.0.1",
    "express-session": "^1.15.6",
    "jquery": "^3.3.1",
    "mongoose": "^5.4.11"
  }
```



### 2.模板页

- art-template子模版

  ```javascript
  {{include '../partials/header.html'}}
  {{include '../partials/footer.html'}}
  ```

- art-template模板继承

  ```shell
  {{extend './layouts/layout.html'}}
  {{block 'head'}}
  <style>
      img{
          width: 64px;
          height: 64px;
      }
  </style>
  {{/block}}
  ```

  

### 3.路由设计

| 请求方法 | 请求路径  | get参数 |         post参数         |   b备注    |
| :------: | :-------: | :-----: | :----------------------: | :--------: |
|   GET    |     /     |         |                          |    首页    |
|   GET    |  /login   |         |                          | 渲染登录页 |
|   POST   |  /login   |         |      email,password      |  登录请求  |
|   GET    | /register |         |                          | 渲染注册页 |
|   POST   | /register |         | email,nickname,password, |  注册请求  |
|   GET    |  /logout  |         |                          |    退出    |



### 4. 异步表单请求（用户体验好）

```javascript
<script src="/jquery/dist/jquery.js"></script>
<script>
    $('#from_register').on('submit',function (e) {
        e.preventDefault()
        let formDate=$(this).serialize()
        $.ajax({
            url:'/register',
            type:'post',
            data:formDate,
            dataType:'json',
            success:function (data) {
                let err_code=data.err_code
                if(err_code===0){
                    window.alert('注册成功！')
                    window.location.href='/'
                }else if(err_code===1){
                    window.alert('邮箱或者昵称已存在！')
                }else if(err_code===500){
                    window.alert('服务器忙，请稍后重试！')
                }
            }
        })
    })
</script>
```



### 5.md5加密

```javascript
let md5 = require('blueimp-md5') 
```

   [md5介绍](https://www.npmjs.com/package/blueimp-md5) 

```javascript
  body.password = md5(md5(body.password))//密码加密
```



### 6.session使用

```javascript
let session=require('express-session')
```

[express-session介绍](https://www.npmjs.com/package/express-session)



配置：

```javascript
app.use(session({
    secret: 'itcast',//配置加密字符串(自定义)
    resave: false,
    saveUninitialized: true
}))
```

使用：

```javascript
//用户存在，登录成功，通过session记录登录状态
req.session.user = user
```

```javascript
//发送数据，客户端ajax请求数据渲染页面
router.get('/', function (req, res) {
    res.render('index.html', {
        user: req.session.user
    })
})
```