小项目：简易社区制作

最新推荐文章于 2023-11-28 08:35:58 发布

漂流の少年

最新推荐文章于 2023-11-28 08:35:58 发布

阅读量1.2k

点赞数 1

分类专栏： node.js+Express 文章标签： node express mongodb js 1024程序员节

本文链接：https://blog.csdn.net/YINZHE__/article/details/120917524

版权

node.js+Express 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1.起步

建一个community文件夹（项目根目录）
npm init：创建一个package.json文件管理项目信息
node_modules文件夹下面放的都是第三方包
git init：将该项目变成一个git可以管理的仓库
建一个README.md说明文档
建一个.gitignore文件：里面存放一些我们不需要git管理的一些文件
建一个public文件夹存放静态资源：子目录有js、css、img
安装express、mongoose：npm i express mongoose
安装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
安装express-session这个中间件(因为express框架不支持Session 和 Cookie): npm i express-session
安装blueimp-md5(加密算法): npm i blueimp-md5
建议全局安装一下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.设计多个数据模型

漂流の少年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
小项目：简易社区制作

目录1.起步建一个community文件夹（项目根目录）npm init：创建一个package.json文件管理项目信息git init：将该项目变成一个git可以管理的仓库建一个README.md说明文档建一个.gitignore文件：里面存放一些我们不需要git管理的一些文件建一个public文件夹存放静态资源：子目录有js、css、img安装express、mongoose：npm i express mongoDB安装jquery、bootstrap: npm i jquer
复制链接

扫一扫