阅读 293

Node.js 实战开发-Express

Node.js的底层API会让人感觉到很繁琐,监听个get请求就要写多行代码,Express是基于Node.js的web开放框架,进行了封装,让开发者只关注业务逻辑开发,而且基于中间件开发模式,扩展性强,express 核心概念

  1. 路由
  2. 中间件
  3. 模板引擎

1.路由

1.粗略的来说支持四种类型的路由

  1. 字符串类型

  2. 字符串模板类型

  3. 正则表达式类型

  4. 参数类型

    var express = require('express') var app = express() // 字符串类型 app.get('/user', callback) // 字符串模板, 比如 /user/man, /user/woman app.get('/user/*man', callback) // 正则路由 app.get(/person$/, callback) // 路由参数 app.get('/api/:uid/:age')

2.路由拆分

路由拆分前

app.get('/user/list', callback)
app.get('/user/detail', callback)
复制代码

这就带来了问题,维护的时候都要带着 /user,可维护性太差

可以使用express.Router()进行路由拆分,路由拆分后

var express = require('express')
var app = express()
var user = express.Router()

user.get('/list', callback)
user.get('/detail', callback)
app.use('/user', user)
复制代码

基本拆法已经出来了,但是为了应对更大型的应用,我们还有分文件管理,文件目录为

|--routes
    |--index.js
    |--user.js
|--app.js
复制代码

user.js 文件写的是user的api内容

var express = require('express')
var route = express.Router()
route.get('/list', (req, res) => {
    res.end('list')
})
route.get('/detail', ( req, res ) => {
    res.end('detail')
})
module.exports = route
复制代码

index.js 作为router的入口文件

var express = require('express')
var routes = express.Router()
var user = require('./user.js')

routes.use('/user', user)
module.exports = routes
复制代码

app.js 应用入口,添加一个顶级路由来区分api

var express = require('express')
var app = express()

var routers = require('./routes/index.js')
app.use('/api', routers)
app.listen(300)
复制代码

访问地址为, 这样路由的目录就搭建好了

http://localhost:3000/api/user/list
http://localhost:3000/api/user/detail
复制代码

2. 中间件

学习express 就是一切皆是中间件,比如请求参数解析,cookie解析等

1.我们写一个简单的中间件

  • 三个参数,req 客户端请求实例,res 服务端返回实例

  • next 回调方法,当next()执行了,就进行下一个中间件,否则pedding

    var middleFunc = function( req, res, next ) { console.log( 'i am middle ware' ) next() } app.use( middleFunc ) //控制台输出 i am middle ware

2.常用中间件

  • bode-parser
  • compression
  • serve-static
  • session
  • cookie-parser
  • morgan

3.模板引擎

如果想渲染一个页面,没有模板引擎会怎么渲染,就需要将模板字符串全部写出来,然后插入到页面中渲染,复杂而容易出错

app.get('/', function(req, res ) {
    var html = '<html>若干模板字符串</html>'
    res.send( html )
})
复制代码

但是如果有了模板引擎那效率就是小马换打车,不再为模板而发愁,以ejs模板引擎为例

//新建一个view文件夹
|--view
    |--index.ejs
复制代码

app.js配置上模板引擎

app.set('views', __dirname + '/view')
app.set('view engine', 'ejs')
app.use('/', function( req, res) {
    res.render('index', {title: '首页'})
})   
复制代码

模板 index.ejs, 基本就是html语法

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div>模板引擎ejs</div>
    <%= title %>
</body>
</html>
复制代码
  • app.set是Express设置参数工具 views, 视图文件的目录,存放模板文件
  • view engine 视图模板引擎,这里是 ejs
  • res.render('index', obj)  index 是模板index.ejs 文件,obj是传入参数
  • <%= title %> 参数传入之后的展示

更多ejs 的文档参考这里 ejs.bootcss.com/#install

当然一般项目中会前后端分离,node 写服务端,vue 或者 react写客户端,或者用vue或react进行服务端渲染,之后会有相关文章,静待更新...

文章分类
前端
文章标签