Expresshtml
原生的 http 在某些方面表现不足以应对咱们的开发需求,因此咱们须要使用框架来加快咱们的开发效率。框架的目的就是提升效率,让咱们的代码更高度统一前端
在Node 中,有不少 Web 开发框架,咱们这里以学习express
为主node
参考网址:http://expressjs.com/git
npm install --save express
var express = require('express') var app = express() app.get('/',function(req,res){ //推荐使用express的方法 res.send("hello world") }) app.listen(3000,function(){ console.log("express app is running ...") })
路由器github
请求方法express
请求路径npm
请求处理函数json
get:数组
//当以 GET 方法请求 / 的时候,执行对应的处理函数 app.get('/',function(req,res){ res.send('hello world!') })
post:浏览器
//当以 POST 方法请求 / 的时候,执行对应的处理函数 app.post('/',function(req,res){ res.send('Get a POST request') })
// /public资源 app.use(express.static('public')) // /files资源 app.use(express.static('files')) // /public/xxx app.use('/public',express.static('public')) // /static/xxx app.use('/static',express.static('public')) app.use('/static',express.static(path.join(__dirname,'public')))
art-template
模板引擎安装:
npm install --save art-template npm install --save express-art-template
配置:
//默认art app.engine('art', require('express-art-template')) //修改后html app.engine('html', require('express-art-template'))
使用:
//使用修改后html的配置 app.get('/',function(req,res){ //express 默认会去项目中的 views 目录中找 index.html res.render('index.html',{ title:'hello world' }) })
注意:若是但愿修改默认的views
视图渲染存储目录,能够:
//第一个参数 views 千万不要写错 app.set('views',目录路径)
Express内置了一个API,能够直接经过req.query
来获取
req.query
注:在浏览器输入的地址,默认都是get请求
在Express中没有内置获取表单POST请求体的API,这里咱们须要使用一个第三方包:body-parser
安装:
npm install --save body-parser
配置:
var express = require('express') //0.引包 var bodyParser = require('body-parser') var app = express() //1.配置 body-parser //只要加入这个配置,则在 req 请求对象上会多出来一个属性:body //也就是说能够直接经过 req.body 来获取表单 POST 请求体数据了 // parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })) // parse application/json app.use(bodyParser.json())
使用:
app.use(function (req, res) { res.setHeader('Content-Type', 'text/plain') res.write('you posted:\n') //能够经过 req.body 来获取表单 POST 请求体数据 res.end(JSON.stringify(req.body, null, 2)) })
注意:req.body
返回的对象属性值都是字符串
咱们这里可使用一个第三方命名工具:nodemon
来帮助咱们解决频繁修改代码重启服务器问题
nodemon
是一个基于Node.js开发的一个第三方命令行工具,咱们使用的时候须要独立安装:
#在任意目录执行该命令均可以 #也就是说,全部须要 --global 来安装的包均可以在任意目录执行 npm install --global nodemon
安装完毕以后,使用:
#以前使用 node node app.js #如今使用 nodemon nodemon app.js
只要是经过nodemon app.js
启动的服务,则它会监视你的文件变化,当文件发生变化的时候,它会自动帮你重启服务器
模块如何划分:
模块职责要单一
Vue
angular
React
也很是有利于学习前端三大框架
初始化
模板处理
router.js:
/* router.js 路由模块 职责: 处理路由 根据不一样的请求方法+请求路径设置具体的请求处理函数 */ // 模块职责要单一,不要乱写 // 划分模块的目的就是加强项目代码的可维护性,提高开发效率 var express = require('express') //1.建立一个路由容器 var router = express.Router() //2.把路由都挂载到 router 路由容器中 router.get('/students', function(req,res){ }) router.get('/students/new',function(req,res){ res.render('new.html') }) router.post('/students/new',function(req,res){ }) router.get('/students/edit',function(req,res){ }) router.post('/students/edit',function(req,res){ }) router.get('/students/delete',function(req,res){ }) //3.把 router 导出 module.exports = router
app.js:
var router = require("./router") //挂载路由 app.use(router)
/* student.js 数据操做文件模块 职责:操做文件中的数据,只处理数据,不关心业务 */ /* 获取全部学生列表 return 数组 */ exports.find = function(){ } /* 添加保存学生 */ exports.save = function(){ } /* 更新学生 */ exports.update = function(){ } /* 删除学生 */ exports.delete = function(){ }
处理模板
配置开放静态资源
配置模板引擎
简单路由: /students 渲染静态页出来
路由设计
提取路由模块
因为接下来一些新的业务操做都须要处理文件数据,因此咱们须要封装 student.js
先写好 student.js 文件结构
查询全部学生列表的 API find
findById
save
updateById
deleteById
实现具体功能
经过路由收到请求
接收请求中的数据(get、post)
req.query
req.body
使用数据操纵 API 处理数据
根据操做结果给客户端发送响应
业务功能顺序
列表
添加
编辑
删除
ES6的两个重要API:find、findIndex