目录
nodejs 的路由
通过 url 模块对 url 地址进行解析, 实现路由的操作
const http = requrie('http')
const url = requrie('url')
http.createServer((req, res) => {
// 对请求的路径进行解析
let pathname = url.parse(req.url).pathname;
if(pathname == '/'){
// 相关的处理
}else if(pathname == '/login'){
// 相关的处理
}....
}).listen(3000, () => {
console.log('server runnning ....')
})
express 动态路由
/zoom/:id
const express = require('express');
const app = express();
//匹配路由
app.get('/', (req, res) => {
res.send('首页')
})
app.get('/zoom/:id', (req, res) => {
//zoom后面有值才会跳转
console.log(req.params);//这是获取动态路由的参数
res.send('这是动态路由下的页面')
})
app.listen(3000, () => {
console.log('server....')
})
获取动态路由的参数结果是一个对象
req.params
因为动态路由参数是对象,所以获取方式为
req.params.id给它起个变量名就能用了
官网
https://ejs.bootcss.com/
ejs
ejs 是js的模板引擎, 可以识别一些简单的js语句和使用一些js简单表达式
ejs插件下载
express 使用模板引擎, 安装先关的模板引擎插件,但是不许要引入插件,需要进行相关配置
// 1. 下载安装ejs : npm i ejs --save
// 2. 在项目的根目录下 创建一个 views 的文件夹; 该文件夹自动默认为express 的模板文件的根目录, 创建的文件扩展名为 .ejs ;
ejs 的语法
ejs 是js的模板引擎,可以识别 HTML所有的语法 ; 可以直接使用 ejs 的语法
ejs 的在express中的使用步骤
流程控制语句 if语句 <% js代码 %>
- if语句
// js 的if 语句格式
<% if(条件) {
%>
// 处理的逻辑 渲染的HTML结构
<% } %>
- if-else语句
// js 的if 语句格式
<% if(条件) {
%>
// 处理的逻辑 渲染的HTML结构
<% }else {
%>
// 处理的逻辑 渲染的HTML结构
<% } %>
- if-else的嵌套
// js 的if 语句格式
<% if(条件) {
%>
// 处理的逻辑 渲染的HTML结构
<% }else if(){
%>
// 处理的逻辑 渲染的HTML结构
<% }else if(){
%>
// .....
<% else {
%>
// ...
<% }%>
流程控制语句 for循环语句 <% js代码 %>
- for循环
<%for(let i = 0; i < arr.length; i++) {
%>
// 处理的逻辑 渲染的HTML结构
<% } %>
- forEach 循环
<% arr.forEach(function(item, index) {
%>
// 处理的逻辑 渲染的HTML结构
<% }) %>
插值语句 <%= value %>
<% arr.forEach(function(item, index) {
%>
// 处理的逻辑 渲染的HTML结构
<li><%= item.title %></li>
<% }) %>
输出非转义的数据到模板
<%- <p>内容<p>%>
可以解析标签
来看一个实例
首先npm init -y 生成一个默认的包管理
然后下载需要用的插件,是可以一起下载的
这是万表项目的一段实例
<ul class="clearfix">
<% data.forEach(item=>{
%>
<li class="lister">
<a target="_blank" href="#" class="s_s_goods_img">
<img src="<%= item.img_url%>" alt="" class=" lazy-load">
<div class="yao">
<%if(item.small){
%>
<img src="<%= item.small%>" alt="" class="tutu">
<% }%>
<%if(item.small){
%>
<span class="dao">¥<%= item.s_price%></span>
<%}%>
</div>
</a>
<% })%>