欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Web前端学习笔记——NodeJS之综合案例:多人社区

程序员文章站 2024-03-17 13:03:52
...

多人社区

该案例以 Node.js 中文开源技术社区 CNode 为原型。

准备

  1. 在 GitHub 上创建一个仓库 ithub
  2. 使用 Git 将远程仓库下载到本地 git clone 远程仓库地址

初始化目录结构

.
├── node_modules
├── controllers 控制器
├── models 模型
├── public 静态资源
├── views 视图
├── app.js 应用程序启动入口
├── config.js 应用配置文件
├── .gitignore Git忽略文件
├── package.json 项目包说明文件,用来存储项目名称,第三方包依赖等信息
├── package-lock.json
└── README.md 项目说明文件

在 app.js 中写入以下内容:

const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))

导入模板

下载模板到本地:

git clone https://github.com/lipengzhou/ithub-template.git

将模板中的 public 和 views 拷贝到项目中。

MVC

导入数据表

  • 新建数据库 ithub
  • 在数据库上右键 -> 运行 SQL 文件

数据库设计

用户表

话题表

话题分类表

评论表

路由设计

请求方法 请求路径 说明
GET / 渲染首页
GET /signin 渲染登陆页面
POST /signin 处理登陆请求
GET /signup 渲染注册页面
POST /signup 处理注册请求
POST /signout 处理退出请求
GET /topic/create 渲染发布话题页面
POST /topic/create 处理发布请求请求
GET /topic/:topicID 渲染话题详情页面
GET /topic/:topicID/edit 渲染编辑话题页面
POST /topic/:topicID/edit 处理编辑话题请求
POST /topic/:topicID/delete 处理删除话题请求
POST   发表评论
    修改评论
    删除评论
    个人主页
    基本信息
    设置

提取路由和控制器模块

杂项

  • 拷贝 resources 中的 public 和 views 到案例根目录
  • npm i bootstrap jquery
  • 开放 public 和 node_modules 静态资源

按照路由走通页面渲染

  • 配置模板引擎
  • 根据不同路由渲染页面

用户注册

用户登陆

用户退出

发表话题

查看话题

修改话题

删除话题

案例代码查看

# 下载到本地
git clone https://github.com/lipengzhou/itcast-nodejs.git

查看所有的标签(我针对每一大步都打了标签,方便切换):

# 查看所有标签
git tag

# 查看带有注释的标签
# 注意:使用 git-bash 查看,因为有中文
git tag -n

切换指定标签:

git checkout -f 标签名称

# 例如切换到 step-2
git checkout -f step-2

使用 markdown 富文本编辑器