# express_blog

**Repository Path**: CC3688/express_blog

## Basic Information

- **Project Name**: express_blog
- **Description**: nodejs  express框架 来写blog
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-08-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 项目简介

- 简单的个人博客
- 实现,注册,登录
- 实现个人信息的修改
- 上传头像
- 发表topic
- 修改topic 需要所有者才能修改
- 删除topic

### 目录结构
```
|---- app.js                入口文件
|---- controllers
|---- models                存储使用mongoose设计的数据模型
|---- node_modules          第三方包
|---- package.json          包描述文件
|---- package--lock.json    第三方包版本锁定文件
|---- public                公共静态资源
|---- README.md             项目说明文档
|---- routes                如果业务比较多,代码码多,分开写
|---- router.js             简单一点把所有有路由都放在这个文件
|---- views                 存储视图目录  
|---- lib                   第三方类库UI组件
  
```
### 路由设计
路径|方法|get参数|post参数|是否需要登陆|备注
----|---|-------|------- |-----------|---
/   |GET|      |       |           | 渲染首页
/regitster|GET| | |   |渲染注册页面
/register|POST||email,nickname,password||处理注册请求
/login|GET||||渲染登录页面
/login|POST||email,password||处理登录请求
/logout|GET||||处理退出请求
/user/settings/profile|GET|||是|渲染个人主页
/user/settings/admin|GET|||是|渲染个人账户页面
/topic/:id|GET||||渲染topic 页面
/user/topic/edit/:id|GET|id||是|渲染编辑topicd页面
/user/topic/edit|POST||Title, topic, _id|是|处理topic更新
/user/topic/delete/:id|GET|id||是|删处topic
/user/topics/new|GET|||是|渲染新建topic的页面
/user/topics/new|POST||Title,topic,user_id|是|处理新增topic请求
/upload|POST|||是|上传图片
/change|POST|||是|修改用户信息
/updatepwd|POST|||是|修改密布
/delete|POST|||是|删除账号
|||||

### 开发步骤
- 创建目录结构
- 整合静态页--模版
    - include
    - block
    - extend
- 设计用户登录, 退出,注册的路由
- 用户注册
    - 先处理好客户端页面的内容(表单控件的name, 收集表单的数据)
    - 服务端
        - 获取客户端表单数据
        - 操作数据库
        - 如果有错, 发送 500 告诉客户服务器错了
        - 其它的根据你的业务发送不同的响应数据
- 用户登陆
- 用户退出
- topic 的增删改查

### 注意(收获)

- 为动态添加的DOM元素添加节点

  > 无法为动态添加的DOM元素,添加事件处理函数,因为它是动态添加的,你添加处理函数时它还没被创建,还不存在的,所以无法添加上
  >
  > 解决办法: 可以把事件处理函数添加在父级元素上,利用冒泡的机制, 当点击(或其它事件)时,父级也会被触发,  可能通过事件对象,来获取触发的元素是哪个

- Array.map()  的 async 函数

  > let result = arrray.map(async(item)=>{
  >
  >   await fetch()……..
  >
  > })
  >
  > 由于map 里的函数本应该是同步的, 这里返回去的新数组是 promise, 不能直接对它进行操作,需要promise.all() 然后才可以以
  >
  > Promise.all(result).then((val)=>{
  >
  > ​	这里接着你的操作....
  >
  > })
  >

### 展示地址:

 [简易的多人博客](https://express-blog-cc3688.herokuapp.com/)
> 网址可以无法访问,可以爬梯子试试!

### 部分页面 截图

##### 首页
![Alt text](./public/img/sliceimages/WX20190309-002017.png)

---
##### 个人中心
![Alt text](./public/img/sliceimages/WX20190309-002051.png)

---
##### 主题文章 相关
![Alt text](./public/img/sliceimages/WX20190309-002121.png)
![Alt text](./public/img/sliceimages/WX20190309-002215.png)
![Alt text](./public/img/sliceimages/WX20190309-002146.png)

---

##### 注册登录
![Alt text](./public/img/sliceimages/WX20190309-002605.png)