如何将现有的后端 MVC 项目改造成前后端分离项目(Vue/React)? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
Sniper416
V2EX    程序员

如何将现有的后端 MVC 项目改造成前后端分离项目(Vue/React)?

  •  1
     
  •   Sniper416 2020-02-19 09:34:37 +08:00 5884 次点击
    这是一个创建于 2151 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现目前项目的前端逻辑由后端 er 编写,后端渲染,使用的 jquery 编写。 大佬们有相关经验吗?或者是更好的过渡方案。

    23 条回复    2020-02-19 15:40:48 +08:00
    x940727
        1
    x940727  
       2020-02-19 09:48:33 +08:00
    把所有返回 view 的方法全部改成返回 json,然后叫前端来对接就行了。
    Sniper416
        2
    Sniper416  
    OP
       2020-02-19 09:51:51 +08:00
    @x940727 那原有的页面的逻辑都需要修改,成本太大了。
    murmur
        3
    murmur  
       2020-02-19 09:53:51 +08:00
    @Sniper416 当然大,我们也有个类似架构的项目,因为要上移动端,原来页面上的数据全得做成接口,这就看你设计如何了,如果原来的 Service 封装优秀,那业务是不动的,改 Controller 就可以了,如果以前就是 CS 混写,那真的呵呵了
    vipcc
        4
    vipcc  
       2020-02-19 09:55:44 +08:00 via Android
    如果成本太高,继续使用,不要修改
    chendy
        5
    chendy  
       2020-02-19 09:58:47 +08:00
    除非刚需或者没事干,否则不动
    规模不大的新项目再尝试
    troycode
        6
    troycode  
       2020-02-19 10:03:55 +08:00
    不建议直接换框架
    aabbcc112233
        7
    aabbcc112233  
       2020-02-19 10:08:00 +08:00 via Android
    @Sniper416 重构火葬场,到时候出问题全是你的
    Sniper416
        8
    Sniper416  
    OP
       2020-02-19 10:10:58 +08:00
    @aabbcc112233 哈哈
    sanggao
        9
    sanggao  
       2020-02-19 10:11:16 +08:00
    这种重构干什么?? 为了你自己学习机会还是? 稳定大于一切,而且不影响使用扩展
    dddyyyttt
        10
    dddyyyttt  
       2020-02-19 10:41:26 +08:00
    个人学习时尝试过将小项目 JSP 改成 Vue+SpringMVC,感觉除了网页布局可以重用,其他的前后端都得用新技术重写。
    zjsxwc
        11
    zjsxwc  
       2020-02-19 10:46:15 +08:00 via Android
    重写就行
    jydeng
        12
    jydeng  
       2020-02-19 10:46:36 +08:00
    现有项目继续用,新模块改成前后分离。
    Sniper416
        13
    Sniper416  
    OP
       2020-02-19 11:12:23 +08:00
    @jydeng 嗯,目前我也是想采用这种方案。
    tonytonychopper
        14
    tonytonychopper  
       2020-02-19 11:14:50 +08:00
    如果想全改了的话,要一块一块改,不然会出大事。
    redbuck
        15
    redbuck  
       2020-02-19 11:17:17 +08:00
    改过.net 的.

    自己编写 webpack 多入口配置,每个入口(页面)生成一个 cshtml,一个 js.
    cshtml 除了模板代码,上面只有一个 script 标签,引入前端代码打包成的 js.

    后端把数据写到一个 input 里,前端在初始化时就将其取出作为初始数据.然后该怎么开发怎么开发.
    learnshare
        16
    learnshare  
       2020-02-19 11:22:55 +08:00   2
    1. 原有项目继续维护
    2. 设计并实现所有数据接口
    3. 开发新版前端,在足够成熟的时候替换掉原有项目
    4. 原有项目仅保留接口部分
    yEhwG10ZJa83067x
        17
    yEhwG10ZJa83067x  
       2020-02-19 13:04:06 +08:00
    #16 楼说的对
    leosirius666a
        18
    leosirius666a  
       2020-02-19 13:19:23 +08:00
    如果要用新框架,前端页面肯定要重写啊
    wysnylc
        19
    wysnylc  
       2020-02-19 13:35:07 +08:00
    旧接口旧业务不动,新的接口用新的项目写
    unco020511
        20
    unco020511  
       2020-02-19 14:43:59 +08:00
    我们就是这样的,基本等于重写
    cnanyi
        21
    cnanyi  
       2020-02-19 15:05:09 +08:00
    我现在的项目就是把原先的 jsp 放到 vue-element-admin 框架里运行的
    后台: 增加一个 token 认证的方法, 以方便前端传递 token, 增加一个拦截器, 以替代原先的 springsecurity 认证
    前端: 本地路由配置 + 对照菜单权限接口的方式生成本地路由, 将所有的 jsp 页面放到 iframe 里, 这一步最大的问题是 header 不能跨 iframe. 我尝试了很多方式, 最终的解决方案是用 get 参数传递。
    项目开发方式: 旧页面继续采用 jsp 方式维护, 新页面采用 vue 开发。 并且在 jsp 页面需求比较大的情况下, 将该页面转换成 vue 页面。
    其他: 验证方案+搭建前端框架,大概用了 2 周多,加上修修补补也有一个多月。 从开始动手到现在有 3 个月时间, 已经稳定成熟,并用于生成环境。
    loading
        22
    loading  
       2020-02-19 15:34:10 +08:00 via Android
    现在后台跑得起来,为什么改呢?为了时髦?
    别本末倒置!
    jobtesting
        23
    jobtesting  
       2020-02-19 15:40:48 +08:00 via iPhone
    如果后端是服务化的就简单点。先搞个统一网关,慢慢把服务转成 http 接口,前端工作量是比较大的。后端要配合
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5595 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 29ms UTC 02:46 PVG 10:46 LAX 18:46 JFK 21:46
    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