前端做整站是开发,例如:前端是用了vue创建初始化项目,后端我们不会php、java等,我们只能用node去创建去做后端代码,本文就给大家讲解最基础的从零开始创建一个项目的后端环境。
一般来说前后端代码肯定是分离的,但是也有不分离的情况例如jsp代码,本文讲解前后端分离的情况。
前后端项目分离,这样后端的项目创建就不需要在前端的代码里,相当于是两个独立的工程。
一:首先全局安装Node的express 框架
当然安装过的就不需要在执行这个步骤了。
cnpm i -g express-generator
安装完之后通过
express --version
来查看版本,注意这里只能提供这种方式去查看版本号不能通过 -v 查看版本号。
2、进入我们的后端项目文件夹生成一个默认的后端 node wxpress项目
express server
3、这时候目录下面会默认生成一个sever 的目录,进入目录,然后执行
npm install
4、如何启动项目呢,其实可以看 package.json
控制台执行
node ./bin/www
在浏览器 执行
localhost:3000
一般来说 Node 的项目的端口号都是 3000
起来之后看到这个就代表好了
项目起来之后
后端项目一般都是用的是 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
other、这里介绍另一种启动方式
1、利用 pm2 启动,首先在 node 的项目按照
cnpm install pm2 --save
2、安装完之后进入项目根目录
执行
pm2 start bin/www
这个是进程式的管理,并且这种方法启动项目后,控制台还可以继续做其他的操作。
3、关闭项目
// 关闭的话,关闭所有 pm2 stop all // 关闭某一个 pm2 stop bin/www 跟启动的方法相对应
前后端不分离项目
如果我们想吧这个项目放到 例如 vue-cli 构建的项目中,直接在 项目根目录下去创建项目就行,让 server 文件夹和 sec build 在一个目录下就可以
合并的话,只需要吧 server 里面的 package.json 文件里面的
"dependencies": { "body-parser": "~1.18.2", "cookie-parser": "~1.4.3", "debug": "~2.6.9", "ejs": "^2.5.7", "express": "~4.15.5", "jade": "~1.11.0", "mongoose": "^4.13.9", "morgan": "~1.9.0", "serve-favicon": "~2.4.5" }
这些项目依赖复制到 vue 的 package.json里面去就可以了,然后在初始化一下就行。
启动的话 方法不变,vue的启动还是以前的,server的启动也不变,进入 server > bin 执行 node www 就可以了
项目目录介绍:
bin/www 是项目的启动目录
public 是放一些静态资源的地方
routes 是项目的路由
views 是项目的 页面代码
app.js 项目的配置