springboot + Vue前后端项目（第十八记）

最新推荐文章于 2024-07-15 17:15:41 发布
最新推荐文章于 2024-07-15 17:15:41 发布
阅读量641 收藏 8
点赞数 8
分类专栏： [00]前后端开发 文章标签： vue.js spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panpj0915/article/details/139839012
版权

项目实战第十八记

写在前面

本篇主要讲解系统前台搭建，通常较大的项目都会搭建前台

1. 普通用户登录成功后前台页面效果（缺少后台管理导航栏）
在这里插入图片描述
2. 管理员登录成功后前台页面效果
在这里插入图片描述

1. 前台页面搭建（Front.vue）

<template>
  <div>
<!--    头部-->
    <div style="display: flex; height: 60px; line-height: 60px; border-bottom: 1px solid #eee">
      <div style="width: 300px; display: flex; padding-left: 30px">
        <div style="width: 60px">
          <img src="../../assets/img/logo1.png" alt="" style="width: 50px; position: relative; top: 5px; right: 0">
        </div>
        <div style="flex: 1">欢迎来到吉吉系统</div>
      </div>
      <div style="flex: 1">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal" router>
          <el-menu-item index="/front/home">首页</el-menu-item>
          <el-menu-item index="/front/video">视频播放</el-menu-item>
          <el-menu-item index="*">文章列表</el-menu-item>
          <el-menu-item index="/" v-if="user.role === 'ADMIN'">后台管理</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="/front/item1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
        </el-menu>
      </div>
      <div style="width: 200px">
        <div v-if="!user.username" style="text-align: right; padding-right: 30px">
          <el-button @click="$router.push('/login')">登录</el-button>
          <el-button @click="$router.push('/register')">注册</el-button>
        </div>
        <div v-else>
          <el-dropdown style="width: 150px; cursor: pointer; text-align: right">
            <div style="display: inline-block">
              <img :src="user.avatarUrl" alt=""
                   style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">
              <span>{{ user.nickname }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            </div>
            <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
              <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                <router-link to="/front/password">修改密码</router-link>
              </el-dropdown-item>
              <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                <router-link to="/front/person">个人信息</router-link>
              </el-dropdown-item>
              <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                <span style="text-decoration: none" @click="logout">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div style="width: 1000px; margin: 0 auto">
      <router-view @refreshUser="getUser" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Front",
  data() {
    return {
      user: localStorage.getItem("loginUser") ? JSON.parse(localStorage.getItem("loginUser")) : {}
    }
  },
  created() {

  },
  methods: {
    logout() {
      this.$store.commit("logout")
      this.$message.success("退出成功")
    },
    getUser() {
      let username = localStorage.getItem("loginUser") ? JSON.parse(localStorage.getItem("loginUser")).username : ""
      if (username) {
        // 从后台获取User数据
        this.request.get("/user/username/" + username).then(res => {
          // 重新赋值后台的最新User数据
          this.user = res.data
        })
      }
    }
  }
}
</script>

<style>
.item{
  display: inline-block;
  width: 100px;

  text-align: center;
  cursor: pointer
}
.item a {
  color: 	#1E90FF;
}
.item:hover{
  background-color: 	LightPink;
}
</style>

2. 路由

{
    path: '/front',
    name: '前台首页',
    component: () => import('../views/front/Front.vue'),
    children: [
      {
        path: 'home',
        name: '前台主页',
        component: () => import('../views/front/Home.vue')
      },
      {
        path: 'password',
        name: '修改密码',
        component: () => import('../views/front/Password.vue')
      },
      {
        path: 'person',
        name: '个人信息',
        component: () => import('../views/front/Person.vue')
      },
    ]
  }

完整的代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Manage from '../views/Manage.vue'
import store from "@/store";

Vue.use(VueRouter)
//定义一个路由对象数组
const routes = [
  {
    path: '/login',
    name: '登录',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/register',
    name: '注册',
    component: () => import('../views/Register.vue')
  },
  {
    path: '/404',
    name: '404',
    component: () => import('../views/404.vue')
  },
  {
    path: '/front',
    name: '前台首页',
    component: () => import('../views/front/Front.vue'),
    children: [
      {
        path: 'home',
        name: '前台主页',
        component: () => import('../views/front/Home.vue')
      },
      {
        path: 'password',
        name: '修改密码',
        component: () => import('../views/front/Password.vue')
      },
      {
        path: 'person',
        name: '个人信息',
        component: () => import('../views/front/Person.vue')
      },
      {
        path: 'video',
        name: '视频播放',
        component: () => import('../views/front/Video.vue')
      },
    ]
  }
]

//使用路由对象数组创建路由实例，供main.js引用
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 注意：刷新页面会导致页面路由重置
export const setRoutes = () => {
  const storeMenus = localStorage.getItem("menus");
  if (storeMenus) {

    // 获取当前的路由对象名称数组
    const currentRouteNames = router.getRoutes().map(v => v.name)
    if (!currentRouteNames.includes('Manage')) {
      // 拼装动态路由
      const manageRoute = { path: '/', name: 'Manage', component: () => import('../views/Manage.vue'), redirect: "/home", children: [
          { path: 'person', name: '个人信息', component: () => import('../views/Person.vue'),meta: { title: '个人信息' }},
          { path: 'password', name: '修改密码', component: () => import('../views/Password.vue'),meta: { title: '修改密码' }}
        ] }
      const menus = JSON.parse(storeMenus)
      menus.forEach(item => {
        if (item.path) {  // 当且仅当path不为空的时候才去设置路由
          let itemMenu = { path: item.path.replace("/", ""), name: item.name, component: () => import('../views/' + item.pagePath + '.vue'),meta: { title: item.name }}
          manageRoute.children.push(itemMenu)
        } else if(item.children.length) {
          item.children.forEach(item => {
            if (item.path) {
              let itemMenu = { path: item.path.replace("/", ""), name: item.name, component: () => import('../views/' + item.pagePath + '.vue'),meta: { title: item.name }}
              manageRoute.children.push(itemMenu)
            }
          })
        }
      })
      // 动态添加到现在的路由对象中去
      router.addRoute(manageRoute)
    }

  }
}

// 重置我就再set一次路由
setRoutes()


// 路由守卫
router.beforeEach((to, from, next) => {
  // localStorage.setItem('currentPathName',to.name);   // 设置当前的路由名称，为了在Header组件中去使用
  // store.commit('setPath')    // 触发store的数据更新


  // 未找到路由情况
  if(!to.matched.length){
    const storeMenus = localStorage.getItem("menus");
    if(storeMenus){   // 有菜单没有找到路由，跳转至 404页面
      next("/404")
    }else {    // // 没有菜单，直接跳转至登录页
      next("/login")
    }
  }

  next()   // 放行路由
})

export default router

3.改动登录页面Login.vue

**逻辑：**登录成功后进入前台首页，而不是进入后台；后台只有管理员能进入，普通用户提供进入前台，但是不提供后台管理导航栏选项；

login() {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {  // 表单校验合法
          this.request.post("/user/login", this.user).then(res => {
            if(res.code === 200 || res.code === '200') {
              localStorage.setItem('loginUser',JSON.stringify(res.data));
              localStorage.setItem("menus",JSON.stringify(res.data.menus));
              setRoutes()
              this.$router.push("/front/home")
              this.$message.success("登录成功")
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false;
        }
      });
    }

4. 前台主页面搭建Home.vue

<template>
  <div>
    <div style="margin: 10px 0">
      <el-carousel height="450px" :interval="10000">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" alt="" style="width: 100%">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="margin: 10px 0">
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in files" :key="item.id" style="margin-bottom: 10px">

          <div style="border: 1px solid #ccc; padding-bottom: 10px">
            <img :src="item.url" alt="" style="width: 100%;height: 100px;">
            <div style="color: #666; padding: 10px">{{ item.name }}</div>
            <div style="padding: 10px"><el-button type="primary">购买</el-button></div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div>
      <p>&copy; {{ new Date().getFullYear() }} 吉吉网站. All Rights Reserved.</p>
    </div>

  </div>


</template>

<script>
export default {
  name: "FrontHome",
  data() {
    return {
      imgs: [
          'https://img30.360buyimg.com/babel/s1580x830_jfs/t1/109361/24/22897/74054/621ede58E099d37e3/f12730c81df6046a.jpg!cc_1580x830.webp',
          'https://img13.360buyimg.com/babel/s1580x830_jfs/t1/96398/30/23715/70228/6221e9d0Ec1b9fe65/f66e2ad76314d6cd.jpg!cc_1580x830.webp'
      ],
      files: []
    }
  },
  created() {
   this.getImg()
  },
  methods: {
    getImg(){
      this.request.get("/file").then(res => {
        this.files = res.data.filter(v => v.type === 'png' || v.type === 'jpg' || v.type === 'webp')
      })
    }
  }
}
</script>

<style scoped>
p {
  font-size: 16px;
  color: #555;
  text-align: center;
}
</style>

后端查询所有文件的接口FileController

@GetMapping
public Result findAll() {
    return Result.success(fileService.list());
}

完整代码：

package com.ppj.controller;


import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.crypto.SecureUtil;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.ppj.entity.Files;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.Serializable;
import java.net.URLEncoder;
import java.util.Arrays;
import java.util.List;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.ppj.common.Result;

import com.ppj.service.IFileService;

import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author ppj
 * @since 2024-05-21
 */
@RestController
@RequestMapping("/file")
public class FileController {

    @Resource
    private IFileService fileService;

    @Value("${files.upload.path}")
    private String fileUploadPath;

    // 新增或者更新
    @PostMapping
    public Result save(@RequestBody Files file) {
        fileService.saveOrUpdate(file);
        return Result.success();
    }

    @DeleteMapping("/{fileIds}")
    public Result delete(@PathVariable Integer[] fileIds) {
        fileService.removeByIds(Arrays.asList(fileIds));
        return Result.success();
    }

    @GetMapping
    public Result findAll() {
        return Result.success(fileService.list());
    }


    @GetMapping("/page")
    public Result findPage(@RequestParam Integer pageNum,
                                @RequestParam Integer pageSize,
                           @RequestParam String name) {
        QueryWrapper<Files> queryWrapper = new QueryWrapper<>();
        queryWrapper.like("name",name);
//        queryWrapper.orderByDesc("id");
        return Result.success(fileService.page(new Page<>(pageNum, pageSize), queryWrapper));
    }


    /**
     * 文件上传接口
     * @param file 前端传递过来的文件
     * @return
     * @throws IOException
     */
    @PostMapping("/upload")
    public String upload(@RequestParam MultipartFile file) throws IOException {
        String originalFilename = file.getOriginalFilename();
        String type = FileUtil.extName(originalFilename);
        long size = file.getSize();

        // 定义一个文件唯一的标识码
        String uuid = IdUtil.fastSimpleUUID();
        String fileUUID = uuid + StrUtil.DOT + type;

        File uploadFile = new File(fileUploadPath + fileUUID);
        // 判断配置的文件目录是否存在，若不存在则创建一个新的文件目录
        File parentFile = uploadFile.getParentFile();
        if(!parentFile.exists()) {
            parentFile.mkdirs();
        }

        String url;
        // 获取文件的md5
        String md5 = SecureUtil.md5(file.getInputStream());
        // 从数据库查询是否存在相同的记录
        Files dbFiles = getFileByMd5(md5);
        if (dbFiles != null) { // 文件已存在,直接返回数据库里的url
            url = dbFiles.getUrl();
        } else {  // 文件不存在才生成url，保存数据至数据库
            // 上传文件到磁盘
            file.transferTo(uploadFile);
            // 数据库若不存在重复文件，则不删除刚才上传的文件
            url = "http://localhost:9000/file/" + fileUUID;
            // 存储数据库
            Files saveFile = new Files();
            saveFile.setName(originalFilename);
            saveFile.setType(type);
            saveFile.setSize(size/1024);
            saveFile.setUrl(url);
            saveFile.setMd5(md5);
            fileService.saveOrUpdate(saveFile);
        }
        return url;
    }

    /**
     * 通过文件的md5查询文件
     * @param md5
     * @return
     */
    private Files getFileByMd5(String md5) {
        // 查询文件的md5是否存在
        QueryWrapper<Files> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("md5", md5);
        Files one = fileService.getOne(queryWrapper);
        return one != null ? one : null;
    }

    /**
     * 文件下载接口   http://localhost:9090/file/{fileUUID}
     * @param fileUUID
     * @param response
     * @throws IOException
     */
    @GetMapping("/{fileUUID}")
    public void download(@PathVariable String fileUUID, HttpServletResponse response) throws IOException {
        // 根据文件的唯一标识码获取文件
        File uploadFile = new File(fileUploadPath + fileUUID);
        // 设置输出流的格式
        ServletOutputStream os = response.getOutputStream();
        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileUUID, "UTF-8"));
        response.setContentType("application/octet-stream");

        // 读取文件的字节流
        os.write(FileUtil.readBytes(uploadFile));
        os.flush();
        os.close();
    }

    @PostMapping("/update")
    public Result changeEnable(@RequestBody Files files){
        return fileService.saveOrUpdate(files)?Result.success():Result.error();
    }

}

总结

  • 本篇主要的难点是前台页面的设计与实现

写在最后

如果此文对您有所帮助，请帅戈靓女们务必不要吝啬你们的Zan，感谢！！不懂的可以在评论区评论，有空会及时回复。
文章会一直更新

做一个有用的阿吉
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个基于SpringBoot+vue前后端分离智慧仓库管理系统的设计实现
5年编程经验的老猿。
09-28 2506
智慧仓库管理系统的背景是为了应对日益增长的物流需求和提高仓库管理效率而发展起来的。它不仅可以提高仓库的工作效率，降低成本，还可以提供准确且及时的信息，帮助企业优化供应链管理。
一看就懂！Springboot +Shiro +VUE 前后端分离式权限管理系统
大誌的博客
04-15 6万+
前段日子写过一篇关于SpringBoot+Shiro的简单整合的例子，那个例子并不适用于我们目前的前后端分离开发的趋势。我之前写过一个项目也是用到了Shiro的前后端分离，某度了许久也没找到解决方案，什么去掉shiroFilter.setLoginUrl();也阻止不了讨人厌的login.jsp的出现。直到我看到了renren-fast的源码...废话不多说，让我们来看看如何实现吧 前后端分离...
基于Java+SpringBoot+Vue前后端分离网课在线学习观看系统
热门推荐
java李阳勇的博客
06-01 9万+
如今社会上各行各业，都喜欢用自己行业的专属软件工作，互联网发展到这个时候，人们已经发现离不开了互联网。新技术的产生，往往能解决一些老技术的弊端问题。因为传统教学资源共享平台信息管理难度大，容错率低，管理人员处理数据费工费时，所以专门为解决这个难题开发了一个网课在线学习观看系统，可以解决许多问题。网课在线学习观看系统按照操作主体分为管理员和用户。用户的功能等。该系统采用了MySQL数据库，Java语言，Spring Boot框架等技术进行编程实现。
基于Java+SpringBoot+Vue前后端分离摄影分享网站平台系统
java李阳勇的博客
06-12 8万+
伴随着信息科技在经营里的深层次和广泛运用，信息化管理系统的实行从技术上日趋成熟。文中介绍了摄影分享网站整个研发流程。通过对比摄影分享网站方法的缺陷，创立了电脑管理摄影分享网站解决方案。文中介绍了摄影分享网站的系统剖析一部分，包含可行性研究，系统设计方案一部分关键介绍了系统功能分析和概念模型设计。本摄影分享网站人员具备用户中心、用户信息管理、摄影作品管理、摄影圈、系统体系等作用。等。因而，它具有一定的应用性。
基于Java+SpringBoot+Vue前后端分离手机销售商城系统设计和实现
java李阳勇的博客
04-14 5万+
现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本手机销售网站就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此手机销售网站利用当下成熟完善的SpringBoot框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的MySQL数据库进行程序开发。
Java大牛带你4小时开发一个SpringBoot+vue前后端分离博客项目
2401_84093019的博客
05-05 962
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
基于Springboot+Vue实现前后端分离商城管理系统
BS009的博客
06-27 7806
项目后台基于Springboot+MybatisPlus开发实现，前端使用VUE+Element开发实现，前后端分离开发，前端通过调用后台接口来进行相应的交互处理。 亮点技术：短信发送验证码、阿里云OSS云存储商品图片、邮箱自动发邮件验证操作权限，Shiro权限管理，数据加密处理，支付宝沙箱技术应用，Redis数据缓存处理。 项目功能完整，界面优雅大方，人机交互流畅，是一个难得的毕业设计作品。 ......
springboot + Vue前后端项目（第七记）
panpj0915的博客
04-23 1049
Springboot + Vue前后端项目
2023全网最简单但实用的SpringBoot+Vue前后端分离项目实战[青青菜鸟]-笔记+心得
qq_62649563的博客
06-05 2348
我本身基础比较薄弱，像是springBoot和Vue还没完全学会的那种，但此番为了完成课设，不得不去开始学习，但是又看不懂，于是乎找了个视频进行学习。
基于SpringBoot+Vue前后端分离开发的汽车租凭管理系统
Vargent_的博客
09-04 1146
随着国内经济的快速发展，汽车租赁行业也如同繁星一般呈现欣欣向荣之势。然而，传统的人工管 理方法已经无法适应日益庞大的业务信息，必须开发出全新的管理方法，以期达到提高管理效率的目 的。因此，我们提出了建立一套集人员管理，车辆的各项性能管理于一体的租赁管理系统的选题。该系统利用计算机网络以及数据库等高科技手段，旨在打破传统汽车租赁管理系统所存在的问题， 完善现有系统的不足之处。首先，该系统将实现管理的计算机辅助，使得管理便捷化、高效化。
springboot+vue前后端分离开发项目源码
01-02
在现代Web应用开发中，"SpringBoot+Vue"是一个非常流行的组合，用于构建高效、可扩展的前后端分离项目。SpringBoot是Java生态系统中的一个框架，主要用于简化Spring应用的初始搭建以及开发过程，而Vue.js则是一个轻...
基于SpringBoot+Vue 前后端分离的RBAC权限管理系统（源码+数据库）
06-16
基于SpringBoot+Vue 前后端分离的RBAC权限管理系统（源码+数据库） ## 项目介绍 **一个基于SpringBoot + Vue + Element UI 开发的权限管理系统** - 角色权限精确到菜单、接口访问 - 前后端通过jwt进行认证状态管理...
基于springboot+vue前后端分离的校园失物招领系统源码+数据库（毕业设计）.zip
02-07
基于springboot+vue前后端分离的校园失物招领系统源码+数据库（毕业设计）.zip 高分毕设项目，下载即用无需修改，代码完整确保可以直接运行。 基于springboot+vue前后端分离的校园失物招领系统源码+数据库（毕业...
springboot+vue前后端分离智慧校园管理系统
07-19
18_智慧校园_业务开发之年级管理带条件分页查询 19_智慧校园_业务开发之年级添加和修改 20_智慧校园_业务开发之年级单个和批量删除 21_智慧校园_业务开发之swagger功能开发 22_智慧校园_业务开发之班级管理带条件...
SpringBoot+Vue前后端分离的在线考试系统
04-22
系统介绍：该项目是一个前后端分离，后端使用 SpringBoot，前端使用 VUE 和 Element-UI 组件库配合完成开发。 在线浏览地址：http://124.223.53.193/ 温馨提示：请登录后台的朋友,不要删除计算机网络这套试卷，...
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
最新发布
qq_37752382的博客
07-15 432
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
【Vue】 style中的scoped
DX390609的博客
07-15 128
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 291
解决页面放大，图片模糊的问题
vue+vite项目中跨域问题解决与跨域代理的两种方式原理详解
whs15193553607的博客
07-12 1274
（1） target参数：相当于是在代理地址（geoserver或者geoserverApi）前面拼接target代理后地址就是http://localhost:8080/geoserver或（2）changeOrigin参数：开启代理在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题；（3）rewrite参数：路径改写。
SpringBoot+Vue前后端分离项目源码示例
05-17
很抱歉，作为一个语言模型AI，我没有本地存储和上传的权限，无法提供完整的项目源码示例。但是，你可以在以下几个网站中找到一些开源的SpringBoot+Vue前后端分离项目源码示例： 1. Github: https://github.com/search?q=SpringBoot+Vue 2. Gitee: https://gitee.com/search?utf8=%E2%9C%93&q=SpringBoot+Vue&type= 3. 码云: https://gitee.com/explore/SpringBoot-Vue 4. 开源中国: https://www.oschina.net/search?scope=project&q=SpringBoot+Vue 希望这些资源能够帮助到你。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值