01 expres项目的基础配置
java
第一步 需要先初始化项目 npm init -y
第二步 安装express: npm i express;
第三步 项目中创建app.js文件
第四步 进行配置代码如下:
var express = require('express')
var app = express()
配置路由
app.get('/',(req,res)=>{
res.send('hello nodejs')
})
app.get('/article/:id',(req,res)=>{
var id = req.params['id'] // 获取动态路由params参数
console.log('动态路由' + id)
})
app.get('/product'.(req,res)=>{
let query = req.query
console.log('获取query参数'+query) http://www.bai.com:3000/producr?age=12&cid=10
})
启动项目 配置端口号app.listen(3000,'127.0.0.1')
02 express使用ejs
java
第一步 安装ejs: npm i ejs -save;
第二步 express中使用ejs:
var express = require('express')
var app = express()
// 配置模板引擎
app.set('view engine','ejs')
app.get('/',(req,res)=>{
let title = '你好ejs'
let userInfo = {name:'zs',age:12}
let article = '<h3>我是h3标签<h3>'
res.render('index',{ // 默认加载的模板引擎文件夹是views向views/index.html文件中传递title的数据
title:title,
info:userInfo,
article:article,
list:[1,2,3,4,5]
})
})
app.listen(3000)
03 views/index.ejs文件中使用ejs, ejs语法的使用
java
<html><header><body>
<h1>我是HTML页面</h1>
<p><%=title%></p> 这里是使用ejs定义的title的数据
<p><%=info.name%></p> // 解析对象中的某个属性
<p><%=info.age%></p>
<p><%=article%></p> // <h3>我是h3标签<h3> 这里无法渲染html的标签
<p><%-article%></p> // 想要解析html标签 需要将= 换成 -
<%if(2<5){%> // 这里使用判断语句 if
<p>这里的条件是成立的</p>
<%}%> ---end
<%if(2<5){%> // 这里使用判断语句if else
<p>这里的条件是成立的</p>
<%}else{%>
<p>这里的条件是不成立的</p>
<%}%>
<%for(let i = 0; i<list.length;i++){%> // 这里使用的是循环语句
<li><%=list[i]%></li>
<%}%>
</body></header></html>
04 index.ejs的页面加载footer.ejs别的ejs的页面
java
01 footer.ejs的代码:
<footer>
<h1>我是公共的底部的模板</h1>
</footer>
02 index.ejs页面的使用:
<body>
<h1>我是ejs页面</h1>
<%-include('footer.ejs')%> // 这里使用footer.ejs的模板
</body>
05 ejs将文件的后缀由ejs修改为html, 以及通过express.static托管静态文件
java
// 1 关于将后缀名ejs修改为html的操作
const express = require('express')
const ejs = require('ejs')
const app = express()
// 配置模板引擎
app.engine('html',ejs.__express)
app.set('view engine','html')
app.get('/',(req,res)=>{
res.render('index',{ // 加载的是views/index.html页面 并向index.html页面中传递数据
title:'我是一个标题',
data:[1,2,3,4]
})
})
// 2 关于能够访问static/css/base.css的文件配置
static/css/base.css样式的代码:h1:{color:'red'},通过http://localhost:3000/css/base.css访问
const express = require('express')
const ejs = require('ejs')
const app = express()
app.engine('html',ejs.__express)
app.set('view engine','html')
// 配置静态的web目录
app.use(express.static('static')) // 这里就可以直接访问css 以及 img相关的静态文件了,这里访问
css的样式数据是不需要在http://localhost:3000/css/base.css中加static的目录的。
// 如果想要通过http://localhost:3000/static/css/base.css访问的需要加前缀static
app.use('/static',express.static('static'))
app.get('/',(req,res)=>{
res.render('index',{ // 加载的是views/index.html页面 并向index.html页面中传递数据
title:'我是一个标题',
data:[1,2,3,4]
})
})
// 3 这时候就可以在index.html页面中引入css的样式了
<head>
<link rel="stylesheet" href='/css/base.css'>
</head>
06 关于处理post请求的参数的第三方中间件body-parser
java
第一步 进行安装 npm i body-parser --save
第二步 导入 var bodyParser = require('body-parser')
第三步 设置中间件 处理form表单的数据
app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())
07 cookie的使用
java
第一步 进行安装 npm install cookie-parse --save
第二步 导入 var cookieParse = require('cookie-parse')
第三步 设置中间件 app.use(cookieParse())
第四步 设置cookie:
app.get('/article',(req,res)=>{
res.cookie('username','zhangsan',{maxAge:1000*60*60}) 设置username和过期事件
})
第五步 进行cookie的获取
app.get('/',(req,res)=>{
let username = req.cookies.usename // 读取cookie
res.send(username)
})
第六步 设置一个域名下可以共享cookie
app.get('/article',(req,res)=>{
// 不同域名共享cookie aaa.itying.com bbb.itying.com
res.cookie('username','zhangsan',{maxAge:1000*60*60,domain:'.itying.com'})
})
第七步 可以设置加密的cookie的
app.get('/article',(req,res)=>{
// 不同域名共享cookie aaa.itying.com bbb.itying.com
res.cookie('username','zhangsan',{maxAge:1000*60*60,signed:true})
})
第八步 获取加密的cookie
app.get('/',(req,res)=>{
let username = req.signedCookies.usename // 读取cookie
res.send(username)
})
08 session的使用
java
第一步 进行session的安装
npm install express-session --save
第二步 引入express-session
const session = require('express-session')
第三步 设置中间件
app.use(session({
secret:'keyboard cat', 服务器生成的session的签名
resave:true, 强制保存session 即使session没有变化
saveUninitialized:true,强制将未初始化的session存储
cookie:{
maxAge : 1000*60,
secure:false true表示只有https协议才能访问
},
rolling:true 在每次请求设置cookie 这将重置cookie 过期时间(默认:false)
}))
第四步 使用
res.session.username = '张三'
第五步 获取
req.session.username
09 express的路由模板
java
第一步 新建一个router/login.js的文件
var express = require('express')
var router = express.router()
router.get('/',function(req,res)=>{
res.send('login')
})
module.exports = router
第二步 在app.js文件中导入并注册
const login = require('./router/login')
app.use('/',login)
10 模块化管理路由组件:
java
第一步创建 router/admin/user.js文件,这里是模块的路由需要在router/index.js文件中导入的
const express = require('express')
var router = express.Router()
router.get('/',(req,res)=>{
res.send('user的首页')
})
module.exports = router
第二步创建 router/index.js文件
const express = require('express')
var router = express.Router()
const admin = require('./admin/user')
router.use('/admin',admin)
module.exports = router
第三步 app.js导入
const router = require('./router/index.js')
app.use('/',router)