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)
相关推荐
gongzemin1 天前
前端根据文件流渲染 PDF 和 DOCX 文件
前端·vue.js·express
十月ooOO1 天前
Express.js 在 ts 模式下运行 npm run dev 的时候无法找到引入项的原因
javascript·npm·express
风清云淡_A2 天前
【mongoose8.x】mongoose8.x入门教程(二):express中mongoose的链接
express
水冗水孚4 天前
面试官:你是前端你了解oss吗?我反手写了一个react+express+minio实现oss文件存储功能
react.js·node.js·express
snpgroupcn6 天前
泰国零售巨头 CJ Express 借助 SAP 内存数据库实现高效数据管理
数据库·express·零售
水冗水孚6 天前
使用nodejs的express框架实现大文件上传的功能,附完整前后端github代码
javascript·node.js·express
程序猿小D8 天前
第29节 Node.js Query Strings
node.js·vim·express
程序猿小D9 天前
第24节 Node.js 连接 MongoDB
数据库·mongodb·npm·node.js·编辑器·vim·express
接着奏乐接着舞11 天前
nodejs express 打包部署
express
掉头发类型的选手13 天前
Node.js: express 使用 Open SSL
express