app
.
use
(
express
.
static
(
path
.
resolve
(
__dirname
,
"
public
"
)))
常量配置结束之后，我们就可以在 ejs文件中引入 script 标签;
在项目目录下建立结构：
public
/scripts
/app.js
在模板中就可以引入该scripts标签，去关联app.js。
<script src=“public/scripts/app.js">
前端渲染和后端渲染（服务器端ssr）
哪个更快？ 哪个更好？
你知道他的经营模式么？
好了，那你知道那个快了么？
你知道京城一锅的限制么？
好了，那你知道前后端页面渲染的区别了么？
Express 简介及安装
官网
开发环境搭建
Yarn add babel-cli babel-preset-env express -D
需要用到es6所以用到babel去进行解析；
建立 .babelrc
{
"preset":"env"
}
配置 scripts 指令：
"
start
"
:
"
nodemon --exec babel-node index.js
”
package.json 配置详情：
{
"
name": "
express",
"
version": "
1.0.0",
"
main": "
index.js",
"
license": "
MIT",
"
devDependencies": {
"
babel-cli": "
^6.26.0",
"
babel-preset-env": "
^1.6.1",
"
express": "
^4.16.3",
"
morgan": "
^1.9.0"
},
"
scripts": {
"
start": "
nodemon --exec babel-node index.js"
},
"
dependencies": {
"
ejs": "
^2.5.7"
}
}
模板
模板，及解析引擎设置;
app
.
set
(
"
views
"
,
path
.
resolve
(
__dirname
,
"
views
"
))
app
.
set
(
"
view engine
"
,
"
ejs
"
)
前端模板 VS 后端模板
SEO优化
爬虫可以爬到后端模板；
后端模板可以对数据进行动态操作;
路由（get方法的使用）
路由的使用
当路径发生改变时引入对应文件：
express
.
get
(
"
/
"
,
(
req
,
res
)
=>
{
res
.
render
(
"
index.ejs
"
,
{
name
:
"
hello wrold
"
});
})
express
.
get
(
"
/search
"
,
(
req
,
res
)
=>
{
res
.
render
(
"
search.ejs
"
);
})
当路由进行拆分时需要将express进行替换；
const
router
=
express.
Router();
router.
get("
/", (
req,
res)
=> {
res.
render("
index.ejs", {
name: "
hello wrold" });
})
router.
get("
/search", (
req,
res)
=> {
res.
render("
search.ejs");
})
最后将 router 暴露出去。
Tip:除了 get
引入JS文件 (static方法的使用)
Tip : 因为后台的数据返回是以路由为核心的， 所以很多路由解决不了的问题，比如模板内部的script引入应该如何处理那？
引入常量路径：
EJS
EJS流程控制标签：
<% %> 流程控制标签;
<%= %> 输出标签（原文输出html标签）
<%- %> 输出标签（html会被浏览器解析）
<%# %> 注释标签
% 对标记进行转义
include
<%- include(“ejs路径”,”传入参数") %>
解析浏览器传入后端的数据（bodyParser）
Yarn add body-parser -D
在核心入口文件中配置对应数据：
app
.
use
(
bodyParser
.
json
());
app
.
use
(
bodyParser
.
urlencoded
({
extended
:
false
}));
在 get|post|all 方法的回调函数 request 中找到 body 中数据对应的属性。
404页面的配置
app
.
use
((
req
,
res
,
next
)
=>
{
let
err
=
new
Error
(
"
not found
"
);
err
.
status
=
404
;
next
(
err
);
})
app
.
use
((
err
,
req
,
res
,
next
)
=>
{
//全局变量;
res
.
locals
.
message
=
err
.
message
;
res
.
locals
.
error
=
err
;
res
.
status
(
err
.
status
||
500
);
res
.
render
(
"
error.ejs
"
);
})
express小技巧
app
.
get
(
'
/public/:id
'
,
function
(
req
,
res
,
next
)
{})
当路由中存在这样的路径的时候， :id 代表任意值 ， 可以在req.params.id 中进行获取。
Express 项目构建：
个express 的 cli ，点击查看github
github
安装 express cli
$ yarn global add express-generator
然后创建app
$ express --view=ejs
分页