VUE 动静分离的革命

2020年三月四日，肺炎也消停了，在家里学习了docker搭建lnmp，模拟了nginx负载均衡，mysql主从配置，和VUE。今天想配合tp，学习一下VUE在项目中的具体使用方法。

tp用的最新的6.0.2 , php用的最新的7.4，mysql用的8.019 , 因为用的docker，php和mysql版本我可以随时随便换。

1，tp下来的时候没有具体报错信息，我把.exame.env配置文件打开了，然后数据库连不上，但我直接new POD却能连上，后来发现， .env 配置文件配置的数据库参数优先于database.php

2， 然后开始渲染模板，发现手册里的 view方法不能使用， 需要composer require topthink/think-view 安装才可以，详情见手册。https://www.kancloud.cn/manual/thinkphp6_0/1037613

为什么这么基础的功能还要安装呢？

有这个疑问的话，VUE就白看了。

几乎所有php框架，都有自己的模板引擎， 还有好多如php smarty的第三方模板，他的写法像这样。在php控制器里面

$this->assign('test', $a);

然后在模板里 用

{$test}

输出$a的内容，但随着app流行，我们常常给app的内容和给h5前端的内容是相同的，。可不可以h5和app共用一个接口？可不可以静态页面交给前端人员，而不用php程序员插手呢？

当然可以，VUE等类似框架诞生了。（虽然jq也能做这些事情，但jq并不是为此诞生的）

用VUE， 我们就并不需要tp自己的模板引擎， 在html页面， 不需要任何php代码的参与，php要做的是，输出json数据串，剩下的交给VUE处理。

听着简单有趣，vue能解析json数据并平铺到静态页面上，但最重要的是，vue能判断用户登录状态吗？ 不急，一点点来。
vue我们已经看过一遍了，这里讲下最简单的，body里面内容。

<div id="app">
  {{ message }}
</div>

js代码

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

屏幕上显示的是 Hello Vue!
要想和后端交互必须用ajax， jq中的ajax已经
用烂了，vue-resource官方停止更新，最后我选择了axios。

这里涉及到一个跨域问题， php端需要添加一行代码。

header('Access-Control-Allow-Origin:*');

好的文档能事半功倍， 参考资料 :
https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
贴下代码。php代码：

        header('Access-Control-Allow-Origin:*');  //为了跨域
        return json("后台的数据？");  //输出json数据。

前端html代码：

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('http://localhost/vue/hi')
      .then(response => (this.info = response.data))
  }
})

这些只是输出了一个字段，那么数组呢？
我们用php丢出数组

        header('Access-Control-Allow-Origin:*');
        $arr = [
            ['id' => 1, 'name' => '测试', 'message' => '随便的内容'],
            ['id' => 2, 'name' => '得分',  'message' => '爱迪生'],
            ['id' => 3, 'name' => '啊啊去', 'message' => '啊各位我'],
        ];
        return json($arr);

前端js代码，都学过，只不过现在的数据用ajax去接收一下。

new Vue({
  el: '#app',
  data () {
    return {
      lists: null
    }
  },
  mounted () {
    axios
      .get('http://localhost/vue/lists')
      .then(response => {
        this.lists = response.data
       // console.log(response.data);
      })
  }
})

html代码

    <div id="app">
      <li v-for="l in lists">
        {{ l.id }} - {{ l.name }} - {{ l.message }}
      </li>
    </div>

vue中循环数组有点特别， 被循环数组放后面， 打印可以去掉。
真是没有任何难度。
要注意的是js代码里面，大括号里面，代码换行时没有分号; ,加上反而会报错，需要注意一下。

我会想起了在中国体育，我们不太合格的前端，当一个界面需要多个接口时，他就不会处理了，我们接下来处理一个更复杂一些的情况。
如果后端代码不符合标准，尽量让后端去处理。
比如，我们一个mounted里面有多个axios

    axios
      .get('http://localhost/vue/lists')
      .then(response => {
        this.lists = response.data
        console.log(response.data);
      })
    axios
      .get('http://localhost/vue/lists')
      .then(response => {
        this.ttls = response.data
        console.log(response.data);
      })

其实第一二个可以用不同接口，但，正常情况下，vue是建议用多个id块去请求多个接口的。比如这样

new Vue({
  el: '#app',
  data () {
    return {
      lists: null
    }
  },
  mounted () {
    axios
      .get('http://localhost/vue/lists')
      .then(response => {
        this.lists = response.data
       // console.log(response.data);
      })
  }
})

new Vue({
  el: '#app2', //注意这里是第二个id
  data () {
    return {
      lists: null
    }
  },
  mounted () {
    axios
      .get('http://localhost/vue/lists') // 这里请求第二个接口
      .then(response => {
        this.lists = response.data // 第二个接口接收到值
      })
  }
})

然后html

        <div id="app">
            <li v-for="l in lists">
                {{ l.id }} - {{ l.name }} - {{ l.message }}
            </li>
        </div>
        <div id="app2">
            <li v-for="l in lists">
                {{ l.id }} - {{ l.name }} - {{ l.message }}
            </li>
        </div>

由于最上层的id app和app2都已经将内容分开了，所以lists是可以重名的，这才是正确姿势。