node express搭建服务器和处理ajax请求

╰+攻爆jí腚メ 2021-07-24 15:22 404阅读 0赞

1、因为每次更新都需要重启服务器,所以下载nodemon,并用nodemon控制台启动文件,
    	cnpm install -g nodemon
    使得每次更新保存后自动重启服务器
    2、火狐发送请求
    
    3、处理请求前要设置跨域处理
    
    4、处理post请求(get请求直接使用)
    
    方式一:
    	(1)cnpm install -D body-parser
    	(2)在服务器文件引入
    		var bodyParser = require('body-parser');
    		var urlencodedParser = bodyParser.urlencoded({ extended: false });
      	(3)在post组件添加参数
      		app.post('/news',urlencodedParser, function (req, res, next){xxx})
      		
     方式二:
    	 const bodyParser=require('body-parser');
    	 app.use(bodyParser.json());
    	 
    5、请求传递参数处理:
    	get:req.query.键名
    	post:req.body.键名
    
    6、动态路由传参数
    	router.get("/:username")
    	axios.get("/xx")
    	获取参数:req.params.username
    	
    7、当前端是history(url无#)而不是hash(url会带#)路由，后台的配置
    app.use(history()); 
    
    8、返回数据
    res.send();  //会解析html标签
    res.json();
    res.status(状态码).json();  链式调用返回状态码和数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

代码示例:

/** * Created by 10853 on 2020/2/1. */
    //引入模块
    var express=require('express');
    var bodyParser = require('body-parser');
    var urlencodedParser = bodyParser.urlencoded({  extended: false });
    //创建服务器
    var app=express();
    
    //开启服务器并监听端口
    app.listen(3000,function(){ 
        console.log('this express server is running at http://127.0.0.1:3000 ');
    
    })
    
    //注册app中间件use,可处理get和post请求
    //app.use(function(req,res){ 
    // console.log('...')
    //})
    
    
    //注册get请求中间键
    app.get('/',function(req,res){ 
        //服务器回应数据
        res.send('这是主页面的内容')
        res.json(内容); //返回json内容
        var 变量=req.query.键名;   //get请求传入的查询参数中对应键的值
    })
    
    app.get('/movie',function(req,res){ 
        res.send('这是一个电影页面的内容');
    })
    
    app.post('/submit',urlencodedParser,function(req,res){ 
        res.send('这是一个post请求的数据');
        var 变量=req.body.键名;  //post请求传入的查询参数中对应键的值
        //使用前先加载 require(‘body-parser‘);中间件
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/23155157e86b409a9b7be66a6f4512d1.png