一篇文章让你快速入门express

263 阅读5分钟

1.初始化express项目

<1>首先创建一个expree服务器的文件夹,然后

执行 npm init -y

<2>其次安装express npm i express -S

到此为止,我们一个express项目就搭建起来啦,没错就是真么简单

2.开启一个服务端程序

<1>首先在项目根目录下创建一个文件夹,名字随意,这里叫app.js

<2>写入代码,开启服务器

const express = require('express') //引入安装的express

const app = express() //导入express实例

app.listen('3000', () => { //监听3000端口

    console.log('3000 ok')//服务器开启成功后打印到控制带 3000 ok
})


---配置一个路由,请求方式为get供前台调用    这里面返回的数据就是我没常用的接口数据
app.get('/', (req, res) => { //配置路由

    res.send( //向前台发送的数据
      
      [{
            name: 'zhangyang',
            id: "2"
        }, {
            name: 'zhangyang',
            id: "1"
        }, {
            name: 'zhangyang',
            id: "1"
        }, {
            name: 'zhangyang',
            id: "1"
        }, {
            name: 'zhangyang',
            id: "1"
        }]
        
    )
})

<3>控制台执行node app.js,打开浏览器我们访问http://localhost:3000 可以看到

此时数据返回成功。

3.使用nodemon插件,保存后自动重新开启服务

在根目录的package.json文件中,加入代码

"scripts": {
        "dev": " nodemon node app.js"
    },

至此以后我们就可以使用 npm run dev 来开启node服务端程序了

4.前台如何访问服务器目录下的静态文件,比如图片,页面,css,js等等

<1>首先看下我们的资源路径 <2>在这里我们要使用到中间件app.use()来实现前台访问

在app.js文件中添加代码:

app.use(express.static("./img/aa/bb")) //若想前台拿到服务器的静态资源文件,则需要在此声明
app.use('/hahaha', express.static("./img")) //hahaha为前台访问时的虚拟根前缀,访问img目录下的文件时前面要加/hahaha 例如 http://localhost:3000/hahaha/logo.png

<3>此时浏览器访问http://localhost:3000/1.png可以看到

我们在前台拿到了这张图片!!!

5.express如何解决跨域问题

由于浏览器的同源策略我们都知道,不同服务器直接访问回报跨域错误

express只需要一句话就能轻松解决跨域问题

安装cors : npm i cors -S

在app.js中引入cors

app.use(require("cors")())
或者
const cors = require('cors')
app.use(cors())

6.使用express脚手架初始化项目

<1>首先npm初始化

1.安装脚手架工具: npm install -g express-generator
2.创建express项目: npm express 项目名
3.安装项目依赖: npm install

<2>项目目录

<3>app.js各项文件介绍,使用app.use引入所需要的插件

var createError = require('http-errors'); //错误的路由自动处理
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser'); //直接获取cookie
var logger = require('morgan'); //生成日志

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express(); //开启一个express服务


app.use(logger('dev')); //自动生成日志
app.use(express.json()); //通过post请求发送的数据,直接通过req.body获取
app.use(express.urlencoded({ extended: false })); //兼容其他格式发送过来的post数据,也是直接通过req.body获取
app.use(cookieParser()); //直接获取cookie
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter); //设置一个路由根路径
app.use('/users', usersRouter); //设置一个路由根路径

// catch 404 and forward to error handler
app.use(function(req, res, next) { //访问路径错误时,执行的页面
    next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};

    // render the error page
    res.status(err.status || 500);
    res.render('error');
});

module.exports = app;

7.express中间件运行机制 app.use()

首先我门知道 app.use('根据前台输入的地址,执行的路径',这里是回调函数)。

<1>当前台通过接口访问服务器时,服务器接到命令后,会开启执行express对象,app.js代码从上到下执行,所有app.use()根路径注册的全部都会执行。

<2>根据请求方式,即get、post、put,和地址按需执行app.get,app.post等等。

<3>一个app.use里面可以有多个回调,回调执行顺序从左往右依次执行。 app.use("/login",fun1,fun2,fun3)

8.安装cross-env 和 nodemon 开发环境依赖

npm i cross-env nodemon -D

package.json中配置环境变量NODE_ENV

 "scripts": {
        "dev": "cross-env NODE_ENV=dev nodemon ./bin/www",
        "prd": "cross-env NODE_ENV=production nodemon ./bin/www"
    },

9.安装mysql和xss

npm i mysql xss -S

<1>连接mysql,区分生产环境和开发环境

npm run 启动时 区分生产环境和开发环境 不同环境下连接不同端口

// 配置mysql连接情况
const env = process.env.NODE_ENV //获取环境参数

// 配置
let MYSQL_CONF //mysql
let REDIS_CONF //rides
    // 如果是线下开发环境
if (env === 'dev') {
    MYSQL_CONF = {
        host: 'localhost',
        user: 'root',
        password: 'root',
        port: '3306',
        database: 'myblog'
    }
    REDIS_CONF = {
        port: 6379,
        host: '127.0.0.1'
    }
}

// 如果是线上环境
if (env === 'production') {
    MYSQL_CONF = {
        host: 'localhost',
        user: 'root',
        password: 'root',
        port: '3306',
        database: 'myblog'
    }

    REDIS_CONF = {
        port: 6379,
        host: '127.0.0.1'
    }
}

module.exports = { MYSQL_CONF, REDIS_CONF }

<2>连接mysql

const mysql = require('mysql') //引入mysql
const { MYSQL_CONF } = require('../config/config-db')


const con = mysql.createConnection(MYSQL_CONF) //连接数据库

// 开始连接
con.connect()

// 查询
function exec(sql) {
    const promise = new Promise((resolve, reject) => {
        con.query(sql, (err, result) => {
            if (err) {
                reject(err)
            } else {
                resolve(result)
            }
        })

    })
    return promise
}

module.exports = {
    exec
}

10.定义数据库查询方法

const { exec } = require('../db/mysql')
    // 获取博客列表
const getList = (author, keyword) => {
        let sql = `select * from blogs where 1=1 `
        if (author) {
            sql += `and author='${author}' `
        }
        if (keyword) {
            sql += `and title like '%${keyword}%' `
        }
        sql += `order by createtime desc;`

        return exec(sql)


    }
    // 获取一篇博客内容
const getDetail = (id) => {

        let sql = `select * from blogs where id='${id}'`
        return exec(sql)

    }
    // 新建一篇博客
const newBlog = (postData) => {

        const title = postData.title
        const content = postData.content
        const createtime = Date.now()
        const author = '张阳'
        const sql = `insert into blogs (title,content,createtime,author) values ('${title}','${content}',${createtime},'${author}')`
        return exec(sql).then(backResult => {
            return {
                id: backResult.insertId
            }
        })
    }
    //更新一篇博客
const updateBlog = (id, postData) => {
        // return true
        const title = postData.title
        const content = postData.content
        const sql = `update blogs set title='${title}' , content='${content}' where id=${id}`
        return exec(sql).then(backResult => {

            if (backResult.affectedRows > 0) {
                return { result: true }
            }
            return { result: false }
        })

    }
    // 删除一篇博客
const deletBlog = (id, author) => {
    // return true
    var author = '张阳'
    const sql = `delete from blogs where id=${id} and author='${author}'`
    return exec(sql).then(backResult => {
        if (backResult.affectedRows > 0) {
            return { result: true }
        }
        return { result: false }
    })
}
module.exports = {
    getList,
    getDetail,
    newBlog,
    updateBlog,
    deletBlog
}

11.配置路由,前台访问该接口的时候调用对应的封装好的查询方法

//处理博客
var express = require('express');
var router = express.Router();
const {
    ErrorModel,
    SuccessModel
} = require('../model/resModel')
const {
    getList,
    getDetail,
    newBlog,
    updateBlog,
    deletBlog
} = require('../controller/blog')


//获取博客列表路由,此处可获得接口参数
router.get('/list', async function(req, res, next) {
    const backdata = await getList()
    res.json(new SuccessModel(backdata, '获取博客列表成功'))
});

module.exports = router;

12.前台可根据地址访问到对应数据

13.实现登录

1.安装express-session 和 connect-redis

npm i express-session connect-redis -S

2.app.js中引入express-session 和 connect-redis

<1>引入并配置session

const session = require('express-session') //引入express-session

app.use(session({ //路由之前处理session
   secret: "Wjiol#asd12*12$_",   ------------------------------------ //session加密
   cookie: { --------------------------------------//生成或传入客户端cookie,存入session中
       path: '/',------ //配置cookie路径,/代表前端任何一个界面都可以访问     默认配置 可不写
       httpOnly: true,------------- //开启后,前端js无法访问cookie          默认配置 可不写
       maxAge: 30 * 24 * 60 * 60 * 1000 ------------------------------//cookie失效时间
   }
}))

生成的cookie存在session中。

原理:当用户登录时,去数据库校验,是否有该用户,有的话,将返回的用户名存入session中,访问其他接口时,校验session是否有改用户名

<2>将session存入redis

安装redis npm i redis connect-redis -S

应为session多个进程不能共享,所以我们要引入内存数据库redis用来保存session。

在db文件夹下创建redis.js文件,连接redis数据库

const redis = require('redis')
const { REDIS_CONF } = require('../config/config-db.js')//引入redis链接配置

// 创建客户端
const redisClient = redis.createClient(REDIS_CONF.port, REDIS_CONF.host)
redisClient.on('error', err => {                        //监听错误事件
   console.error(err)
})

module.exports = redisClient

app.js中

1.  const RedisStore = require('connect-redis')(session) //引入快捷连接redis工具,顺便将session存入


2.const redisClient = require('./db/redis.js') ----------------//引入成功连接的redis数据库
const sessionStore = new RedisStore({ ----------------//将redis数据库初始化整合express框架
   client: redisClient
}) 


3.app.use(session({ 
   secret: "Wjiol#asd12*12$_", 
   cookie: { 
       path: '/',
       httpOnly: true, 
       maxAge: 30 * 24 * 60 * 60 * 1000 
   },
   store: sessionStore -------------- // 将session存入redis

}))