牢记：服务器端改变，就要重启
以后呢，打开页面得在服务端打开。在vscode下，ctrl+shift+n，启动3000端口（启动端口号你可以自己修改，但端口唯一）。在浏览器url中输入127.0.0.1:3000就会跳转到 index.html 。
在服务端app.js中我们添加
//服务端的内容.get方式发起的请求，我们就执行下面的函数
app.get('/a',function(req,res){
res.send('这是get回来的数据 ');
})
在客户端index.html中添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=in, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
index
<button class="btn btn-danger" id="sendGet">发送get请求</button>
<script src="components/jquery/dist/jquery.min.js"></script>
<script>
//下面是客户端的内容
sendGet.onclick = function(){
$.ajax({
url:'/a',
type:'get',
success:function(data){
alert(data);
}
})
}
</script>
</body>
</html>
上面这个是把返回的信息显示在弹出框里面，下面我们把返回的信息显示在div中。
var express = require('express');
var path = require('path');
//创建服务
var app = express();//实例化对象
app.post('/a',function(req,res){
res.status(200).send("这是post的数据");
});
//服务端的内容.get方式发起的请求，我们就执行下面的函数
app.get('/a',function(req,res){
// res.send('这是get回来的数据 ');
//返回一个json数据
var stu = {name:'www',age:20};
// res.status(200).json(stu);
res.status(200).json({success:true,obj:stu});
})
app.use('/list',function(req,res){
//'/detail'可以随便写，只要和浏览器url中的输入符合起来就行了
//给客户端写东西应该调用响应的对象.. status()可以修改状态码
res.sendFile(path.join(__dirname,'www','list.html'));
});
//use(路径，函数) 如果路径存在，就执行函数。不存在，就顺序执行。执行了其中一个use，后面就不会在执行了。
//index.html默认的访问页面.static()路径给到文件夹就会自动读取index.html文件
app.use(express.static(path.join(__dirname,'www')));
app.use('*',function(req,res){
res.status(200).sendFile(path.join(__dirname,'www','err','404.html'));
});
//后面的操作都会通过这个对象进行操作
app.listen(3000,function(err){
if(err){
console.log("监听失败");
throw err;
}
console.log("服务器已开启，端口号为：3000");
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=in, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
index
<div id="msg"></div>
<button class="btn btn-danger" id="sendGet">发送get请求</button>
<button class="btn btn-danger" id="sendPost">发送post请求</button>
<script src="components/jquery/dist/jquery.min.js"></script>
<script>
//下面是客户端的内容
sendPost.onclick = function(){
$.ajax({
url:'/a',
type:'post',
success:function(data){
$("#msg").append(data);
}
})
}
sendGet.onclick = function(){
$.ajax({
url:'/a',//服务器端的a接口
type:'get',
success:function(data){
// alert(data);
if(data.success)
{
$("#msg").append("姓名:="+data.obj.name+"年龄:="+data.obj.age);
}
}
})
}
</script>
</body>
</html>
虽然接口都是/a接口，但是接口不同，所以不会冲突。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
通过请求对象里面的params可以得到发送的100
------------------------------------------- body 传参 --------------------------------------------------------------------
就单纯的这样的话，会报错500。因为缺少了响应的模块或者说是包。我们需要进行拉包操作。
主要对body传参的数据进行处理的。
npm install body-parser --save
这个包主要是针对 参数 进行处理的。下载结束后进行引入包操作。
var bodyparser = require('body-parser');
下面是完整的源代码
app.js index.html
var express = require('express');
var path = require('path');
var bodyparser = require('body-parser');
//创建服务
var app = express();//实例化对象
app.use(bodyparser.json());//对json参数的处理
app.use(bodyparser.urlencoded({extended:false}));
var stu = [
{name:'www',age:20},
{name:'rr',age:3},
{name:'ttt',age:40}
]
app.post('/d',function(req,res){
var name = req.body.name;
var age = req.body.age;
var info = {
name:name,
age:age
}
if(name && age)
{
stu.unshift(info);
res.status(200).json({success:true,msg:'添加成功'});
}else{
res.status(200).json({success:false,msg:'添加失败'});
}
})
app.get('/c/:id',function(req,res){
var id = req.params.id;
if(id>=0 && id<stu.length)
{
var info = stu[id];
res.status(200).json({success:true,msg:'',obj:info})
}else{
res.status(200).json({success:false,msg:'查无此人',obj:{}})
}
});
//用all(),无论用get/post都能请求，得到回应
app.all('/b',function(req,res){
res.send('这是数据');
});
app.post('/a',function(req,res){
res.status(200).send("这是post的数据");
});
//服务端的内容.get方式发起的请求，我们就执行下面的函数
app.get('/a',function(req,res){
// res.send('这是get回来的数据 ');
//返回一个json数据
var stu = {name:'www',age:20};
// res.status(200).json(stu);
res.status(200).json({success:true,obj:stu});
})
app.use('/list',function(req,res){
//'/detail'可以随便写，只要和浏览器url中的输入符合起来就行了
//给客户端写东西应该调用响应的对象.. status()可以修改状态码
res.sendFile(path.join(__dirname,'www','list.html'));
});
//use(路径，函数) 如果路径存在，就执行函数。不存在，就顺序执行。执行了其中一个use，后面就不会在执行了。
//index.html默认的访问页面.static()路径给到文件夹就会自动读取index.html文件
app.use(express.static(path.join(__dirname,'www')));
app.use('*',function(req,res){
res.status(200).sendFile(path.join(__dirname,'www','err','404.html'));
});
//后面的操作都会通过这个对象进行操作
app.listen(3000,function(err){
if(err){
console.log("监听失败");
throw err;
}
console.log("服务器已开启，端口号为：3000");
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=in, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
index
<div id="msg"></div>
<button class="btn btn-danger" id="sendGet">发送get请求</button>
<button class="btn btn-danger" id="sendPost">发送post请求</button>
<button class="btn btn-danger" id="sendPostGet">发送post/get请求</button>
<!-- 下面这个进行路由传参,一般来说是post请求 -->
<button class="btn btn-danger" id="sendD">发送get，路由传参</button>
<button class="btn btn-danger" id="sendE">发送post，body传参</button>
<script src="components/jquery/dist/jquery.min.js"></script>
<script>
//下面是客户端的内容
sendE.onclick = function(){
$.ajax({
url:'/d',
type:'post',
data:{name:'tom',age:100},
success:function(data){
if(data.success){
alert(data.msg);
}else{
alert(data.msg);
}
}
})
}
sendD.onclick = function(){
$.ajax({
url:'/c/10',
type:'get',
success:function(data){
if(data.success)
{
$("#msg").append(data.obj.name+' '+data.obj.age);
}else{
$("#msg").append(data.msg);
}
}
})
}
sendPostGet.onclick = function(){
$.ajax({
url:'/b',
type:'post',
success:function(data){
$("#msg").append(data);
}
})
}
sendPost.onclick = function(){
$.ajax({
url:'/a',
type:'post',
success:function(data){
$("#msg").append(data);
}
})
}
sendGet.onclick = function(){
$.ajax({
url:'/a',//服务器端的a接口
type:'get',
success:function(data){
// alert(data);
if(data.success)
{
$("#msg").append("姓名:="+data.obj.name+"年龄:="+data.obj.age);
}
}
})
}
</script>
</body>
</html>
