手把手用 express 搭建后台

Render 发布于2019-08-23 13:58 / 3355人阅读

摘要：文件这个是项目的入口文件，这边有着项目的一下配置，也在此整合了项目的模块，其中要注意的就是里面关于路由模块的配置了。后面要再想加其他路由模块的时候，就按照上面先引入路由模块，再用设置好地址，后面就可以用了。

前言想必很多小伙伴开始学 node 的时候想搞个项目出来却不知道怎么下手吧，这个教程的话就是教大家用 express 框架简单粗暴搭建一个可以用的后台出来，然后关于 node 和 express 的其他知识，大家还是需要自己去看看文档了解一下。

1 环境准备

express 既然是基于 node 的开发框架，首先 node 那些肯定都配好了吧，这个就自己搞去。然后下面就是要搞 express 的东西了。

1、全局安装 express，方便后面直接导入 express 模块。

npm install express -g

2、再全局安装 express 的脚手架工具，装完我们就可以很舒服的生成一个 express 项目了

npm install express-generator -g

2 项目 2.1 搭建

环境配好后，搭建项目就很舒服啦，直接就是一条指令

express express-demo

接下来就是，安装依赖，运行项目

npm install
npm run start

然后我们打开浏览器查看 3000 端口，看到下面的页面就说明我们 express 后台已经跑起来了

2.2 项目结构

生成的项目结构如下图所示

│  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 文件夹

这个是重点啦，路由文件夹，里面的文件用于生成路由实例，这个路由实例用来响应前端发过的请求，按照现在前后端分离的思想，我们在这里面写后台的那些接口了。我们抓一个文件来看一下

// 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;

上面这个是系统默认的给的，他的话是根据模板（下面会讲）生成了一个页面渲染回去，但是我们现在前后端都分离啦，一般都是后台写接口丢给前端就好啦，所以我们要改成下面这个样子

router.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 文件
这个是项目的入口文件，这边有着项目的一下配置，也在此整合了项目的模块，其中要注意的就是里面关于路由模块的配置了。看下面代码

// 引入 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 项目分层实践

GPU云服务器云服务器手把手搭建阿里云服务器手把手教你阿里云服务器搭建商城后台搭建网站后台搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99864.html

前端周刊第41期

摘要：注意本文为前端周刊早期整理的旧文重发，不过大部分内容并没有过时，已经看过的同学可以直接去文末订阅前端周刊微信公众号。想和我面对面交流扫下方二维码添加我为好友。注意：本文为前端周刊早期整理的旧文重发，不过大部分内容并没有过时，已经看过的同学可以直接去文末订阅前端周刊微信公众号。文章教程手把手教你玩转 Github Pages 24ways.org 有人说 Github 就是工程师的...

ixlei 2019-08-20 14:20 评论0 收藏0
前端周刊第41期

摘要：注意本文为前端周刊早期整理的旧文重发，不过大部分内容并没有过时，已经看过的同学可以直接去文末订阅前端周刊微信公众号。想和我面对面交流扫下方二维码添加我为好友。注意：本文为前端周刊早期整理的旧文重发，不过大部分内容并没有过时，已经看过的同学可以直接去文末订阅前端周刊微信公众号。文章教程手把手教你玩转 Github Pages 24ways.org 有人说 Github 就是工程师的...

yanwei 2019-08-30 15:52 评论0 收藏0
手把手教你撸一个网页聊天室

摘要：前端逻辑搞定之后，思考一下这个聊天室的交互是怎么实现的。在前端监听一个事件，这个事件的触发条件是成功和服务端建立连接。携带一个参数，即用户的输入。别人发送的消息现在就需要在前端建立一个响应服务端有新消息的监听事件了。一些废话:) 最近在学校比较闲，终于有这么一块时间可以自由支配了，所以内心还是十分的酸爽舒畅的。当然了，罪恶的事情也是有的，比如已经连续一周没有吃早饭了，其实现在回头想想...

nemo 2019-08-20 12:34 评论0 收藏0
手把手教你撸一个网页聊天室

摘要：前端逻辑搞定之后，思考一下这个聊天室的交互是怎么实现的。在前端监听一个事件，这个事件的触发条件是成功和服务端建立连接。携带一个参数，即用户的输入。别人发送的消息现在就需要在前端建立一个响应服务端有新消息的监听事件了。一些废话:) 最近在学校比较闲，终于有这么一块时间可以自由支配了，所以内心还是十分的酸爽舒畅的。当然了，罪恶的事情也是有的，比如已经连续一周没有吃早饭了，其实现在回头想想...

leiyi 2019-08-01 16:00 评论0 收藏0