SpringBoot整合Vue

最新推荐文章于 2024-10-15 22:06:27 发布

Hpsyche

最新推荐文章于 2024-10-15 22:06:27 发布

阅读量1w

点赞数 3

分类专栏：微服务文章标签： Vue SpringBoot 前后端分离

本文链接：https://blog.csdn.net/Hpsyche/article/details/95875793

版权

本文介绍了如何使用Vue和SpringBoot进行前后端整合，详细讲解了前端Vue项目的创建、路由配置和组件设计，以及后端SpringBoot的数据接口实现。在调试过程中，重点解决了跨域OPTIONS请求导致的403错误，通过添加拦截器和配置CORS解决该问题。

摘要由CSDN通过智能技术生成

由于前后端分离近几年已成为主流，故尝试了下Vue+SpringBoot的前后端整合。

Vue的学习可以参考：https://cn.vuejs.org/v2/guide/，
由于vue的作者尤雨溪是一个华人，所以其官网的教程什么的中文文档都很简洁明了。按照官网的所有代码基本走一遍，就能对vue有大概的了解（前提你要有js、jquery的基础）；

前端源代码

新建一个vue项目（百度很多，自行搜索下），项目目录结构如下：
其中，默认生成的index.html和main.js不做改变，即如下：
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvue</title>
  </head>
  <body>
    <div id="app">
    </div>
    <!-- built files will be auto injected -->
    <!-- <script type="/dist/" -->
  </body>
</html>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip=false

new Vue({
   
  el:"#app",
  router,
  components:{
    App },
  template:'<App/>'
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
   
  name: 'App'
}
</script>

<style>
#app {
   
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

修改index.js，引入各路由组件；

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import aaa from '@/components/aaa&

最低0.47元/天解锁文章

Hpsyche

关注

3
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录