V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Sniper416
V2EX  ›  程序员

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

  •  1
     
  •   Sniper416 · Feb 19, 2020 · 6054 views
    This topic created in 2259 days ago, the information mentioned may be changed or developed.

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

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

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

    后端把数据写到一个 input 里,前端在初始化时就将其取出作为初始数据.然后该怎么开发怎么开发.
    learnshare
        16
    learnshare  
       Feb 19, 2020   ❤️ 2
    1. 原有项目继续维护
    2. 设计并实现所有数据接口
    3. 开发新版前端,在足够成熟的时候替换掉原有项目
    4. 原有项目仅保留接口部分
    yEhwG10ZJa83067x
        17
    yEhwG10ZJa83067x  
       Feb 19, 2020
    #16 楼说的对
    leosirius666a
        18
    leosirius666a  
       Feb 19, 2020
    如果要用新框架,前端页面肯定要重写啊
    wysnylc
        19
    wysnylc  
       Feb 19, 2020
    旧接口旧业务不动,新的接口用新的项目写
    unco020511
        20
    unco020511  
       Feb 19, 2020
    我们就是这样的,基本等于重写
    cnanyi
        21
    cnanyi  
       Feb 19, 2020
    我现在的项目就是把原先的 jsp 放到 vue-element-admin 框架里运行的
    后台: 增加一个 token 认证的方法, 以方便前端传递 token, 增加一个拦截器, 以替代原先的 springsecurity 认证
    前端: 本地路由配置 + 对照菜单权限接口的方式生成本地路由, 将所有的 jsp 页面放到 iframe 里, 这一步最大的问题是 header 不能跨 iframe. 我尝试了很多方式, 最终的解决方案是用 get 参数传递。
    项目开发方式: 旧页面继续采用 jsp 方式维护, 新页面采用 vue 开发。 并且在 jsp 页面需求比较大的情况下, 将该页面转换成 vue 页面。
    其他: 验证方案+搭建前端框架,大概用了 2 周多,加上修修补补也有一个多月。 从开始动手到现在有 3 个月时间, 已经稳定成熟,并用于生成环境。
    loading
        22
    loading  
       Feb 19, 2020 via Android
    现在后台跑得起来,为什么改呢?为了时髦?
    别本末倒置!
    jobtesting
        23
    jobtesting  
       Feb 19, 2020 via iPhone
    如果后端是服务化的就简单点。先搞个统一网关,慢慢把服务转成 http 接口,前端工作量是比较大的。后端要配合
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5612 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 89ms · UTC 03:42 · PVG 11:42 · LAX 20:42 · JFK 23:42
    ♥ Do have faith in what you're doing.