当前位置:   article > 正文

详解前后端交互 B/S_前后台交互图

前后台交互图

本人才疏学浅,该文章就谈一下我对前后端交互的理解,如果那些写得不对的,请各位大神指出来,大家交流学习!

一.什么是前后端交互?

       了解什么是前后端交互之前,我们先了解一下前后端交互有什么作用。一个网站不仅仅是只有前端,还有在后端的数据库和服务器(网站构成如下图所示),前端页面上的数据不可能完全写死的,所以前端需要从服务器动态地获取数据,以便保证前端的灵活性,此时便需要前后端的交互。

        所谓前后端交互,即前后端交互为前端和后端的互动,也可以理解为数据交互。前端需要获取(GET)的数据获取上传(POST)的数据,要通过 请求 来完成的,前端发送请求,后端接收到请求后,便进行对数据库的操作,返回前端所需要的数据,即可完成来一次前后端的交互。前后端交互的大致流程如下:

二.实现前后端交互

       接下来,则用代码来实现前后端交互的过程。该过程用到的工具如下:(1)服务器我用的是MAMP(我的电脑为Mac,所以用MAMP,如果为Windows操作系统则为WAMP),该软件集成来apache+mysql,可以很方便搭建服务器(点我下载MAMP或WAMP)。(2)我用的编译软件是Visual Studio Code,可自行根据自己的个人习惯选择编译器,我是习惯使用这个。(3)本次实现用到的是原生的Ajax请求,PHP写服务器。

       1.下载好MAMP或WAMP后,打开软件,点击 Start Server 按钮启动服务,Apache Server和Mysql Server都是绿色的则表明启动成功,如下图:

启动成功会自动打开,如看到下图也说明启动成功了

这时在浏览器直接输入localhost或者127.0.0.1即可访问了。

*注意:在开启MAMP或者WAMP之前,如果自己的电脑之前有安装过apache或者mysql的,先去把服务停掉,不然可能会因为端口冲突而造成启动不成功。

       2.注:这里只是用最简单的代码来演示。在htdocs或者WWW文件夹(下面一段有介绍)里面新建一个index.html文件,里面发送一个ajax请求,下面贴出script部分代码:

  1. <script>
  2. var xhr = new XMLHttpRequest();//创建ajax对象
  3. xhr.open('GET','./server/connect.php');//配置请求信息
  4. xhr.send();//发送请求
  5. xhr.onload = function(){
  6. console.log(JSON.parse(xhr.responseText));//接收响应
  7. }
  8. </script>

      3.去服务器的根目录创建一个connect.php文件,Mac的在/Applications/MAMP/htdocs这个路径下,win的则可以点击设置按钮在里面找到WWW这个文件夹,htdocs和WWW是默认的根目录,在不修改的前提下,PHP的文件必须放到这里面,不然无法访问。PHP的代码如下:

  1. <?php
  2. //解决中文乱码
  3. header('content-type:text/html;charset:utf-8;');
  4. //创建连接
  5. $link = mysqli_connect('localhost','root','root','php_demo');
  6. //查询数据库
  7. $res = mysqli_query($link,'select * from `user`');
  8. //解析结果
  9. $data = mysqli_fetch_all($res,MYSQLI_ASSOC);
  10. //打印结果
  11. print_r(json_encode($data));
  12. //关闭连接
  13. mysql_close($link);
  14. ?>

      msyqli_connect()里面各个参数的含义,(1)第一个参数,就是服务器地址,填'localhost'或者'127.0.0.1'。(2)第二个参数,本地数据库的用户名,默认是root。(3)第三个参数,本地数据库的密码,默认也是root。(4)第四个参数,是你要操作的小仓库。如下图:

 

      4.在浏览器中输入localhost,回车,然后点击里面的index.html文件,便会发送ajax请求了,这时可以按下F12案件,去到控制台查看network,就看到发送的connect.php的请求,并且是成功的,如下图:

同时可以看到后端返回来的数据,如下图:

至此,就完成了一次前后端的交互了。当然,这是最简单的一次演示,目的就是看清楚前后端是如何交互的,例子当然是简单明了的好。

三.总结

       以上就是B/S (Browser/Server)模式下前后端交互的整个流程啦,在操作的过程中,我以上提到要注意的地方都要特别留意,按照我写的来做,就基本上不会有问题了。好了,这次就先写到这里。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/115189
推荐阅读
相关标签
  

闽ICP备14008679号