前端做整站是开发，例如：前端是用了vue创建初始化项目，后端我们不会php、java等，我们只能用node去创建去做后端代码，本文就给大家讲解最基础的从零开始创建一个项目的后端环境。
一般来说前后端代码肯定是分离的，但是也有不分离的情况例如jsp代码，本文讲解前后端分离的情况。
前后端项目分离，这样后端的项目创建就不需要在前端的代码里，相当于是两个独立的工程。
一：首先全局安装Node的express 框架
当然安装过的就不需要在执行这个步骤了。
cnpm i -g express-generator
安装完之后通过
express --version
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }
来查看版本，注意这里只能提供这种方式去查看版本号不能通过 -v 查看版本号。
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }
span.s2 { font: 12.0px ".PingFang SC" }
2、进入我们的后端项目文件夹生成一个默认的后端 node wxpress项目
express server
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }
3、这时候目录下面会默认生成一个sever 的目录，进入目录，然后执行
npm install
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }
span.s2 { font: 12.0px "Helvetica Neue" }
4、如何启动项目呢，其实可以看 package.json
控制台执行
node ./bin/www
在浏览器 执行
localhost:3000
一般来说 Node 的项目的端口号都是 3000
起来之后看到这个就代表好了
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px }
span.s1 { font: 12.0px "Helvetica Neue" }
span.s2 { font: 12.0px ".PingFang SC" }
项目起来之后，后端项目一般都是用的是 jade 的引擎去写的，如果不舒服可以换成 html 的，
首先先安装 ejs
cnpm i ejs —save
然后修改app.js，新增
var ejs = require(‘ejs’); app.engine(‘.html‘,ejs.__express);
修改
app.set(‘view engine‘, ‘jade’); app.set(‘view engine‘, ‘html‘);
这样就可在 views 下面新建 html 的页面了，每次做完修改都需要重新启动
Node ./bin/www
项目目录介绍：
bin/www 是项目的启动目录
public 是放一些静态资源的地方
routes 是项目的路由
views 是项目的 页面代码
app.js 项目的配置
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }
原文地址：https://www.cnblogs.com/haonanZhang/p/8214030.html