express路由
路由,我觉得吧就是个拦截器,用来拦截用户的请求,执行某项特定的代码;
使用路由时,一定要提前规划.
//创建router
let router = express.Router();//接收express的路由
//给路由填需要拦截的路径
router.get('/:id',function (req,res,next){
res.send('aaa');
next();
})
//此处也支持post,use等方式
//将路由绑定在父级
server.use('/article',router);
//核心代码,此处核心代码使用的了node的模块化开发,模块化开发,可以把路由分的特别细.任意函数都可以拿出来做模块;
//server.js -->主文件
const express = require('express');
const article = require('./routes/article');//文章路由
const user = require('./routes/user');//用户路由
let server= express();
server.listen(8087);
server.use('/article',article);//访问/article路径会被文章路由拦截
server.use('/user',user);
server.use(function(req,res,=){
res.send('404');//没被路由拦截的路径，即404;
})
//article.js --> 文章路由,在routes文件夹下
let express = require('express');
let router = express.Router();
router.get('/:id',function (req,res,next){
let {id} = req.params;//解构赋值
//req.query用来获取/article?id=XXX;方式传参的参数ID的值;不常用
res.send(`${id}`);
next();
})
router.get('/b',function (){
res.send('bbb');
})
router.get('/c',function (){
res.send('ccc');
})
module.exports=router;
//user.js --> 用户路由,在routes文件夹下
let express = require('express');
let router = express.Router();
router.get('/a',function (){
console.log('AAAA');
})
router.get('/b',function (){
console.log('BBBB');
})
router.get('/c',function (){
console.log('CCC');
})
module.exports=router;
后台(服务端)渲染、前台渲染、浏览器渲染
后台(服务端)渲染 --> 稳定、安全、有利于SEO
前台渲染 --> 体积更小、用户体验更好
服务端渲染模板引擎 --> ejs、pug
pug 破坏式框架
ejs 非破坏式框架
安装 cnpm i ejs pug -D
//PUG
引包 const pug = require('pug');
//pug.renderFile读取模板文件,数据用{},json形式存放
使用 console.log(pug.renderFile('./template/pug/1.pug',{
pretty:true,//美化,生产环境不需要
name:'大佬',//模板中用到的属性
a:12,
b:5,
arr:[1,2,3,4,5]
}));
//使用这个模板之后生成了html代码,发送给浏览器之后,即可渲染成页面
模板文件（1.pug）
以缩进一级来进行层级显示,可以美化,参数是
doctype
html
head
meta(chartset="utf-8")//用括号来表达属性,有多个属性用,分隔
script. //用.来代表这里是多行文本
window.onload = function(){
alert();
}
body
div(class="page main",id="d")//多个class属性
div#div.page//可以使用#\.来代表ID跟class
li 这里是li的内容//使用空格来代表后面是内容
p.
///这里是多行文本
///用.来代表这里是多行文本
span 用户名字
= name//用=号来代表调用模板时的数据
= a+b//可以使用等式
ul.ul
each a in arr //循环数据arr,a为下标值
li=a // =号与li之间不可以有空格
//EJS
引包 const ejs = require('ejs');
使用 //ejs是promise,需要使用then();
ejs.renderFile('./template/ejs/1.html',{
name:'大佬',//模板中用到的属性
str:'<尖括号>',
a:12,
b:5,
arr:[1,2,3,4,5],
path:'path/footer.html'
}).then(data=>{
console.log(data);
},err=>{
});
模板文件（1.thml）//非破坏式框架,直接使用html配合<%%>语法即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%=a+b%>//输出数据a+b
<%-str%>//%=会把尖括号转义,使用%-不转义,直接输出<>,主要用在include的时候
<% for(let i=0;i<arr.length;i++){%>//<%> 可以直接使用js代码
<li><%=arr[i]%></li>//此处循环输出arr的下标,JS代码可以直接在此处使用，此处如果定义变量在前台是拿不到的,此处为后台JS代码,与前台无关
<%}%>
<%- include('path/footer.html')%>//可以直接引用模板,与<% include path/footer.html)%>效果一样
//此处路径可以使用主文件中的数据参数,
<%- include(path)%>
</body>
</html>
扩展
模块化
前端模块化
传统：requireJs-AMD标准、seaJS-CMD标准
CMD-公共模块定义
AMD-异步模块定义-使用CMD+异步实现
现代：vue、react、angular以来webpack打包工具
后端模块化
Node模块系统
写法一：
mod.js
exports.a=12;//抛出一个a;
exports.b=2;//抛出一个b;
1.js
let mod = require('./mod');//接收mod.js抛出的模块,防止跟node的全局模块冲突,使用./;
alert(mod.a);
alert(mod.b);
写法二：
mod.js
module.exports={a:12,b:2};//批量抛出
1.js用法同上;
网友评论