包介绍
- express: 是nodeJS的一个Web框架
- nodemon: 是用来nodeJS改变代码时自动重启的
- morgan: express记录日志的中间件
- babel-cli: 转化js代码
babel-preset-es2015, babel-preset-stage-0 是babel转化js语法的两种规则
项目准备
为node.js项目安装nodemon自启动插件, babel插件
npm install nodemon babel-cli babel-preset-es2015 babel-preset-stage-0 -y
初始化node.js项目
mkdir nodeJSExpressProject
cd nodeJSProject
npm init -y
配置package.json
配置项目启动脚本命令start
"scripts": {
"start": "./node_modules/.bin/nodemon --exec babel-node index.js"
},
配置babel
关于babel的相关知识, 可以到这里去看http://www.ruanyifeng.com/blog/2016/01/babel.html
在项目中添加.babelrc文件
在里面写上
{
"presets": ["es2015", "stage-0"]
}
执行start 启动项目
npm start
安装express
首先看看当前express有什么版本
npm view express versions --json
选择一个版本, 比如最新的5.0.0-alpha.6
安装express
npm install express@5.0.0-alpha.6 --save
安装express日志中间件
npm install morgan --save
morgan中间件是用来记录请求日志的. 客户端请求的网址和参数都会记录下来.
关于一些中间件的问题, 可以参考一下这篇文章https://www.cnblogs.com/yangyabo/p/5401812.html
开始写项目(评论留言板项目)
创建程序入口 index.js
import express from 'express'
import morgan from 'morgan'
// 创建app作为使用express框架的入口
const app = express()
// 使用morgan日志中间件
app.use(morgan('dev'))
// 监听路由
app.get("/", (request, response) => {
response.send("Hello~~")
})
// 监听端口
app.listen(3000, () => {
console.log("Listen port : 3000");
})
使用ejs视图模板
给项目添加ejs依赖
npm install ejs --save
node ejs 是一个express模版解析引擎，用于解析html模版生成对应的html的解析器。语法和php有些类似，语法比较直观。 ejs的使用可以说比较容易，可能起初接触的时候并不知道该如何下手，但其实在ejs中，'<% %>'中可以直接编写javascript代码，使用javascript的各种原生函数。同时由express中的response.render函数所传过来的变量也可以直接使用。
ejs模板用法可以参考这里http://www.jianshu.com/p/0bc6c2d7a502
在项目中设置视图模板和视图路径
import express from 'express'
import morgan from 'morgan'
//----------------增加代码---------------------
// 要给视图模板使用path模块
import path from 'path'
//-----------------------------------------
// 创建app作为使用express框架的入口
const app = express()
// 使用morgan日志中间件
app.use(morgan('dev'))
//---------------增加代码---------------------
// 设置视图path
app.set('views', path.resolve(__dirname, 'views'))
// 设置视图引擎
app.set('view engine', 'ejs')
//-----------------------------------------
// 监听路由
app.get('/', (request, response) => {
// 渲染视图
response.render('index')
})
// 监听端口
app.listen(3000, () => {
console.log("Listen port : 3000");
})
如上述代码, 因为设置了视图所在路径为'views'
所以在根目录中添加views文件夹, 里面放置视图模板文件
建立视图文件
在根目录的views文件夹里新建index.ejs文件, 在里面写个简单的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Express</title>
</head>
<body>
<h1>Hello~你好</h1>
</body>
</html>
刷新, 即可在访问web应用根网址'/'时, 展示index.ejs视图
定义route路由
监听一个新的路由, 就要有对应的视图文件
import express from 'express'
import morgan from 'morgan'
// 要给视图模板使用path模块
import path from 'path'
// 创建app作为使用express框架的入口
const app = express()
// 使用morgan日志中间件
app.use(morgan('dev'))
// 设置视图path
app.set('views', path.resolve(__dirname, 'views'))
// 设置视图引擎
app.set('view engine', 'ejs')
// 监听路由
app.get('/', (request, response) => {
// 渲染视图
response.render('index')
})
//---------------增加代码---------------------
app.get('/comments/new', (request, response) => {
response.render('comments/new')
})
//-----------------------------------------
// 监听端口
app.listen(3000, () => {
console.log("Listen port : 3000");
})
在views中建立comments/new.ejs文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>New Comments</title>
</head>
<body>
<form method="post">
<textarea name="comment" rows="8" cols="80"></textarea>
<input type="submit" value="Comment">
</form>
</body>
</html>
于是访问http://localhost:3000/comments/new时, 会出来新建评论的页面.
提交评论功能(后台逻辑)
这里我们需要使用到body-parser中间件,
body-parser实现的�要点如下：
- 处理不同类型的请求体：比如text、json、urlencoded等，对应的报文主体的格式�不同。
- 处理不同的编码：比如utf8、gbk等。
- 处理不同的压缩类型：比如gzip、deflare等。
- 其他边界、异常的处理。
首先向项目中添加body-parser中间件
npm install body-parser --save
然后在项目中使用body-parser中间件
import express from 'express'
import morgan from 'morgan'
// 要给视图模板使用path模块
import path from 'path'
// 导入body-parser
import bodyParser from 'body-parser'
// 创建app作为使用express框架的入口
const app = express()
//---------------增加代码---------------------
// 构建一个本地评论数组
let comments = []
// 将本地评论数组放入本地local中
app.locals.comments = comments
//----------------------------------------
// 使用morgan日志中间件
app.use(morgan('dev'))
//---------------增加代码---------------------
// 使用body-parser中间件
app.use(bodyParser.urlencoded({ extended: false }))
//----------------------------------------
// 设置视图path
app.set('views', path.resolve(__dirname, 'views'))
// 设置视图引擎
app.set('view engine', 'ejs')
// 监听路由
app.get('/', (request, response) => {
// 渲染视图
response.render('index')
})
app.get('/comments/new', (request, response) => {
response.render('comments/new')
})
//---------------增加代码---------------------
app.post('/comments/new', (request, response) => {
if (!request.body.comment) {
response.status(400).send("Do you have something to say???")
return
}
// 本地数组存入信息
comments.push({
comment: request.body.comment,
created_at: new Date(),
})
// 进行重定向
response.redirect('/comments')
})
//-----------------------------------------
// 监听端口
app.listen(3000, () => {
console.log("Listen port : 3000");
})
评论视图
跳转到comment/index , 那么我们应该在views/comments/index.ejs文件里写出评论列表的视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Comments</title>
</head>
<body>
<h1>Comments</h1>
<% comments.forEach((comment) => { %>
<div>
<%= comment.comment %>
<span style="color: #ccc"><%= comment.created_at %></span>
</div>
<% }) %>
</body>
</html>
注意模板文件的语法
套用js使用<% %>
输出使用<%= %>
具体语法可以参考这里 http://www.jianshu.com/p/0bc6c2d7a502
网友评论