SpringBoot+VUE实现前后端分离的实战记录

一，前端VUE项目

这里使用VUE UI创建一个VUE项目

命令行输入vue ui进入

手动配置项目

选中这三个

点击下一步->点击创建项目

用IDEA打开刚才创建的项目

IDEA中的安装vue插件并重启

IDEA控制台中输入vue add axios安装axios

新建一个Show.vue

在index,js的routes中配置它的路由

编写Show,vue向后端请求数据并展示

<template>
    <div>
        <table>
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>性别</td>
            </tr>
            <tr v-for="user in users">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.sex}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
    export default {
        name: "Show",
        data(){
            return{
                users:[
                    {
                        id:"",
                        name:"",
                        sex:"",
                    }
                ]
            }
        },
        created() {
            const _this=this
            axios.get('http://localhost:8888/user/showAll').then(function (resp) {
                _this.users=resp.data
            })
        }
    }
</script>
<style scoped>
</style>

二，后端SpringBoot项目

编写一个查询功能

略

controller层返回json数据

在spring boot中解决跨域问题

重写WebMvcConfigurer中的addCorsMappings()方法

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

后端测试（注意前后端端口号的区分，VUE占用了8080和8081，在Springboot中修改后端的端口号）

数据输出成功

前端发请求拿数据

前端拿数据成功！！！

总结

到此这篇关于SpringBoot+VUE实现前后端分离的文章就介绍到这了,更多相关SpringBoot+VUE前后端分离内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Springboot+Vue+shiro实现前后端分离、权限控制的示例代码

    本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步完成了前后端分离,在此记录以备查阅. 一.前后端分离思想 前端从后端剥离,形成一个前端工程,前端只利用Json来和后端进行交互,后端不返回页面,只返回Json数据.前后端之间完全通过public A

  • 详解springboot和vue前后端分离开发跨域登陆问题

    前后端分离开发中,一般都会遇到请求跨域问题.而且一般也会遇到登陆失效问题.今天就以springboot和vue为例来看如何解决上述问题 增加过滤器 @WebFilter @Component public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • 解决前后端分离 vue+springboot 跨域 session+cookie失效问题

    环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无

  • SpringBoot+Vue前后端分离实现请求api跨域问题

    前言 最近过年在家无聊,刚好有大把时间学习Vue,顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题,前后端分离了,但是请求的时候也就必定会有跨域这种问题,那如何解决呢? 前端解决方案 思路:由于Vue现在大多数项目但是用脚手架快速搭建的,所以我们可以直接在项目中创建一个vue.config.js的配置文件,然后在里面配置proxy代理来解决,话不多说,直接上代码 module.exports = { devServer: { proxy

  • 部署vue+Springboot前后端分离项目的步骤实现

    单页应用 vue经常被用来开发单页应用(SinglePage Web Application,SPA),什么叫做单页应用呢,也就是只有一张web页面的应用,单页应用的跳转只需要刷新局部资源,大大加快的了我们页面的响应速度 前端页面打包 打开vue工程,在项目根目录下创建一个配置文件:vue.config.js,然后在里面写入以下内容: module.exports = { assetsDir: 'static', // 静态资源保存路径 outputDir: 'dist', // 打包后生成的文

  • SpringBoot+Vue.js实现前后端分离的文件上传功能

    这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建 我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可 项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l

  • vue+springboot前后端分离工程跨域问题解决方案解析

    假如是在同一台机器上开发,前后端分离的工程中出现跨域问题的原因是,前端工程和后端工程运行在不同的端口上.只要协议.域名.端口有一个不同就会产生跨域问题,所以在前端工程中请求后端的接口时就会因为端口不同而产生跨域问题. 一.解决跨域的原理 假设前端A要去访问服务器C,可以在A和C之间之间设置一个代理B,A访问C时先访问B,再由B代为请求C并把请求结果返回给A,这样就可以解决跨域问题.其中需要保证的是A访问B和B访问C都不能存在跨域. 二.使用vue自带的proxyTable: proxyTable

  • SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法

    SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法

    当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助.本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究.另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开

  • SpringBoot+VUE实现前后端分离的实战记录

    SpringBoot+VUE实现前后端分离的实战记录

    一,前端VUE项目 这里使用VUE UI创建一个VUE项目 命令行输入vue ui进入 手动配置项目 选中这三个 点击下一步->点击创建项目 用IDEA打开刚才创建的项目 IDEA中的安装vue插件并重启 IDEA控制台中输入vue add axios安装axios 新建一个Show.vue 在index,js的routes中配置它的路由 编写Show,vue向后端请求数据并展示 <template> <div> <table> <tr> <td

  • SpringBoot+mybatis+Vue实现前后端分离项目的示例

    SpringBoot+mybatis+Vue实现前后端分离项目的示例

    目录 一.SpringBoot环境搭建 1.项目的数据库 2.项目所需依赖 3.application.yml文件 4.入口类 二.vue实现前后端分离 1.前端页面 2.springBoot控制层 3.mapper文件 4.项目完整源代码 vue前后端分离实现功能:员工的增删改(先实现数据回显之后,再进行修改)查 一.SpringBoot环境搭建 1.项目的数据库 /* Navicat Premium Data Transfer Source Server : windows Source S

  • spring boot+vue 的前后端分离与合并方案实例详解

    springboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue的双向数据绑定,这种方式只适合于普通的全栈开发. 2.[推荐]使用vue官方的脚手架创建单独的前端工程项目,做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式,但是在分离中有很多api权限的问题需要解决,包括部

  • python框架django中结合vue进行前后端分离

    python框架django中结合vue进行前后端分离

    目录 一:创建django项目 二:安装vue 三:设置vue项目 四:vue项目写完后,打包vue项目,然后修改django配置,将vue集成到django中 五:修改django的主目录的urls文件 六:启动django服务,访问localhost:8000 则可以出现vue的首页 七:有时候并不能直接访问出首页,原因是路径不对 八:vue打包之后经常会出现fontawesome图标库不能使用的情况 一:创建django项目 django-admin startproject mysite

  • springboot vue接口测试前后端树节点编辑删除功能

    springboot vue接口测试前后端树节点编辑删除功能

    目录 基于springboot+vue 的测试平台开发 一.编辑功能 1. 编辑页外显 2. 实现后端接口 3. 前后联调 4. 测试 二.删除功能 1. 后端接口 2. 前端实现 3. 测试 基于springboot+vue 的测试平台开发 继续更新. 一.编辑功能 1. 编辑页外显 点击树节点的编辑按钮,打开对话框,展示原有的节点名称. 本来树形控件里没有自带的编辑操作,我直接加了一个按钮在上面,绑定点击事件调用edit(data)方法. 为了确认 data 可用,我在edit方法中打印了一

  • springboot vue项目管理前后端实现编辑功能

    springboot vue项目管理前后端实现编辑功能

    目录 基于springboot+vue 的测试平台开发 一.打开编辑页面显示数据 1. 编辑按钮 2. 编写 handleUpdate 方法处理数据外显 二.保存编辑页面的内容 1. 后端增加 update 接口 2. 前端页面修改 基于springboot+vue 的测试平台开发 继续更新 今天实现项目列表的编辑功能: 点击[编辑]按钮,打开对话框,显示此条记录的信息修改对话框表单内容,点击对话框[保存]按钮,更新此条记录 一.打开编辑页面显示数据 1. 编辑按钮 之前复制的 table 组件

  • springboot vue接口测试前后端实现模块树列表功能

    springboot vue接口测试前后端实现模块树列表功能

    目录 基于 springboot+vue 的测试平台 一.存放接口的js文件 二.在vue文件中调用接口 1. 触发接口 2. 调用接口 三.实现选择项目功能 1. 后端增加获取所有项目接口 2. 前端调用接口 3. 选择项目触发模块树接口 4. 测试一下 基于 springboot+vue 的测试平台 开发继续更新. 上一篇完成了模块树的列表接口,接下来可以和前端页面联调了. 一.存放接口的js文件 老样子,新建js文件,把要调用的后端接口请求封装在 src/api/apiModule.js这

  • Springboot与vue实例讲解实现前后端分离的人事管理系统

    Springboot与vue实例讲解实现前后端分离的人事管理系统

    目录 一,项目简介 二,环境介绍 三,系统展示 四,核心代码展示 五,项目总结 一,项目简介 系统是前后端分离的项目,直接启动Springboot应用程序类后,再启动前端工程访问即可.主要实现了企业的人事管理功能,主要包含员工管理.薪资管理.职位管理.权限管理.网盘文件分享管理等模块. 系统亮点:使用REDIS进行数据缓存,优化查询性能:使用分布式文件系统进行文件存储服务:基于Springboot+vue实现前后端分离开发 二,环境介绍 语言环境:Java: jdk1.8 数据库:Mysql:

  • 基于Java SpringBoot的前后端分离信息管理系统的设计和实现

    基于Java SpringBoot的前后端分离信息管理系统的设计和实现

    目录 前言 视频演示 主要功能说明 功能截图 主要代码实现 主要数据表设计 前言 当今社会,随着科学技术的发展,以及市场经济的多元化,使人才的流动速度大大增加,因此也对党建工作的管理层面工作带来了空前且复杂的挑战, 从而使得如何高效的开展管理党建工作成为了亟待解决的问题.为此将高速发展的信息科学技术引入到党建工作管理的应用中,力求合理有效的提升全面各项工作的进展,实现以人为本的科学发展思想和意识,是一种高效可实现的方法. Java作为一种面向对象的.可以撰写跨平台应用软件的程序设计语言,其技术具

随机推荐