因为在写一个前后台留言板的时候,使用了node框架express,并结合了express的art-template模板引擎,有些地方不懂,看了官方API和各种博客后.... emmm 还是没懂,要么就是大神写的看不太懂,要么就是没有注释只有代码,看的太痛苦惹
在弄明白之后,打算自己写一个,把自己没弄明白的东西写出来整理一下做个笔记,或许还有跟我一样总是犯些沙雕错误的沙雕网友能看到呢...
目录大概是这样子的:
结构
铺页面
用bs写好首页和留言页后,大概长这样:
当然还咩有把数据渲染上去
html中的模板引擎写法
home.html
post.html
首先先在npm里下好了需要的依赖
这里没有图惹,是express art-template bootstrap express-art-template body-parser这样子
创建好服务器
加载了express和body-parser
const express=require("express");
const bodyParser=require("body-parser");
let app=express();
配置express-art-template模板
app.engine();
- 第一个参数:表示当渲染以html后缀名的文件时,使用art-template模板引擎渲染
- require("express-art-template") 相当于加载了 express-art-template 加载后用它去渲染html格式的文件
- express-art-template整合了express和art-template
app.engine("html",require("express-art-template"));
配置body-parser
body-parser 是express的post请求中用来获得请求体(请求参数)的一种第三方包
因为post请求不会再通过url传递参数了,所以就使用body-parser来获取了,配置之后会给请求中的req添加一个body属性来获取请求参数(获取页面提交表单的内容)
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json
app.use(bodyParser.json());
静态资源加载
app.use();
-
第一个参数的意思是:以node_modules开头的网络请求:
一个css文件
-
第二个参数: 这种类型的资源,会在node_modules文件夹下寻找它的文件然后加载
查看node_modules
-
./表示当前
app.use("/node_modules",express.static("./node_modules"));
写一个json
用来写留言的,json放入data 在home.html里渲染
let 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'
}
];
let data={
list:comments
};
处理请求(get,post两种方法)
app.get()
express的get方法 就是express里的路由
- 第一个参数:是你要访问的路径
- 第二个参数:函数,你要访问这个路径后做的操作
res.render(); 渲染方法
res对象本身是没有render方法的,当配置了express-art-template才会给其添加此方法
-
第一个参数:你要渲染的页面(写views目录下的相对路径) 这里的views可以通过set方法修改
查看views
记录下掉的坑,views文件是可以改变路径的,如果使用官方推荐的结构,可以默认不写
app.set("views","设置的render的默认路径")
- 第二个参数:你要渲染上去的数据(一定要是json格式)
我犯的沙雕错误:传入了一个数组...看了快半个小时才发现,真的是要哭了,对不起我的头发!
//加载主页
app.get("/",(req,res)=>{
res.render("home.html",data);
});
//加载留言页
app.get("/post",(req,res)=>{
res.render("post.html");
});
现在用数据已经把home.html和post.html渲染好啦 大概长这样:
这里可以用端口号访问了,点击发布留言进入到post.html,输入留言了
home.html
输入留言后,点击post.html中的submit提交的数据,这里就得到提交的数据做处理,再跳转回首页显示
app.post(); express里的post方法
res.redirect();express里封装好的重定向方法,参数是重定向的路径
req.body就获得到了我在页面提交数据传递过来的参数,然后再添加一个键值对,把这条新提交的数据添加入存留言的那个json
app.post("/mes",(req,res)=>{
//post方法获取到了请求参数
// console.log(req.body);
//req.body.dateTime 添加一个键值对
req.body.dateTime="2015-10-16";
comments.unshift(req.body);
//重定向 参数是重定向的路径
res.redirect("/");
});
写个端口号
app.listen();
app.listen(7000);
就写完了~
大概长这样了,没有数据库,没有专门保存数据的文件,只是用来学习express和模板引擎的一个练习,虽然很菜,但还是觉得自己棒棒的,嗯 干巴爹
嘿嘿
QQ图片20181127195841.png
网友评论