閑來(lái)無(wú)事溃肪，研究了一下前端人員怎么寫(xiě)幾個(gè)簡(jiǎn)單的接口進(jìn)行測(cè)試算谈，先貼流程糠雨，然后再詳細(xì)步驟削葱。
2020年2月28日09:44:15
流程（排名不分先后）：一個(gè)編輯器奖亚、一個(gè)index.html。?? ?phpStudy析砸、Navicat Premium昔字。
一、phpStudy?下載安裝運(yùn)行三件套
參考官網(wǎng)：https://www.xp.cn/? ?或者?https://www.phpstudy.net
對(duì)首繁，沒(méi)錯(cuò)作郭，現(xiàn)在叫小皮面板。
我是window用戶弦疮，所以接下來(lái)的操作就按window的來(lái)所坯。
下載出來(lái)是個(gè).7z的壓縮包，解壓即可挂捅。
壓縮包里面有簡(jiǎn)單的使用說(shuō)明 沒(méi)啥卵用??和安裝包芹助。
現(xiàn)在直接點(diǎn)擊安裝包即可直接安裝，安裝過(guò)程遵循小白安裝?（無(wú)腦下一步就對(duì)了）
然后點(diǎn)擊套件中的? Apache? 和? MySQL 這兩項(xiàng)的啟動(dòng)
切換到網(wǎng)站界面状土。
如果不想自己創(chuàng)建新的站點(diǎn)，那么可以用自帶的localhost直接訪問(wèn)phpStudy自帶的站點(diǎn)伺糠，物理路徑就是你本機(jī)站點(diǎn)存放的路徑蒙谓，把你的項(xiàng)目放到這個(gè)路徑下面，然后瀏覽器訪問(wèn)網(wǎng)站域名就可以了训桶。
這應(yīng)該是站點(diǎn)管理的默認(rèn)配置累驮，我也忘記我改沒(méi)改了。
我為了方便大家測(cè)試舵揭，我自己新建了自己的站點(diǎn)：
? ? ①谤专、點(diǎn)擊左上角的創(chuàng)建網(wǎng)站。
? ? ②午绳、配置域名置侍、二級(jí)域名和根目錄。
域名和二級(jí)域名拦焚，就是啟用服務(wù)后蜡坊，瀏覽器輸入這個(gè)就可以訪問(wèn)你的網(wǎng)站了（本地！Ｊ臧堋ｏ跹谩）。
然后根目錄就是你項(xiàng)目所在目錄僵刮【萃基本上是：
配置好了就點(diǎn)確認(rèn)鹦牛，phpStudy的服務(wù)應(yīng)該會(huì)自動(dòng)重啟，如果沒(méi)有若河，請(qǐng)手動(dòng)操作能岩。
這時(shí)候你的瀏覽器輸入你配置的域名，就可以直接訪問(wèn)這個(gè)文件夾里面的網(wǎng)站了（本地Ｏ舾！＠椤！）
二鲫忍、Navicat Premium 下載安裝運(yùn)行三件套
這里本菜雞用的是11.2.7版本 我知道很老的版本膏燕，零氪才是王道
安裝過(guò)程中也遵循小白安裝方法。
運(yùn)行之后應(yīng)該啥也沒(méi)有：
接下來(lái)的操作：
????①悟民、點(diǎn)擊 文件 -- 新建連接 -- MySQL
連接名請(qǐng)隨意坝辫，英文就好。菜雞我取名為：test? ? 顧名思義射亏，方便測(cè)試嘛
另外個(gè)就是密碼近忙，這里暫且 默認(rèn)填寫(xiě)為：? root? ?沒(méi)錯(cuò)，用戶名和密碼都為：root? 如果你有特殊愛(ài)好智润，那么請(qǐng)便及舍。
其他就沒(méi)啥配置的了，請(qǐng)?zhí)顚?xiě)完之后窟绷，點(diǎn)擊連接測(cè)試锯玛，以下是成功界面：
那么問(wèn)題來(lái)了，如果不成功怎么辦兼蜈，菜雞我昨天就出現(xiàn)了這種情況攘残，一番虎狼操作之后，發(fā)現(xiàn)phpStudy那邊的MySQL服務(wù)沒(méi)啟動(dòng)为狸。歼郭。。
好吧钥平，正確的解決辦法是：
連接成功后，應(yīng)該是?綠色的： 對(duì)捷兰，沒(méi)錯(cuò)立叛，綠色的
對(duì)著剛剛新建的連接點(diǎn)右鍵，中間有個(gè)新建數(shù)據(jù)庫(kù)贡茅，麻煩各位看官姥爺點(diǎn)一下秘蛇，新建數(shù)據(jù)庫(kù)彈窗設(shè)置如下：
數(shù)據(jù)庫(kù)名：請(qǐng)大家隨意發(fā)揮其做。
字符集：重要?? 請(qǐng)選擇如圖所示。
排序規(guī)則：同上↑↑↑↑↑↑↑↑↑↑↑↑↑↑赁还。
確定新建數(shù)據(jù)庫(kù)妖泄。這里我就不啰嗦了，麻煩看下圖進(jìn)行操作艘策。
默認(rèn)生成的表蹈胡，會(huì)有一個(gè)為空的字段，就是啥也沒(méi)填朋蔫，大家可以按圖填寫(xiě)：
說(shuō)明一下： 名 -> 就是請(qǐng)求接口返回的鍵名罚渐。 類型 -> 顧名思義。 長(zhǎng)度 小數(shù)點(diǎn)驯妄，請(qǐng)自行YY荷并。
每張表，最好有個(gè)id 或者 類似 id 的東西青扔。勾選上 不是Null 然后在最后的格子里面點(diǎn)一下設(shè)置為主鍵源织。沒(méi)錯(cuò) 點(diǎn)一下就夠了。然后下面設(shè)置上自動(dòng)遞增（就是以后上傳數(shù)據(jù)微猖，如果沒(méi)傳id就代表新增谈息，傳了id就代表修改那個(gè)意思。）
然后請(qǐng)點(diǎn)擊添加字段励两，添加成你想要的亞子：（如果是字符串類型的黎茎，比如說(shuō)name這種，類型就是varchar当悔，然后配置一下字符集和排序規(guī)則）傅瞻。
完成之后點(diǎn)擊保存，然后輸入表名（請(qǐng)隨意發(fā)揮）? 這樣一張表就建立好了盲憎。
接下來(lái)遵循專業(yè)的角度出發(fā)嗅骄，我們利用sql語(yǔ)句先進(jìn)行一個(gè)數(shù)據(jù)的新增，證明數(shù)據(jù)庫(kù)沒(méi)問(wèn)題饼疙。
請(qǐng)點(diǎn)擊 上面大圖標(biāo)? 查詢 -- 新建查詢? ? ? 在查詢編輯器里面輸入??
INSERT INTO someone (name, age) VALUES ('希爾瓦娜斯', 18);
// INSERT INTO 表名 (鍵名1, 鍵名2) VALUES ('字符串單引號(hào)', 18);? ?// 數(shù)字不用? 其他大寫(xiě)單詞為sql語(yǔ)句
點(diǎn)擊運(yùn)行即可：
看到下面有寫(xiě)溺森，受影響的行，然后現(xiàn)在切換到隔壁? someone表窑眯，刷新一下? 就可以看到新的數(shù)據(jù)添加進(jìn)去了屏积，并且id是自動(dòng)的，這時(shí)候數(shù)據(jù)庫(kù)就OK了磅甩。
三炊林、準(zhǔn)備網(wǎng)站代碼
其余工具全部最小化，打開(kāi)你的VSCode?打開(kāi)你的編輯器
html代碼很簡(jiǎn)單： 各位大佬就手敲一下卷要，打擾了。
js代碼等會(huì)敲吧。先準(zhǔn)備幾個(gè).php文件? ?我準(zhǔn)備了三個(gè)文件块饺，讀、寫(xiě)和刪? 分別為? ?data.php? create.php? ?delete.php
基本上大功告成棺榔，現(xiàn)在就差js代碼了。
我剛剛有測(cè)試隘道，所有數(shù)據(jù)會(huì)不一樣症歇。基本上沒(méi)啥問(wèn)題薄声，返回的數(shù)據(jù)当船，請(qǐng)?jiān)诿總€(gè)ajax請(qǐng)求的時(shí)候console.log(res) 查看。
如果有問(wèn)題默辨，js的請(qǐng)自己解決德频，php方面的問(wèn)題，則在 控制臺(tái) - network 選擇xhr分類下面缩幸，看請(qǐng)求的xxx.php
點(diǎn)開(kāi)之后能看到是否請(qǐng)求成功壹置， preview 和? response 則是 php的返回值，如果有報(bào)錯(cuò)表谊，也會(huì)在這兩個(gè)里面
下面是測(cè)試環(huán)節(jié)： 這時(shí)候還沒(méi)點(diǎn)提交
我沒(méi)寫(xiě)輸入框清空的方法钞护，大家自己補(bǔ)充一下。
這就是簡(jiǎn)單的html+php+mysql本地站點(diǎn)和接口的編寫(xiě)爆办。實(shí)際上比這應(yīng)該復(fù)雜很多难咕。
如果有想繼續(xù)深入的小伙伴們，可以去找一找數(shù)據(jù)庫(kù)表關(guān)聯(lián)什么的資料看一看距辆。還有mysql的增刪改查語(yǔ)句余佃。
我是一名前端菜雞，如果有不對(duì)的地方跨算，還請(qǐng)多多指教爆土。
