axiosphp
① query string、formData和request payload的區別，你真的知道嗎
在前後端分離項目開發中，前後端數據傳遞的格式差異可能導致問題。前端向後端傳輸數據正確，但後端接收不到數據。原因在於數據格式不匹配，即前端使用的請求方式與後端接收數據的方式不一致。
當請求方式為 GET，前端通過 URL 的「問號傳參」格式，即 query string Parameters，傳遞數據。例如，請求地址為 newsList.php，參數為 pageIndex 和 pageCount，則格式為 newsList.php?pageIndex=1&pageCount=10。在 Chrome 瀏覽器的 network 視圖中，可以觀察到 query string Parameters 的請求格式。
對於非 GET 請求，數據不在 URL 上，而位於請求體中。請求體分為 formData 和 request payload 格式，根據 content-type 的值來區分。
當 content-type 為 "application/x-www-form-urlencoded" 或 "multipart/form-data"，使用 formData 格式傳遞數據。反之，當 content-type 為 "text/plain" 或 "application/json"，使用 request payload 格式傳遞數據。
默認數據格式遵循以下規則：傳統 ajax 請求時，Content-Type 默認為文本類型；傳統 form 提交時，Content-Type 默認為 Form 類型（application/x-www-form-urlencoded）；axios 傳遞字元串時，Content-Type 默認為 Form 類型；axios 傳遞對象時，Content-Type 默認為 JSON 類型。
了解這些格式及默認設置，有助於避免數據傳遞中的錯誤，確保前後端數據的正確傳輸。
② php項目怎麼部署到伺服器(php項目怎麼部署到伺服器中)
使用php開發的項目必須部署在才能正常運行使用PHP開發的項目必須部署在Web伺服器上才能正常運行。PHP是一種伺服器端腳本語言，用於開發動態網站和Web應用程序。PHP腳本必須在Web伺服器上運行，才能被解釋和執行。因此，使用PHP開發的項目必須部署在Web伺服器上才能正常運行。在部署PHP項目時，需要將PHP腳本文件和相關的資源文件上傳到Web伺服器上，並配置好Web伺服器的環境和參數，以確保PHP腳本能夠被正確解釋和執行。常用的Web伺服器包括Apache、Nginx等，可以根據具體需求選擇合適的Web伺服器進行部署。需要注意的是，部署PHP項目時需要考慮安全性和性能等因素，以確保項目的穩定性和可靠性。
php項目如何部署？？首先是要對數據結構進行規劃，然後根據項目大小決定是否用php框架或模板技術，之後就是後台功能開發，最後再把數據在前台展示出來；這只是基本步驟，真正實施起來，涉及的東西是很多的，要注意的細節也很多
Thinkphp5項目在nginx伺服器部署1，切換到nginx的配置目錄，找到nginx.conf文件
????cd?/usr/local/nginx/conf
??vim?nginx.conf
2，如果是單項目部署的話，只需要在nginx.conf文件裡面加上以下
server{
????????listen80;
????????#域名，本地測試可以使用127.0.0.1或localhost
????????server_name;
????????#php項目根目錄
????????root/home/data-www/blog;
????????location/{
????????????????#定義首頁索引文件的名稱
????????????????indexindex.phpindex.htmlindex.htm;
???????????????#影藏入口文件
???????????????if(-f$request_filename/index.html){
????????????????????????????rewrite(.*)$1/index.htmlbreak;
????????????????}
????????????????if(-f$request_filename/index.php){
????????????????????????????rewrite(.*)$1/index.php;
????????????????}
????????????????if(!-f$request_filename){
????????????????????????????rewrite(.*)/index.php;
????????????????}
????????????????try_files$uri$uri//index.php?$query_string;
????????}
????????#PHP腳本請求全部轉發到FastCGI處理.使用FastCGI協議默認配置.
????????#Fastcgi伺服器和程序(PHP)溝通的協議
????????.location~.*.php${
????????????????#設置監聽埠
????????????????fastcgi_pass127.0.0.1:9000;
????????????????#設置nginx的默認首頁文件
????????????????fastcgi_indexindex.php;
????????????????#設置腳本文件請求的路徑
????????????????fastcgi_paramSCRIPT_FILENAME$document_root$fastcgi_script_name;
????????????????#引入fastcgi的配置文件
????????????????includefastcgi_params;
???????????????fastcgi_split_path_info^(.+?.php)(/.*)$;
????????????????set$path_info$fastcgi_path_info;
????????????????fastcgi_paramPATH_INFO$path_info;
????????????????try_files$fastcgi_script_name=404;
????????}
}
3，如果多項目部署，就需要配置vhost
第一步：編輯nginx.conf文件，在最後加上???include??vhost/*.conf;
第二步：進入vhost文件夾，創建??域名.conf??文件，如創建一個：quanma.meyat.com.conf
第三步：編輯quanma.meyat.com.conf文件，內容如下：
????????server
????????{
????????????????listen80;
????????????????server_namequanma.meyat.com;
????????indexindex.htmlindex.htmindex.phpdefault.htmldefault.htmdefault.php;
????????????????root/data/wwwroot/default/quanma/public/;
????????????????#error_page404/404.html;
????????????????location/{
????????????????????????indexindex.htmlindex.php;
????????????????????????if(-f$request_filename/index.html){
????????????????????????????????rewrite(.*)$1/index.htmlbreak;
????????????????????????}
????????????????????????if(-f$request_filename/index.php){
????????????????????????????????rewrite(.*)$1/index.php;
????????????????????????}
????????????????????????if(!-f$request_filename){
????????????????????????????????rewrite(.*)/index.php;
????????????????????????}
????????????????????????try_files$uri$uri//index.php?$query_string;
????????????????}
????????????????location~[^/].php(/|$)
????????????????{
????????????????????????#commenttry_files$uri=404;toenablepathinfo
????????????????????????#try_files$uri=404;
????????????????????????fastcgi_pass127.0.0.1:9000;
????????????????????????fastcgi_indexindex.php;
????????????????????????includefastcgi_params;
????????????????????????fastcgi_paramSCRIPT_FILENAME$document_root$fastcgi_script_name;
????????????????????????fastcgi_split_path_info^(.+?.php)(/.*)$;
????????????????????????set$path_info$fastcgi_path_info;
????????????????????????fastcgi_paramPATH_INFO$path_info;
????????????????????????try_files$fastcgi_script_name=404;
????????????????????????#includefastcgi.conf;
????????????????????????#includepathinfo.conf;
????????????}
????????????location~.*.(gif|jpg|jpeg|png|bmp|swf)$
????????????{
????????????????????expires30d;
????????????}
????????????location~.*.(js|css)?$
????????????{
????????????????????expires12h;
????????????}
????????????#Disallowaccessto.ht,.svn,.bzr,.git,.hg,.cvsdirectories
????????????location~/.(ht|svn|bzr|git|hg|cvs){
????????????????????denyall;
????????????}
????????????#access_log/date/nginx/bmp.com.conf/access.logmain;
}
伺服器上怎麼安裝php程序你好，如果你的伺服器是Windows系統，那麼你需要遠程到你的伺服器，進行啟動IIS（asp環境），如果你需要php環境，你可以從xp.cn（小皮）或者bt.cn（寶塔）安裝面板
如果你的伺服器是linux，建議使用寶塔
打開終端，不同Linux系統的輸入指令不同：
Centos安裝腳本
終端輸入：yuminstall-ywgetwget-Oinstall.shshinstall.sh
Ubuntu/Deepin安裝腳本
終端輸入：wget-Oinstall.shsudobashinstall.sh
Debian安裝腳本
終端輸入：wget-Oinstall.shbashinstall.sh
Fedora安裝腳本
終端輸入wget-Oinstall.shbashinstall.sh
輸入後進行安裝就可以了
php項目如何部署在伺服器上一、阿里ECS伺服器配置
???1.因為線上已經有幾個站點了.所以要配置ngnix多站點
???2.阿里雲ecs目錄結構，ngxin在/etc/nginx/目錄下，配置的地方主要是nginx.config文件。或者在conf.d新建一個配置文件然後在include到nginx.config文件中
?????
???3.nginx.config新建站點信息
server{
listen???80;
server_name?www.你的域名.com;
root????站點的相對路徑;
indexindex.phpindex.htmlindex.htm;
#charsetkoi8-r;
#access_log?/var/log/nginx/host.access.log?main;
#.
include/etc/nginx/default.d/*.conf;
location/{
#try_files$uri$uri//index.php;
root?/opt/www/pcweb/ytyy_pc;
index?index.phpindex.htmlindex.htm;???????if(!-e$request_filename){?rewrite?^(.*)$/index.php?s=$1?last;?break;??}}??????url重寫（可以沒有）
#/40x.html
#
error_page?404???????/404.html;?40錯誤頁面配置
location=/40x.html{
}
#/50x.html
#
error_page?500502503504?/50x.html;?50錯誤頁面配置
location=/50x.html{
}
location~.php${
root?????站點相對路徑;
fastcgi_pass?127.0.0.1:9000;
fastcgi_index?index.php;
fastcgi_param?SCRIPT_FILENAME?$document_root$fastcgi_script_name;
include????fastcgi_params;
}
location~/.ht{
deny?all;
}
}
配置文件的基本內容如上；
配置完成後測試配置文件是否正確
這樣配置就可以使用了
然後重啟nginx伺服器?
這樣nginx配置就結束了可以使用了。吧站點文件放到對應的目錄下面。我直接gitclone過去的。
二.thinkphp項目文件轉移
本來以為上傳完就結束了。上傳上去碰到的第一個問題就是訪問頁面報錯，頁面被電信的114頁面劫持了。。。麻蛋看不到報錯
萬能網路大法
解決方法1.internet高級選項-隱私-站點??新加阻止站點
解決方法2：控制面板-網路和internet-本地連接-屬性-ipv4?使用如下ip
終於搞定可以看到報錯頁面了。。。。。。麻蛋。再次開啟萬能網路大法
?
?
?得到最終結論是文件目錄許可權引起的。thinkphp的runtime目錄沒有寫入許可權。。thinkphp文件上傳到阿里的好像都有這個問題。解決問題很簡單
進入到項目文件目錄
直接跟文件最高許可權
chmod-R777[目錄]?//linux修改文件許可權
?
前端vue與後端Thinkphp在伺服器的部署
vue在服務端部署時，我們都知道通過npmrunbuild指令打包好的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/文件夾下，運行可瀏覽，當路徑改變時，刷新會出現404錯誤。此時dist文件下創建一個.htaccess文件，當路徑不存在時，路徑指向能解決此問題。
??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('',{user:'',password:''})。
(可在webpack.base.conf.js文件下可定義介面：)
二、同域
後端配置同上，公共配置器中的header配置注釋。將前端的dist文件下的所有文件（包含.htaccess），放在php文件夾下。將後端index控制器的index方法的路徑重定向php下的index.html文件：
namespace?appindexcontroller;??
use?thinkController;??
class?Index?extends?Controller??
{??
????public?function?index()?{??
$this-redirect('/index.html');??
????}??
}??
前端調用登錄介面：this.axios.post('/index.php/base/login',{user:'',password:''})
轉自：
③ axios+post方法提交formdata步驟詳解
這次給大家帶來axios+post方法提交formdata步驟詳解，axios+post方法提交formdata的注意事項有哪些，下面就是實戰案例，一起來看一下。
vue框架推薦使用axios來發送ajax請求，之前我還寫過一篇博客來講解如何在vue組件中使用axios。但之前做著玩用的都是get請求，現在我自己搭博客時使用了post方法，結果發現後台（node.js）完全拿不到前台傳來的參數。後來進過一番探索，終於發現問題所在。
post提交數據的四種編碼方式
1.application/x-www-form-urlencoded
這應該是最常見的post編碼方式，一般的表單提交默認以此方式提交。大部分伺服器語言對這種方式都有很好的支持。在PHP中，可以用$_POST[「key」]的方式獲取到key的值，在node中我們可以使用querystring中間件對參數進行分離
app.post("/server"function(req,res){ req.on("data"function(data){ let key=querystring.parse(decodeURIComponent(data)).key; console.log("querystring:"+key) });});
2.multipart/form-data
這也是一種比較常見的post數據格式，我們用表單上傳文件時，必須使form表單的enctype屬性或者ajax的contentType參數等於multipart/form-data。使用這種編碼格式時發送到後台的數據長得像這樣子
不同欄位以--boundary開始，接著是內容描述信息，最後是欄位具體內容。如果傳輸的是文件，還要包含文件名和文件類型信息
3.application/json
axios默認提交就是使用這種格式。如果使用這種編碼方式，那麼傳遞到後台的將是序列化後的json字元串。我們可以將application/json與application/x-www-form-urlencoded發送的數據進行比較
首先是application/json：
接著是application/x-www-form-urlencoded：
這里可以明顯看出application/x-www-form-urlencoded上傳到後台的數據是以key-value形式進行組織的，而application/json則直接是個json字元串。如果在處理application/json時後台還是採用對付application/x-www-form-urlencoded的方式將會產生問題。
例如後台node.js依然採用之前對付application/x-www-form-urlencoded的方法，那麼querystring.parse(decodeURIComponent(data))之後得到的數據是這樣子的
這個時候再querystring.parse(decodeURIComponent(data)).key只能獲取到undefined
4.text/xml
剩下的一種編碼格式是text/xml，這種格式我沒有怎麼使用過
解決方法
既然我們知道axios post方法默認使用application/json格式編碼數據，那麼解決方案就有兩種，一是後台改變接收參數的方法，另一種則是將axios post方法的編碼格式修改為application/x-www-form-urlencoded，這樣就不需要後台做什麼修改了。
先來看第一種解決方法
vue組件中，axios發送post請求的代碼如下
this.$axios({ method:"post" url:"/api/haveUser" data:{ name:this.name, password:this.password }}).then((res)=>{ console.log(res.data);})
此時控制台Network Headers裡面的信息是這樣子的
後台接收數據需要依賴body-parser中間件，我們事先裝好，接著在後台代碼中引用body-parser
這張截圖中，發揮作用的代碼僅僅是const bodyParser=require("body-parser");
接下來在路由中使用body-parser
app.post("/api/haveUser"bodyParser.json(),function(req,res){ console.log(req.body); let haveUser=require("/api/server/user.js"); haveUser(req.body.name,req.body.password,res);});
這時，當前台發送post請求之後，後台控制台中就會列印出req.body
這時，通過req.body.name或者req.body.password就能拿到對應的值。
這種方法比較簡單，也不需要前台做過多修改，推薦使用這種方法。
第二種解決方法，具體操作如下
前端
this.$axios({ method:"post" url:"/api/haveUser" headers:{ 'Content-type' 'application/x-www-form-urlencoded' }, data:{ name:this.name, password:this.password }, transformRequest: [function (data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }],}).then((res)=>{ console.log(res.data);})
其中發揮關鍵作用的是headers與transformRequest。其中 headers 是設置即將被發送的自定義請求頭。 transformRequest 允許在向伺服器發送前，修改請求數據。這樣操作之後，後台querystring.parse(decodeURIComponent(data))獲取到的就是類似於{ name: 'w' password: 'w' }的對象。
後台代碼如下
app.post("/api/haveUser"function(req,res){ let haveUser=require("/api/server/user.js"); req.on("data"function(data){ let name=querystring.parse(decodeURIComponent(data)).name; let password=querystring.parse(decodeURIComponent(data)).password; console.log(name,password) haveUser(name,password,res); });});
這種方法明顯就要比第一種麻煩一點，但不需要後台做過多處理。所以具體操作還是得根據實際情況決定。