新手关于前端的一点提问 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Tankpt
V2EX    问与答

新手关于前端的一点提问

  •  
  •   Tankpt 2014-01-18 18:19:29 +08:00 4645 次点击
    这是一个创建于 4366 天前的主题,其中的信息可能已经有所发展或是发生改变。
    学生党最近跟小伙伴一起在做一个东西,刚学前端也没多少时间,现在最明显的一点感觉就是现在跟后台的同学有时候配合起来好困难,想问问这里的实战经验多的人下,这个一般前端的人要做到哪一步算是结束了,后台同学用的是java

    比如有没有前端跟后端人员有一个比较成型的规范,就是定义共同的接口啥的之类的,然后好做,还有一点就是我发现现在代码一旦写多了之后整个页面的可维护性直接是0了。。==改起来好痛苦,这个求解


    希望前辈们指点下。谢谢谢
    26 条回复    1970-01-01 08:00:00 +08:00
    loading
        1
    loading  
       2014-01-18 18:23:38 +08:00 via iPhone
    json
    resetful

    如果是普通cms,全端工程师行列入门必经之路
    learnshare
        2
    learnshare  
       2014-01-18 19:18:42 +08:00
    模板化/非模板化的前端都比较烦,后端的代码要写到前端代码中(甚至是前端代码写到了后端代码里),想要查看/修改前端,必须要先把后端运行起来...

    许多应用都可以将前后端彻底分离,后端只提供数据 API,前端来调用这些 JSON API 即可。
    Tankpt
        3
    Tankpt  
    OP
       2014-01-18 19:43:09 +08:00
    @learnshare 我其实挺疑惑的,在正规的公司里走的开发流程的话,是不是先定义好一个页面中会涉及到的所有数据的api,然后在开始做?.做后台的人员是不是也应该跟前端的人员一样都知道这样页面里要涉及到的所有东西?
    现在一起的都是学校,没有一个规范,自己瞎做,感觉很盲目,
    Tankpt
        4
    Tankpt  
    OP
       2014-01-18 19:44:08 +08:00
    @loading 问下,你刚说的入门必经之路是什么意思呢
    loading
        5
    loading  
       2014-01-18 20:14:48 +08:00 via iPhone
    @Tankpt 你试着用wp写个模板,发现后端入门级别也就那样了。然后你就把后端也写了。

    学好js吧,上node
    tinyhill
        6
    tinyhill  
       2014-01-18 20:20:28 +08:00
    JSON 最方便,只要约定数据格式,其他不需要打交道。
    silverfox
    &nsp;   7
    silverfox  
       2014-01-18 20:48:50 +08:00   2
    我来抛个砖引下玉。

    从你的描述来看,似乎前端和后端的逻辑都是在写同一个文件,这样的话确实不好维护。可以考虑这么做,定义前端与后端交互的 API(接口),前后端各自开发。
    也就是说后端不需要写 JSP,只要实现 Servlet 就可以(我好久没写过 Java 了,这个描述可能不准确);前端只写页面,HTML + CSS + Javascript 就够了。

    举个例子,现在需要实现这样一个功能,显示最新的30条帖子。那么从这句话里可以分析出,前端需要调用后端的某个 API 来显示这些数据,这个 API 可以如下定义。
    * 路径: /api/topics;
    * 方法: GET;
    * 参数: 第一条和最后一条帖子的序号,firstNo:1, lastNo:30;
    * 返回值: JSON 格式的一组数据,每个数据都是 Topic 对象 { id: 97517, title: "新手关于前端的一点提问", author: "Tankpt" }。

    后端要做的事情,
    1. 接收前端传入的参数,完成身份校验、参数检查。
    2. 根据参数、当前登陆用户的设置(忽略指定主题等等)和其他必要的信息查询数据库,构造结果集。
    3. 返回结果集到前端。

    前端要做的事情,
    1. 编写显示帖子列表的页面。
    2. 调用后端的指定路径,传入参数,获取结果集。
    3. 在列表中呈现结果集。

    好处是,前后端只需要关心自己所涉及的内容,对方怎么实现/使用这个 API 自己并不需要知道。
    当然也有坏处,如果 API 定义得不合理,导致功能无法实现,这时候两边容易互相踢皮球。
    learnshare
        8
    learnshare  
       2014-01-18 21:10:30 +08:00
    @Tankpt 项目一定要进行完整的设计之后再开始做。如果不做设计,或者设计的不够完善,后面可能会进行大修改,甚至推翻重来。许多东西经过设计之后,能够保证其可扩展性和可维护性。
    Tankpt
        9
    Tankpt  
    OP
       2014-01-18 21:27:45 +08:00
    @learnshare 恩恩。非常对,现在这个项目,两个从没经验的人在瞎弄,瞎走,确实很累,谢谢指教
    Tankpt
        10
    Tankpt  
    OP
       2014-01-18 21:28:59 +08:00
    @loading 恩恩。,就是在怒学js,感觉js很厉害,还在努力学习中,话说那个node,有了它是不是可以替代比如在java web开发中java的活呢?谢谢。之前一直很模糊这个东西
    Tankpt
        11
    Tankpt  
    OP
       2014-01-18 21:30:19 +08:00
    @tinyhill 就是前台跟后台的人员约定好,在一个页面中涉及到数据的json的东西么?然后以这个作为前后的分割线么
    Tankpt
        12
    Tankpt  
    OP
       2014-01-18 21:40:44 +08:00
    @silverfox 恩恩。感谢前辈的指教,我先好好消化下,嘿嘿
    scarlex
        13
    scarlex  
       2014-01-19 00:47:20 +08:00
    看你的描述应该是前后端都在一个项目里面。如果是这样的话,做前端一般都是先把页面排出来,然后等后端来对接,对接好了之后你再去做交互。
    这里要注意一下要把很多东西都规范好,js命名方式,缩进,css命名方式等等。
    曾经试过接手一个项目的时候有各种风格的代码都混杂在里面,看完了完全没有写的动力了。

    js是很厉害,不过里面的坑真的很多很多。web新手建议还是不要用node来写大项目,最好先自己搞几个项目练练手。
    Tankpt
        14
    Tankpt  
    OP
       2014-01-19 09:29:15 +08:00
    @scarlex 恩恩。这点我知道的,那node是不是差不多就是java 做后台中可以替代java的角色?
    谢谢前辈指教
    rqrq
        15
    rqrq  
       2014-01-19 11:17:29 +08:00
    @silverfox 提到前端要做的部分,其实前端只需要做第1点“编写显示帖子列表的页面”就够了……
    另外提到说用api,指的是后端不用在页面上写内容了?这个不是主流吧,难道不用考虑seo和页面请求数量的问题?

    我认为前端只需要做好html页面,剩下的由后端独自完成,包括ajax。因为这些交互的逻辑后端最清楚。
    当然,前端制作页面的时候要考虑到后端是否能够方便的使用,例如页面上的列表内容、浮动窗口等。

    再打个比方,discuz的template目录中的模板文件,也应该是由后端来制作,前端只需要做好每一个完整的页面就够了。
    loading
        16
    loading  
       2014-01-19 14:26:25 +08:00 via iPhone
    @rqrq ajax也后端写,你工资低于2k吧…
    rqrq
        17
    rqrq  
       2014-01-19 14:31:37 +08:00
    @loading 我在第一家公司工资正好2k。
    另外,我是做后端的。
    hustlzp
        18
    hustlzp  
       2014-01-19 14:38:18 +08:00
    学后端,前后都自己做,就解决问题了...
    Tankpt
        19
    Tankpt  
    OP
       2014-01-19 14:39:12 +08:00
    @hustlzp 嗯啊。有道理。现在就是后端一点不会,很被动
    spirit23
        20
    spirit23  
       2014-01-19 16:41:09 +08:00
    楼主的问题完全没有描述清楚。“跟后台的同学有时候配合起来好困难” 真正是由什么原因引起的? 只说做一个“东西”, 也没说清楚做的是个什么东西?

    如果真是因为没有规范的原因的话,想找一个前后端“比较成型的规范”我看还是放弃吧,因为规范也好,借口也好,是根据具体项目、使用的技术和程序员自身情况而定的(用JSON 也不是哪里都合适)。根本原因还是前后端的沟通问题,做的时候多讨论讨论,并且多尝试下不同的实现方法, 即使是像你上面所说的 “两个完全没有经验的新手“,大家一起把实现的每个细节讨论清楚也就好了,可以边做边学。

    关于“前端做到哪一步算结束了”这个问题,就不谈责任了吧,只要你真的喜欢你做的 “东西”,晚上睡觉都会在想哪个地方可能会有bug出现,即使已经结束了很久以后也会经常打开来看。如果不喜欢请忽略上面所说的。

    要让代码“可维护性好”,非一朝一夕就能达到的。除了注意下最基本的如 目录结构、命名等表面问题外,代码本身的抽象和实现逻辑就要看自己的水平了,这些都能很影响可维护性。建议楼主多写多看,没有其他的办法。


    另外,不同意 @loading 说的 “ajax也后端写,你工资低于2k吧”, 理想情况下,工资多少是由创造的价值决定的,显然写得越多并不能说明创造的价值越高。
    spirit23
        21
    spirit23  
       2014-01-19 16:43:15 +08:00
    笔误, “借口” -> 接口
    Tankpt
        22
    Tankpt  
    OP
       2014-01-19 17:44:35 +08:00
    @spirit23 谢谢你的良言,嗯嗯,很有道理,做的东西就是一个网站,音乐主题的,之所以配合起来难的原因就是有些代码我写了之后交付给他,因为我做的东西没有涉及到后台,所有有些比如jqery的东西他也会写点,现在偶而会发生一段代码两个人都改动了之后,出了问题就俩人都傻眼了。

    其实我感觉问题我这边没弄好,我也需要学点后台的东西这样才好互相交付

    anyway,很感谢你的回答
    tinyhill
        23
    tinyhill  
       2014-01-19 22:57:11 +08:00
    @Tankpt 对,后端除了提供 json/jsonp 数据接口外,其他就不需要了,前端模板 + json 数据直接构建页面出来。
    Tankpt
        24
    Tankpt  
    OP
       2014-01-19 23:09:05 +08:00
    @tinyhill 谢谢咯。正在跟小伙伴慢慢摸索ing
    FrankFang128
        25
    FrankFang128  
       2014-01-24 00:02:26 +08:00
    我发现你问的问题都还有代表性啊。不错。
    FrankFang128
        26
    FrankFang128  
       2014-01-24 00:02:38 +08:00
    都『很有』
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1311 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 26ms UTC 16:41 PVG 00:41 LAX 08:41 JFK 11:41
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86