node.js express框架
一、npm下载express框架模块
①：当前文件夹初始化npm
npm init
②：下载express模块
npm install express
③：js中引入模块
var express = require("express");
④：创建服务器
var app = express();
⑤：接受响应并反馈数据渲染到界面
app.get("/",function(req,res){
res.send("我是响应给客户端的一个字符串，自从用来express之后我再也不用设置请求头的字符编码啦！~~~");
}
⑥：启动服务器
app.listen(3000,function(){
console.log("running....");
})
使用express框架创建服务区，响应数据不用采取原始方法中的设置请求头去设置字符编码啦。
完整代码：
/* 安装 初始化 引入 */
var express =require("express");
/* 创建服务器 */
var app = express();
/* 接受请求并反馈数据渲染到界面*/
app.get("/",function(req,res){
res.send("我是响应给客户端的一个字符串，自从用来express之后我再也不用设置请求头的字符编码啦！~~~");
})
app.listen(3000,function(){
console.log("running....");
})
cmd运行如下：
全局下载nodemon不用每次都启动服务器关闭服务器，自动热加载。
express.png
运行客户端如下：
端口号3000
客户端.png
二、界面使用模板引擎，采用express框架进行页面渲染数据。
要遵循express开发规则，项目结构。
视图都写在views文件夹中。
资源都写在public文件夹中。
项目结构.png
使用express框架渲染页面准备工作：
1.express 框架模块
2.art-template 模板引擎
3.express-art-template 框架模板
开始渲染一波~~
①：引入express框架模板
②：创建服务器应用
③：引入框架模板设置引擎文件格式
④：接受请求并响应，同时渲染
⑤：开启服务器
var express = require("express");
/* 创建服务器应用 */
var app = express();
/* 引入框架-模板 */
app.engine("html",require("express-art-template"));
/* 获取请求并响应数据，同时渲染，方便的很emm */
app.get("/",function(req,res){
res.render("render.html",{
name:"小可爱" //渲染render.html文件中的name为小可爱
})
})
app.listen(3000,function(){
console.log("running.........");
})
看一下喵~
render.html
<body>
我是：{{name}}
</body>
render.html在本地打开如下：
本地.png
经过主文件渲染：
cmd先running一下
cmd.png
看一下界面：
端口.png
三：昨天很懵逼的留言板。
昨天很懵逼的留言板，今天感觉萌萌哒。
1.首先准备项目结构
项目结构.png
html文件都在views文件中。因为没有什么资源所以没有写public文件夹。
主js文件目录等级和views、public一致。
固定结构，呵tui~
因为懵逼主文件写在哪里，浪费了好长时间！！！
下载模板，初始化的包。...
2.下载好需要的模板
记得初始化再下载。
①：express框架模块
②：art-template 模板引擎
③： express-art-template 框架模板引擎
3.写好两个界面。
界面中有数据部分，通过主文件js加载。
注意写法，循环，传输数据，对象点语法。
homePage界面。
<body>
<h1>留言板</h1>
<a href="./imsg.html">发表留言</a>
<!-- 这里是跳转 -->
<div class="main">
<!-- 这里是模板引擎 -->
<!-- each 为循环 comments为循环数据 -->
{{each comments}}
<li>
<!-- 传入数据comments为数组对象。所有name为$value.name -->
{{$value.name}}说：{{$value.msg}}-------发表于：{{$value.date}}
</li>
{{/each}}
</div>
</body>
本地运行为这个样子：
本地.png
imsg.html界面
form表单提交数据。
设置name注意一下下奥。
<body>
<!-- a标签跳转 -->
<a href="./homePage.html">首页</a>
<h1>发表评论</h1>
<!-- action 提交到重定向的中间层 提交方式为get -->
<form action="/store" method="get">
<label for="input_name">名字</label>
<!-- name的值为提交数据的时的数据名称 -->
<input type="text" name="name" placeholder="请输入您的名字">
<br />
<label for="input_message">留言</label>
<textarea name="msg" cols="30" rows="10" minlength="5" maxlength="200"></textarea>
<br />
<input type="submit" value="发表留言">
</form>
</body>
这里就没布局，也没有什么注意的地方，就不截图啦。很平常的一样 一样。
3.写主文件啦！
①：引入express，url。
②：创建服务器应用。
③：创建引擎。
④：暴露views文件夹，实现跳转。
⑤：初始化数据。
⑥：接收请求并渲染数据。
⑦：设置中间层重定向数据。（这里很关键。防止刷新多次加载数据。）
⑧：开始服务器。
代码如下：
* 引入express框架 */
var express = require("express");
/* 创建服务器应用 */
var app = express();
var url = require("url");
/* 引入框架引擎——模板模块 */
app.engine("html",require("express-art-template"));
/* 初始化数据为数组格式。 */
var comments=[
{
name:'lee',
msg:'nice',
date:new Date()
}
];
/* 获取请求并渲染 */
/* 当打开这个首页的时候将数据渲染到homePage页面上 */
app.get("/",function(req,res){
res.render("homePage.html",{
comments:comments //渲染数组
})
})
/* 将views文件夹暴露出来 */
app.use(express.static('views'));
/* 设置中间层 重定向数据 */
app.get("/store",function(req,res){
var parseObj = url.parse(req.url,true);//获取url对象
var com = parseObj.query;//获取到传输过来的数据
var obj={
'name':com.name,
'msg':com.msg,
'date':new Date()
}
comments.unshift(obj);
res.statusCode = 302;
res.setHeader('Location','/');
res.send();
})
/* 开启服务器 */
app.listen(3000,function(){
console.log("running.........");
})
emm设置中间层比较重要，单独再给问了高金桥，嘎嘎嘎个~
是这个样子的~
一句一句的写一下。
1.这个是。获取到form表单提交过来的数据。
app.get("/store",function(req,res){}
注意看上面第二个界面form表单提交的位子是给了srore。
<form action="/store" method="get">
2.获取url对象，打印看一下下。
var parseObj = url.parse(req.url,true);//获取url对象
console.log(parseObj)
在第二个界面中填写了标题和留言内容，提交。
打印这个url url.parse是转成我们看得懂的格式
打印url.png
可以看到我填进去的数据都在query中。再获取到这个query就可以啦。
3.综上，获取传输过来的数据。
var com = parseObj.query;//获取到传输过来的数据
4.定义一个对象，将传入的值存起来，再通过时间对象构造函数添加当前时间。
var com = parseObj.query;//获取到传输过来的数据
var obj={
'name':com.name,
'msg':com.msg,
'date':new Date()
}
5.现在把新创建的对象，添加到原始数据中。就可以显示啦。
comments.unshift(obj);
6.重定向store
通过状态码重定向。302就是重定向这个emm
把store中的数据定向到首页homePage.html中
然后对界面进行渲染。
res.statusCode = 302;
res.setHeader('Location','/');
res.send();
解释通透啦！多看看！
