最近开始学习node，然后发现入门还是挺难的，视频里老师说如果没有一定的后端基础是比较难学的，诶，那也没办法，我一个学前端的不至于去学一套后端再来学node吧，就慢慢来吧
表单这一块我一直没怎么认真学，因为确实有些绕
问学姐要了一些资料，就这样学嘛
资料来源是黑马程序员，写完的时候也会说一下
我会用一个小例子来解释这个知识点
首先看一下文件目录：
-
node_modules里存放的就是需要的各种模块
-
public里面是一些资源 以及bootstrap等组件
-
views放置各种页面：
- 404.html 是在路由出错的时候显示的
- get就是放表单的页面
- index是显示表单提交后显示出来的各项评论的页面
-
app.js是写后台代码的文件
-
package-lock.json是配置文件
index.html页面如下
点击发表留言会跳转到get.html页面 如下
在此页面输入内容点击发表会跳转到index.html页面
如下
点击发表后 如下
功能展示完毕了
下面开始在代码中解释
index.html和404.html都是次要的
主要解释app.js和get.html
其中对app.js内代码的理解是重点
为了让基础很少的朋友能够看懂 我会尽量多解释一些基础的东西
// 引入http模块 用于创建服务端
var http = require('http')
// 引入url模块 便于打包get请求中路径里带的参数和值到一个对象中 以及将路径和参数分离
var url = require('url')
// 引入文件模块 用于读取index.html get.html 和 404.html
var fs = require('fs')
// 引入模板引擎 处理数据 将数据渲染进页面 现在我也不熟练了 很久之前学的 需要复习了
var template = require('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'
}
]
// 简写 创建服务端
http.createServer(function (req, res) {
// 将路径进行解析，true 表示 将参数进行解析 转换成一个对象 存在parseObj.query中
var parseObj = url.parse(req.url, true)
// 单独获取不包含查询字符串的路径部分（该路径不包含 ? 之后的内容）
var pathname = parseObj.pathname
// 默认显示index
if (pathname === '/') {
fs.readFile('./views/index.html', function (err, data) {
if (err) {
return res.end('404 Not Found.')
}
// 模板引擎 将服务端的comments赋值(这样一个说法吧)给页面中的comments
var htmlStr = template.render(data.toString(), {
comments: comments
})
res.end(htmlStr)
})
} else if (pathname === '/get') {
// 跳转到 get 页面
fs.readFile('./views/get.html', function (err, data) {
if (err) {
return res.end('404 Not Found.')
}
res.end(data)
})
} else if (pathname.indexOf('/public') === 0) {
// 访问public中的资源 (不重要
fs.readFile('.' + pathname, function (err, data) {
if (err) {
return res.end('404 Not Found.')
}
res.end(data)
})
} else if (pathname === '/pinglun') {
//get 页面发出表单提交请求了
// 将解析出的参数进行组装
// 从parseObj中取出query(是个对象)
var comment = parseObj.query
comment.dateTime = '2020-10-17 9:59:30'
// 插入列表
comments.unshift(comment)
// 状态码设置为 302 重定向 必须有
res.statusCode = 302
// 响应头设置重定向方向 index
res.setHeader('Location', '/')
// 结束
res.end()
} else {
fs.readFile('./views/404.html', function (err, data) {
if (err) {
return res.end('404 Not Found.')
}
res.end(data)
})
}
})
// 监听端口号3002
.listen(3002, function() {
console.log('running...')
})
完整路径和 路径打印出来是这样的
parseObj 和 parseObj.query打印出来是这样的
这里我们只看最后一行就可以了
可见 url.parse(req.url, true) 这一行代码将路径进行了一些操作 将传来的参数封装进了parseObj.query这个对象中
这里解释一下，当点击get页面的发表后 表单参数进入了 url ，由req携带进入后台，所以 req.url可以被解析。
后台检测到pathname是‘/pinglun’ 然后开始处理传过来的数据，操作一番后重新渲染index页面显示的数据
不要在意时间，时间是在后台写死的，没有处理过
再来看一下get页面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header container">
<div class="page-header">
<h1><a href="/">首页</a> <small>发表评论</small></h1>
</div>
</div>
<div class="comments container">
// 这里是重点 表单提交到‘/pinglun’ 方式为 ‘get’
<form action="/pinglun" method="get">
<div class="form-group">
<label for="input_name">你的大名</label>
// 表单内容的 name属性 必须与index页面的相应变量一致 否则会出错
<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>
这个小例子 基本算是学完了
以后复习用比较不错
也适合新人看一看
毕竟我也是新手
代码来源：黑马程序员