Vue入门2+与SpringBoot跨域请求+Vue项目没有config目录怎么办

最新推荐文章于 2024-01-03 10:57:31 发布

舌尖上的蛋炒饭

最新推荐文章于 2024-01-03 10:57:31 发布

阅读量1.2k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq13933506749/article/details/119607281

版权

Vue 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

Vue入门2+与SpringBoot跨域请求+Vue项目没有config目录怎么办:

1、引入axios

请参考我的另一篇博客

传送门

2、新建我们自己的测试页面

在views下新建目录test目录，test目录下新建Test.vue
在这里插入图片描述

3、然后再路由中心配置router\index.js

1、在单页面应用中，网页具体路径显示是由vue-router配置中 path决定的，path设置的是什么就显示什么，和name无关。

2、不同路由路径下页面渲染的内容，是根据component所对应的组件来进行渲染的，和name无关。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Test from '../views/test/Test'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    //表示在根目录下
    name: 'Home',
    //暂时所知用处不大
    component: Home 
  },
  {
    path: '/test',
    name:'Test',
    component: Test
    //将我们的新页面放进去
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4、修改App.vue跳转about的页面为我们的测试页面

在这里插入图片描述

5、编写我们的测试页面

<template>
    <div class = "test">
        <h1>{{msg}}</h1>
        <h2>忍一下</h2>
        <!--class就是代表类的意思,当我们利用CSS样式的时候就可以指定类名为其指定样式，同名的样式相同-->
        <span>HTMLspan元素是内联元素，可用作文本的容器</span>
    </div>
</template>
<script>
export default {
    name:"test",
    data(){
        return{
            msg:'My Name Is ZhangSan'
        }
    },
  created(){
    //这里请求的是我自己的springboot的接口的路径
    this.$axios.post("api/crud/users").then(res=>{
      console.log(res)
    })
  }
}
</script>
<style scoped> 
h1, h2{
    font-weight: normal;
}
</style>

6、SpringBoot的Controller

由于是Vue的博客，就不把Springboot展开来写了，只写重点

一定要加上@CrossOrigin这个注解

其实也有其他的办法来替代这个@CrossOrigin，但是本次就不展开来将了，而且我SpringBoot开放的端口是8083，接口的地址是

http://localhost:8083/crud/users

package com.crud.controller;

import com.crud.entity.User;
import com.crud.service.impl.UserServiceImpl;
import com.crud.utils.PageRequest;
import com.crud.utils.RedisUtils;
import com.crud.utils.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;
@Slf4j
@RestController
@RequestMapping("/crud")
@CrossOrigin
public class UserController {
    @Autowired
    private UserServiceImpl userService;
    @Autowired
    private RedisUtils redisUtils;
    @RequestMapping(value = "/users",method = RequestMethod.POST)
    public List<User> getUser(){
        return userService.getAllUser();
    }

7、解决跨域问题

最重要的来了，在自己学习的时候折磨的生不如死，甚至都找来了前端的同学帮忙来看问题都没解决了。

问题：我们通过axios请求的地址默认的就是localhost:8080,可是我们的后端开放的是8083啊，怎么办
在这里插入图片描述
从网上找来的教程大都说在项目里有一个config目录，但是我们自己新建的项目没有config目录啊，又有人说了，在根目录上新建一个vue.config.js文件，然后在里面配置，我搜来搜去，只要加上这个文件我的项目就启动不起来，我放弃了，要不就转变思路，新建一个有config目录的项目吧好不好，于是我找来了我的前端同事，但是吧，搞了半天也没搞明白，所以还是继续找办法吧。皇天不负有心人，再经历过多个配置文件试了好多个的最后，终于拼凑出来了一个能用的配置文件

在这里我们暂时设置为

port: 8090,//这里就是在我们npn run serve启动后打开的网页的端口

target: ‘http://127.0.0.1:8084/’, // 目标url

主要是为了验证这两个配置的作用

module.exports = {
    // 基本路径 baseURL已经过时,这里需要注意，很多教程都是指定成了baseURL
    publicPath: './',  
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // use the full build with in-browser compiler?
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    // compiler: false,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {},
    // vue-loader 配置项
    // https://vue-loader.vuejs.org/en/options.html
    // vueLoader: {},
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相关配置
    css: {
     // 是否使用css分离插件 ExtractTextPlugin
     extract: true,
     // 开启 CSS source maps?
     sourceMap: false,
     // css预设器配置项
     loaderOptions: {},
     // 启用 CSS modules for all css / pre-processor files.
     requireModuleExtension: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // 是否启用dll
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
    // dll: false,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {//这里需要注意，很多旧的教程都是devServerTable
      open: process.platform === 'darwin',
      disableHostCheck: true,
      host: 'localhost',//这里就是在我们npn run serve启动后打开的网页的host
      port: 8090,//这里就是在我们npn run serve启动后打开的网页的端口
      https: false,
      hotOnly: false,
      proxy: {
        '/api': {
            target: 'http://127.0.0.1:8084/',     // 目标url
            changeOrigin: true,                     // 是否跨域
            pathRewrite: {
                '^/api': ''                         // 可以使用 /api 等价于 http://api.douban.com/v2
            }
        }
    },
     before: app => {}
    },
    // 第三方插件配置
    pluginOptions: {
     // ...
    }
   }