express项目的目录结构
提纲
1、用express命令或者express -e命令生成项目后,产生的默认目录结构
2、自己添加的代码目录
用node建立一个express的后端项目,一般使用express-generator生成项目后,会自动产生一个目录结构,但是这个自动生成的目录结构还需要增加一些内容,主要是后端代码的分类目录。具体情况记录如下。
1、用express命令或者express -e命令生成项目后,产生的默认目录结构
2、自己添加的代码目录
代码目录结构按照MVC模式进行创建,依次新建controller、views、model、public等文件夹,结构如下:
- controller 控制层 -新增
- views 视图层 - 默认
- model 模型层(用于管理MongoDB文档对象)- 新增
- public 静态资源目录 - 默认
- app.js 入口文件 - 默认
- package.json 依赖管理文件 - 默认
入口文件
app.js 为入口文件,代码如下:
let express = require('express')
let crl = require('./controller')
let app = express()
//配置静态资源目录
app.use(express.static('./public'))
//配置模板所在目录
app.set('views','./views')
//配置ejs模板引擎
app.set('view engine','ejs')
//配置路由
app.get('/add',crl.getAdd)
app.post('/add',crl.postAdd)
app.listen(3000)
控制层
/controller/index.js 为控制层,文件代码如下:
//添加功能,get请求
function getAdd(req,res){
//接收get请求参数
let {name} = req.query
res.render('index',{msg: name})
}
//添加功能,post请求
function postAdd(req,res){
//接收post请求参数
let {name} = req.body
res.render('index',{msg: name})
}
module.exports = {
getAdd,
postAdd
}
视图层
/views/index.ejs 为视图层,文件代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div><%=msg %></div>
<h1>这是视图层</h1>
</body>
</html>
配置项目启动
在 package.json 文件中添加如下配置:
{
"scripts": {
"start": "node app"
}
}
配置完成后执行 npm start 命令启动项目,在浏览器地址栏访问 http://localhost:3000/add?name=xxx ,即可执行添加的路由
参考资料: 1、express框架快速入门教程,https://blog.csdn.net/qq_26087315/article/details/113783288?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-1.no_search_link&spm=1001.2101.3001.4242