赞
踩
目录
前后端分离的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 --save
8.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.把前端写死的数据换成和后端对应的数据并向后端发起请求
- <template>
- <div>
- <el-table
- :data="tableData"
- style="width: 100%">
- <!--1.prop后面的都换成和后端实体属性对应的值 label后面是自定义的字 -->
- <el-table-column
- prop="id"
- label="ID"
- width="180">
- </el-table-column>
- <el-table-column
- prop="username"
- label="账户"
- width="180">
- </el-table-column>
- <el-table-column
- prop="password"
- label="密码">
- </el-table-column>
- </el-table>
- </div>
- </template>
- <!-- -->
- <script>
- // 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
- })
- }
- }
- }
- </script>
把前后端都开启运行起来,然后前端8080端口就可以得到后端80端口mysql数据库的这个数据了
有什么问题都可以评论区留言,看见都会回复的
点赞收藏评论,当然也可以点击文章底部的红包或者
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。