前后端分离开发是面对企业级项目给出的方案，并非适合所有项目。如果你的项目在工程考量后无需前后端分离，那就没有必要为了前后端分离而前后端分离！
Vue
创建Vue项目
- 如果你的vue版本是3.0以上，可以在终端使用
vue ui指令访问图形化界面。 - 点击
创建-选择目录后创建新项目-输入项目名,并根据需求选择是否初始化git仓库，我这里选择了否 - 选择手动配置、取消校验工具，选择Router和Vuex
- 配置环节打开历史记录选项，根据需要选择是否保存设置模板
- 创建好后选 任务-serve-运行，启动后 输入-点击两个地址 即可看到运行成功
简单介绍
在IDE的终端输入 npm run serve 一样可以运行项目
App.vue文件就是所看到的主页面，router-link是路由，点击主页面的Home和About，来回切换时可以看出并非重新加载页面
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
它们是如何做到映射的？
打开router下的index.js
import Vue from 'vue'
import VueRouter from 'vue-router' //以上两个为必要引入
import Home from '../views/Home.vue' //做为组件引入
Vue.use(VueRouter)
const routes = [
{
path: '/', //注册组件，类似SpringBoot中的映射
name: 'Home',
component: Home
},
{
path: '/about', //这是vue3.0的新注册方式，效果与上面的相同
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')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
映射完成后，在App.vue中，<router-view/>决定了组件的显示
创建Book.vue
<template> //对应html
<div>
{{msg}} //{{}}直接和下方的data中的数据绑定
<table>
<tr>
<td>编号</td>
<td>图书名称</td>
<td>作者</td>
</tr>
<tr v-for="item in books" :key="item"> //动态绑定数据
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.author}}</td>
</tr>
</table>
</div>
</template>
<script> //对应js
export default {
name: "Book",
data() {
return {
msg: "hello vue", //与上方的msg进行绑定
books: [ //与上方的books进行绑定
{
id: 1,
name: "java开发实战",
author: "张三"
},
{
id: 2,
name: "python开发实战",
author: "李四"
}
]
};
}
};
</script>
<style scoped> //对应css
</style>
然后将Book.vue在index.js中映射，然后加入app.vue中，访问后应该能看到如下画面
SpringBoot
构建项目
选择 lombok、mysql驱动、DataJPA等
创建配置文件application.yml，并配置类似如下的数据库连接
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai&useSSL=false
username: root
password: 123456
jpa: //这里是让hibernate输入sql,并格式化sql
show-sql: true
properties:
hibernate:
format_sql: true
server:
port: 8181
创建实体类Book
@Entity
@Data
public class Book {
@Id
private Integer id;
private String name;
private String author;
}
创建对应的接口BookRepository
public interface BookRepository extends JpaRepository<Book, Integer> {
}
创建对应的BookController
@RestController
@RequestMapping("/book")
public class BookController {
@Autowired
private BookRepository bookRepository;
@GetMapping("/findAll")
public List<Book> findAll() {
return bookRepository.findAll();
}
}
构建一个测试用的数据库和表
运行测试
在浏览器中输入 http://localhost:8181/book/findAll
可以访问到如下数据
[{"id":1,"name":"java开发","author":"张三"},{"id":2,"name":"python开发","author":"李四"},{"id":3,"name":"node开发","author":"王五"},{"id":4,"name":"C++成长记","author":"赵六"}]
Springboot和Vue前后端进行结合
后端不用动，前端需要通过Ajax获取数据
首先停掉前端服务，vue add axios来安装axios插件，安装完后可以在plugins文件夹中看到
为使得刷新页面即可出现从后台获取的数据，Book.vue中data()方法同级添加初始化方法created()
<script>
export default {
name: "Book",
data() {
return {
msg: "hello vue",
books: [
{
id: 1,
name: "java开发实战",
author: "张三"
},
{
id: 2,
name: "python开发实战",
author: "李四"
}
]
};
},
created(){
const _this = this; //由于在下方直接用this指的是回调resp，而不是data，因此需要先将其赋到_this中
axios.get('http://localhost:8181/book/findAll').then(function(resp){
_this.books = resp.data;
})
}
};
</script>
此时由于前端端口为8080，后端端口为8181，会产生跨域问题，此问题最好在后端解决，创建CrosConfig类
@Configuration
public class CrosConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
最终SpringBoot的文件目录如下
最终前端成功获取后端数据
Q.E.D.
