Vue.js连接php调用数据

矫情吗；* 2021-09-16 15:16 820阅读 0赞

### Vue.js连接php调用数据 ###

*   *  php步骤如下：
     *  vue.js步骤如下：

以下是我的学习总结，我尽量说的详细一些，部分步骤较多，可能会所有省略。

**需要软件工具：**

1.  安装Vue.js: 是一套用于构建用户界面的渐进式框架
2.  安装Xampp:（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包  
    PS:调用数据需要安装resource;  
    第一步：安装命令：npm install vue-resource --save  
    第二步：在main.js添加  
    import VueResource from “vue-resource”;  
    Vue.use(VueResource);

\*\*思路示意图：\*\*

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]![在这里插入图片描述][70]  
  
  
![在这里插入图片描述][70 1]

## php步骤如下： ##

**测试包/工具：**  
*备注：如需要文件请留言*  
![70 2][]  
**一、建立php站点**  
![在这里插入图片描述][70 3]  
  
  
**二、连接数据库**  
![在这里插入图片描述][70 4]  
  
  
**三、打开xampp**  
![在这里插入图片描述][70 5]  
  
  
**四、设置端口号**  
![在这里插入图片描述][70 6]  
  
  
**五、进入Apache(httpd.conf)设置文件路径和端口号**  
*备注： 文件路径也就是步骤一的站点的路径，设置端口号避免冲突*  
![在这里插入图片描述][70 7]  
  
  
**六、开始运行xampp**  
![在这里插入图片描述][70 8]  
  
  
![在这里插入图片描述][70 9]

## vue.js步骤如下： ##

**一、建立vue站点**  
测试包/工具：  
*备注：如需要文件请留言*  
![在这里插入图片描述][70 10]  
![在这里插入图片描述][70 11]  
  
  
**二、创建连接php的组件**  
![在这里插入图片描述][70 12]  
  
  
**三、调用组件**  
![在这里插入图片描述][70 13]  
  
  
**四、cd进入vuedemo04文件,cnpm run dev (我安装的是淘宝镜像，所以在前面加c)运行App.vue**  
![在这里插入图片描述][70 14]  
  
  
**五、运行效果：在body中显示图片**  
![在这里插入图片描述][70 15]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190513090035860.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx,size_16,color_FFFFFF,t_70
[70]: /images/20210724/adada6b257374095898b42e3ec875c69.png
[70 1]: /images/20210724/61bd5730c1ee433d83d8259f9e76cc38.png
[70 2]: /images/20210724/2e1502d592944b728f6b7ea3ea346120.png
[70 3]: /images/20210724/2298ea066b344dd1b5130e43d9281574.png
[70 4]: /images/20210724/37a437db56bb4830a5b19c02a9a034df.png
[70 5]: /images/20210724/d4322fa51fec4b9695054b3a32658f83.png
[70 6]: /images/20210724/6d9caeb5f78a4efc89801e7db18a76f1.png
[70 7]: /images/20210724/6c62c38daa6242ecadd28d22cd4358b5.png
[70 8]: /images/20210724/74aef6810b3c4ee6bcbd947e000fd55e.png
[70 9]: /images/20210724/d033537024e14b9b8acf465b7bca159b.png
[70 10]: /images/20210724/25fad881a71c4fc9ac32c836f4da9d94.png
[70 11]: /images/20210724/b86d95f4395e48e4af197465915ca6da.png
[70 12]: /images/20210724/9afba26b87374652be27d44eef95a17c.png
[70 13]: /images/20210724/4c87d81d03e84a3a8d7e810e5f116419.png
[70 14]: /images/20210724/b43133a15a094d4386c92edf1bc0f23e.png
[70 15]: /images/20210724/a71cba0b274a451cbb87e7f562678f7b.png