初识express框架
Node.js的Web开发相关内容：
- Node.js不需要依赖第三方应用软件，可以基于api自己实现
- 实现静态资源服务器
- 路由处理
- 动态网站
- 模板引擎
- get和post参数传参和处理
但如果仅仅依靠原生的node.js来实现这些开发是有些复杂和困难的，因此我们引入了express框架
那么如何安装Express呢？
创建一个文件夹，内部创建一个js文件，在所选的文件夹中打开cmd 输入npm init -y 创建一个初始的package.js
创建express的包 在cmd中输入npm install express --save
-
安装完就可以使用了
接下来我们来用express来实现我们的第一段代码 创建一个服务器吧
打开刚才创建的js文件 写入：
const express = require('express'); //引入包 返回一个函数
const app = express();
// 也可直接使用 const app = require('express')();
//绑定路由 '/'：绑定根路径，其它路径的检测不到
app.get('/' ， (req , res) => {
console.log('ok');
}).listen(3000 , () => { //监听3000的端口
console.log('running...');
});
还有另一种写法
const app = require('express')();
let server = app.get('/' , (req , res) =>{
res.send('abc');
})
server.listen(3000 , ()=>{
console.log('running...');
})
以上两种是等价的
托管静态文件
const express = require('express');
const app = express();
//public是静态资源的根目录
let server = app.use(express.static('public'));
server.listen(3000 , ()=>{
console.log('running...');
});
关于虚拟目录
use方法的第一个参数可以指定一个虚拟目录，这个目录是不存在的
let server = app.use('/abc' , express.static('public'));
这样如果要访问，就需要输入localhost:3000/abc/hello.html了 但这个文件夹是不存在的
基本路由
前面我们介绍了静态文件，那么有静必有动，动态文件是什么呢？我们给动态文件起了一个名字——路由
所谓的路由是指根据路径和请求的方式进行请求的分发
http的常用请求方式：
- post 添加
- get 查询
- put 更新
- delete 删除
url 格式还有一种 restful api 它是满足特定格式的url地址
如果我们使用不同的请求方式，可能要输入四种不同的代码
app.get('/',(req,res)=>{
res.send('get data');
});
app.post('/',(req,res)=>{
res.send('post data');
});
app.put('/',(req,res)=>{
res.send('put data');
});
app.delete('/',(req,res)=>{
res.send('delete data');
});
我们其实还有另一种方法
const express = require('express');
const app = express();
app.use((req , res)=>{
res.send('ok');
})
这种写法可以处理所有的基本请求
express 中间件
中间件就是处理过程中的一个环节
中间件的种类有很多，挂载方式也有很多种有 use 和路由方式：get post put delete 下面是一个应用级别的中间件
应用级的中间件
const express = require('express');
const app = express();
let total = 0;
app.use('/user',(req,res,next)=>{
//记录访问的时间
console.log(Date.now());
//next方法的作用就是把请求传递到下一个中间件 本质上就是一个函数
next()
});
app.use('/user',(req,res,next)=>{
//记录访问日志
console.log('访问了/user');
next()
});
app.use('/user',(req,res)=>{
total++;
console.log(total);
res.send('result');
})
app.listen(3000 , ()=>{
console.log('running..');
})
路由级的中间件
// 中间件的挂载方式 use 路由方式
const express = require('express');
const app = express();
// use和get较为相似，它也能够绑定一个路由
app.get('/abc',(req,res,next)=>{
console.log(1);
//next函数必须使用，否则无法进入下一个中间件，会出现阻塞
next();
},(req,res)=>{
console.log(2);
res.send('abc');
});
app.listen(3000,()=>{
console.log('running...');
});
- get请求可以写多个方法
- Next函数 中间件中必不可少
关于next
app.get('/abc',(req,res,next)=>{
console.log(1);
next('route');
},(req,res)=>{
console.log(2);
res.send('abc');
});
//下面是绑定了一个新的路由
app.get('/abc',(req,res)=>{
console.log(3);
res.send('hello world');
})
app.listen(3000.()=>{
console.log('running...')
})
上面的代码会在控制台中打印出什么呢？
结果是1 ，3 next('route')的作用的是跳转到下一个路由，就像break一样
路由中间件的写法有很多种，我们还可以使用函数数组和函数来处理路由：
var cb0 = function(req,res,next){
console.log('cb0');
next();
}
var cb1 = function(req,res,next){
console.log('cb1');
next();
}
app.get('/abc',[cb0,cb1],function(req,res,next){
console.log('response will be send...');
next();
},function(req,res){
res.send('hello world');
})
应用层面中间件
首先我们要创对应的包
在控制台输入 npm install body-parser --save
我们可以来获取表单提交的数据
const express = require('express');
const app = express();
const bodyParse = require('body-parser');
//挂载内置中间件
app.use(express.static('public'));
//挂载参数处理中间件(post)
app.use(bodyParse.urlencoded({extended:false}));
app.post('/login',(req,res)=>{
//body就是通过bodyParse加上去的属性
let data = req.body;
console.log(data);
if(data.username == 'admin' && data.password == '123'){
res.send('success');
}
else{
res.send('false');
}
});
app.listen(3000,()=>{
console.log('running...');
})
这是处理post请求的，那么如果我们要发送get请求呢？
//将源代码改为
app.get('/login',(req,res)=>{
let data = req.query;
console.log(data);
res.send('get data');
});
get请求是不需要bodyParse这个包的
前面我们是通过后台来进行请求的，那么我们再来尝试一下ajax的方式吧
//首先在html中建立一个from表单，引入jQuery的库，我们在<script>中写入
$(function(){
$('#btn').click(function(){
$.ajax({
type:'get',
url : 'http://localhost:3000/demo',
// 响应的数据类型
dataType:'text',
//进行传值
data: $('form:eq(0)').serialize(),
//回调函数
success:function(data){
console.log(data);
}
});
});
});
结果我们可以chrome页面的network中的response中看到
如果我们想提交一个json格式的代码 代码需要这样更改
给账号，密码加一个id
$('#btn').click(function(){
var obj = {
username:$('#username').val(),
password:$('#password').val()
}
$.ajax({
type:'get',
url : 'http://localhost:3000/demo',
contentType:'application/json',
// 响应的数据类型
dataType:'text',
//将一个对象转换成字符串
data:JSON.stringify(obj),
success:function(data){
console.log(data);
}
});
});
仅仅这样服务器还是接受不到数据，我们需要在加入对应的参数
app.use(bodyParse.urlencoded({extended:false}));
//加入处理json格式的参数
app.use(bodyParse.json())
到这里，express第一部分的讲解就结束了，这次学习了express的安装，托管静态文件，路由和中间件方面的知识，知识量比较大，很多我也一样一知半解，学习不进则退，为了更好的理解，当然要不断学习，加油，与君共勉！
