node项目中express的使用

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)
相关推荐
前端小盆友13 小时前
从零实现一个GPT 【React + Express】--- 【5】实现网页生成能力
gpt·react.js·express
搞前端的小菜20 小时前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
gpt·react.js·express
前端小盆友3 天前
从零实现一个GPT 【React + Express】--- 【4】实现文生图的功能
react.js·chatgpt·express
实习生小黄3 天前
express 连接在线数据库踩坑
node.js·express
搞前端的小菜3 天前
从零实现一个GPT 【React + Express】--- 【1】初始化前后端项目,实现模型接入+SSE
gpt·react.js·express
水冗水孚19 天前
express使用node-schedule实现定时任务,比如定时清理文件夹中的文件写入日志功能
javascript·node.js·express
羽沢3120 天前
nodejs中Express框架的基本使用
express
gongzemin21 天前
前端根据文件流渲染 PDF 和 DOCX 文件
前端·vue.js·express
十月ooOO22 天前
Express.js 在 ts 模式下运行 npm run dev 的时候无法找到引入项的原因
javascript·npm·express
风清云淡_A22 天前
【mongoose8.x】mongoose8.x入门教程(二):express中mongoose的链接
express