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

用 vue 写前端, Java 做后端

  •  
  •   yantianqi · 2017-06-10 14:09:58 +08:00 · 13837 次点击
    这是一个创建于 2705 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用 vue 写前端,java 写后端
    用 ajax 对接的时候怎么处理? vue 的整个构建环境在 java 的环境中?
    vue 单独出来访问不就是跨域了吗?
    开发过程中单独出来,构建后构建的放到 java 目录中,那样开发过程中 ajax 也是跨域啊? 谢谢大神们

    27 条回复    2017-12-16 22:23:41 +08:00
    cloverstd
        1
    cloverstd  
       2017-06-10 14:18:09 +08:00
    acrisliu
        2
    acrisliu  
       2017-06-10 14:45:35 +08:00 via Android
    spring boot 提供 restful API,vue 做页面数据渲染,前后分离。
    wwqgtxx
        3
    wwqgtxx  
       2017-06-10 14:57:38 +08:00 via iPhone   ❤️ 1
    前面放一个 nginx 分别反代一下不就可以避免跨域了么,vue 直接挂在 /上,java 挂在 /api 上
    isb
        4
    isb  
       2017-06-10 16:25:56 +08:00 via iPhone
    vue-cli 支持开发的时候直接代理过去。
    sulang
        5
    sulang  
       2017-06-10 17:06:42 +08:00
    我是用 vue+Django
    wly19960911
        6
    wly19960911  
       2017-06-10 18:45:07 +08:00
    1. cors
    2. 反代
    3. 关闭 chrome 的安全性设置开发,关键词,--disable-web-security

    我建议是第三个,因为另外两个都需要设置后台。
    changwei
        7
    changwei  
       2017-06-10 19:26:27 +08:00 via Android
    既然是前后端分离,那么带服务器也可以分离啊,前端已经是纯静态资源了,直接用 nginx 输出吧。
    TangMonk
        8
    TangMonk  
       2017-06-10 19:36:51 +08:00
    设置下 api 返回的 CORS 的 header 就行了,简单直接

    Access-Control-Allow-Origin: *

    详情请阅读: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
    u5f20u98de
        9
    u5f20u98de  
       2017-06-10 19:40:39 +08:00
    开发的时候跨域也没啥,就是在 nginx 上加几个 http 头而已。
    我是 Vue+Go,也是分别开发的。
    头直接加在代码里,真正发布的时候 node 编译好起个 http fileserver 然后把跨域代码去掉。
    Sapp
        10
    Sapp  
       2017-06-10 22:31:27 +08:00
    开发的时候直接架个 node 服务器,或者 vue-cli 自带的 proxy,直接就可以跨域,根本不需要设置,然后 build 直接生成静态文件。
    x7395759
        11
    x7395759  
       2017-06-10 23:06:18 +08:00
    nginx 就好
    ft234451532
        12
    ft234451532  
       2017-06-10 23:35:42 +08:00
    proxy
    ke1e
        13
    ke1e  
       2017-06-11 00:10:28 +08:00 via Android
    不喜欢浏览器渲染,所以我的方式是使用 freemarker 加 vue 的形式
    marsLeo
        14
    marsLeo  
       2017-06-11 05:55:58 +08:00
    @wly19960911 #6 不同意第三个方法,虽然可以用来调试,但不是开发方案;既然做前端页面开发,跨域问题处理就应该用前端方法,而不是修改客户端,这样做也不安全
    majiawei
        15
    majiawei  
       2017-06-11 09:32:51 +08:00
    webpack-dev-server 的 proxy 是一种解决方法
    wly19960911
        16
    wly19960911  
       2017-06-11 09:37:29 +08:00 via Android   ❤️ 1
    @marsLeo 哦,可能没有说清楚,我说开发过程中使用这个。对于没有表达好说个抱歉
    RangerWolf
        17
    RangerWolf  
       2017-06-11 10:10:49 +08:00
    非常推荐 docker。

    在 dockek build 的时候把 vue 的东西 build 放到一个固定的目录, 然后整个打包成 war 包即可

    我们的后端是 python,前端就是 vue 渲染的。 这种做法做起来也非常爽。 没有跨域的问题。
    66kanfengjing
        18
    66kanfengjing  
       2017-06-11 10:47:46 +08:00 via iPhone
    nginx 反向代理,配置很快。记得一句话就可以了
    workwonder
        19
    workwonder  
       2017-06-11 18:23:18 +08:00 via Android
    都是一家,配置好 cors 不就行了,早晚要配置的
    fumichael
        20
    fumichael  
       2017-06-11 22:29:29 +08:00
    开发时用 nginx 转发
    或者 vue-cli 里面配好了 http-proxy-middleware
    示例参考: https://github.com/hql123/vue-ruby-china/ 如下图


    开发完成打包放到 Java 项目里面,这样前后端都不需要修改。
    仅供参考,如有错误或建议,请指出,谢谢
    RainFinder
        21
    RainFinder  
       2017-06-12 11:00:29 +08:00
    @fumichael 重点是哪里?要怎么配置?
    RainFinder
        22
    RainFinder  
       2017-06-12 11:00:48 +08:00
    @wwqgtxx 具体怎么实现
    fumichael
        23
    fumichael  
       2017-06-12 11:06:19 +08:00
    @RainFinder 左边不是有个目录结构么,还有地址栏,2 个地方可以看到是哪个文件了呀。
    ppwangs
        24
    ppwangs  
       2017-06-12 14:45:45 +08:00
    要想兼容性好就 jsonp。
    notreami
        25
    notreami  
       2017-07-29 20:40:26 +08:00
    @RangerWolf Vue 路由怎么处理的?
    RangerWolf
        26
    RangerWolf  
       2017-07-29 21:33:44 +08:00
    @notreami sorry 前端并不是我做的 vue 这里把前端页面写好 我 npm build 之后就可以对接起来了。
    jack80342
        27
    jack80342  
       2017-12-16 22:23:41 +08:00
    最近翻译了 Spring Boot 最新的官方文档,https://www.gitbook.com/book/jack80342/spring-boot/details
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   988 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 21:25 · PVG 05:25 · LAX 13:25 · JFK 16:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.