小项目：简易社区制作
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小项目：简易社区制作相关的知识，希望对你有一定的参考价值。
1.起步
建一个community文件夹（项目根目录）
npm init：创建一个package.json文件管理项目信息
node_modules文件夹下面放的都是第三方包
git init：将该项目变成一个git可以管理的仓库
建一个README.md说明文档
建一个.gitignore文件：里面存放一些我们不需要git管理的一些文件
建一个public文件夹存放静态资源：子目录有js、css、img
安装express、mongoose：npm i express mongoDB
安装jquery、bootstrap: npm i jquery bootstrap@4.6.0
如果使用bootstrap的样式却没效果，可以在安装的时候指定一个低版本的(前提是你的bootstrap.css没引错)
安装art-template: npm i art-template express-art-template
安装body-parse: npm i body-parse
建议全局安装一下nodemon: npm i nodemon -g
根目录下建一个app.js文件
app.js
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.get('/', function (req, res) {
res.send('hello')
})
app.listen(3000, function () {
console.log('running...')
})
下面简单测试一下：node app.js
拓展
__dirname:可以用来获取当前文件模块所属目录的绝对路径
__filename:可以用来获取当前文件的绝对路径
在文件路径操作中，使用相对路径是不可靠的，因为在Node中文件操作的 ./ 被设计为相对于执行node命令所处的路径
为了解决这个问题，只需要把相对路径变成绝对路径，例如 path.join(__dirname, 相对文件路径)
2.art-template的自模板和模板继承
在上面的环境基础上，我们来简单演示一下art-template的子模板和模板继承
views/header.html
<h1>公共的头部</h1>views/footer.html
<h1>公共的底部</h1>views/layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.css">
{{ block 'style' }}{{ /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 'script' }}{{ /block }}
</body>
</html>views/index.html
{{ extend './layout.html' }}
{{ block 'style' }}
<style>
body {
background-color: skyblue;
}
</style>
{{ /block }}
{{ block 'content' }}
<div>
<h1>index页</h1>
</div>
{{ /block }}
3. 路由设计
| 路由 | 方法 | get参数 | post参数 | 是否需要登录 | 备注 |
| / | GET | 渲染首页 | |||
| /register | GET | 渲染注册页面 | |||
| /register | POST | nickname、password、email | 处理注册请求 | ||
| /login | GET | 渲染登录页面 | |||
| /login | POST | email、password | 处理登陆请求 | ||
| /logout | GET | 处理退出请求 |
4.设计多个数据模型
以上是关于小项目：简易社区制作的主要内容，如果未能解决你的问题，请参考以下文章