请教前后端合作流程的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3268 天前的主题，其中的信息可能已经有所发展或是发生改变。

目前的流程是：前端根据原型图做页面，做好后把页面交给后端，由于后端用的是框架，后端需要套 html 和管理 css 。

但此时问题来了，前端经常需要改 bug ，此时后端痛苦来了，需要不断对比改了哪些 html 和 css ，并手工加上。

特此请教一下，这个问题需要如何解决？

第 1 条附言 · 2015-12-01 13:06:54 +08:00

Thanks all 给出各种提议。
解决办法
1 ：让前端融入后端
2 ：采用前端 MVC 框架，前端负责 VC ，后端负责 Service
根据我们目前项目及团队的规模及大小，暂时采用方案 1 ，等成熟后采用方案 2 。

希望此贴能给后来者提醒。结贴。

CSS

HTML

请教

页面

55 条回复 • 2015-11-30 19:59:52 +08:00

an168bang521

2015-11-29 23:44:36 +08:00

还是约定接口的比较好；哪边代码出事了，哪边去修；

ifconfig

2015-11-29 23:45:18 +08:00

@an168bang521 请问约定接口是什么回事？

penjianfeng

2015-11-30 00:30:36 +08:00

@ifconfig 前后端分离,你们公司现在的还是传统的网站方式,现在除了想官网这种纯静态基本都是服务端提供 API 接口,前端通过 API 接口,使用 MV*框架如 angular,vue 这类也好,刀耕火种的方式比如用 jquery 等类库进行开发也好,服务端只提供数据的支持,所有逻辑等都交由前端来做

zonghua

2015-11-30 01:11:41 +08:00 via iPhone

@penjianfeng 是啊，还是传统的写标签

sfree2005

2015-11-30 04:07:21 +08:00 via Android

花点时间,让前端也学会用 git ？

Hyperion

2015-11-30 07:06:33 +08:00 via Android

作坊业主表示，很早就开始用异步请求来加载数据了。

前端做好， js 前端模板扣好， ajax 请求后端拿 json 格式数据，应用。

因为量小，这么多年也没用过 mv* 框架 ('・ω・')

imnpc

2015-11-30 07:40:49 +08:00

对比工具 beyond compare

Sharuru

2015-11-30 07:44:25 +08:00 via Android

我司一般就是后端只管写一个服务端，丢你前端想要的数据。
如果简单系统就直接后端全包了 2333

finian

2015-11-30 07:57:31 +08:00

网上搜搜前后端分离实践

yimity

2015-11-30 08:23:14 +08:00 via iPhone

可以前端只改模板啊，这个模板是后端套过得。

int64ago

2015-11-30 08:29:50 +08:00

git submodule / 前后端分离

XianZaiZhuCe

2015-11-30 08:39:12 +08:00

不一定要分离。
你把模板页面尽量做得简单清晰。举个例子的话，文章页面，标题就是{title}，内容就是{content}，标签就是{tags}。
模板页面丢给前端做。
反正他也不用管{title}{content}具体输出什么数据。

unique

2015-11-30 08:41:30 +08:00

要看你们公司的架构怎么设计了，有的是纯 json 返回，后端基本不关注前端，而我们公司使用后台返回在模版对象中这样的前端也要懂语法，有了前端 bug 前端修复，功能性的 bug 后台修复，有时候会需要两方协作一下。

dong3580

2015-11-30 08:59:36 +08:00 via Android

老项目也是这样的，拼接拼接。。。连 js 都要拼接，
不要这样做，不要这样做，不要这样做，要学会前后端分离，为你自己好，

elgoog1970

2015-11-30 09:22:55 +08:00

有原型的话，后端同学先设计数据库，定义接口文档，和前端同学同步，在开发。。。

learnshare

2015-11-30 09:34:16 +08:00

通常这种问题需要前后端分离

hkongm

2015-11-30 09:43:25 +08:00

我们是前端会 Git ，后端不会

且后端牢牢把住了模板，前端动不到，作为前端百般痛苦：要经常给后端擦屁股，乱改样式和 JS

Light3

2015-11-30 09:46:33 +08:00

一起公用一个测试服务器然后都能连上然后 git svn 就都行了你改你的改完他下载继续套不当误

ifconfig

2015-11-30 09:50:09 +08:00

@yimity @hkongm @XianZaiZhuCe 明白你们的痛点在哪，都更痛的点在于，咱们套完一次模板并不是完事了的，前端有 bug 起来不会管你后端怎么套，前端继续改回前端那一套，之前所在的公司 POCO 也是这样，后端根据前端的改动继续套模板是非常难受的地方

ifconfig

2015-11-30 09:52:15 +08:00

@Light3 明白的你的意思，但问题是，每次前端改动**后端都要手动跟踪前端的改动**并加载到后端的框架，这是一个非常痛的地方

ifconfig

2015-11-30 09:52:31 +08:00

@finian 好的我学学

djyde

2015-11-30 09:52:49 +08:00

论前后端分离的重要性

yunba

2015-11-30 10:56:18 +08:00

1.可以前后端分离 2.可以用 svn 、 git 啊多人合作必须用版本管理

imn1

2015-11-30 10:59:07 +08:00

你说的问题是版本控制问题，基本算不上合作问题
合作问题更多是前后端统一数据的——什么数据(what)、何处需要(where)、何时需要(when)、必要性(why)、权限(who)以及传递方式(how) 几大问题

HentaiMew

2015-11-30 11:03:08 +08:00 via Android

前段把交互都做好，就差个数据绑定就行。如果还在用模板之类的生成页面，那就确实有点原始了，前后端互改 JS 和 HTML 无法避免。

xwartz

2015-11-30 11:37:18 +08:00

= = 现在还有这样的前后端分工啊

SmiteChow

2015-11-30 11:39:10 +08:00

上 kanban

ChefIsAwesome

2015-11-30 11:40:27 +08:00

<div>{data}</div> 这种前端也能改
<customTag></customTag> 这种只能后端改

ifconfig

2015-11-30 11:41:38 +08:00

@dong3580 你们前后端分离用的是什么前端框架？

dong3580

2015-11-30 12:27:20 +08:00

@ifconfig
我前端用的 angularjs 和其它，其他人的项目不清楚，

beew

2015-11-30 13:15:43 +08:00

呃，难道是我们公司项目太小了？目前还没 MV*

crs0910

2015-11-30 13:44:48 +08:00

必须分离。这个分离也指工作流程和岗位职责上的，有几种方式，下面按『不推荐』程度排列：

1 、前端接管后端 mvc 中的 view ，比如说前端来写 jsp 页面。

1.1 、前端单纯接管 jsp 的编写、维护（可用模板语言），要懂 jsp ，要跑整个项目，例如 java ，那就是开个 eclipse 跑项目搞了。

1.2 、前端不需要跑项目，设计稿、交互和业务逻辑确定后，和后端定义好数据格式，页面数据采用模拟的方式。有点像现在用 js 前后端分离的搞法。但其实还是写 jsp 。可用看看百度的这个方案： http://fex.baidu.com/blog/2014/11/another-fis-solusition-jello/

2 、设计稿、交互和业务逻辑确定后，和后端定义好数据格式，后端只提供数据接口（ JSON 、开发环境可跨域），前端用 AJAX 获取数据。前端用 HTML + JS 负责整个设计和业务的实现。
2.1 、不使用框架，不做单页应用。就是传统的编写页面的做法 + AJAX
2.2 、使用一些 MVVM 框架（ React + Flux 、 Vue + backbone 、 Angular 、 Avalon 等），连 router 这些都在前端控制。前端的开发变成类似 APP 开发的模式。
2.3 、前后端加多一层 node.js 来做接口。前端来写。
2.4 、前后端加多一层 node.js 来做 view 层和接口。 view 可用 react 来实现前后端同构的方案。

crs0910

2015-11-30 13:46:59 +08:00

上个回复不对，不是按不推荐程度。具体用什么方法去做，应该是要结合技术储备、前端人力、现有项目改造成本决定的。

yimity

2015-11-30 13:58:01 +08:00

@ifconfig 不是套完模板之后，发现前端 bug 前端再去改前端那个，而是，在套完的基础上改套完的模板。
具体流程是：
前端切页面 -> 后端套模板。
前端也把环境打起来，或者前端只要后端的 view 的环境。
发现 bug 了。
前端在后端套模板的基础上，改套了模板的 view 。

ifconfig

2015-11-30 14:12:52 +08:00

@yimity 这位童鞋说道点子上了，可关键前端不乐意去接触后端的框架啊，人家只做 html 打包好成文件夹就发给你不管了，出了 bug 继续改自己那一套再发给你一遍，后端进入苦逼的对比流程。

@crs0910 你说的方案目前唯有觉得 2.2 是能使用的，但现在都是小项目，而且其中一个前端还没用过
Angular ，哎烦恼~

yimity

2015-11-30 14:45:26 +08:00

@ifconfig 这样的前端其实是不合格的，从上开始推动，将修 bug 时候的前端静态页面变为模板 view 吧。

akira

2015-11-30 14:50:53 +08:00

@ifconfig 换一个前端

unknownservice

2015-11-30 14:56:05 +08:00

html 渲染必须丢给前端，后端不要接这个锅。
需要的变量和数据统一挂一个变量输出到空白页面上，后面的事叫前端自己弄去。
交互接口事先商定好数据格式，以后看谁的锅就靠这个。

wizardoz

2015-11-30 15:18:31 +08:00

要是有专门的前后端，那么还是做到前后端分离比较好。
我现在负责一些小项目一个人又做前端又做后端，我自己还是做前后端分离。我觉得这样做思路比较清晰。

gdtv

2015-11-30 15:26:50 +08:00

@Hyperion 请教一下， ajax 请求后端拿 json 格式数据，那页面的 html 代码里没有任何内容，的、 seo 岂不是不好？

ifconfig

2015-11-30 15:32:58 +08:00

@gdtv 对。用前端 MVC 框架第一个需要面对的问题就是对 SEO 不友好。

liuxiaoxiaochen

2015-11-30 15:45:47 +08:00

为什么要这样感觉好复杂前端做前端的事情好了跟后端一点关系就好唯一的交互就是咱们事先约定好接口要什么东西我怎么给，就这样就好了，前端的事情当然是前端来搞了，要不何谈前后端分离。

iancj

2015-11-30 16:00:10 +08:00 via iPhone

换了个模板引擎前端就不会了？

ifconfig

2015-11-30 16:01:05 +08:00

@liuxiaoxiaochen 关键是现在没前后端分离，前端做完后丢给后端套进框架里，改 bug 后端又要重新套，但是现在又没 Angular 等框架，加上去也不是马上的事，所以在找一个折衷和临时的办法，等团队大了，会考虑使用前端框架

ifconfig

2015-11-30 16:02:23 +08:00

@iancj 对，所以最长久，最好的解决办法就是换前端框架，但项目已经有一段时间了，也不是马上 ok 的事啊

gdtv

2015-11-30 16:06:26 +08:00

前端经常需要改 bug ，一般只要改下 css 就行了，此时后端把新的 css 文件替换上去就行。如果要少量改 html ，前端应该告诉后端具体是改了哪里，然后后端手工修改一下。如果改的 html 比较多，那么后端就重新套一次页面。

ZnZt

2015-11-30 16:43:33 +08:00

@gdtv 我们是后台对那些使用 ajax 来渲染的页面生成了静态页面，搜索引擎过来的时候给它返回生成好的页面就行

Hyperion

2015-11-30 16:53:21 +08:00

@gdtv 要 SEO 的话，这种需求一般就直接 php 后台生成咯。

如果不大改当前职责结构，那就让前端和后端找一套模板标记语言来做，让前端来做模板， php 的话， Twig 和 Smarty 选一个就好。

以上是多年擦屁股经验得来的… 可能最有效的就这个，如果贵厂前端水平实在太惊人，那就没办法了。