| 前后端连接（springboot+vue） | 您所在的位置：网站首页 › vue用什么数据库 › 前后端连接（springboot+vue） |
前后端连接（springboot+vue）
|
目录 前言介绍 一、整体流程介绍 二、前后端连接步骤 （一）后端配置 （二）前端配置 （三）前端页面与后端实体属性绑定并发起请求 五、前后端打通页面 前言介绍前后端分离的SpringBoot项目 后端：本文详细讲解了Java的springboot项目的创建到mysql数据库和表的创建，并使用nybatis-plus实现了后端对数据库的增删改查。文章的后端页面还有视频可以看，是比较适合小白的一个教程（实际开发使用mybatis比较多，手动写SQL语句） 前端：然后创建前端vue页面，使前后端能连接起来。vue使用的是Element-ui的组件去完成的。通过异步请求的方式，不浪费资源。 连接方式： 他们前后端连接起来是通过axios去连接的。 一、整体流程介绍后端（1.7） 1.MySQL建立数据库和表---后端建立springboot项目-----使用springboot+mybatis-plus整合进行增删改查 前端（除了1和7都是） 2.下载node.js-----创建vue项目（含有路由） 3.引入element-ui--使用element-ui组件创建一个新页面 4.使用npm下载axios（本文四---二.7） 5.使用axios解决前后端跨域问题（本文四） 6.前端request设置请求后端的路径（本文四---二.8） 7.去后端也加上一个允许前端请求的类(本文四---一) 8.在新建的前端页面里面把死数据改成连接后端的活数据（以下全部在五里面） 9.通过钩子函数去请求后端接口 10.返回给当前页面的模板对象属性 11.运行前后端，访问前端页面成功获取到后端数据 二、前后端连接步骤 （一）后端配置说明：前端和后端的端口不一样，所以浏览器不能直接请求连接，要通过axiso去配置他们连接的路径这些，才能实现通信。 6.在后端spring boot项目新建一个包config，里面建一个和前端请求通信的配置类CorsConfig 把这个复制到类里面就好了 解读：允许来自前端8080端口的访问 package com.example.jiu.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; @CrossOrigin @Configuration public class CorsConfig { //当前跨域请求最大有效时长。这里默认1天 private static final long MAX_AGE = 24 * 60 * 60; @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("http://localhost:8080"); // 1 设置前端的访问源地址 corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头 corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法 corsConfiguration.setMaxAge(MAX_AGE); source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置 return new CorsFilter(source); } }如下：
7.前端首先要下载axios，在前端项目里面使用命令去进行下载就好了 npm install axios --save8.Vue项目的src下新建一个utils的文件包，然后包里面新建一个request.js文件，里面写着向后端的80端口发起请求的配置 import axios from 'axios' const request = axios.create({ baseURL: 'http://localhost:80', timeout: 5000 }) export default request如下：
在UserView.vue页面里面 9.把前端写死的数据换成和后端对应的数据并向后端发起请求 // 2.导入request请求：因为request没有放入全局文件main.js里面，这个想要使用必须自己导入 import request from '@/utils/request'; export default { data() { return { // 3.tableData是上面模板里面的属性，要对这个属性进行插入后端的数据，所以这个数组里面写死的数据全部给删了 tableData: [] } }, //4.定义一个钩子函数，当这个页面被加载的时候，这个钩子就向后端发起请求拿到数据 mounted(){ this.gouzi(); //这里为了方便，就自定义命名为钩子，实际开发中有规范的命名 }, //5.定义一个方法 methods:{ //6.谁的方法？钩子的方法 gouzi(){ //7.钩子要干嘛?向后端发起请求,明确说明使用get还是post，还有后端的哪里发起请求 //request文件里面封装了后端的端口，这里相当于访问是后端的ttp://localhost:80/user request.get('/user') .then(Response=>{ //8.Response拿到数据要给谁啊?当前是给模板data, data的哪个属性？当然是本页面的tableData数组里面了 this.tableData= Response.data }) } } } 五、前后端打通页面把前后端都开启运行起来，然后前端8080端口就可以得到后端80端口mysql数据库的这个数据了
有什么问题都可以评论区留言，看见都会回复的 如果你觉得本篇文章对你有所帮助的，多多支持吧！！！ 点赞收藏评论，当然也可以点击文章底部的红包或者👇订阅付费文章创作支持一下了。抱拳了！ vip文章：http://t.csdn.cn/Uq5j1 bug大全订阅文章：http://t.csdn.cn/j6UyR |
【本文地址】