V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
zeal7s
V2EX  ›  程序员

SpringMVC+React+Redux+ Webpack 开发时遇到的几个问题

  •  
  •   zeal7s · 2016-11-07 06:33:45 +08:00 · 7350 次点击
    这是一个创建于 2969 天前的主题,其中的信息可能已经有所发展或是发生改变。
    问题一,后端如何将数据传输到前端页面?目前我有两种方案:

    第一种,在 SpringMVC controller 中直接 return “ somepage ”。
    这样,当浏览器打开这个页面时,并没有数据,前端页面向后端发送一个 Ajax 请求来异步地获取数据进行渲染。这样做的好处是能够设计出 REST API ,缺点是需要向后端发起二次请求,用户不能马上看到数据,可能会有一点延迟。

    第二种,先往 Map 中放入一个 Json 格式的字符串,然后在 jsp 页面中从 request 域取出这个字符串并绑定到 window 对象中,比如


    这样,就能在 Redux 中来访问 window.json 来获取后端传来的初始化数据。
    请问,现在主流的做法是哪一种,或者还有更好的方式吗?

    问题二,关于前端代码热加载的问题:

    执行命令 webpack-dev-server --progress --colors 后,当我更改了前端代码,命令行中确实看到了变化,但是实际上 webpack 的 output 路径下的文件内容并没有发生变化。我必须重新执行 webpack 命令并且重新部署 war 包才能在浏览器中看到变化。
    以下是我的文件夹目录结构,不晓得对于我遇到的问题有没有什么影响
    src
    ├── main
    │   ├── java
    │   ├── resources
    │   └── webapp
    │   ├── WEB-INF
    │   │   └── views
    │   │   └── home.jsp
    │   └── resources
    │   ├── built(Webpack输出文件夹)
    │   │   ├── app.js
    │   │   └── app.js.map
    │   ├── images
    │   ├── scripts
    │   │   └── app.js
    │   └── styles
    │      └── style.css
    └── test
    ├── java
    └── resources
    我应该如何修改才能使前端代码热加载生效呢?
    多谢!
    18 条回复    2016-11-09 15:32:14 +08:00
    q397064399
        1
    q397064399  
       2016-11-07 07:14:30 +08:00
    没有主流做法,能解决问题的做法是最好
    个人建议第 2 种,因为网站加载是有延迟的,除非你遍地 CDN
    否则你的用户肯定有几率会看到{{}}之类的玩意(手动 DOGE )
    话说浏览器走到今天 真是赶鸭子上架,不仅折腾人 还折腾业务逻辑
    q397064399
        2
    q397064399  
       2016-11-07 07:16:13 +08:00
    我自学完 SpringMVC Mybatis vuejs 之后 做的一个项目就是个小论坛,采用的第一种加载方案,
    由于 Ajax http 请求的延时,用户会看到{{}}之类的玩意
    murmur
        3
    murmur  
       2016-11-07 07:48:22 +08:00
    这个架构把 redux 去了估计上手会更快一些
    66beta
        4
    66beta  
       2016-11-07 08:43:01 +08:00
    用 React 了,前后分离啊,那么后端是不是 SpringMVC 、是不是 JAVA 并不重要啊
    blackboom
        5
    blackboom  
       2016-11-07 09:01:35 +08:00 via Android
    接手的几个项目都是二次加载(首页白屏)的方式,然后 index 就交给 cdn 或者 nginx 好了。
    admol
        6
    admol  
       2016-11-07 09:59:37 +08:00
    倾向于第一种
    1. 既然 前端页面向后端发送一个 Ajax 请求来异步地获取数据进行渲染, 那么我觉得这个页面的数据应该是用户不需要立马就需要看见的, 可能需要点击一个展开或者点击一个下拉框之类的再去 ajax 加载数据 , 如果是需要一进入就需要展示的数据也就没必要再 ajax 去异步请求一次了....

    2.还需要在 js 写``request.getAttribute(xxxxx)``这样的代码实在是麻烦, 而且还要手动放 request 里面扔数据, 觉得实在是没必要...

    关于 1L 说的出现`{{}}`问题, 用 velocity 模版引擎不会出现这样的问题
    saturnast
        7
    saturnast  
       2016-11-07 10:10:34 +08:00
    @q397064399 其实不是浏览器的问题,浏览器现在越来越按照标准来了,有问题的是前端社区的发展,太浮躁了。
    Doubear
        8
    Doubear  
       2016-11-07 10:23:04 +08:00 via iPhone
    有加载延迟,做个加载动画提示就行了,等数据加载完,再进行渲染
    EXDestroyer
        9
    EXDestroyer  
       2016-11-07 10:27:06 +08:00
    @q397064399 {{}}这种东西现在都会用 ng-cloak/v-cloak 来做默认隐藏处理吧
    q397064399
        10
    q397064399  
       2016-11-07 10:52:30 +08:00
    @EXDestroyer 好吧 我用的 vuejs 菜鸟没找到解决方案吧
    paragon
        11
    paragon  
       2016-11-07 11:06:55 +08:00
    最后那个 装个 spring dev tools 可破~
    Ouyangan
        12
    Ouyangan  
       2016-11-07 11:14:35 +08:00
    @paragon 解决方案: jrebel
    forbreak
        13
    forbreak  
       2016-11-07 11:53:15 +08:00
    {{}} 这种东西,前端处理一下就好了,加动画,加默认值。很多种方式解决,这个锅不应该有 ajax 来背。而且 既然前后端分离的话,就不要再用 jsp 页面了。全部静态页面搞起来。
    gdong
        14
    gdong  
       2016-11-08 01:10:51 +08:00
    都 React+Redux + Webpack 了,已经可以前后端分离了,可以直接通过接口返数据
    zeal7s
        15
    zeal7s  
    OP
       2016-11-08 12:49:18 +08:00
    @paragon spring dev tools 似乎是 spring boot 专用吧?
    paragon
        16
    paragon  
       2016-11-08 14:01:44 +08:00
    @zeal7s 好像是~ 你既然用最原始的 webapp 方式开发就说明你不需要它 ~ 逃:~
    zeal7s
        17
    zeal7s  
    OP
       2016-11-09 09:39:13 +08:00
    @paragon BTW ,现在 spring boot 使用地很广泛吗?
    paragon
        18
    paragon  
       2016-11-09 15:32:14 +08:00
    @zeal7s 这个不是很清楚 至少在我司已经没有用传统的 webapp 项目了~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1092 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 23:01 · PVG 07:01 · LAX 15:01 · JFK 18:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.