初始化一个Express项目
首先新建一个目录mkdir myblog,在该目录下运行npm init 生成package.json
然后安装express,加--save写入package.json
npm i express@4.14.0 --save
新建index.js并写入:
var express = require('express');
var app = express(); app.get('/', function(req, res) {
res.send('hello, express');
}); app.listen(3000);//req.query
: 解析后的 url 中的 querystring,如?name=haha
,req.query 的值为{name: 'haha'}
//req.params
: 解析 url 中的占位符,如/:name
,访问 /haha,req.params 的值为{name: 'haha'}
//req.body
: 解析后请求体,需使用相关的模块,如 body-parser,请求体为{"name": "haha"}
,则 req.body 为{name: 'haha'}
文件结构如下:
然后全局安装supervisor并启动:
npm install -g supervisor
supervisor --harmony index supervisor 会监听当前目录下 node 和 js 后缀的文件,当这些文件发生改动时,supervisor 会自动重启程序 安装一个模版引擎ejs:
npm i ejs --save 此时各文件代码如下:
index.js:
var path = require('path');
var express = require('express');
var app = express();
var indexRouter = require('./routes/index');
var userRouter = require('./routes/users'); app.set('views', path.join(__dirname, 'views'));// 设置存放模板文件的目录
app.set('view engine', 'ejs');// 设置模板引擎为 ejs app.use('/', indexRouter);
app.use('/users', userRouter); app.listen(3000);
routes/index.js:
var express = require('express');
var router = express.Router(); router.get('/', function(req, res) {
res.send('hello, express');
}); module.exports = router;
routes/users.js:
var express = require('express');
var router = express.Router(); router.get('/:name', function(req, res) {
res.render('users', {
name: req.params.name
});
}); module.exports = router;
views/header.ejs
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {padding: 50px;font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;}
</style>
</head>
<body>
views/footer.ejs
</body>
</html>
views/users.ejs:
<%- include('header') %>
<h1><%= name.toUpperCase() %></h1>
<p>hello, <%= name %></p>
<%- include('footer') %>
运行:
访问localhost:3000/users/richard:
https://maninboat.gitbooks.io/n-blog/content/book/3.3%20%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E.html
初始化一个Express项目的更多相关文章
- 新建一个express项目的流程
1.先创建一个文件夹,然后创建一个项目,默认有一个:package.json 文件 #初始化项目 npm init 2.初始化项目会出现一个默认的提醒 #这个实用程序将指导您创建一个包,json文件. ...
- 初始化一个vue项目
1.安装node 端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安 ...
- Node.js--安装express以及创建第一个express项目(windows)
1.根据新版的express出现了安装器的概念,安装express需要两个步骤(命令行找到nodejs目录全局安装): (1)npm install -g express@4.15.0 (也可省略 ...
- 如何用vue-cli初始化一个vue项目
单文件组件和vue-loader 解析打包.vue文件 vue为了能够使我们在项目开发中对组件进行更好的维护,提供了一个单文件组件系统,vue把每一个独立的组件放在一个.vue的文件中,在这个文件中提 ...
- 初始化一个React项目(TypeScript环境)
React将由三部分组成,其中,Redux是应用状态管理服务,React-Router用于路由映射,React View用于显示界面. 我们使用Facebook推荐的create-react-app来 ...
- 使用Go module和GoLand初始化一个Go项目
我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 简介 Golang是一门优秀的语言,特别是在并发编程上,得益于它的协程和channel等,非常方便易用.它通过go m ...
- webpack 4.x 从零开始初始化一个vue项目
创建目录 项目名称: vue-init app css reset.sass js home index.vue router index.js main.js App.vue views index ...
- 初始化一个React项目
1.create-react-app是一个通过npm发布的安装包,在确认Node.js和npm安装好之后,输入下面命令创建. 2.安装结束后,使用下面命令创建应用目录. 3.打开目录 4.运行项目 5 ...
- vue学习笔记-初始化一个vue项目(1)
1.cnpm install -g vue-cliUsage:vue init <template-name> <project-name> 2.我们一般使用webpack模版 ...
随机推荐
- Ajax的学习记录
Ajax学习笔记 1.同步与异步同步:客户端发送请求到服务端,当服务器返回响应之前,客户端都处于等待卡死状态异步:客户端发送请求到服务端,当服务器返回响应之前,客户端可以随意做其他事情,不会卡死 2. ...
- 1047: [HAOI2007]理想的正方形
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4075 Solved: 2277[Submit][Status][Discuss] Descript ...
- 自动化测试 ubuntu多设备连接不识别
环境: ubuntu系统 usb2.0 16个口集线器 遇到问题: 连接手机到第11台设备时出现adb devices不显示的现象导致无法通过adb操作 问题排除思路; 1.通过dmesg查看设备连接 ...
- java 获取request中的请求参数
1.get 和 post请求方式 (1)request.getParameterNames(); 获取所有参数key后.遍历request.getParameter(key)获取value (2)re ...
- forEach 以及 IE兼容
语法 array.forEach(function(currentValue, index, arr), thisValue) 参数 参数 描述 function(currentValue, in ...
- 一个简单的linux下设置定时执行shell脚本的示例
很多时候我们有希望服务器定时去运行一个脚本来触发一个操作,比如说定时去备份服务器数据.数据库数据等 不适合人工经常做的一些操作这里简单说下 shell Shell俗称壳,类似于DOS下的command ...
- eclipse projectExplorer视图(以包的方式显示)与navigator视图切换(以文件夹的方式显示)及树状视图与平面视图的切换
projectExplorer与navigator的切换 projectExplorer视图效果 想要此视图效果步骤如下: 分割------------------------------------ ...
- aop配置问题引发的报错
今天在使用注解配置aop时出现了几次的错误 INFO - Refreshing org.springframework.context.support.ClassPathXmlApplicationC ...
- Python 正则表达式 search vs match
search()和match()函数都是正则表达式中的匹配函数,二者有何区别呢? 1.match()从string的开始位置进行正则匹配,即从0位置开始匹配,若匹配上则返回一个match对象,否则返回 ...
- python2与python3的区别,以及注释、变量、常量与编码发展
python2与python3的区别 宏观上: python2:源码不统一,混乱,重复代码太多. python3:源码统一标准,能去除重复代码. 编码上: python2:默认编码方式为ASCII码. ...