ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

spring boot与VUE的前后端交互

2022-08-12 08:00:08  阅读:167  来源: 互联网

标签:VUE name vue spring author boot ruleForm book


一、准备
默认认为会了简单的spring boot知识和vue知识

1、前端
先安装好vue cli,没有的点这里

2、后端
后端IDEA安装vue.js插件就OK了

二、创建前端VUE项目
就进入CMD,挑个好路径,输入vue ui

然后打开IDEA,导入文件就可以

三、IDEA打开VUE与操作
1、打开
上面我们是通过vue cli 来创建一个VUE项目而已,其他的可以关闭了
在IDEA中,Terminal控制台输入

npm run serve

 

就可运行VUE

 

2、VUE的结构


先看下App.vue的文件

<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>

 


这里的两个router-link to="xxx",里面的xxx就是一个访问路径而已,就有点类似spring MVC的映射那样,流程是:

先写VUE文件,写要展示的东西
在router/index.js中导入刚写的VUE,然后通过path,name和component3个属性来定位他在App.vue中写router-link to="xxxx"
3、写一个VUE
这个VUE先弄假数据
Book.vue:

<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>名字</td>
        <td>作者</td>
      </tr>
      <tr v-for="book in books">
        <td>{{ book.id }}</td>
        <td>{{ book.name }}</td>
        <td>{{ book.author }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "Book",
  data() {
    return {
      books: [
        {
          id: 1,
          name: "三体",
          author: "刘慈欣",
        },
        {
          id: 2,
          name: "java从零到入土",
          author: "我",
        },
      ],
    };
  },
};
</script>

<style scoped>
</style>

 

name属性一定要写的
然后,data的格式是data(){return {xxxxx}}
4、在router/index.js中导入VUE

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Book from "../views/Book";//这里导入我们刚创建的Book

Vue.use(VueRouter)

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
//这里,导入用到Book
{
path: '/book',
name: 'Book',
component: Book
}
]

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})

export default router

 

导入了名字后,path属性就是我们访问的路径,比如path: '/book',就访问http://localhost:8080/book
反正你记得,写了VUE之后,在这个js里面导入VUE,其中,
import xx from ‘xx’
path写访问路径
name和component都写VUE的name,反正这些名字全都一样就不会有错了
四、数据库

 

 

 


五、创建后端spring boot项目
我是使用SSM的

1、流程
分为实体类,mapper层、service层、controller层,配置层。这里的spring boot我们用的是8081端口,前端是8080端口,在前端使用axios跨域访问到8081的json数据,并且得到数据返回至8080端口

2、先配置数据库

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://sh-cynosdbmysql-grp-nx99sqe2.sql.tencentcdb.com:29867/guo?serverTimezone=GMT%2B8
    username: sxtest deletethis
    password: sxtest2022!deletethis
mybatis-plus:
  mapper-locations: classpath:mapper/*.xml
#服务器配置
server:
  port: 8081
  thymeleaf:
    cache: false

 

3、实体层

@Data
public class Book {
private Integer id;
private String name;
private String author;
}

 

4、mapper层

@Mapper
public interface BookMapper {

@Select("select * from book")
public List<Book> getAllBook();
}

 

5、service层

@Service
public class BookService {
@Autowired
BookMapper bookMapper;

public List<Book> getAllBook(){
return bookMapper.getAllBook();
}
}

 

6、controller层

@RestController
@RequestMapping("/book")
public class BookController {
@Autowired
BookService bookService;

@GetMapping("/getAll")
public List<Book> getAll(){
return bookService.getAllBook();
}
}

 


7、访问数据
http://localhost:8081/book/getAll

已经把数据库的数据取出来了,接下来就要在前端把数据展示

六、手尾
1、Book.vue
就不需要假数据了,因为有真数据了

<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>名字</td>
        <td>作者</td>
      </tr>
      <tr v-for="book in books">
        <td>{{ book.id }}</td>
        <td>{{ book.name }}</td>
        <td>{{ book.author }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "Book",
  data() {
    return {
      books: [
        {
          id: 1,
          name: "三体",
          author: "刘慈欣",
        },
        {
          id: 2,
          name: "java从零到入土",
          author: "我",
        },
      ],
    };
  },
  created() {
    var that = this;
    axios.get("http://localhost:8081/book/getAll").then(function (resp) {
      that.books = resp.data;
    });
  },
};
</script>

<style scoped>
</style>

 

要用到axios,先下载,在控制台中输入vue add axios就可下载
axios
要用到axios,先下载,在控制台中输入vue add axios就可下载,每个VUE项目都要下载一次的。。

created():在创造之前就执行的东西
拿到跨域json数据格式
created() {
var that=this;
axios.get('地址').then(function (resp) {
that.XXX变量=resp.data;
})
}

 


2、解决跨域问题
但是这样子直接访问有错误的,因为前端是8080,后端是8081,不同端口,出现了跨域问题。


在spring 创建config类,把下面的代码复制粘贴就可以解决跨域问题了。你不需要知道为什么,复制粘贴就完事(也可以直接在controller前加@CrossOrigin)

@Configuration
public class CrosConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET","HEAD","POST","DELETE","OPTIONS","PUT")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}

 


3、完成效果

 

 

七、安装element-ui(其实应该早点装的。。。)
在如果是平时,js-src加载酒可以,但项目不是这样的
cmd:vue ui


如果Element 成功安装,就会看到有个el-button按钮

八、前端传数据给后端
前面都是,前端查询数据,然后后端查询数据库丢给前端的。
那么现在是前端要添加数据,把数据丢给后端,后端再写入数据库

打开element-ui官网,查找el-form表单,抄一个喜欢的,比如这个

1、看下基本要素
还是要看一下的,要不到时候抄了不会改

<div>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="书名" prop="name">
<el-input v-model="ruleForm.name" ></el-input>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="ruleForm.author"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>

<script>
export default {
  name: "AddBook",
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入书名"));
      } else {
        if (this.ruleForm.name !== "") {
          //如果不为空
        }
        callback();
      }
    };
    var validateAuthor = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入作者名"));
      } else {
        if (this.ruleForm.author !== "") {
          //如果不为空
        }
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        author: "",
      },
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        author: [{ validator: validateAuthor, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      var that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //提交成功后要做的事情
          // alert('submit!');
          console.log(that.ruleForm);
          axios
            .post("http://localhost:8081/book/", that.ruleForm)
            .then(function (response) {
              console.log(response);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

 


看到最上面的:model="ruleForm" status-icon :rules="rules" ref="ruleForm"
:model="ruleForm",看到下面的

return {
ruleForm: {
name: '',
author: ''
},

 


意思就是,这个form表单的数据(v-model绑定),有两个,name和author。像php的表单提交是input里面的值,那么el-input框的值v-model="ruleForm.name",就用到了下面的ruleForm对应值绑定起来。那么提交表单的时候,只要用到this.ruleForm就可以,而且是json格式,到后端用@RequestBody接受转换为对象就可以了。
:rules="rules",第一个rules翻译,就是规则嘛,规则格式是什么?是第二个rules,那么rules的规则格式是什么?下面有写到

<el-form-item label="书名" prop="name">
<el-input v-model="ruleForm.name" ></el-input>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="ruleForm.author"></el-input>
</el-form-item>

rules: {
name: [
{ validator: validateName, trigger: 'blur' }
],
author: [
{ validator: validateAuthor, trigger: 'blur' }
]
}

 


根据prop的值不同,选择rules中不同的规则。其中,规则的属性有
trigger焦点触发时间
required,true或者false,是否为必填项
message:接在trigger和message后面,为事件消息弹出
validator:更进一步的规则,这个更进一步的规则,看到下面的

var validateName = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入书名'));
} else {
if (this.ruleForm.name !== '') {
//如果不为空
}
callback();
}
};

 


这个,看一下就知道是什么了。validataName不就是上面一个validator的规则嘛,这个就,深入规则咯。值为空就怎样,不空又怎样
2、后端添加数据
要做的是前端-后端-数据库的流程,先写好后端接口

@RestController
@RequestMapping("/book")
public class BookController {
@Autowired
BookService bookService;

@PostMapping("/")
public int insertBook(@RequestBody Book book){
return bookService.insertBook(book);
}

}

 



mapper层和service层不展示了
@RequestBody:这个注解很重要,因为前端是通过json格式用post方式传送过来的,这个注解可以帮助前端json和后端对象的交互
3、前端的axios

methods: {
submitForm(formName) {
var that=this;
this.$refs[formName].validate((valid) => {
if (valid) {
//提交成功后要做的事情
// alert('submit!');
console.log(that.ruleForm)
axios.post('http://localhost:8081/book/',that.ruleForm).then(function (response) {
console.log(response);
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}

 


前端这么一个方法,是点击提交之后的事件。使用axios,发送post请求就用axios.post(),格式为

axios.post('路径',json类型的数据).then(function (response) {
console.log(response);
})

 


前端的数据,为

 

this.ruleForm
ruleForm: {
name: '',
author: ''
}

 


这样就把数据传过去了,然后后端添加数据为http://localhost:8081/book/的post请求。不用路径?name=xxx&author=xxx的格式,PHP都不用了Java还用吗。想起php也是一堆input,一个submit,就可以提交了,虽然不知道原理,但是就是这么一回事。vue也是一堆input,一个submit
九、代码
后端代码:https://github.com/E-10000/spring-and-vue-demo/tree/master
前端代码:https://github.com/E-10000/spring-and-vue-demo/tree/vue


参考:https://blog.csdn.net/yi742891270/article/details/107933050

标签:VUE,name,vue,spring,author,boot,ruleForm,book
来源: https://www.cnblogs.com/StarZhai/p/16578522.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有