前言
编译器:vscode、idea、mysql5.7
技术:springboot+mybatis+mysql+lombok+vue
实现内容:实现前后端数据交互。
实现效果:
一、准备工作
因为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方法的语法格式如下,文章来源:https://www.toymoban.com/news/detail-580593.html
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模板网!