Node.js(day4) (2)

然后使用request.body就能获取到post提交的参数对象。
这里说一下app.use([path,] callback [, callback...])这一方法,该方法的作用是在指定的路径下安装指定的中间件函数,即每当请求路在是指定路径下时就执行中间件函数。
其中:
#参数path为可选参数,默认为/,表示执行根路径,即这个路劲下的所有请求都会执行。
#callback为中间件函数。如果需要执行多个函数,使用,隔开即可。
所以,use函数相当于一个过滤器,一般是增加一些属性或功能方便我们使用。
上面两个中间件函数:

// 创建 application/json 解析 var jsonParser = bodyParser.json() // 创建 application/x-www-form-urlencoded 解析 var urlencodedParser = bodyParser.urlencoded({ extended: false })

我们可以理解为,body-parser的这两个方法为response添加了body属性,值为post提交的参数对象。

四、案例:学生信息CRUD(增删改查) 1.准备相关文件

在bootstrap上随便扒的页面:

主页index.html

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <meta content=""> <meta content=""> <link href=""> <title>Dashboard Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="http://www.likecs.com/public/css/bootstrap.min.css"> </head> <body> <h2>学生信息表</h2> <h2> <button><a href="http://www.likecs.com/students/add">添加学生</a></button> </h2> <table> <thead> <tr> <th>#Id</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>{{if $value.gender==0}}男{{else}}女{{/if}}</td> <td>{{$value.age}}</td> <td>{{$value.hobbies}}</td> <td><a href="http://www.likecs.com/students/modify?id={{$value.id}}"> 修改 </a> |<a href="http://www.likecs.com/students/delete?id={{$value.id}}"> 删除 </a></td> </tr> {{/each}} </tbody> </table> </body> </html>

add.html

<!DOCTYPE html> <html> <head> <title>添加学生</title> <meta charset="utf-8"> <link href="http://www.likecs.com/public/css/bootstrap.min.css"> </head> <body> <h1>学生信息</h1> <form role='form' method="post" action="http://www.likecs.com/students/add"> <div> <label>姓名</label> <input type="text" placeholder="请输入你的大名"> </div> <div> <label>性别</label> <div> <label> <input type="radio" value="0" checked> 男 </label> </div> <div> <label> <input type="radio" value="1"> 女 </label> </div> </div> <div> <label>年龄</label> <input type="number" min="0" max="800" value="18"> </div> <div> <label>爱好</label> <input type="text" placeholder="请输入你的爱好"> </div> <button type="submit">Submit</button> </form> </body> </html>

bootstrap.min.js自行下载

2.路由设计

路由可以理解为收发网络的设备,可以抽象为一个映射关系表。页面的请求和执行的回调函数也是一一对应的,为了方便管理,我们一般会进行的页面请求整体设计,也可以称为路由设计。

功能 请求方式 url get参数 post参数
学生信息页   get   /students   -   -  
增加学生页   get   /students/add   -   -  
增加学生   post   /students/add   -   id&name&age&gender&hobbies  
删除学生   get   /students/delete   id   -  
修改学生页   get   /students/modify   id    
修改学生   post   /students/modify   -   id&name&age&gender&hobbies  

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpzpzf.html