写个帖子记录一下自己写的第一个express完整项目。
所需第三方模块及其用法。
一.先把所需文件和准备工作写一下
写项目前的准备
1.创建所需文件夹 public 静态资源
model 数据库操作
route 路由
views 模板
2.初始化项目描述文件
npm init -y
3.下载第三方模块
npm install express mongoose express的数据库处理模块
art-template 模板模块
express-art-template. express的模板渲染模块
二.第三方模块
1.express创建服务器初始化
// 引用框架 const express = require('express');
express引擎下面有3个接收请求的方法:
1.app.get
app.get('/', (req, res) => { // send() // 1.send内部会检测响应内容的类型 // 2.会自动帮我们设置HTTP的状态码 // 3.自动设置响应内容的编码 res.send('Hello Express'); })
app.get('/request', (req, res, next) => { req.name = '张三'; next(); })
这里如果回调函数中再加入一个next的话,可以把请求传给下一个中间件处理,为了更好理解,后面将再举一个例子。
2.app.use接收所有类型的请求
例:
app.use('/admin', (req, res, next) => { // let isLogin = false; let isLogin = true; if (isLogin) { // 如果登录了让请求继续向下执行 next(); } else { // 如果没有响应一个结果 res.send('您还没有登录 不等访问admin这个页面') } })
当我们拦截了请求之后,我们还想让后面的中间件继续处理这个请求,我们可以用next,但是用之前一定要先传入next
3.app.post
const bodyParser = require('body-parser'); //拦截所有请求 app.use(bodyParser.urlencoded({extended: false})); //再内部用系body-parser方式来处理post请求参数 //如果true方法内部用第三方模块qs来处理请求参数 app.post('/add', (req, res) => { res.send(req.body); // req.body为bodyparser在req中添加的属性 })
express为我们提供了req.query方法处理get请求参数。(网上说是nodejs自带的方法,可是我在没有express的文件中使用发现值为undefined=。=)
2.模板引擎art-template与express-art-template
先在项目的目录下创建一个名为views的文件夹
// 告诉express框架模板所在的位置 app.set('views', path.join(__dirname, 'views')); //告诉express模板的默认后缀 app.set('view engine', 'art'); //告诉express渲染后缀为art时,使用的渲染引擎是什么 app.engine('art', require('express-art-template'));
a.日期转换模块dataFormat
在模块下有template.defaults.imports.xxx=xxx(其中xxx为想要加入到模板中的方法,在模板中可以直接使用了);
//导入dateformat第三方模块 //要对模板引擎进行配置向外部开放变量,在模板内部才能调用该方法 const dateFormat = require('dataformat'); //导入art-template const template = require('art-template'); //向模板内部导入dataformat变量 template.defaults.imports.dateFormat = dateFormat;
//开放静态资源文件 app.use(express.static(path.join(__dirname, 'public')));
开放静态资源文件,当接到需要静态资源的请求时,自动返回相应的静态资源,括号内为文件所在的上级目录,由于app.js处于顶级目录,而静态资源都存放在public里面所以这么写。
此时需要注意的是,当我们返回模板的时候,里面外链的css和img的路径还是相对路径例如:
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="css/base.css">
此时的路径是相对路径,但不一定会报错(请求地址与静态文件所在的目录相同的情况下)
假设我们当前的请求路径是/admin/login,而css的路径/blog/public/admin/css/bass.css的话,绝对路径和相对路径的结果是相同的,但如果我们的请求路径改变的话,就无法完成静态资源的渲染了,
所以在这里我们把css的地址改一改
<link rel="stylesheet" href="/admin/css/base.css">