前后端分离
实现技术
SpringBoot+ Vue
使用SpringBoot进行后端应用开发,使用Vue进行前端应用开发
1、创建Vue项目(需要提前搭建好环境)
启动cmd,进入到文件夹路径,输入以下命令,回车
vue init webpack myvue
其中 myvue 是项目的名称
![4bb016b1e631a2408fbab60231a03507.png](https://img-blog.csdnimg.cn/img_convert/4bb016b1e631a2408fbab60231a03507.png)
2、创建完成后,使用IDEA导入此vue项目
在控制台中输入npm install
安装依赖环境
![7a16a08390c302a77531b9ce17d29286.png](https://img-blog.csdnimg.cn/img_convert/7a16a08390c302a77531b9ce17d29286.png)
安装完成后,输入npm install --save axios vue-axios
安装axios
3、在components新建一个User.vue,前端先模拟数据进行测试
<template>
<div>
<table>
<tr>
<th>编号</th>
<th>名字</th>
<th>年龄</th>
</tr>
<tr v-for="item in users">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "user",
data(){
return {
users:[
{
id: 1,
name: '哈哈',
age: 10
},
{
id: 2,
name: '嘎嘎',
age: 14
},
{
id: 3,
name: '嘿嘿',
age: 18
}
]
}
}
}
</script>
<style scoped>
</style>
4、配置Vue
在main.js添加以下代码:
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.use(router)
配置路由:
import Vue from 'vue'
import Router from 'vue-router'
//导入user组件
import User from '../components/User'
//显式调用User
Vue.use(User)
Vue.use(Router)
export default new Router({
routes: [
{
path: '/user',
component: User
}
]
})
配置App.vue
<template>
<div id="app">
<router-link to="/user">用户</router-link>
<router-view></router-view>
</div>
</template>
5、在控制台输入npm run dev
启动项目,浏览器地址栏输入http://localhost:8080,测试页面如下:
![02e1b048df5434f6071216e56f491490.png](https://img-blog.csdnimg.cn/img_convert/02e1b048df5434f6071216e56f491490.png)
SpringBoot部分
1、创建SpringBoot项目
![b3445f29ba48fa5544324262d8d793b3.png](https://img-blog.csdnimg.cn/img_convert/b3445f29ba48fa5544324262d8d793b3.png)
2、新建实体类
package top.dpcoder.domain;
import java.io.Serializable;
public class User implements Serializable{
private Integer id;
private String name;
private Integer age;
//get、set、toString方法
}
3、新建持久层接口(这里只写一个查找全部的,后续代码自行添加)
@Mapper
@Repository("userDao")
public interface IUserDao {
public List<User> findAll();
}
4、编写持久层映射文件
映射文件的位置
![e7c1806f70ad209a78fd011fd6589982.png](https://img-blog.csdnimg.cn/img_convert/e7c1806f70ad209a78fd011fd6589982.png)
<?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="top.dpcoder.dao.IUserDao">
<select id="findAll" resultType="user">
select * from user
</select>
</mapper>
5、yml配置数据库的连接信息
server:
port: 8081
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/mybatis?serverTimezone=UTC
username: root
password: 123456
mybatis:
type-aliases-package: top.dpcoder.domain
mapper-locations: classpath:mybatis/dao/*.xml
6、编写controller类代码(此处省去业务层)
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private IUserDao dao;
@GetMapping("/findAll")
public List<User> findAll(){
return dao.findAll();
}
}
7、启动项目,测试
测试成功!
![15e5640138e889cdc0f7c990a4316afb.png](https://img-blog.csdnimg.cn/img_convert/15e5640138e889cdc0f7c990a4316afb.png)
8、在后端配置解决跨域问题
新建config包,创建CrosConfig类
@Configuration
public class CrosConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET","POST","HEAD","PUT","DELETE","OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
重启SpringBoot项目
最后在User.vue中通过axios从后端获取数据
<script>
export default {
name: "user",
data(){
return {
users:[
]
}
},
//页面初始化完成后要加载的东西
created() {
//this指的是当前的vue对象,把vue对象赋给_this
const _this=this
this.axios.get('http://localhost:8081/user/findAll').then(function (resp) {
//回调函数中的this指的是回调
//把data数据赋给_this,即vue对象
_this.users=resp.data
})
}
}
</script>
启动vue项目,进行测试
![92d6a3b347ba1c0311335f256054b099.png](https://img-blog.csdnimg.cn/img_convert/92d6a3b347ba1c0311335f256054b099.png)