前端用PHP写简单的接口(html+php+mysql)

闲来无事,研究了一下前端人员怎么写几个简单的接口进行测试,先贴流程,然后再详细步骤。

2020年2月28日09:44:15

流程(排名不分先后):一个编辑器、一个index.html。    phpStudy、Navicat Premium。

一、phpStudy 下载安装运行三件套

参考官网:https://www.xp.cn/   或者 https://www.phpstudy.net

对,没错,现在叫小皮面板。

我是window用户,所以接下来的操作就按window的来。

window版下载

下载出来是个.7z的压缩包,解压即可。

压缩包里面有简单的使用说明 没啥卵用  和安装包

现在直接点击安装包即可直接安装,安装过程遵循小白安装 (无脑下一步就对了)


运行之后默认情况应该是这个亚子!

然后点击套件中的  Apache  和  MySQL 这两项的启动


启动Web服务

切换到网站界面。


如图所示

如果不想自己创建新的站点,那么可以用自带的localhost直接访问phpStudy自带的站点,物理路径就是你本机站点存放的路径,把你的项目放到这个路径下面,然后浏览器访问网站域名就可以了。


网站-站点-管理

这应该是站点管理的默认配置,我也忘记我改没改了。

我为了方便大家测试,我自己新建了自己的站点:

    ①、点击左上角的创建网站。

    ②、配置域名、二级域名和根目录。

创建网站基本配置项

域名和二级域名,就是启用服务后,浏览器输入这个就可以访问你的网站了(本地!!!)。

然后根目录就是你项目所在目录。基本上是:


配置好了就点确认,phpStudy的服务应该会自动重启,如果没有,请手动操作。

这时候你的浏览器输入你配置的域名,就可以直接访问这个文件夹里面的网站了(本地!!!)

二、Navicat Premium 下载安装运行三件套

这里本菜鸡用的是11.2.7版本 我知道很老的版本,零氪才是王道

安装过程中也遵循小白安装方法。

运行之后应该啥也没有:

强行马赛克

接下来的操作:

    ①、点击 文件 -- 新建连接 -- MySQL

MySQL

连接名请随意,英文就好。菜鸡我取名为:test    顾名思义,方便测试嘛

另外个就是密码,这里暂且 默认填写为:  root   没错,用户名和密码都为:root  如果你有特殊爱好,那么请便。

其他就没啥配置的了,请填写完之后,点击连接测试,以下是成功界面:

那么问题来了,如果不成功怎么办,菜鸡我昨天就出现了这种情况,一番虎狼操作之后,发现phpStudy那边的MySQL服务没启动。。。

好吧,正确的解决办法是:

毕竟我也是菜鸡。。。

连接成功后,应该是 绿色的对,没错,绿色的

连接成功

对着刚刚新建的连接点右键,中间有个新建数据库,麻烦各位看官姥爷点一下,新建数据库弹窗设置如下:

数据库名:请大家随意发挥。

字符集:重要   请选择如图所示。

排序规则:同上↑↑↑↑↑↑↑↑↑↑↑↑↑↑。

确定新建数据库。这里我就不啰嗦了,麻烦看下图进行操作。

默认生成的表,会有一个为空的字段,就是啥也没填,大家可以按图填写:

按图填写

说明一下: 名 -> 就是请求接口返回的键名。 类型 -> 顾名思义。 长度 小数点,请自行YY。

每张表,最好有个id 或者 类似 id 的东西。勾选上 不是Null 然后在最后的格子里面点一下设置为主键。没错 点一下就够了。然后下面设置上自动递增(就是以后上传数据,如果没传id就代表新增,传了id就代表修改那个意思。)

然后请点击添加字段,添加成你想要的亚子:(如果是字符串类型的,比如说name这种,类型就是varchar,然后配置一下字符集和排序规则)。

完成之后点击保存,然后输入表名(请随意发挥)  这样一张表就建立好了。

接下来遵循专业的角度出发,我们利用sql语句先进行一个数据的新增,证明数据库没问题。

请点击 上面大图标  查询 -- 新建查询      在查询编辑器里面输入  

INSERT INTO someone (name, age) VALUES ('希尔瓦娜斯', 18);

// INSERT INTO 表名 (键名1, 键名2) VALUES ('字符串单引号', 18);   // 数字不用  其他大写单词为sql语句

点击运行即可:

看到下面有写,受影响的行,然后现在切换到隔壁  someone表,刷新一下  就可以看到新的数据添加进去了,并且id是自动的,这时候数据库就OK了。

三、准备网站代码

其余工具全部最小化,打开你的VSCode 打开你的编辑器

html代码很简单: 各位大佬就手敲一下,打扰了。

js代码等会敲吧。先准备几个.php文件   我准备了三个文件,读、写和删  分别为   data.php  create.php   delete.php

data.php
create.php
delete.php

基本上大功告成,现在就差js代码了。

index.js

我刚刚有测试,所有数据会不一样。基本上没啥问题,返回的数据,请在每个ajax请求的时候console.log(res) 查看。

如果有问题,js的请自己解决,php方面的问题,则在 控制台 - network 选择xhr分类下面,看请求的xxx.php

点开之后能看到是否请求成功, preview 和  response 则是 php的返回值,如果有报错,也会在这两个里面

下面是测试环节: 这时候还没点提交

测试
提交成功

我没写输入框清空的方法,大家自己补充一下。

这就是简单的html+php+mysql本地站点和接口的编写。实际上比这应该复杂很多。

如果有想继续深入的小伙伴们,可以去找一找数据库表关联什么的资料看一看。还有mysql的增删改查语句。



我是一名前端菜鸡,如果有不对的地方,还请多多指教。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335