前言 想必很多小伙伴开始学 node 的时候想搞个项目出来却不知道怎么下手吧,这个教程的话就是教大家用 express 框架简单粗暴搭建一个可以用的后台出来,然后关于 node 和 express 的其他知识,大家还是需要自己去看看文档了解一下。
1 环境准备
express 既然是基于 node 的开发框架,首先 node 那些肯定都配好了吧,这个就自己搞去。然后下面就是要搞 express 的东西了。
1、全局安装 express,方便后面直接导入 express 模块。1
npm install express -g
2、再全局安装 express 的脚手架工具,装完我们就可以很舒服的生成一个 express 项目了1
npm install express-generator -g
2 项目
2.1 搭建
环境配好后,搭建项目就很舒服啦,直接就是一条指令1
express express-demo
接下来就是,安装依赖,运行项目1
2npm install
npm run start
然后我们打开浏览器查看 3000 端口,看到下面的页面就说明我们 express 后台已经跑起来了
2.2 项目结构
生成的项目结构如下图所示1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29│ app.js
│ package.json
│
├─.idea
│ │ express-demo.iml
│ │ modules.xml
│ │ vcs.xml
│ │ workspace.xml
│ │
│ └─inspectionProfiles
├─bin
│ www
│
├─public
│ │ index.html
│ │
│ ├─images
│ ├─javascripts
│ └─stylesheets
│ style.css
│
├─routes
│ index.js
│ users.js
│
└─views
error.jade
index.jade
layout.jade
我们一个一个来说明哈。
1、bin
文件夹
里面的话有 www
文件,那个就是项目的启动脚本文件,监听端口在里面设置,一般情况不管这个文件。
2、public
文件夹
静态资源文件夹,放着 css,js,img 那些,然后如果在里面写个 index.html
的话,我们访问 3000 端口的时候就会直接访问 index.html
的那个页面。所以这边的话,可以把我们前端开发打包好的代码。
3、routes
文件夹
这个是重点啦,路由文件夹,里面的文件用于生成路由实例,这个路由实例用来响应前端发过的请求,按照现在前后端分离的思想,我们在这里面写后台的那些接口了。我们抓一个文件来看一下1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16// index.js
// 引入依赖
var express = require('express');
var router = express.Router();
// 处理前端请求
/* GET home page. */
/* 这边的 router.get 是接收前端的 get 请求
第一个参数是路由地址,这边的 '/' 就指根路由,也就是http://localhost:3000 啦
第二个参数是一个响应接口的回调函数,里面有三个参数,分别是 请求头request 响应体response,和一个next
*/
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
// 导出路由模块
module.exports = router;
上面这个是系统默认的给的,他的话是根据模板(下面会讲)生成了一个页面渲染回去,但是我们现在前后端都分离啦,一般都是后台写接口丢给前端就好啦,所以我们要改成下面这个样子1
2
3
4
5
6
7
8
9
10
11
12router.get('/', function(req, res, next) {
// 处理好要返回给前端的数据
let data = {
name:'xhm',
age:12 }
// 用 res.json 方法写接口
res.json({
code:0,
msg:'ok',
data:data
})
});
安装上面这样搞,我们重新访问 3000 端口的时候就会发现这个时候返回就是一个 json 的数据啦(如下图),这样就写了一个简单的后台接口,后面的不同业务逻辑的接口,就看你前面怎么去处理那些数据啦。
4、views
文件夹
这个用于存放 jade 模板,这个的话,不懂也比较少会用到,只知道这个可以作为页面的模板来使用,渲染一下报错页面和主页,其他就没有用了。
5、app.js
文件
这个是项目的入口文件,这边有着项目的一下配置,也在此整合了项目的模块,其中要注意的就是里面关于路由模块的配置了。看下面代码1
2
3
4
5
6
7// 引入 routes 文件夹中的路由文件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
...
// 设置这些路由的地址
app.use('/', indexRouter);
app.use('/users', usersRouter);
这边做一点说明吧:
- 这边设置路由的地址是相对于项目的,然后在 routes 文件夹里面的地址是相对于这边的,用上面的代码来说,假设那个
./routes/users
文件里面定义了'/login'
这么一个路由地址,那么由于整个users
的地址是'/users'
,所以我们在外面要访问那个login
的话,该访问的地址是http://localhost:3000/users/login
。 - 后面要再想加其他路由模块的时候,就按照上面先引入路由模块,再用
app.use
设置好地址,后面就可以用了。
6、package.json
文件
这个就是整个项目的配置文件啦。项目的名字啦,版本号和项目所需的那些依赖全都写在这里面的啦,但是一般我们是不用管的。
3 数据库
既然搭建了后台,数据库肯定是要连接的,不同的数据库的话,就安装不同的插件来使用,如果你使用的是 mongoDB 的话,就推荐使用 mongoose 来操作数据库,关于 mongoose 的使用可以看我另外一篇教程
4 后记
源代码的话我放到我的 Github 上面去了,可以去 clone 下来看一下。关于 express 项目的简单开发就讲到这边啦,但是如果是这么简单的设置这个项目的目录结构的话,可扩展性不高,代码复用也不好,所以我们要看下一篇文章啦–express 项目分层实践