教你如何前后端完全分离(非api、ajax)

我的前后分离,不是api,不是ajax,我这里只讨论html与后端结合

前话

曾经风靡一时的dedecms相信做网站的十有八、九都知道,还有那么一些不是技术出生的人,通过看一下文档,也能访问出网站出来,有的人说dedecms太垃圾了,不知道是从哪些方面来说的,但不得不承认它的优势,又有哪个框架免费给你用,还这么方便的呢

话说回来,dedecms的一大好处就是会模板标签,差不多就会慢慢的做套网页了,真的就是这么简单

phper技术到底如何

之前我面试过一些人,当然我不会拿网上一些现成的试题,或感觉对工作没有实际意义的题去考面试者的

自称一到两年工作经验,当然也有3年左右的人(具体没法核实),问他们一些简单的问题他们都不能回答上来,真是不变码农(我这里指只知道码大量代码,而不管代码效率)也难呀

话说我的面试问题很简单(当然我只针对网页),用户了这么多的框架(yii、tp、larval、ecshop、dedecms、wp),不管哪一种,如果直接在网页上拉取数据库的数据?

已经没有几个人把原生php研究好再进行框架开发的,他们却不知道“直接在页面连接数据库,查询显示”,而是说我从来没有这么做过呀,从来都是从控制器读取数据赋值后,在模块里面取

真的就只能这样么,这里不得不说MVC真的很根深蒂固呀,有人说能实现功能就可以了,管它什么的呢,这样说你也对

引出问题

模板赋值,渲染,显示,这样的方式真的好么?

哪天我模板改了,删除了一些数据,那控制器你要动么,不动是不是有垃圾数据了?

现在模板的数据是不是完全受制于控制器,耦合度太高,谁都离不开谁?

.....

太多的疑问了,当然你未曾想过,我们做码农,不要只是你的工作年限比别人高,而技术没长进,当然你说我只为混口饭吃,那也罢。

怎么去实现(个人观点)

用过dedecms的人都知道,直接在html用模板标签去取数据不就得了,没错,但在tp、yii、larval这些框架里面你们又会怎么做呢?标签?

第一想到的就是标签,是的,这是最直接的办法,也是dedecms所采用的方法,第是一种方式,这种你要么会设计大量的标签,要么设计比较复杂灵活的标签

我这里肯定不是说就用上面那个方法,不然我也不用写这么多了,下面问题的引出

现在很多项目基本都要求有app、mobile、pc一起开发,你如果pc用标签倒是可以,那app呢,单独再弄一个接口去实现???? 写着写着你会发现,很多数据重复的在写,垃圾代码越来越多

那这里面最主要的东西是什么呢? 对,逻辑,每个端都会写大量的逻辑代码,如果几个端能达到逻辑共用,又能实现上面的模板直接摘取数据多好呀

当然可以呀,就是从模板(html)直接去逻辑(model)拉去数据就可以搞定了,tpframe就是这么做的,它灵活的实现了这个功能,如下方便都可以

1、正常赋值

2、标签去取

3、直接去逻辑摘取

最后

如果一个项目在开发的过程中,每个端主要的东西都共用,而不用去每个端写一套,这不就可以给你们项目节约很多的时间各成本 了么

以后如果要改动,维护,如果是每个端一套,那你每个端都要去改,如果共用逻辑,只须要改逻辑部分就可以

以后项目升级的时候,你也只须要写少量的代码,每个端的功能也便实现了

同时后端只须要把文档写好,前端就可以搞定数据拉取,两边都不耽误,这便是我说的前后端分离

欢迎大家留言讨论,小的读过两年书,望高手赐教~

原文地址:http://blog.51cto.com/3695538/2090192

时间: 2024-08-30 03:46:27

教你如何前后端完全分离(非api、ajax)的相关文章

基于Spring Boot架构的前后端完全分离项目API路径问题

最近的一个项目采用前后端完全分离的架构,前端组件:vue + vue-router + vuex + element-ui + axios,后端组件:Spring Boot + MyBatis.之所以这样做是为了考虑后端水平扩容的便利性,在部署的时候完全可以将前后端彼此独立部署,前端部署可以直接使用诸如Nginx这样的高性能Web服务器. 前端需要知道它所访问的后端服务器IP地址才能访问到数据,但是如果将IP地址硬编码在前端代码中的话,在部署的时候会存在一个问题:当服务器端IP地址变化之后必须重

dotnet core webapi +vue 搭建前后端完全分离web架构

架构 服务端采用 dotnet core  webapi 前端采用: Vue + router +elementUI+axios 问题 使用前后端完全分离的架构,首先遇到的问题肯定是跨域访问.前后端可能不在同个server上,即使前后端处在同个server上,由于前后端完全分离, 前后端使用的端口号也可能是不一样的,所以必须解决跨域访问. 具体实现 服务端 服务端使用的dotnetcore +webapi架构,支持cors非常简单,只要引入Microsoft.AspNetCore.Cors 组件

dotnet core webapi +vue 搭建前后端完全分离web架构(一)

摘要: 架构 服务端采用 dotnet core  webapi   前端采用: Vue + router +elementUI+axios            问题 使用前后端完全分离的架构,首先遇到的问题肯定是跨域访问. 架构 服务端采用 dotnet core  webapi 前端采用: Vue + router +elementUI+axios 问题 使用前后端完全分离的架构,首先遇到的问题肯定是跨域访问.前后端可能不在同个server上,即使前后端处在同个server上,由于前后端完

前后端完全分离的思考

网站开发历程 1.杂合模式 早期的asp开发网站时期大多是如此,一个asp文件混合业务处理,页面显示,js动态交互:完全杂合在一起: 一个请求对应一个asp文件,业务逻辑解析,动态输出html内容. 后期的php.早期的jsp也是如此模式: 2.webform模式 这个是微软asp.net时期的一个方式,本质上是封装html为服务器控件,动态生成html及相关提交和状态保持: 前后端分离,事件触发模式: 出发点是好的,但是这个模式问题太多. 简单的问题复杂化,导致大家学习成本增加,要单独取学习下

前后端分离后台api接口框架探索

前言 很久没写文章了,今天有时间,把自己一直以来想说的,写出来,算是一种总结吧!  这篇文章主要说前后端分离模式下(也包括app开发),自己对后台框架和与前端交互的一些理解和看法.     前后端分离,一般传递json数据,对于出参,现在通用的做法是,包装一个响应类,里面包含code,msg,data三个属性,code代表状态码,msg是状态码对应的消息,data是返回的数据. 如  {"code":"10008","message":"

前后端分离后API交互如何保证数据安全性

前后端分离后API交互如何保证数据安全性? 一.前言 前后端分离的开发方式,我们以接口为标准来进行推动,定义好接口,各自开发自己的功能,最后进行联调整合.无论是开发原生的APP还是webapp还是PC端的软件,只要是前后端分离的模式,就避免不了调用后端提供的接口来进行业务交互. 网页或者app,只要抓下包就可以清楚的知道这个请求获取到的数据,这样的接口对爬虫工程师来说是一种福音,要抓你的数据简直轻而易举. 数据的安全性非常重要,特别是用户相关的信息,稍有不慎就会被不法分子盗用,所以我们对这块要非

前后端开发过程中API接口管理有哪些痛点?附几种解决方案

一.API管理的痛点 API接口在设计时往往需要编写大量的文档,而且编写完成之后还会经常改动,文档编写维护工作量大. 接口文档编写好后,实际的代码可能会与文档有出入,这个时候文档是不准确的,文档与代码保持修改同步也是一个很大的工作量.随着接口版本的迭代,接口文档需要同步更新.有些时候接口会成为对接双方的开发进度瓶颈,因为接口调用会有依赖,类似app的项目,前端会需要调用后端接口,接口功能不实现会影响前端开发进度.接口开发完以后,做接口测试不方便,特别是接口数量多,参数复杂的情况,测试工作量大.接

dotnet core webapi +vue 搭建前后端完全分离web架构(二)

前言 最近几年前后端分离架构大行其道,而且各种框架也是层出不穷.本文通过dotnetcore +vue 来介绍 前后端分离架构实战. 涉及的技术栈 服务端技术 mysql 本项目使用mysql 作为持久化层 orm dapper 短小精悍,被称为orm中的瑞士军刀.作者之前使用EF 比较多,总感觉 EF 对一些复杂查询需要原生sql支持的不是那么好,EF 生成sql 不好控制,涉及对性能要求比较高的地方,优化起来不够理想.作者在最近的几个项目中接触到dapper,它对原生sql查询支持的相当给力

前后端交互之封装Ajax+SpringMVC源码分析

为什么需要封装呢?因为用的多,我想将其封装成函数,当我想用它时,只需将那个函数对应的js文件引入即可,而不要重复写很多相同代码,利于开发效率的提高. 无论是$.ajax或$.post.$.get等,在开发中是经常用到的.再比如一些前端框架,例如easyui.ext.js等,ajax也是封装的. 编程的世界,封装无处不在. 具体js代码如下: /** * 增删改通用ajax请求 * @param type * @param url * @param datatype * @param conten