express初体验
express学习
在express中，我们任然可以直接用nodejs的一些原生的方法，express并没有把那些方法给覆盖，只是新增了一部分更高效有用的方法
常用的一些方法
res.send() 发送一段文本 可以是字符串 数组 对象 都自动设置content-type
res.sendFile(path) 发送一个文件的， 都自动设置content-type
res.redirect('/') 重定向
// express如何处理路由
// app.method(路径, 处理程序)
// method可以是get或者post
// 处理get请求 url是 /
app.get('/', (req, res) => {
res.end('ok')
})
app.use(path, (req, res) => {}) :处理路由, 只要求路径 包含path
express.static('static') : 把某个文件夹设置成静态资源目录 把static设置为静态资源目录
// 只有所有的访问静态资源的路径会匹配到静态
app.use('/static',express.static('static'))
处理get和post请求的数据
// 处理get请求的参数
express直接给req增加了 req.query(get请求的参数) 返回的是一个对象
const id = req.query.id // 表示取参数中的id值
// 处理POST请求的参数
req.body 保存的是请求体的数据 默认一开始是 undefined
我们需要通过调用中间件来进行处理
// 这个只是其中一种，还有一种是multer，可以去express官网进行查看API
body-parser中间件的使用说明
1. 安装 npm i body-parser
2. 导入 var bodyParser = require('body-parser')
3. 使用
app.use(bodyParser.urlencoded({ extended: true })); // 解析表单数据
app.use(bodyParser.json());
// 增加这句话后，req.body中就有我们的数据了
app.use(bodyParser.urlencoded({ extended: false })) // 处理表单数据
express中间件的说明
中间件函数是可以访问请求对象（req），响应对象（res）以及应用程序请求 - 响应周期中的下一个中间件函数的函数。下一个中间件函数通常由名为next的变量表示。
直白的说：中间件的本质就是一个函数，在收到请求和返回相应的过程中做一些我们想做的事情
做哪些事呢？
-
执行任何代码。
-
更改请求和响应对象。
-
结束请求 - 响应周期。
-
调用堆栈中的下一个中间件函数。
中间件的使用
// 中间件，指的就是一个函数
// 参数1：代表 req
// 参数2： 代表 res
// 参数3： next next() 表示把中间继续传给下一个中间件
// 中间件可以处理我们请求，可以继续传递给下一个请求 必须调用next()
// 不管get还是post都会经过use
// app.use一般配合中间件使用 app.use 可以匹配到所有的请求
// 并且中间件的处理一般都是放在前面的，因为有next() 使用并不会影响后面的处理
app.use((req, res, next) => {
// 需要记录每次用户访问的时间 用户访问的ip地址
console.log('哈哈')
console.log('req.ip', req.ip)
console.log('req.time', new Date().toLocaleString())
next()
})
获取请求体的参数，自己实现一个中间件
app.use((req, res, next) => {
// req.body有post参数的值
let result = ''
req.on('data', chunk => {
result += chunk
})
req.on('end', () => {
req.body = querystring.parse(result)
next()
})
})
常用方法总结
1. express创建服务器的四个步骤
const express = require("express")
const app = express()
app.listen(8888, ()=> {})
app.get('/', (req, res) => {} )\
2. express本身的功能
express.static('static') 处理静态资源
// 专门用来处理静态资源的中间件
// 如果是以/static 开始，中间件能就够生效
// 如果static中能够访问的内容，直接给响应
app.use('/static', express.static('static'))
3. app中的方法
// 必须注册了引擎引擎 才能使用 res.render()
app.engine(ext, callback) 注册模版引擎
app.engine('html', require('express-art-template'))
app.get('/') 处理get请求
app.post('/') 处理post请求
app.use((req, res, next)=> { next()}) 配中间件使用 如果是自己定义的中间件，千万不要忘了next
// 设置模版引擎默认的目录
app.set('views', 'views')
4. req中的属性
req.ip : 获取ip
req.url: url地址
req.query: 获取get请求的参数，，，不用任何处理
req.body: 获取post请求的参数，默认是undefined，必须配合中间件
5. res中常用属性和方法
res.end() 结束响应
res.send('11') 响应一段文本， 会自动设置响应头
res.sendFile( ) 响应一个文件 会自动设置响应头 他返回是静态的
res.render() 配合模版引擎进行渲染
res.redirect() 重定向
res.status() 设置状态码
express中的模板引擎
第一种 以jade为例作为讲解
1、要使用模板引擎，我们需要现在app.js中进行以下配置
// app.set(name,value)
// views 是app.set自带的一个name值
// views : 应用程序视图的目录或目录数组。如果一个数组，视图会按照数组中出现的顺序查找 eg：app.set('views', path.join(__dirname, 'views'))
// value值是对应的文件路径
app.set('views', './views')
// 当省略时使用的默认引擎扩展名
// 第一个参数同样是自带的一个name值
// 第二个值表示的是 以哪个模板引擎，比如jade pug ejs等
// 使用的模板引擎需要安装，npm i jade
app.set('view engine', 'jade')
2、配置好上面的后，我们需要有那么一个jade后缀的文件，创建在views文件夹里（index.jade）
//- 这里以我做的一个小demo做例子
doctype html
head
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
meta(http-equiv='X-UA-Compatible', content='ie=edge')
title Document
.content
a.pb_btn(href='/add') 发表内容
.list
ul
//- 这是jade中的遍历语法 ，in list 指向的就是传递过来对象数据中的数组
each item in list
li
img.pic(src='../static/images/timg.jpg', alt='')
.list_con
.time
strong
i #{item.time}
img(src='../static/images/lj.jpg', alt='')
p
b 作者:
span #{item.name}
p
b 标题:
span #{item.title}
p
b #{item.content}
3、创建一个路由（可以直接在app.js中创建）来进行渲染index.jade文件
app.get('/', function (req, res) {
// 参数1：表示的就是对应的views文件夹里的那个jade页面
// 参数2：表示的就是传递给模板引擎的数据
res.render('index', { list:[{time:'2019/06/06',name:'zs',title:'隔壁老王',content:'哈哈哈哈哈'}] })
})
4、这样就已经完成了简单的一个渲染界面的操作，可以启动服务器浏览了
第二种 在express中使用art-template https://aui.github.io/art-template/express/
1、安装模块
npm install art-template
npm install express-art-template
2、设置模板
// art-tempalte: 模版文件默认后缀可以是html 也可以是 art
// 参数1： 指定模版文件的后缀名
// 参数2： 加载 express-art-template 会把模版引擎和express绑定好
app.engine('html', require('express-art-template'))
3、数据和模板进行绑定
app.get('/', (req, res) => {
// 返回index.html页面
// 数据
// 模板
// const filePath = path.join(__dirname, 'views', 'index.html')
// 使用模版引擎来渲染页面
// 参数1：模版的地址
// 模版引擎的路径，推荐使用绝对路径，也可以是相对路径，
// 如果使用相对路径，会默认去当前目录的views的文件夹下面查找
res.render('index.html', data)
})
// 如果使用相对路径的时候，会去默认的views目录下找index.html文件
// 我们可以进行修改设置查找的目录
// set的使用前面有说明
app.set('views','xxxx')
使用对比
express中如何使用art-template
1. 安装 npm i art-template express-art-template
2. 给app设置好模版 app.engine('html', require('express-art-template'))
3. res.render(模版的路径, 数据)
原生nodejs中使用模版引擎
1. 安装 npm i art-template
2. 导入 const template = require('art-template')
3. 渲染页面 const html = template(模版的路径, 数据)
4. 设置请求头 res.setHeader('content-type', 'text/html')
5. 丢回去： res.end(html)
express中使用mysql
首先需要安装mysql模块
npm i mysql
- 基本使用
// 导入第三方包
const mysql = require('mysql')
// 创建连接
var connection = mysql.createConnection({
// 本地
host: 'localhost',
user: 'root',
password: 'root',
// 数据库名称
database: 'mydb',
port: 3306
})
// 连接数据库
connection.connect()
// 执行sql语句
connection.query('select * from user where id = 8', (err, result) => {
if (err) return console.log('查询失败', err)
// result返回的是数组， 数组中是一个对象
console.log(result)
})
// 关闭连接
connection.end()
查询语句
var name = 'zs'
// 使用?表示占位，可以防止sql注入
connect.query(`select * from user where name=?`, name, (err, result) => {
if (err) return console.log('错误了', err)
console.log(result)
})
插入语句
connect.query(
'insert into user (name, age, gender, content) values (?, ?, ?, ?)',
['zs', 18, '男', '哈哈哈哈'],
err => {
if (err) return console.log('错误', err)
console.log('添加成功了')
}
)
// 方式2
connect.query(
'insert into user set ?',
{
name: 'zs',
age: 30,
gender: '男',
content: '哈哈哈'
},
(err, result) => {
if (err) return console.log('错误', err)
console.log('添加成功了', result)
}
)
修改语句
connect.query(
'update user set ? where id = ?',
[
{
name: 'zs',
age: 30,
gender: '男',
content: '哈哈哈'
},
10
],
(err, result) => {
if (err) return console.log('错误', err)
console.log('添加成功了', result)
}
)
删除语句
connect.query('delete from user where id = ?', 10, (err, result) => {
if (err) return console.log('失败', err)
console.log(result)
})
使用promise实现读取数据库
db.js 模块
const config = {
host: 'localhost',
user: 'root',
password: 'root',
database: 'lyb'
}
function query(sql, params) {
return new Promise((resolve, reject) => {
const connection = mysql.createConnection(config)
connection.query(sql, params, (err, result) => {
if (err) return reject(err)
return resolve(result)
})
connection.end()
})
}
/**
* 获取数据
* 返回一个promise对象
*/
function getData() {
const promise = query('select * from tb_lyb order by id desc', null)
return promise
}
router.js模块
因为promise的特性，一点状态改变后就不会再变，因此可以根据返回的promise对象来进行判断执行相应的处理
const router = require('express').Router()
const db = require('./db')
router.get('/', (req, res) => {
// 渲染数据
db.getData().then(result => {
res.render('index.html', { list: result })
}).catch(err => {
console.log(err)
})
})
直接用express来创建项目
express -e 项目名
// 如果说这个命令不存在是因为最新express4.0版本中将命令工具分家出来了，所以我们还需要安装一个命令工具
// 执行这个命令
npm install -g express-generator
// 然后在执行 就行了
express 项目名
项目创建成功之后，生成四个文件夹，主文件app.js与配置信息文件packetage.json
bin是项目的启动文件，配置以什么方式启动项目，默认 npm start
public是项目的静态文件，放置js css img等文件
routes是项目的路由信息文件,控制地址路由
views是视图文件，放置模板文件ejs或jade等（其实就相当于html形式文件啦~)
express这样的MVC框架模式，是一个Web项目的基本构成。
一般我们创建新项目的时候也要先给他安装相应的模块。
我们直接使用npm install 就行了，它会自动检测package.json文件下载安装相应的模块