利用node、express初始化项目
前端做整站是开发,例如:前端是用了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:
一般来说 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 项目的配置
利用node、express初始化项目的更多相关文章
- 利用node,跑项目。
(前提是已经安装了node) 一.简单介绍 Vue开发|文件目录结构部署 目录结构 ├── index.html 入口页面 ├── build 构建脚本目录 │ ├── build-server.j ...
- 搭建简单的node+express+mongodb项目
安装 首先要确保已经安装了 Node.js,接下来创建一个目录,然后进入此目录并将其作为当前工作目录. mkdir myapp cd myapp 通过 npm init 命令为应用创建一个 packa ...
- node express新项目默认主文件app.js
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon') ...
- 使用node初始化项目
初始化项目 在建项目的时候经常会建很多文件夹和文件,今天使用node初始化项目自动生成这些内容. 执行步骤 执行命令 node init 初始化项目生成package.json 设置配置文件 var ...
- node+express+mysql 实现登陆注册
基于 node.express.mysql 实现的登录注册. 1.`首先在终端中 安装 node .` 2.`通过npm install express -g 命令全局安装 express`. 3.` ...
- 如何利用express新建项目(上)
如何利用express新建项目(上) 摘要 这篇文章将讲解了如何快速利用express新建项目 一.express4.x的安装 1. npm install -g express 2. npm ins ...
- Node.js Express+Mongodb 项目实战
Node.js Express+Mongodb 项目实战 这是一个简单的商品管理系统的小项目,包含的功能还算挺全的,项目涵盖了登录.注册,图片上传以及对商品进行增.删.查.改等操作,对于新手来说是个很 ...
- 如何搭建node - express 项目
基于博主也是个菜鸟,亲身体验后步骤如下: 首先,我们需要安装node.js, https://www.runoob.com/nodejs/nodejs-install-setup.html 安装完成 ...
- 一:项目简介(node express vue elementui axios)
一:项目基本构造 ** 项目一共有 16 个页面,是一个电商网销项目,自己在网上的某网上找的一个要做的网站的设计图: 页面主要包括: 登录页 -- 注册页 -- 首页 -- 产品列表页 -- 产品详 ...
随机推荐
- 清北学堂模拟赛d5t4 套路
分析:题目非常短,看起来非常难,其实把图一画就明白了.有向图,每个点的出度都是1,那么整个图肯定是环上套链,链上的边无论怎样反向都不会形成环,环上的边也可以随便反向,但是最终不能反为同向的,总方案数减 ...
- Spring MVC-控制器(Controller)-属性方法名称解析器(Properties Method Name Resolver )示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_propertiesmethodnameresolver.htm 说明:示例基于S ...
- EPEL reporsitory
在centos 5上yum install git的时候报错说没有git这个package. 这是因为centos的软件策略非常保守,因为它基本就是redhat企业版的copy.所以想在centos5 ...
- JDBC数据源(DataSource)数据源技术是Java操作数据库的一个很关键技术,流行的持久化框架都离不开数据源的应用。
JDBC数据源(DataSource)的简单实现 数据源技术是Java操作数据库的一个很关键技术,流行的持久化框架都离不开数据源的应用. 2.数据源提供了一种简单获取数据库连接的方式,并能在内部通 ...
- Openfire:通过Servlet群发消息
在Openfire中自带有Broadcase插件,可以让我们群发消息给全部用户或者组.不过如果是我们通过Servlet来实现这一功能,那么是能够增加一定的灵活性的.具体做法直接看Demo代码: pub ...
- HDU 2563 统计问题(递推)
题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=2563 将向上移的步数设为a[n],将向左右移的步数设为b[n],有a[n]=a[n-1]+b[n-1 ...
- Android 开源框架Universal-Image-Loader全然解析(一)--- 基本介绍及使用
转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/26810303).请尊重他人的辛勤劳动成果,谢谢! 大家好! ...
- 深入剖析Android四大组件(一)——Activity生命周期具体解释
1.管理Activity的生命周期 不管是正在执行的Activity还是没有执行的Activity,它们都接受Android的框架管理,这使得Activity处于不同的生命周期. ①Activity的 ...
- 运用smali自己主动注入技术分析android应用程序行为
如今android开发人员社区里,除了app开发外,还有非常多周边的工具类产品,比方安全.性能等,app产品 已经出现了巨无霸,可是工具类的产品.眼下还没有出现规模比較大的公司,大部分还处于创业阶段, ...
- 弹出框中选项卡的运用(easyUI)
先看一下页面效果: 此处有两个知识点:一个是弹出框的运用,一个是选项卡的运用 分析一下该HTML代码,最外面一个div是弹出框的,默认是关闭状态,可通过ID来控制弹出框的开关,该div的样式是easy ...