-
在Express中使用art-template模板引擎
var express = require('express')
var app = express()
app.use('/public/',express.static('./public'))
/* 在express配置使用art-template模板引擎
* 1.安装 npm install art-template --save
* npm install express-art-template --save
* 2.配置使用 art-template 模板引擎
* app.engine('html',require('express-art-template'))
* 第一个参数表示 当渲染以 .html 结尾的文件时，使用 art-template 模板引擎
* express-art-template 是专门用来在express中 把 art-template 整合到 express中
*/
app.engine('html',require('express-art-template'))
/* 在express中 res.render方法（渲染） 在配置模板引擎之后可用
* 语法： res.render('html模板名',{模板数据})
* 第一个参数不能写路径，express默认会在项目的views目录中查找该html模板文件
* 即 尽量把所有视图文件 都放在项目的views目录下
* 如果想修改views的默认路径 使用 app.set('views',路径)
* {模板数据} 参数可选 没有第二个参数 则默认渲染整个html页面
*/
app.get('/',function(req,res){
//express会默认去项目中的views目录下查找404.html文件
res.render('404.html')
})
app.get('/post',function(req,res){
res.send('post page')
})
app.listen(3000,function(){
console.log('express app is running ...')
})-
使用express重写留言板：
//app.js
var express = require('express')
var app = express()
app.use('/public/', express.static('./public'))
app.engine('html', require('express-art-template'))
var comments = [{
name: '张三',
message: '今天天气不错！',
dateTime: '2015-10-16'
},
{
name: '张三2',
message: '今天天气不错！',
dateTime: '2015-10-16'
},
{
name: '张三3',
message: '今天天气不错！',
dateTime: '2015-10-16'
},
{
name: '张三4',
message: '今天天气不错！',
dateTime: '2015-10-16'
},
{
name: '张三5',
message: '今天天气不错！',
dateTime: '2015-10-16'
}
]
app.get('/', function(req, res) {
res.render('index.html', {
comments: comments
})
})
app.get('/post', function(req, res) {
res.render('post.html')
})
app.get('/pinglun', function(req, res) {
//req.query 中封装了表单提交的数据
console.log(req.query)
var comment = req.query
var dateTime = new Date()
comment.dateTime = dateTime
comments.unshift(comment)
res.redirect('/') //重定向 返回index页面
})
app.listen(3000, function() {
console.log('express app is running ...')
})
//post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/public/lib/bootstrap/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1><a href="/">首页</a> <small>发表评论</small></h1>
</div>
</div>
<div class="comments container">
<form action="/pinglun" method="get">
<div class="form-group">
<label for="input_name">你的大名</label>
<input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name"
placeholder="请写入你的姓名">
</div>
<div class="form-group">
<label for="textarea_message">留言内容</label>
<textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5"
maxlength="20"></textarea>
</div>
<button type="submit" class="btn btn-default">发表</button>
</form>
</div>
</body>
</html>
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言本</title>
<link rel="stylesheet" href="/public/lib/bootstrap/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
<a class="btn btn-success" href="/post">发表留言</a>
</div>
</div>
<div class="comments container">
<ul class="list-group">
{{each comments}}
<li class="list-group-item">{{ $value.name }}说：{{ $value.message }} <span class="pull-right">{{ $value.dateTime }}</span></li>
{{/each}}
</ul>
</div>
</body>
</html>
-
在Express中获取post方法请求到的数据
在Express中没有内置获取表单post请求体的api 需要第三方包 body-parser
1.安装 npm install body-parser --save
2.配置
-
重写留言板2.0
var express = require('express')
var app = express()
var bodyParser = require('body-parser') //引入body-parser
app.use('/public/', express.static('./public'))
app.engine('html', require('express-art-template'))
/* 配置 body-parser 中间件（插件，专门用来解析表单 POST 请求体）
* 在配置好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())
var comments = [{
name: '张三',
message: '今天天气不错！',
dateTime: '2015-10-16'
},
{
name: '张三2',
message: '今天天气不错！',
dateTime: '2015-10-16'
},
{
name: '张三3',
message: '今天天气不错！',
dateTime: '2015-10-16'
},
{
name: '张三4',
message: '今天天气不错！',
dateTime: '2015-10-16'
},
{
name: '张三5',
message: '今天天气不错！',
dateTime: '2015-10-16'
}
]
app.get('/', function(req, res) {
res.render('index.html', {
comments: comments
})
})
app.get('/post', function(req, res) {
res.render('post.html')
})
/* post.html中 <form action="/post" method="post">
* 利用不同的请求方法(post/get) 让同一个请求路径使用多次
* 1. 获取表单提交的数据
* req.query 只能拿到get方法 请求的参数
* 2. 处理
* 3. 发送响应
* res.send 和 res.redirect express 会自动结束响应
*/
app.post('/post',function(req,res){
var comment = req.body
comment.dateTime = new Date()
comments.unshift(comment)
res.redirect('/')
})
app.listen(3000, function() {
console.log('express app is running ...')
})
-
增删改查1.0
将node_modules和public 目录公开(app.use) 获取css样式文件
将students数据存放在db.json中
使用fs读取json文件 获取到的是字符串 要将其转换成json对象
使用render对index.html进行渲染，将获取到的students数组传入
var express = require('express')
var fs = require('fs')
var app = express()
app.engine('html',require('express-art-template'))
app.use('/node_modules/',express.static('./node_modules/'))
app.use('/public/',express.static('./public/'))
app.get('/',function(req,res){
//fs.readFile 的第二个参数 可选 utf8 （也可用 data.toString()的形式转换）
//文件中读取到的对象 一定是 字符串 要将其手动转换成对象
fs.readFile('./db.json','utf8',function(err,data){
if(err){
return res.status(500).send('server error')
}
res.render('index.html',{
students:JSON.parse(data).students
//获取到的data是字符串，要将其转换成json对象的students属性
})
})
})
app.listen(3000,function(){
console.log('running...')
})-
增删改查练习：
//app.js
/*
* app.js 入门模块
* 职责：
* 创建服务 模板引擎 body-parser 解析表单 post 请求体 提供静态资源服务
* 挂载路由 监听端口启动服务
*/
var express = require('express')
var fs = require('fs')
var app = express()
var bodyParser = require('body-parser')
var router = require('./route')
app.engine('html',require('express-art-template'))
app.use('/node_modules/',express.static('./node_modules/'))
app.use('/public/',express.static('./public/'))
//配置模板引擎和body-parser 一定要在 app.user(router) 挂载路由之前
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())
app.use(router)
app.listen(3000,function(){
console.log('running...')
})//route.js
/*
* router.js 路由模块
* 职责：
* 处理路由 根据 不同的请求方法+请求路径 设置具体的请求处理函数
* 划分模块 : 增强项目代码的可维护性 提升开发效率
* 路由设计
| 请求方法 | 请求路径 | get 参数 | post 参数 | 备注 |
|----------|------------------|----------|--------------------------------|------------------|
| GET | /students | | | 渲染首页 |
| GET | /students/new | | | 渲染添加学生页面 |
| POST | /students/new | | name、age、gender、hobbies | 处理添加学生请求 |
| GET | /students/edit | id | | 渲染编辑页面 |
| POST | /students/edit | | id、name、age、gender、hobbies | 处理编辑请求 |
| GET | /students/delete | id | | 处理删除请求 |
| | | | | |
*/
var fs = require('fs')
var express = require('express')
var router = express.Router() //创建express的路由容器
var stu = require('./stu')
/*
* 渲染获取学生信息列表
*/
router.get('/students', function(req,res){
stu.getInfo(function(err,students){
if(err){
return res.status(500).send('server error')
}
res.render('index.html',{
students:students
})
})
})
//渲染添加学生页面 get
router.get('/students/new',function(req,res){
res.render('new.html')
})
// 添加学生 post
router.post('/students/new',function(req,res){
/*
* 读取数据 req.body （字符串格式） --> 转成对象 --> 在对象中push该条数据 --> 把对象转成字符串 --> 再次写入文件
*/
stu.addInfo(req.body,function(err){
if(err){
return res.status(500).send('error')
}
res.redirect('/students')
})
})
/*渲染编辑学生信息页面 需要获取要编辑的学生id 然后使用模板渲染编辑页面
* id 信息保存在 req.query.id 中
*/
router.get('/students/edit',function(req,res){
stu.findById(parseInt(req.query.id),function(err,student){
if(err){
return res.status(500).send('server error')
}
//使用模板渲染edit.html 页面 传数据
res.render('edit.html',{
student:student
})
console.log(student)
})
})
/*
* 渲染编辑页面 post
* 先获取提交的表单数据 req.body 然后更新表单
*/
router.post('/students/edit',function(req,res){
stu.updateInfo(req.body,function(err){
if(err){
return res.status(500).send('Server error.')
}
res.redirect('/students')
})
})
/*
* 根据id删除信息
*/
router.get('/students/delete',function(req,res){
stu.delInfo(req.query.id,function(err){
if(err)
{
return res.status(500).send('Server error.')
}
res.redirect('/students')
})
})
module.exports = router//db.json
{"students":[{"id":1,"name":"张三三","gender":"0","age":"23","hobbies":"吃饭、睡觉、打豆豆"}]}//stu.js
/*
* stu 模块 封装接口函数 实现增删改查的业务
*/
var fs = require('fs')
var dbPath = './db.json'
/*
* 获取所有学生列表
*/
exports.getInfo = function(callback) {
fs.readFile(dbPath, 'utf8', function(err, data) {
/* data 是字符串
* JSON.parse(data) 将 字符串 转成 对象
* JSON.parse(data).students 获取对象中的students属性的值（数组）
*/
if (err) {
return callback(err)
}
//callback 第一个参数 是error 成功:error ===null 失败: error === 错误对象
//第二个参数是结果 成功: 数组 失败：undefined
callback(null, JSON.parse(data).students)
})
}
/*
* 添加学生信息
*/
exports.addInfo = function(student, callback) {
fs.readFile(dbPath, 'utf8', function(err, data) {
if (err) {
return callback(err)
}
var students = JSON.parse(data).students //students 是数组
student.id = students[students.length - 1].id + 1 //添加id
students.push(student) //将传入的要添加的对象push到数组中
var fileData = JSON.stringify({
students: students //将对象转成字符串
})
fs.writeFile(dbPath, fileData, function(err) { //将已经保存了新的学生信息的字符串传入文件
if (err) {
return callback(err)
}
callback(null)
})
})
}
/*
* 更新学生信息
* 传入要更新的某个学生信息对象 根据对象中的id去寻找db.json文件中对应的对象 然后更新该条信息
*/
exports.updateInfo = function(stu, callback) {
//ES6中 find 方法
fs.readFile(dbPath, 'utf8', function(err, data) {
if (err) {
return callback(err)
}
//readFile 获取到 字符串 将其转换成对象
var students = JSON.parse(data).students
//传入的stu.id是字符串 要将其转成数值
stu.id = parseInt(stu.id)
//对students的对象数组进行遍历 将id符合的对象保存到变量student中
var student = students.find(function(item) {
return item.id === stu.id
})
//遍历拷贝对象
for (var key in stu) {
student[key] = stu[key]
}
//将对象转换为字符串 存入json文件
var fileData = JSON.stringify({
students: students
})
fs.writeFile(dbPath, fileData, function(err) {
if (err) {
return callback(err)
}
callback(null)
})
})
}
/*
* 根据id查找学生信息 编辑 并返回编辑后的学生信息对象
*/
exports.findById = function(id,callback){
fs.readFile(dbPath,'utf8',function(err,data){
if(err){
return callback(err)
}
var students = JSON.parse(data).students
var result = students.find(function(item){
return item.id === id
})
//result中封装的就是要编辑的学生信息 返回
callback(null,result)
})
}
/*
* 删除学生信息
*/
exports.delInfo = function(id,callback) {
fs.readFile(dbPath,'utf8',function(err,data){
if(err){
return callback(err)
}
var students = JSON.parse(data).students //获取json字符串
var deleteId = students.findIndex(function(item){
return item.id === id
})
students.splice(deleteId,1)
var fileData = JSON.stringify({
students:students
})
fs.writeFile(dbPath,fileData,function(err){
if(err)
{
return callback(err)
}
callback(null)
})
})
}
//index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/public/css/main.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="/">学生管理 <span class="sr-only">(current)</span></a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
{{ each fruits }}
<div class="col-xs-6 col-sm-3 placeholder">
<img src="https://img-blog.csdnimg.cn/2022010620400427464.gif" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>{{ $value }}</h4>
<span class="text-muted">Something else</span>
</div>
{{ /each }}
</div>
<h2 class="sub-header">Section title</h2>
<a class="btn btn-success" href="/students/new">添加学生</a>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{{ each students }}
<tr>
<td>{{ $value.id }}</td>
<td>{{ $value.name }}</td>
<td>{{ $value.gender }}</td>
<td>{{ $value.age }}</td>
<td>{{ $value.hobbies }}</td>
<td>
<a href="/students/edit?id={{ $value.id }}">编辑</a>
<a href="/students/delete?id={{ $value.id }}">删除</a>
</td>
</tr>
{{ /each }}
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
//new.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/public/css/main.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="/students">学生管理 <span class="sr-only">(current)</span></a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h2 class="sub-header">添加学生</h2>
<form action="/students/new" method="post">
<div class="form-group">
<label for="">姓名</label>
<input type="text" class="form-control" id="" name="name" required minlength="2" maxlength="10">
</div>
<div class="form-group">
<label for="">性别</label>
<div>
<label class="radio-inline">
<input type="radio" name="gender" id="" value="0" checked> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="" value="1"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="">年龄</label>
<input class="form-control" type="number" id="" name="age" required min="1" max="150">
</div>
<div class="form-group">
<label for="">爱好</label>
<input class="form-control" type="text" id="" name="hobbies">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
//edit.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/public/css/main.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="/students">学生管理 <span class="sr-only">(current)</span></a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h2 class="sub-header">添加学生</h2>
<form action="/students/edit" method="post">
<!--
用来放一些不希望被用户看见，但是需要被提交到服务端的数据
-->
<input type="hidden" name="id" value="{{ student.id }}">
<div class="form-group">
<label for="">姓名</label>
<input type="text" class="form-control" id="" name="name" required minlength="2" maxlength="10" value="{{ student.name }}">
</div>
<div class="form-group">
<label for="">性别</label>
<div>
<label class="radio-inline">
<input type="radio" name="gender" id="" value="0" checked> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="" value="1"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="">年龄</label>
<input class="form-control" type="number" id="" name="age" value="{{ student.age }}" required min="1" max="150">
</div>
<div class="form-group">
<label for="">爱好</label>
<input class="form-control" type="text" id="" name="hobbies" value="{{ student.hobbies }}">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
1662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
