vue + axios ajax的相关操作

接着昨天的写，我们来用vue模拟一下用户的登录操作。
html代码

#引入js
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
html
        <div id="app">
        姓名：<input type="text" v-model="username" placeholder="请输入账号"/><br/>
        密码：<input type="text" v-model="password" placeholder="请输入密码"/><br/>
        <input type="button" v-on:click="log" value="登录"/>
        <!-- v-on:click="log" 可简写@click="log" -->
        </div>
#js 最重要的就是下面的写法, 统一按照这个格式就好了。

new Vue({
  el: '#app',
  data () {
    return {
      username: null,
      password: null,
    }
  },
  methods: {
    log:function(event) {
        axios
          .post('http://localhost/vue/login', {
            username : this.username,
            password : this.password
          })
          .then(response => {

           // console.log(response.data); // 打印返回数据
          })
        //console.log(this.username + '-' + this.password); //打印你提交的数据
    }
  }
})

瞧不起前端技术是因为，我翻了一遍vue手册，然后一边查着文档，就能一遍写出类似代码了。
然后在php代码中接收这两个参数，返回相应信息就可以了。

    public function login() {
        $username = Request::post('username');
        $password =  Request::post('password');
        if ($password == '123456' && $username == 'root') {
            return json('ok');
        }
        else {
            return json('error');
        }
    }

进10年，我php都写吐了，就这些了，不连数据库了。
js这边稍微修改下就行了。

          .then(response => {
            if(response.data == 'ok') {
                alert('登录成功');
            }
            else {
                alert('失败');
            }
           console.log(response); // 打印返回数据
          })

TP的json方法，把数据放在了data里面，详细信息看下浏览器调试工具打印的信息即可。
第一段先到这里，下一节我们讲下token验证。

我花了十几分钟想了一下，其实token实在没什么好讲的，每次用户登录成功，我们都会生成一个token，比如24个字母和数字组成的字符串，直接写入表，由于用户登录成功后，几乎每次请求接口都会用到token，我们可以把它存入session，或redis，然后接口每次发出请求时，判断uid和token是否对应，不对应的话则判断为非法请求。
用户每次重新登录，更新token， 同时更新session，或redis里的token。
未避免遭到挟持，最好用https。

剩下的知识点是如可存储token， 可以使用cookie或localStorage

localStorage.setItem("key", "value"); //保存数据
lastname = localStorage.getItem("key"); //获取数据
localStorage.removeItem("key"); //删除数据 

这就够用了，第二次写会覆盖数据。
然后每次接口请求，多添加一个参数，比如

token : localStorage.getItem("key"); 

像这样把token提交上去就行了。localStorage在该域名下，各个文件，各个文件夹下都能获取到，但同一个文件，你换了个域名就获取不到了（废话）。