springboot&&vue前后端分离入门案例

springboot&&vue前后端分离入门案例

1、最近一直再学习springboot的相关内容，感觉暂时不想学了，就上网随便搜搜，看到大家都在讨论的前后端分离，出于好奇，今天也来玩玩。

2、玩前后端分离，有一个前提条件，后端的也就是springboot，就不再说了，前端的需要有对应的node环境，还没有环境的可以看我的上一篇教程。下面我们进入正题：

3、既然是前后端分离项目，那其实他就可以当成两个项目进行操作，前端和后端是可以单独运行，单独上线的。

后端部分

效果图：

目录结构：

具体的增删改查，这里就不再多说了，跟之前的没什么区别。

前端部分

效果图：

目录结构

注意：这里使用了vue的脚手架搭建，脚手架的创建也在上一篇博客里进行介绍，有需要的可以参考。
有关目录里的个格文件加的含义，上篇博客里面一样有解释，这里再说一下：

#1.创建vue脚手架第一个项目
vue init webpack 项目名
2.创建第一个项目
hello ------------->项目名
-build ------------->用来使用webpack打包使用build依赖
-config ------------->用来做整个项目配置目录
-node_modules ------>用来管理项目中使用依赖
-src ------>用来书写vue的源代码[重点]
+assets ------>用来存放静态资源 [重点]
components ------>用来书写Vue组件 [重点]
router ------>用来配置项目中路由[重点]
App.vue ------>项目中根组件[重点]
main.js ------>项目中主入口[重点]
-static ------>其它静态
-.babelrc ------> 将es6语法转为es5运行
-.editorconfig ------> 项目编辑配置