axios使用get方法給後端傳值，登陸功能的實現

前端使用vue實現頁面，使用axios進行先後端交互

後端使用node.js提供接口

數據庫使用navicat for mysql

---

 前端代碼：(組件中使用axios先後端交互)

import axios from 'axios'
export default{
    name:'myAdmin',
    data(){
        return{
            username:'',
            password:''
        }
    },
    methods:{
        handleClick:function(){
            axios({
                url:'http://*******:8000/login',
                methods:'get',
                params:{
                    'username':this.username,
                    'password':this.password
                }
            }).then(this.getUserInfo).catch((err)=>{
                alert('用戶名不存在！！')  // 拋錯，輸入的用戶名不存在，sql語句查詢不到
            })
        },
        getUserInfo:function(res){
            var res = res.data
            // console.log(res.data)
            if(this.username == res.data[0].username && this.password == res.data[0].password){
                alert('登陸成功！')
                this.username = this.password = ''
            }else if(this.username == res.data[0].username || this.password == res.data[0].password){
                alert('用戶名或密碼出錯！')
            }
        }
    }
}

 後端代碼：

//登陸
app.all('/login',(req,res)=>{
    // 查詢語句根據用戶名查詢用戶信息
    conn.query("select * from `user` where username = '" + req.query.username +"'",(e,r)=>res.json(new Result({data:r})))
})

function Result({code=1,msg='',data={}}){
  this.code = code;
  this.msg = msg;
  this.data = data
}

效果如圖：