vue和php前后端分离

了解前后端分离

前后端的分离分为两步：

1. 后端通过了解前端需要哪些数据，用php，java，c#等向数据取数据，然后把取出的数据发布地址到服务器，
2. 前端通过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': {
             //设置你调用的接口域名和端口号 别忘了加http
              target: '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);
})

结果可以看到