欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

TP5+VUE+AXIOS项目搭建初试

程序员文章站 2022-03-06 13:11:47
...

vue新手第一次尝试将tp5和vue结合起来，特此记录以备自己回顾，供跟我一样在摸索中前行的程序猿们参考；如果有不合理的地方，欢迎大神们指正！

的“vue+tp分离开发实时疫情动态地图”视频教程https://www.php.cn/course/1172.html 对这次学习有很大的指导作用，下面的记录中也有用到教程中的课程源码

一、TP5准备后台数据

1.application目录下新建six_products模块，mytestt控制器,index方法

这个方法通过外部API接口获取国外疫情数据，筛选出有用的部分，返回json格式的数据

    

  1. public function index()
    2. 

  2.     {
    3. 

  3.         //通过外部接口获取国外疫情数据
    4. 

  4.         $ex_res1 = file_get_contents("http://api.tianapi.com/txapi/ncovabroad/index?key=6c6d319a9f3b53c53b375c56fbd39207");
    5. 

  5.         $ex_res = json_decode($ex_res1, true);
    6. 

  6.         $list = $ex_res['newslist'];
    7. 

  7.         $newList = [];
    8. 

    9. 

  9.         if ($list != null) {
    10. 

  10.             foreach ($list as $k => $v) {
    11. 

  11.                 $newList[$k]['name'] = $v['provinceName'];//国家名字
    12. 

  12.                 $newList[$k]['currentConfirmedCount'] = $v['currentConfirmedCount'];//当前确诊人数
    13. 

  13.                 $newList[$k]['confirmedCount'] = $v['confirmedCount'];//累计确诊人数
    14. 

  14.                 $newList[$k]['deadCount'] = $v['deadCount'];//死亡人数
    15. 

  15.                 $newList[$k]['curedCount'] = $v['curedCount'];//治愈人数
    16. 

    17. 

  17.             }
    18. 

  18.         }
    19. 

    20. 

  20.         //返回json数据
    21. 

  21.         return json($newList);
    22. 

  22.     }
    23.

二.后端跨域路由配置

1.找到TP5的route文件夹下的路由配置文件route.php，并打开

2.添加以下代码，配置跨域路由

    

  1. //后端跨域路由配置
    2. 

  2. Route::get('mytestt/index','six_products/mytestt/index')->allowCrossDomain();
    3.

三、前端通过AJAX(AXIOS)获取后端数据

1.引入axios，注册axios变量和后端域名变量

在前端的main.js文件中添加以下代码

    

  1. import axios from 'axios'
    2. 

  2.     // 注册axios变量
    3. 

  3. Vue.prototype.$axios = axios
    4. 

  4. // 注册后端域名变量
    5. 

  5. Vue.prototype.$host = 'https://test.cn/public/'
    6.

其中https://test.cn/public是后端的域名

2.通过axios读取数据，并显示出来（在前端的App.vue的<script></script>标签中填写以下代码，完整代码在末尾）

    

  1. created () {
    2. 

  2.     this.$axios.get(this.$host + 'mytestt/index').then(res => {
    3. 

  3.       const data = res.data
    4. 

  4.       this.curedCount = data[0].curedCount
    5. 

  5.       this.deadCount = data[0].deadCount
    6. 

  6.       this.currentConfirmedCount = data[0].currentConfirmedCount
    7. 

  7.       this.confirmedCount = data[0].confirmedCount
    8. 

  8.       this.update_time = data.update_time
    9. 

  9.       this.country = data[0].name
    10. 

  10.     })
    11. 

  11.       .catch(res => {
    12. 

  12.         console.log(res)
    13. 

  13.       })
    14. 

  14.   },
    15.

上面代码中$axios.get()中的’mytestt/index’就是第二步设置的后端跨域路由地址，两个一定要正确对应起来

四、打包vue项目

在前端项目的terminal窗口执行cnpm run build命令，打包完成后会在项目根目录下生成一个dist文件夹，包含static文件下和index.html文件，
TP5+VUE+AXIOS项目搭建初试

五、将打包好的vue前端文件放到tp5的项目中

（我放到了控制器的index方法中，据说也可以直接放到public目录下，具体参考：https://blog.csdn.net/qq236710052/article/details/107592387）

5.1 放Index.html文件

5.1.1 在TP5的application目录six_products模块下，新建mytestu控制器,index方法
    

  1. <?php
    2. 

    3. 

    4. 

  4. namespace app\six_products\controller;
    5. 

    6. 

  6. use think\Controller;
    7. 

    8. 

  8. class Mytestu extends Controller
    9. 

  9. {
    10. 

  10.     public function index(){
    11. 

  11.         return $this->view->fetch();
    12. 

  12.     }
    13. 

  13. }
    14.
5.1.2 在six_products模块下的view目录下新建mytestu文件夹，将前端打包好的dist文件夹下的index.html文件，直接放到刚才新建的mytestu文件夹下

5.2 放css和js文件，将css和js文件放在tp5项目的public/static/mytestu文件夹下

5.2.1 直接将前端打包好的dist文件夹下的css和js文件夹复制粘贴到public/static/mytestu文件夹下

5.3 修改前端index文件中的（six_products/view/mytestu/index.html）css和js文件引入路径

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.   <meta charset=utf-8>
    5. 

  5.   <meta name=viewport content="width=device-width,initial-scale=1">
    6. 

  6.   <title>my-project</title>
    7. 

  7.   <link href=/public/static/mytestu/css/app.9d739eebe64572b1f681feaa09be9e07.css rel=stylesheet>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10. <div id=app></div>
    11. 

  11. <script type=text/javascript src=/public/static/mytestu/js/manifest.2ae2e69a05c33dfc65f8.js></script>
    12. 

  12. <script type=text/javascript src=/public/static/mytestu/js/vendor.717a4ce3893d952882a7.js></script>
    13. 

  13. <script type=text/javascript src=/public/static/mytestu/js/app.5230369e4a91166d76b4.js></script>
    14. 

  14. </body>
    15. 

  15. </html>
    16.

这样就完成了整个项目的搭建，在浏览器中输入
https://test.cn/public/six_products/mytestu/index访问的结果如下图
TP5+VUE+AXIOS项目搭建初试

在此附上前端完整的App.vue文件代码：

    

  1. <template>
    2. 

  2.   <div id="app">
    3. 

  3.     <h3>{{country}}疫情</h3>
    4. 

  4.     <p class="txt">来源：各地官方通报及权威媒体报道</p>
    5. 

  5.     <p class="txt">更新：{{update_time}}</p>
    6. 

  6.     <div class="flexbox">
    7. 

  7.       <div class="item">
    8. 

  8.         <div class="red bold">{{confirmedCount}}</div>
    9. 

  9.         <div class="gray tittle">累计确诊</div>
    10. 

  10.       </div>
    11. 

  11.       <div class="item">
    12. 

  12.         <div class="red bold">{{currentConfirmedCount}}</div>
    13. 

  13.         <div class="gray tittle">现确诊</div>
    14. 

  14.       </div>
    15. 

  15.       <div class="item">
    16. 

  16.         <div class="gray bold">{{deadCount}}</div>
    17. 

  17.         <div class="gray tittle">死亡
    18. 

  18.         </div>
    19. 

  19.       </div>
    20. 

  20.       <div class="item">
    21. 

  21.         <div class="green bold">{{curedCount}}</div>
    22. 

  22.         <div class="gray tittle">治愈</div>
    23. 

  23.       </div>
    24. 

  24.     </div>
    25. 

  25.   </div>
    26. 

    27. 

  27. </template>
    28. 

    29. 

  29. <script>
    30. 

    31. 

  31. export default {
    32. 

  32.   name: 'App',
    33. 

  33.   data () {
    34. 

  34.     return {
    35. 

  35.       country: '美国',
    36. 

  36.       update_time: '',
    37. 

  37.       confirmedCount: 0,
    38. 

  38.       currentConfirmedCount: 0,
    39. 

  39.       deadCount: 0,
    40. 

  40.       curedCount: 0
    41. 

  41.     }
    42. 

  42.   },
    43. 

  43.   created () {
    44. 

  44.     this.$axios.get(this.$host + 'mytestt/index').then(res => {
    45. 

  45.       const data = res.data
    46. 

  46.       this.curedCount = data[0].curedCount
    47. 

  47.       this.deadCount = data[0].deadCount
    48. 

  48.       this.currentConfirmedCount = data[0].currentConfirmedCount
    49. 

  49.       this.confirmedCount = data[0].confirmedCount
    50. 

  50.       this.update_time = data.update_time
    51. 

  51.       this.country = data[0].name
    52. 

  52.     })
    53. 

  53.       .catch(res => {
    54. 

  54.         console.log(res)
    55. 

  55.       })
    56. 

  56.   },
    57. 

  57.   methods: {
    58. 

  58.   }
    59. 

  59. }
    60. 

    61. 

  61. </script>
    62. 

    63. 

  63. <style>
    64. 

  64. #app {
    65. 

  65.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
    66. 

  66.   -webkit-font-smoothing: antialiased;
    67. 

  67.   -moz-osx-font-smoothing: grayscale;
    68. 

  68.   text-align: center;
    69. 

  69.   color: #2c3e50;
    70. 

  70.   margin-top: 60px;
    71. 

  71. }
    72. 

  72. </style>
    73. 

  73. <style scoped>
    74. 

  74. .txt {
    75. 

  75.   font-size: 14px;
    76. 

  76.   color: grey;
    77. 

  77. }
    78. 

    79. 

  79. .flexbox {
    80. 

  80.   margin-bottom: 10px;
    81. 

  81.   width: 100%;
    82. 

  82.   height: 80px;
    83. 

  83.   background-color: lightgray;
    84. 

  84.   border-radius: 5px;
    85. 

  85.   display: flex;
    86. 

  86.   justify-content: center;
    87. 

  87.   align-items: center;
    88. 

  88. }
    89. 

    90. 

  90. .item {
    91. 

  91.   flex-direction: column;
    92. 

  92.   display: flex;
    93. 

  93.   width: 80px;
    94. 

  94.   height: 80px;
    95. 

  95.   margin: 0 50px;
    96. 

  96.   /* border:1px solid red; */
    97. 

  97.   justify-content: center;
    98. 

  98.   align-items: center;
    99. 

    100. 

  100. }
    101. 

    102. 

  102. .red {
    103. 

  103.   color: #cc0000
    104. 

  104. }
    105. 

    106. 

  106. .green {
    107. 

  107.   color: #42B983;
    108. 

  108. }
    109. 

    110. 

  110. .gray {
    111. 

  111.   color: gray
    112. 

  112. }
    113. 

    114. 

  114. .tittle {
    115. 

  115.   font-size: 14px;
    116. 

  116. }
    117. 

    118. 

  118. .bold {
    119. 

  119.   font-weight: 600;
    120. 

  120.   font-size: 18px;
    121. 

  121. }
    122. 

  122. </style>
    123.

上一篇： 关于session

下一篇： laravel 视图view

推荐阅读