springboot+vue 前后端交互实现(mysql+springboot+vue)

这篇具有很好参考价值的文章主要介绍了springboot+vue 前后端交互实现(mysql+springboot+vue)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

编译器:vscode、idea、mysql5.7
技术:springboot+mybatis+mysql+lombok+vue
实现内容:实现前后端数据交互。
实现效果:
vue和springboot的前后端交互,vue.js,Springboot,前后端交互,spring boot,vue.js,交互,mysqlvue和springboot的前后端交互,vue.js,Springboot,前后端交互,spring boot,vue.js,交互,mysql
vue和springboot的前后端交互,vue.js,Springboot,前后端交互,spring boot,vue.js,交互,mysql


一、准备工作

因为vue和springboot是前后端分离的,所以在开始交互前首先需要解决跨域问题,可以在前端做也可以在后端加配置类,这里我是在后端加的CORS策略配置类。

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

还需要在前端下载并配置好axios库,vscode的终端里面输入命令行即可下载

npm install axios

下载成功后点击main.js并配置

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false
// 全局挂载axios
Vue.prototype.$axios=axios
new Vue({
  axios,
  render: h => h(App),
}).$mount('#app')
//若本地项目调试使用
axios.defaults.baseURL = 'http://localhost:8080';	

首先导入axios库

import axios from `axios`

导入成功后在new Vue中挂载在app中
最后设置我们的基础url

axios.defaults.baseURL='基础路径'

二、实现过程

1.后端

这里的后端唯一的难点可能就是mapper的sql语句了,因为我这里是单表连接,所以就非常简洁高效,这里我只展示mapper.xml的代码

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.wjm.hxx.mapper.mapper">
    <insert id="addtest">
        insert into test(cname,direction,project,introduce,classtime,tid,semester) values(#{cname},#{direction},#{project},#{introduce},#{classtime},#{tid},#{semester})
    </insert>
    <update id="updtest">
        update test set cname=#{cname},direction=#{direction},project=#{project},introduce=#{introduce},classtime=#{classtime},tid=#{tid},semester=#{semester} where id=#{id}
    </update>
    <delete id="deltest">
        delete from test where id=#{id}
    </delete>
    <select id="querytest" resultType="com.wjm.hxx.pojo.test">
        select * from test
    </select>
    <select id="queryByIdtest" resultType="com.wjm.hxx.pojo.test">
        select * from test where cname like concat('%',#{cname},'%')
    </select>
</mapper>

2.前端

用axiosHTTP库调用get、post方法的语法格式如下,

 this.$axios.post/get(`/url?id=${id}`)
      .then(res=>{
        console.log(res)
      })

在上述代码块中,我们调用axios库的post或get方法,并且用then方法进行回调函数的调用,同时如果我们如果想要传递参数需要用到参数名=${this.传递参数},这样就可以进行前后端交互,而样式和template模板这里就不再赘述。
前端代码如下:文章来源地址https://www.toymoban.com/news/detail-580593.html

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>
      <input type="text" placeholder="请输入课程名称" v-model="cname">
      <button class="btn" v-on:click="queryById(cname)">搜索</button>
      <button class="btn" style="float:left;left:20px;" v-on:click="addshow">添加课程</button>
      <button v-on:click="query" class="btn">全局搜索</button>
    </div>
    <div class="overlay" id="overlay"></div>
    <div class="auform" id="auform">
      <label>课程名称:</label>
      <input type="text" placeholder="请输入课程名称" v-model="cname"><br><br>
      <label>专业方向:</label>
      <input type="text" placeholder="请输入专业方向" v-model="direction"><br><br>
      <label>项目名称:</label>
      <input type="text" placeholder="请输入项目名称" v-model="project"><br><br>
      <label>项目简介:</label>
      <input type="text" placeholder="请输入项目简介" v-model="introduce"><br><br>
      <label>上课时间:</label>
      <input type="text" placeholder="请输入上课时间" v-model="classtime"><br><br>
      <label>任课老师:</label>
      <input type="text" placeholder="请输入任课老师" v-model="tid"><br><br>
      <label>授课学期:</label>
      <input type="text" placeholder="请输入授课学期" v-model="semester"><br><br>
      <button v-if="addflag" class="btn" @click="add">添加</button>
      <button v-else-if="updflag" class="btn" @click="upd">修改</button>
      <button class="btn" v-on:click="close">关闭</button>
    </div>
    <div class="table">
        <div class="tr">
            <span class="th">课程名称</span>
            <span class="th">专业方向</span>
            <span class="th">项目名称</span>
            <span class="th">项目简介</span>
            <span class="th">上课时间</span>
            <span class="th">任课老师</span>
            <span class="th">授课学期</span>
            <span class="th">操作</span> 
        </div>
        <div class="tr" v-for="(item,index) in arrayList" :key="index">
          <span class="td">{{ item.cname }}</span>
            <span class="td">{{ item. direction}}</span>
            <span class="td">{{ item.project }}</span>
            <span class="td">{{ item.introduce }}</span>
            <span class="td">{{ item.classtime }}</span>
            <span class="td">{{ item.tid }}</span>
            <span class="td">{{ item.semester }}</span>
            <span class="td"><button class="sbtn" v-on:click="updshow(item.id)">修改</button><button class="sbtn" v-on:click="del(item.id)">删除</button></span> 
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      arrayList:[],
      cname:"",
      direction:"",
      project:"",
      introduce:"",
      classtime:"",
      tid:"",
      semester:"",
      id:1,
      addflag:false,
      updflag:false
    }
  },
  props: {
    msg: String
  },
  mounted(){
    this.query()
  },
  methods:{
    query:function(){
      this.$axios.get(`http://localhost:8080/querytest`).then((res) => {
   if(res.data){
    this.arrayList=res.data
    console.log(res.data)
   }else{
     console.log("fail")
   }
})
    },
    add:function(){
      this.$axios.post(`/addtest?cname=${this.cname}&&direction=${this.direction}&&project=${this.project}&&introduce=${this.introduce}&&classtime=${this.classtime}&&tid=${this.tid}&&semester=${this.semester}`)
      .then((res=>{
        console.log(res)
        this.close()
        this.query();
      }))

    },
    del:function(item){
        this.$axios.get(`/deltest?id=${item}`).then((res=>{
          console.log(res)
          this.query()
        }))
    },
    queryById:function(cname){
        this.$axios.get(`/queryByIdtest?cname=${cname}`).then(res=>{
          console.log(res.data)
          this.arrayList=res.data
        })
    },
    upd:function(){
      this.$axios.post(`/updtest?id=${this.id}&cname=${this.cname}&direction=${this.direction}&project=${this.project}&introduce=${this.introduce}&classtime=${this.classtime}&tid=${this.tid}&semester=${this.semester}`)
      .then((res=>{
        console.log(res.data)
        this.close()
        this.query()
      }))
    },
    addshow(){
      this.addflag=true;
      document.getElementById('overlay').style.display='block';
      document.getElementById('auform').style.display='block'
    },
    updshow(id){
      this.id=id
      this.updflag=true;
      document.getElementById('overlay').style.display='block';
      document.getElementById('auform').style.display='block'
    },
    close(){
      this.addflag=false,
      this.updflag=false,
      document.getElementById('overlay').style.display='none';
      document.getElementById('auform').style.display='none'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn{
  color:white;
  margin-left:10px;
  height:30px;
  width:70px;
  border:none;
  background-color: rgb(188, 21, 239);
  border-radius:5px;
}
input{
  margin-top:20px;
  border:none;
  border-bottom:1px solid lightgray;
  width:200px;
  height:30px;
}
.table{
  margin-left:30%;
  margin-top:20px;
  width:auto;
  height:auto;
}
.tr{
  width:100vh;
  border-bottom:1px solid lightgray;
  height:50px;
}
.th,.td{
  line-height:50px;
  display:inline-block;
  width:80px;
  margin-right:10px;
}
.sbtn{
  line-height:15px;
  border:none;
  font-size:1px;
  width:37.5px;
  display:inline;
}
button{
  background-color: white;
}
button:hover{
  color:red;
}
.auform{
  position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
}
 /* 遮罩层样式 */
 .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none; /* 默认隐藏 */
        }

</style>

到了这里,关于springboot+vue 前后端交互实现(mysql+springboot+vue)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】

    在SpringBoot+Vue的整合项目中我们使用的编译软件分别有: Vscode来编写Vue脚手架和IDEA来编写SpringBoot。vue脚手架是3.0以上的。 1.App.vue 这里的router-view一定要写出来,因为我们最终呈现到App.vue这个组件中去的 2.src/pages/Login.vue 将前端数据传递给后端,后端并响应的操作 3.src/pages/I

    2024年02月12日
    浏览(37)
  • SpringBoot+mysql+vue实现大学生健康档案管理系统前后端分离

    本项目是一套基于SpringBoot实现大学生健康档案管理系统,主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者。 包含:项目源码、数据库脚本等,该项目可以直接作为bishe使用。 项目都经过严格调试,确保可以运行! 项目是采用SpringBoot + Mybatis + S

    2024年02月05日
    浏览(58)
  • 基于Java+SpringBoot+Vue.js前后端分离电脑购物商城系统设计和实现 可行性分析

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年02月20日
    浏览(56)
  • 基于Java+SpringBoot+Vue.js前后端分离箱包购物商城系统设计和实现 可行性分析

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年02月22日
    浏览(52)
  • 基于Java+SpringBoot+Vue.js前后端分离零食购物商城系统设计和实现 可行性分析

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年02月20日
    浏览(69)
  • 基于Java+SpringBoot+Vue.js前后端分离鞋子购物商城系统设计和实现 可行性分析

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年02月20日
    浏览(55)
  • 基于Java+SpringBoot+Vue.js前后端分离绿植购物商城系统设计和实现 可行性分析

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年02月19日
    浏览(62)
  • 基于Java+SpringBoot+Vue.js前后端分离宠物购物商城系统设计和实现 可行性分析

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年02月19日
    浏览(50)
  • 基于Java+SpringBoot+Vue.js前后端分离母婴用品购物商城系统设计和实现 可行性分析

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年02月22日
    浏览(60)
  • 基于Java+SpringBoot+Vue.js前后端分离化妆品购物商城系统设计和实现 可行性分析

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年02月20日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包