V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Sniper416
V2EX  ›  程序员

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

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

    现目前项目的前端逻辑由后端 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. 原有项目仅保留接口部分
    justrand
        17
    justrand  
       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   ·   我们的愿景   ·   实用小工具   ·   2750 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 12:25 · PVG 20:25 · LAX 05:25 · JFK 08:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.