node项目中express的使用

01 expres项目的基础配置

第一步 需要先初始化项目 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

第一步 安装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语法的使用

<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的页面

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托管静态文件

// 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

第一步 进行安装 npm i body-parser --save

第二步 导入 var bodyParser = require('body-parser')

第三步 设置中间件 处理form表单的数据

app.use(bodyParser.urlencoded({extended:false}))

app.use(bodyParser.json())

07 cookie的使用

第一步 进行安装 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的使用

第一步 进行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的路由模板

第一步 新建一个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 模块化管理路由组件:




第一步创建 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)

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值