Node.js无框架调用API写一个简单的留言板项目（服务端渲染） node.js的学习之路

先creat一个server,index.html是我们的模板，在node不操作dom,bom对象的，通过fs的readfile读取文件，然后res对象的end()发放，把二进制数据或者字符串还给浏览器解析。这边我们通过开放public目录，让客户端可以请求我们的公共静态数据，里面包括css，img，啥的。
先放一下文件目录跟简单代码

文章图片

var http = require('http') var fs = require('fs')http .createServer(function(req,res){ var url =req.url if (url==='/'){ fs.readFile('./views/index.html',function(err,data){ if (err) { return res.end('404 not found') } res.end(data) }) }else if (url.indexOf('/public/')===0) { // /public/css/main.css // /public/js/main.js // 统一处理： //如果请求路径是以/public/开头的，则我认为你要获取public中的某个资源 // 所以我们就直接可以把请求路径当作文件路径来进行读取 // 之前这里一直很纠结的是为什么会有else if，在我的印象中好像url选择了'/'就不会再继续执行了，但是其实是我钻牛角尖 // 因为我们这里是个服务器，会不断地接受请求，执行了第一次'/'以后，打开index.html后，会形成新的url发送请求，重建req对象，里面url也是变化的。 // console.log(url) fs.readFile('.'+url,function(err,data){ if (err) { return res.end('404 not found') } res.end(data) }) } }) .listen(3000,function(){ console.log('running') })

go on
index.html中的大体内容

- 锐客网添加 {{each dataList}} {{$value.name}}.Say:{{$value.message}} class="pull-right">{{$value.date}} {{/each}}

注意：在服务端中，文件的路径就不要去写相对路径了。因为这个时候所有的资源都是通过url标识来获取的，我的服务器开放了/public/目录，所以这里的请求路径都写成：/public/xxx
‘/’在这里就是url根路径的意思。
浏览器在真正发请求的时候会最终把http://127.0.0.1:3000拼上，不要再想文件路径了，把所有的这些路径想象成URL地址，这也是前端渲染根后端渲染的不同
后端可以控制访问文件的路径，如果把public的路径注释掉，即让这段代码失效
fs.readFile(’.’+url,function(err,data){
if (err) {
return res.end(‘404 not found’)
}
res.end(data)
})
那么就无法从url中读取到对应的文件了。再次强调，从服务端出来的href都是url，是url就要给他设定if，访问文件的权限。
回到首页渲染。现在已经用url‘/’读取文件‘index.html’，要把comments数据放到模板引擎里面，需要引进包’art-template’,

var template = require('art-template') var comments = [ { name:'zeid', message:'无形装B，最为致命', dataTime:'2020.6.1' }, { name:'brokenheaven', message:'i will get crown', dataTime:'2020.6.1' }, { name:'recovery', message:'do or die', dataTime:'2020.6.1' }, { name:'kitty', message:'i am a cat with magic power', dataTime:'2020.6.1' } ]

var htmlStr = template.render(data.toString(),{ comments:comments }) res.end(htmlStr)

看到这个变量命名了嘛。htmlStr，最后其实返回给浏览器的是字符串
我们可以看看服务器收到请求后返回的数据

文章图片

如果注释这三行

// var htmlStr = template.render(data.toString(),{ //comments:comments // })

我们得到的服务器的res.data也是字符串对象，我截图了，其实跟上面差不多

文章图片

两个不同res渲染的画面

文章图片

文章图片

emmmm。。。这边主要是服务端渲染，到了首页以后点击发表留言按钮跳转到我们留言页面~也就是post.html，当然还是通过Button的href属性通过url，然后fs.readfile（xxx,function(err,data)）实现的，后端渲染就是这样的。

文章图片

下面是post.html里面的提交表单了

Yon Name message

【Node.js无框架调用API写一个简单的留言板项目（服务端渲染）】这边的提交地址’/pinglun’,点击发表按钮以后，我们的URL请求是这样的

文章图片

这个url无法判断，后面还有动态的数据，所以只需要判断前面的/pinglun
这时候引进新的模块，'url’模块。。。里面有url.parse()方法，这个方法生成一个对象数据可以帮助解析出pathname

文章图片

图片里面那个地址就是我ball猫那个url，可以看到pathname可以把’/pinglun‘捞出来，不知道这边可不可以用正则，我还是rookie。因为数据是用户输入的，动态变化的。反正这时候我解析出pathname就可以得知用户提交数据过来了

var url = require('url') var parseObj = url.parse(req.url,true) var pathname =parseObj.pathnameelse if(pathname === '/pinglun'){ res.setHeader('Content-Type','text/html; charset=utf-8') res.end(JSON.stringify(parseObj.query)) }