『壹』 前端vue與後端Thinkphp在伺服器的部署
vue在服務端部署時，我們都知道通過npm run build 指令打包好的dist文件，通過http指定是可以直接瀏覽的，Thinkphp通過域名指向index.php文件才可以瀏覽。要使前端正常調用後端數據，有兩種方法：1、前端跨域調用後端數據，2、前端打包文件部署在後端的伺服器文件夾下（同域）。
web伺服器： apache
一、跨域
在伺服器配置站點：
在路徑/home/www/ 下創建test項目文件夾，用來放項目文件。
找到httpd-vhosts.conf文件配置站點
前端站點：
ServerName test.test.com
DocumentRoot "/home/www/test/dist"
DirectoryIndex index.html
後端站點：
ServerName test.testphp.com
DocumentRoot "/home/www/test/php"
DirectoryIndex index.php
將前端打包好的dist文件放在/home/www/test/ 文件夾下，運行http://test.test.com可瀏覽，當路徑改變時，刷新會出現404錯誤。此時dist文件下創建一個.htaccess文件，當路徑不存在時，路徑指向http://test.test.com/index.html能解決此問題。
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
在/home/www/test文件夾下創建項目根目錄php文件夾，將thinkphp文件放在php下。TP5的入口文件在public文件下，在這將public下的入口文件index.php挪到php文件夾下（個人習慣將入口文件放在項目根目錄）, 後端綁定Index模塊。
前端調用後端介面，存在跨域，跨域解決方法有好幾種，在這我將在後端php做配置，解決跨域問題，在公用控制器設置跨域配置：
class Common extends Controller
{
public $param;
// 設置跨域訪問
public function _initialize()
{
parent::_initialize();
isset($_SERVER['HTTP_ORIGIN']) ? header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']) : '';
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId");
$param = Request::instance()->param();
$this->param = $param;
}
}
前端調用登錄介面： this.axios.post('http://test.testphp.com/index.php/base/login', {user: '', password: ''})。
(可在webpack.base.conf.js文件下可定義介面：http://test.testphp.com/index.php/)
二、同域
後端配置同上，公共配置器中的header配置注釋。將前端的dist文件下的所有文件（包含.htaccess），放在php文件夾下。將後端index控制器的index方法的路徑重定向php下的index.html文件：
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
public function index() {
$this->redirect('/index.html');
}
}
前端調用登錄介面： this.axios.post('/index.php/base/login', {user: '', password: ''})
轉自：https://blog.csdn.net/qq_35465132/article/details/78986675
『貳』 前端後端怎麼連接起來
前端調用後端介面無外乎六種方法，如下：
1、打開vs，創建空的asp.net mvc演示項目【WebMVC】
（1）依次點擊【文件】->【新建】->【項目】；
（2）在【新建項目】界面選擇【Web】->【ASP.NET Web 應用程序(.NET Framework)】，輸入名稱，選擇框架至少4.5版本，點擊【確定】按鈕；
（3）選擇【空】->【MVC】->【確定】 ；
（4）創建好了項目。
2、在項目中
（1）在Controllers文件夾上點擊滑鼠右鍵，依次選擇【添加】->【控制器】，即可完成HomeController的創建；
（2）在Controller的Index方法內，點擊滑鼠右鍵，選擇【添加視圖】；
（3）在項目中添加文件夾【Content】並添加jquery源文件；
（4）在Index頁面添加jquery的引用。
3、在Index頁面中添加一個輸入文本框，一個按鈕，以及顯示結果的dom。
4、在HomeController中添加新的方法，用於接收前台傳入的參數，組裝後返回。
5、在Index頁面，添加Jquery的ajax方式，調用後台介面，返回結果的處理代碼。
6、在vs中，按F5調試運行結果，如下：
（1）在文本框中輸入內容；
（2）點擊按鈕，調用介面，並將返回值顯示在界面；
（3）如果要提交大量數據，或者敏感數據，請修改ajax的type方式，這樣參數就不會在url地址欄中顯示了。
『叄』 前端項目開發對接後端為伺服器介面
在項目中,前端如何調用後端的介面,整體的流程大概可以分為
路由調用vue頁面的組件,
頁面組件調用前端的Api介面(js文件),
前端介面調用後端的微服務介面
這個是首頁,包含了多個路由,路由下也可包括子路由.路由中引用了頁面文件,頁面文件應用js文件,js文件中的請求引入默認的請求前綴,去對接後端的Api介面