Spring and Vue（前后端分离）

一. 创建一个Vue项目（可以使用webpack创建，也可以使用Vue-cli创建），修改src/components/HelloWorld.vue

<template><div class="hello"><h1>Welcome {{ title }}</h1><p>Id: <span>{{greeting.id}}</span></p><p>Message: <span>{{greeting.content}}!</span></p></div>
</template><script>
export default {name: 'HelloWorld',data () {return {title: 'Hello world',greeting: {id: 'XXX',content: 'Hello World'}}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {font-weight: normal;
}
</style>

在CMD中进入该项目目录，执行npm run dev，运行之后，在浏览器访问http://localhost:8080/

二. 新建一个Spring项目，添加web依赖(spring-boot-starter-web)。新建HelloController.java

import java.util.HashMap;
import java.util.Map;
import java.util.UUID;import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@CrossOrigin(origins="*")    //允许跨域请求
public class HelloController {@GetMapping("/resource")public Map<String,Object> home() {Map<String,Object> model = new HashMap<String,Object>();model.put("id", UUID.randomUUID().toString());model.put("content", "Hello World");return model;}
}

运行Spring项目，在CMD中执行$ curl localhost:8080/resource

三. 在Vue项目中，使用 axios 访问 API

1. 安装axios和vue-axios(npm install --save-dev axios vue-axios)。

2. 修改src/main.js。

//main.jsimport axios from 'axios'
import VueAxios from 'vue-axios'Vue.use(VueAxios, axios);

3. 修改src/components/HelloWorld.vue，使用axios请求数据。

// components/HelloWorld.vuemounted(){this.axios.get('resource').then(response => {console.log(response.data)this.greeting = response.data;}).catch(error => {console.log(error)})}

4. 修改config/index.js，设置代理服务器，解决跨域问题。

    proxyTable: {'/': {   //1.对所有以"/"开头的url做处理target: 'http://localhost:8080',  //2.转发到localhost:8080上changeOrigin: true,}}

以上代理服务器内容只能在“开发模式”下才能使用。在生产模式下，只能靠服务器的nginx特性来解决js跨域问题。

或者第3， 4步也可以直接使用这种方式：

// components/HelloWorld.vuemounted(){this.axios.get('http://localhost:8080/resource').then(response => {console.log(response.data)this.greeting = response.data;}).catch(error => {console.log(error)})}

5. 运行Vue项目

Spring项目和Vue项目都没有配置端口的话，先运行Spring项目，Spring项目将运行在8080端口。再运行Vue项目（npm run dev），Vue项目将运行在8081端口。

6. 浏览器中访问http://localhost:8081/

参考：

https://spring.io/guides/tutorials/spring-security-and-angular-js/

https://www.jianshu.com/p/4a872643f5ea

使用 Nginx 部署前后端分离项目，解决跨域问题

Spring and Vue（前后端分离）相关推荐

phython在file同时写入两个_喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
Spring Boot+Vue/前后端分离/高并发/秒杀实战课程之spring Security快速搭建oauth2 内存版身份认证
Springboot快速搭建oauth2 内存版身份认证环境准备点击[Create New Project]创建一个新的项目项目环境配置配置Thymeleaf 搭建oauth2认证,加入两个依 ...
Spring Boot + Vue 前后端分离开发，权限管理的一点思路
在传统的前后端不分的开发中,权限管理主要通过过滤器或者拦截器来进行(权限管理框架本身也是通过过滤器来实现功能),如果用户不具备某一个角色或者某一个权限,则无法访问某一个页面. 但是在前后端分离中,页面 ...
Spring Boot + Vue 前后端分离开发，前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
新B站视频来了！Spring security + vue前后端分离后台管理系统
距离上次发布视频已经很久了哈,有点懒.这次发布的是一个基于Spring security + jwt + vue的前后端分离后台管理系统VueAdmin,项目讲解视频一共54集,共800分钟,发布到B ...
Spring Boot + Vue前后端分离项目，Maven自动打包整合
前言现在各类项目为了降低项目.服务模块间的高度耦合性,提出了"前后端分离",而前后端分离的项目该如何打包呢? 一般的做法是前端项目打包完,将打包文件手动复制到后端项目工程的src ...
Spring Boot + Vue前后端分离（一）前端Vue环境搭建
你好,[程序职场]专注于:Spring Boot ,微服务和前端APP开发,闲暇之余一起聊聊职场规划,个人成长,还能带你一起探索副业赚钱渠道,在提升技术的同时我们一起交流敏捷流程提高工作效率 ...
Spring Boot + Vue 前后端分离
前后端分离 Spring Booot + Vue 开发单页面应用前言需求: 最近本人在学习SpringBoot,希望自己能搭一个简单的Demo应用出来,但是搭到前端的时候遇到了困惑,因为网 ...
开源~~~~spring boot +vue 前后端分离在线考试系统加自动组卷！！！！
在线考试系统+自动组卷!!! springboot +vue 前后端分离系统想要源码的可以B站搜索技术小余哥
spring boot+vue前后端分离项目问题总结
目录创建项目安装vue脚手架报错 vue命令创建项目失败项目导入idea idea过期激活 idea运行vue项目,打开地址为http://0.0.0.0:8080 项目目录 vue文件不显示V ...

Spring and Vue（前后端分离）

Spring and Vue（前后端分离）相关推荐

最新文章

热门文章