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
}))