vue和php前后端分离

文章目录

了解前后端分离
后端 php连接mysql，把数据输出
前端 vue脚手架的跨域配置请求数据

了解前后端分离

前后端的分离分为两步：

后端通过了解前端需要哪些数据，用php，java，c#等向数据取数据，然后把取出的数据发布地址到服务器，
前端通过get，post请求向后端发布到服务器的地址请求数据，然后把返回的数据加载到页面上。

前后端实现的首要点就是解决跨域问题

跨域：出于浏览器的同源策略限制。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

最常见解决跨域的方法是JSONP，想详细了解可以看这篇博客：
什么是跨域？跨域解决方法.

接下来回到本文的主题，用vue和php实现前后端分离

后端 php连接mysql，把数据输出

我的php用的phpstorm编写，连接的数据库是wampserver中的mysql。

这里介绍一下warmserver：
WampServer就是Windows Apache Mysql PHP集成安装环境，即在window下的apache、php和mysql的服务器软件。

我用warmserver主要是可以把自己的电脑弄成服务器

1.php连接mysql

<?php
//header("content-type:text/html;charset=utf-8");
header("content-type:text/json");$dbhost = 'localhost';  // mysql服务器主机地址
$dbuser = 'root';            // mysql用户名
$dbpass = '';          // mysql用户名密码
$daname = 'xuanke';      // 数据库
$conn = mysqli_connect($dbhost, $dbuser, $dbpass,$daname);//下面这3行是让数据库可以正常取出中文数据
mysqli_query($conn,"set_names_utf8");
mysqli_query($conn,"set_character_set_client=utf8");
mysqli_query($conn,"set_character_set_results=utf8");if(!$conn){die("连接失败: ".mysqli_error($conn));
}
$sql="select * from admin";
$result = mysqli_query($conn,$sql);
if(mysqli_num_rows($result)>0){while ($row=mysqli_fetch_assoc($result)){echo json_encode($row);//把数据按json返回}
}
?>

2.把写好的php文件夹拉到warmserver安装目录的www下：

3.然后再浏览器输入地址就可以看到我返回的json数据：
（我这里的8088端口是改了的，默认的是80端口）

4.记住这个地址，下面要用到

前端 vue脚手架的跨域配置请求数据

1.在vue.config.js文件配置：

module.exports = {devServer:{open:true,proxy: {'/api': {//设置你调用的接口域名和端口号 别忘了加httptarget: 'http://localhost:8088/', changeOrigin: true, //允许跨域pathRewrite: {'^/api': ''//会将请求/api/xuanke/index.php替换为/xuanke/index.php}}}}
}

这里配置的一些注意点可以参考：
vue-cli跨域配置以及一些注意点.
2.调用
在vscode打开终端，安装vue-resource：

npm i vue-resource -S

在main.js文件引入：

import vueResource from 'vue-resource'
Vue.use(vueResource)

向后台数据请求：

this.$http.get("/xuanke/Student/login.php").then(res=>{console.log(res.data);
})

结果可以看到

vue和php前后端分离相关推荐

vue和Java做数据交互_基于vue和springmvc前后端分离，json类接口调用介绍
基于vue和springmvc前后端分离,json类接口调用介绍版本要求:spring-3.2.9.RELEASE.vue-2.9.2.axios-0.17.1,其中axios作为http clie ...
《Vue+Spring Boot前后端分离开发实战》专著累计发行上万册
杰哥的学术专著<Vue+Spring Boot前后端分离开发实战>由清华大学出版社于2021年3月首次出版发行,虽受疫情影响但热度不减,受到业界读者的热捧,截至今日 ...
视频教程-VUE前端开发/前后端分离-Java
VUE前端开发/前后端分离 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate.ib ...
用uwsgi和nginx 部署 django和vue打造的前后端分离项目
用uwsgi和nginx 部署 django和vue打造的前后端分离项目前言由于现在没有彻底掌握nginx的使用,部署起来有点磕磕绊绊,为了防止以后再次需要部署的时候无法快速找到适合的资料,以此文 ...
Vue+Spring Boot 前后端分离的商城项目开源啦！
1 新蜂商城 Vue 移动端版本开源啦! 去年开源新蜂商城项目后,就一直在计划这个项目 Vue 版本的改造,2020 年开始开发并且自己私下一直在测试,之前也有文章介绍过测试过程和存在的问题,修改完成 ...
使用SpringBoot + Vue (若依前后端分离版) 写项目的一些总结(持续更新...)
使用SpringBoot + Vue(若依前后端分离版) 写项目的一些总结获取Redis服务 @Autowired private RedisCache redisCache; String cap ...
Laravel8 Sanctum API认证+Vue问卷搭建前后端分离SPA应用
Laravel8 Sanctum API认证+Vue问卷搭建前后端分离SPA应用 1 Sanctum 扩展安装与配置 1.1 安装Sanctum 1.2 配置API中间件 1.3 跨域访问配置 1. ...
基于vue springboot的前后端分离的化妆品商城
基于vue springboot的前后端分离的化妆品商城技术介绍后端: springboot mybatis ORM框架 mysql数据库 redis分布式缓存 Druid数据库连接池前端: V ...
Spring Boot + Vue.js 实现前后端分离（附源码）
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章作者: 梁小生0101 链接:juejin.im/post/5c6 ...
Spring Boot + Vue + Shiro 实现前后端分离、权限控制
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料来源:http://sina.lt/gauR 本文总结自实习中对项 ...

vue和php前后端分离

文章目录

了解前后端分离

后端 php连接mysql，把数据输出

前端 vue脚手架的跨域配置请求数据

vue和php前后端分离相关推荐

最新文章

热门文章

vue和php前后端分离

文章目录

了解前后端分离

后端 php连接mysql，把数据输出

前端 vue脚手架的跨域配置 请求数据

vue和php前后端分离相关推荐

最新文章

热门文章

前端 vue脚手架的跨域配置请求数据