Springboot+vue front-end and back-end interaction implementation (mysql+springboot+vue)

foreword
1. Preparation
2. Implementation process
- 1. Backend
- 2. Front end

Foreword

Compiler: vscode, idea, mysql5.7
Technology: springboot + mybatis + mysql + lombok + vue
Implementation content: Realize front-end and back-end data interaction.
Realize the effect:

1. Preparations

Because vue and springboot are separated from the front and back ends, you need to solve the cross-domain problem first before starting the interaction. You can do it on the front end or add configuration classes on the back end. Here I added the CORS policy configuration class on the back end.

@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);
            }
        };
    }
}

You also need to download and configure the axios library on the front end, and enter the command line in the terminal of vscode to download it

npm install axios

After the download is successful, click main.js and configure

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

Vue.config.productionTip = false
// mount axios globally
Vue.prototype.$axios=axios
new Vue({<!-- -->
  axios,
  render: h => h(App),
}).$mount('#app')
//If the local project is used for debugging
axios.defaults.baseURL = 'http://localhost:8080';

First import the axios library

import axios from `axios`

After the import is successful, mount it in the app in new Vue
Finally set our base url

axios.defaults.baseURL='base URL'

2. Implementation process

1. Backend

The only difficulty in the backend here may be the sql statement of mapper, because I am here for a single table connection, so it is very concise and efficient, here I only show the code of 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. Frontend

The syntax format of using the axiosHTTP library to call the get and post methods is as follows,

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

In the above code block, we call the post or get method of the axios library, and use the then method to call the callback function. At the same time, if we want to pass parameters, we need to use parameter name=${this.pass parameters} , so that the front-end and back-end interactions can be performed, and the styles and templates will not be described here.
The front-end code is as follows:

<template>
  <div class="hello">
    <h1>{<!-- -->{<!-- --> msg }}</h1>
    <div>
      <input type="text" placeholder="Please enter the course name" v-model="cname">
      <button class="btn" v-on:click="queryById(cname)">Search</button>
      <button class="btn" style="float:left;left:20px;" v-on:click="addshow">Add Course</button>
      <button v-on:click="query" class="btn">Global Search</button>
    </div>
    <div class="overlay" id="overlay"></div>
    <div class="auform" id="auform">
      <label>Course name:</label>
      <input type="text" placeholder="Please enter the course name" v-model="cname"><br><br>
      <label>Professional direction:</label>
      <input type="text" placeholder="Please enter professional direction" v-model="direction"><br><br>
      <label>Project name:</label>
      <input type="text" placeholder="Please enter the project name" v-model="project"><br><br>
      <label>Project Introduction:</label>
      <input type="text" placeholder="Please enter project introduction" v-model="introduce"><br><br>
      <label>Class time:</label>
      <input type="text" placeholder="Please enter class time" v-model="classtime"><br><br>
      <label>Teacher:</label>
      <input type="text" placeholder="Please enter the teacher" v-model="tid"><br><br>
      <label>Semester:</label>
      <input type="text" placeholder="Please enter the semester" v-model="semester"><br><br>
      <button v-if="addflag" class="btn" @click="add">Add</button>
      <button v-else-if="updflag" class="btn" @click="upd">Modify</button>
      <button class="btn" v-on:click="close">Close</button>
    </div>
    <div class="table">
        <div class="tr">
            <span class="th">Course Title</span>
            <span class="th">Professional orientation</span>
            <span class="th">Project Name</span>
            <span class="th">Project Introduction</span>
            <span class="th">Class time</span>
            <span class="th">Teacher</span>
            <span class="th">Taught Semester</span>
            <span class="th">Operation</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)">Modify</button><button class="sbtn" v-on:click="del (item.id)">Delete</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,
      uppdflag: 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} & amp; & amp;direction=${<!-- -->this.direction} & amp; & amp;project=${<!-- -->this.project} & amp; & amp;introduce=${<!-- -->this.introduce} & amp; & amp;classtime=${< !-- -->this.classtime} & amp; & amp;tid=${<!-- -->this.tid} & amp; & amp;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} & amp;cname=${<!-- -->this.cname} & amp;direction=$ {<!-- -->this.direction} & amp;project=${<!-- -->this.project} & amp;introduce=${<!-- -->this.introduce} & amp ;classtime=${<!-- -->this.classtime} & amp;tid=${<!-- -->this.tid} & amp;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; /* hidden by default */
}
 /* Overlay style */
 .overlay {<!-- -->
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none; /* hidden by default */
        }

</style>

Table of Contents

Foreword

1. Preparations

2. Implementation process

1. Backend

2. Frontend