使用nodejs进行前后端交互

我们暑假这个月主要学node项目,7月份根据node自己写了一个完整的后台(就是自己写后台),8月份我们利用node链接前后端,这次使用axios来代替ajax,刚听起来的时候感觉特别的难,一步一步地走,最后发现…这次还用到token,头大,每一个接口都需要用到token,token咋用我们还商量了2-3天,项目刚刚起步的时候是怪难的,可能掌握一个就会慢慢理解了,我今天写下自己第一次弄成功的,以便以后你们可以不用像我当初那么的苦恼,只是有一些地方可能不是很对,而且我用的都是最原始的。
在路由中的那个js里面写,主要是把后端给的接口改成自己的

//跳转登录页面
router.get('/login',function(req,res){
    res.render('login.html')
})
//修改登录给的接口
router.get('/enter',function(req,res){
    axios({
        url:"http://60.205.215.189:8080/user/login",
        // 每个请求体都要调用一下token,可能会比较麻烦
        headers:{
            token: req.session.token?req.session.token :"",
        },
        params:{
            username:req.query.username,
            password:req.query.password
        },
        method:"get"  
    })
    .then(function(data){
            res.status(200).json({
                //这里根据自己需要写
                code:data.status,
                msg:data.data.msg
            })
            // 保存token
            res.session.token = data.data.token
            // req.app.locals.token = data.data.token
            console.log(data.data.token)
            // 把username保存,其他页面可以调用
            req.session.username = req.query.username
            req.app.locals.userInfo = req.query.username  
           
     })
    .catch(function(err){
        res.status(500).json({
             message:'登录失败'
         })
    })
})

在登录的js中使用axios

btn.onclick = function(){
    if(userName.value == '' || passWord.value == ''){
        hideLoad.style.display='block';
        hideLoadForm.style.opacity = '1';
        setTimeout(function(){
            hideLoad.style.display='none';
            hideLoadForm.style.opacity = '0';   
        },2000)   
    }else{
        axios({
            url:'/enter',
            methods:'get',
            params:{
                username:userName.value,
                password:passWord.value
            }  
        })
        .then(function(data){
            console.log(data.data.code)
           if(data.data.code == 200){
               alert(data.data.msg)
               window.location.href='/index'
           }
        //    else{
        //        console.log('失败')
        //    }
        })
        .catch(function(error){
            console.log('失败')
        })
    }
    
}
```初次写,可能有错误的地方,请指教。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值