目錄
回复内容:
补充说明
首頁 後端開發 php教程 javascript - 如何做前后端动静分离

javascript - 如何做前后端动静分离

Jul 06, 2016 pm 01:52 PM
html java javascript php

现在有个项目想做一下前端和后端分离开发,应该怎么做?主要是数据通信和权限管理这边应该怎么做。

回复内容:

现在有个项目想做一下前端和后端分离开发,应该怎么做?主要是数据通信和权限管理这边应该怎么做。

我们的 ERP 系统就是前后端完全分离,毫无关联。

后端用的是改造的 Laravel 框架,将业务拆分、路由拆分,来分离后端复杂的权限验证,同时对外依旧是简单明确的 RESTful API。

前端采用 Vue.js + Bootstrap 构建。

补充说明

题主在问这个问题之前,有必要对 HTTP 协议有一定的了解,这样你就不会在一些细枝末节无限纠结。因为本质上前后端的区别就在于一个是请求方、一个是响应方。

以往的不分离的开发,前端的请求往往是通过点击某个超链接,然后由浏览器接管后续,浏览器自行发出请求获取数据并刷新整个页面,后端则是收到请求后,由 PHP 这类后端脚本直接输出一个完整的 HTML 页面。

后来 Ajax 来了,则是由 Javascript 脚本触发事件,可控的让浏览器在特定条件下发出有限定的请求头的 HTTP 请求,并且收到响应后,依旧由脚本自行处理而不是以往浏览器直接渲染输出,这就使得前端可以实现局部刷新的功能。

理解这个以后就很简单了,后端只是根据请求输出数据,请求中无非包含几个关键数据:

  • 请求的资源是什么

  • 请求的资源的限定条件

  • 请求的参数

  • 请求的数据体

请求的资源就是我们说的 Request URI,比如向 http://www.a.com/order/128141/detail 发起的请求,资源就是 /order/128141/detail

资源限定条件对于任何请求都适用,往往以 Query String(查询字符串) 体现,比如 http://www.a.com/shop/goods?name=test&sort=time&page=2,这里面 ? 后面的部分就是查询字符串,正如其 查询 二字的意义,就是用来限定资源结果集的。

查询字符串常常被小白误解为就是用来传递数据的,并将 $_GET 和 $_POST 都作为传递和获取数据的方式,如果长期都有这种意识,PHP 活该被人瞧不起啊。。

请求参数就是一些在 Header 部分的玩意儿,一般常见的就是类似于 CookieAccept 等等,用来告诉服务器一些请求者的基本信息, 后端的权限验证基本就是利用这一部分实现的,不完全需要利用 Cookie 来作为实现 Session 的唯一渠道,完全可以按照规范实现自己的一套认证和会话流程

最后就是请求的数据体,对于 GETDELETE 请求,不存在传递数据(GET 就是获取,DELETE 就是删除,何来传递数据?),但是对于 POSTPUT 则需要通过请求体传递数据,比如表单提交、比如文件上传。

后端利用请求中大大小小的数据,完全可以构建一个层次分明(利用中间件实现)的过滤流程,配合合理的路由模块和控制器,就很容易实现后端的分离。

前端玩法也很多,我就拿 ajax 这种最简单实用的来说。无论你是否使用了前端框架,ajax 是不会变的,它是一种请求的渠道。

说了上面这么多,你必须要明白要分离,就要分清职责。前端就是获取数据的,那么利用 ajax 发请求获取数据就好了,拿到数据该渲染哪就渲染哪,至于数据,只要结构正确,一律认定就是正确的。

// 写了一堆,,有空再补充

前端可以选一套bootstrap模板,配合vuejs,后台用php中的yii2框架,设计好restful接口,yii2自带rbac模块,很方便的。前后台用ajax传输数据。

前端纯html-frameset开发,和后端统一ajax交互,后端设过滤器验证session。

前端用Bootstrap/Google MDL+Angular2 JS,后端用Laravel,装上RBAC扩展(传送门)就可以动静分离了,Laravel的REST风格的路由还是很好用的。

先回答问题:session验证+RESTFUL
推荐:

  • 前端:vuejs+bootstrap

  • 后台:Springboot

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1424
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
HTML與CSS和JavaScript:比較Web技術 HTML與CSS和JavaScript:比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

IIS和PHP的兼容性:深度潛水 IIS和PHP的兼容性:深度潛水 Apr 22, 2025 am 12:01 AM

IIS和PHP可以兼容,通過FastCGI實現。 1.IIS通過配置文件將.php文件請求轉發給FastCGI模塊。 2.FastCGI模塊啟動PHP進程處理請求,提高性能和穩定性。 3.實際應用中需注意配置細節、錯誤調試和性能優化。

如果session_start()被多次調用會發生什麼? 如果session_start()被多次調用會發生什麼? Apr 25, 2025 am 12:06 AM

多次調用session_start()會導致警告信息和可能的數據覆蓋。 1)PHP會發出警告,提示session已啟動。 2)可能導致session數據意外覆蓋。 3)使用session_status()檢查session狀態,避免重複調用。

HTML作為標記語言:其功能和目的 HTML作為標記語言:其功能和目的 Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容,其目的在於提供一種標準化的方式來展示信息。 1)HTML通過標籤和屬性組織網頁的各個部分,如標題和段落。 2)它支持內容與表現分離,提升維護效率。 3)HTML具有可擴展性,允許自定義標籤增強SEO。

作曲家:通過AI的幫助開發PHP 作曲家:通過AI的幫助開發PHP Apr 29, 2025 am 12:27 AM

AI可以幫助優化Composer的使用,具體方法包括:1.依賴管理優化:AI分析依賴關係,建議最佳版本組合,減少衝突。 2.自動化代碼生成:AI生成符合最佳實踐的composer.json文件。 3.代碼質量提升:AI檢測潛在問題,提供優化建議,提高代碼質量。這些方法通過機器學習和自然語言處理技術實現,幫助開發者提高效率和代碼質量。

在Java的背景下,'平台獨立性”意味著什麼? 在Java的背景下,'平台獨立性”意味著什麼? Apr 23, 2025 am 12:05 AM

Java的平台獨立性是指編寫的代碼可以在任何安裝了JVM的平台上運行,無需修改。 1)Java源代碼編譯成字節碼,2)字節碼由JVM解釋執行,3)JVM提供內存管理和垃圾回收功能,確保程序在不同操作系統上運行。

session_start()函數的意義是什麼? session_start()函數的意義是什麼? May 03, 2025 am 12:18 AM

session_start()iscucialinphpformanagingusersessions.1)ItInitiateSanewsessionifnoneexists,2)resumesanexistingsessions,and3)setsasesessionCookieforContinuityActinuityAccontinuityAcconActInityAcconActInityAcconAccRequests,EnablingApplicationsApplicationsLikeUseAppericationLikeUseAthenticationalticationaltication and PersersonalizedContentent。

H5:HTML5的關鍵改進 H5:HTML5的關鍵改進 Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進:1.語義化標籤提升了代碼清晰度和SEO效果;2.多媒體支持簡化了視頻和音頻嵌入;3.表單增強簡化了驗證;4.離線與本地存儲提高了用戶體驗;5.畫布與圖形功能增強了網頁的可視化效果。

See all articles