php实现前后端完全分离

出发点:之前一直采用laravel,tp框架开发web站,前端代码都是集成在框架中的view层,但是前端又不懂后端框架,以及框架的页面渲染,所以前端很多工作都是由后端负责(小公司确实如此,前端只负责html+css,其它均是后端再写),但这只是小公司的开发模式,出去面试时都会问到有没有做过前后端分离,其实代码层面来讲,前后分离,后端只负责接口简直不要太爽,但是后端同学往往要负责部署项目(也是小公司的过),这就会让完全没接触过的同学头大了,这就是我写这篇文章的原因,(备注:这也是我查资料自己总结的,我也完全没做过啊,内心慌得一批)

正文:
关于项目部署主要分两部分:
一:前端部署:
准备:服务器,前端域名,前端项目(推荐vue框架,本文是就是参考vue的双向绑定写的,其他框架大同小异)
部署:
1:将前端项目(html+css+js)上传到服务器,
2:在阿里云配置域名解析
3:服务器里找到Apache或者Nginx的配置项(根据自身开发环境选其一),将域名指向前端项目入口
4:前端页面(View)正常开发,在数据请求时,使用ajax发送请求,指向后端接口(Model),后端返回数据,前端接收数据,并根据前端框架将数据渲染到页面即可(可使用vue构建ViewModel层,将数据绑定到页面)

二:后端部署:
准备:服务器,后端域名,php项目(推荐使用lumen,速度相对较快,又能使用框架离得扩展,如果不考虑安全问题,完全可以用纯php编写接口)
部署:
1:将php项目上传到服务器
2:在阿里云配置域名解析
3:服务器里找到Apache或者Nginx的配置项(根据自身开发环境选其一),将域名指向项目入口
4:按照项目需求编写接口(M),返回前端所需数据即可

备注:
两个项目可以部署在同一个服务器。我查资料有的说因为域名不同,前端在请求后端接口时可能会存在跨域问题(未试验,不确定),但大致的部署应该是这样吧!自己总结,不喜勿喷,谢谢!!!

由于机器人没有后端代码的能力,因此不能完全地给出实现前后端分离的代码。但是,以下是实现前端登录注册功能的示例代码: 登录页面HTML代码: ```html <!DOCTYPE html> <html> <head> <title>登录页面</title> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="login.js"></script> </head> <body> <h1>登录页面</h1> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="登录"> </form> <div id="error"></div> </body> </html> ``` 注册页面HTML代码: ```html <!DOCTYPE html> <html> <head> <title>注册页面</title> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="register.js"></script> </head> <body> <h1>注册页面</h1> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <label for="confirm_password">确认密码:</label> <input type="password" id="confirm_password" name="confirm_password"><br><br> <input type="submit" value="注册"> </form> <div id="error"></div> </body> </html> ``` 登录页面的jQuery代码: ```javascript $(document).ready(function() { $('form').submit(function(event) { event.preventDefault(); var username = $('#username').val(); var password = $('#password').val(); $.ajax({ url: 'login.php', // 后端登录接口的地址 type: 'POST', dataType: 'json', data: { username: username, password: password }, success: function(response) { if (response.success) { window.location = 'welcome.php'; // 登录成功后跳转到欢迎页面 } else { $('#error').text(response.message); } }, error: function() { $('#error').text('登录失败,请重试。'); } }); }); }); ``` 注册页面的jQuery代码: ```javascript $(document).ready(function() { $('form').submit(function(event) { event.preventDefault(); var username = $('#username').val(); var password = $('#password').val(); var confirm_password = $('#confirm_password').val(); if (password !== confirm_password) { $('#error').text('两次输入的密码不一致。'); return; } $.ajax({ url: 'register.php', // 后端注册接口的地址 type: 'POST', dataType: 'json', data: { username: username, password: password }, success: function(response) { if (response.success) { window.location = 'welcome.php'; // 注册成功后跳转到欢迎页面 } else { $('#error').text(response.message); } }, error: function() { $('#error').text('注册失败,请重试。'); } }); }); }); ``` 需要注意的是,这些代码只负责前端页面的交互,需要与后端接口进行配合才能实现完整的登录注册功能。同时,需要编写后端接口对请求进行处理并返回响应,以及与数据库进行交互来实现用户数据的存储和验证。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值