springboot&&vue前端分离入门案例1.最近一直在研究springboot相关的内容，感觉暂时不想学了。出于好奇，今天来玩。2.前后端分离是有前提的。后端是springboot，就不说了。前端需要有相应的node环境。如果没有环境，可以看我之前的教程。现在进入正题：3、既然是前后端分离的项目，其实可以作为两个项目来运营。前端和后端可以分开运行，分开启动。后端部分效果图：目录结构：具体的增删改查这里就不说了，和前面的没什么区别。前端部分效果图：目录结构注：这里使用的是Vue脚手架，脚手架的创建在之前的博客中也有介绍。有需要的可以参考。关于目录下grid文件的含义，在之前的博客中也有解释。这里先说一下：1.创建vue脚手架的第一个项目vueinitwebpack项目名2.创建第一个项目hello------------->项目名-build------------>用于使用webpack打包使用builddependency-config-------------->用于制作整个项目配置目录-node_modules------>用于管理项目中使用的依赖-src------>用于编写vue的源代码[key]+assets------>用于存放静态资源[key]组件------>用于编写Vue组件[key]router------>用于在项目中配置路由[key]App.vue------>项目中的根组件[Key]main.js------>项目中的主要入口[Key]-static------>Otherstatic-.babelrc------>es6syntax转换为es5并运行-.editorconfig------>项目编辑配置-.gitignore------>gitversioncontrolignorefile-.postcssrc.js------>sourcecoderelatedjs-index.html------>项目首页-package.json------>类似pom.xml依赖管理jquery不建议手动修改-package-lock.json---->锁包。json-README.md---->项目描述文件3.如何运行在项目根目录下执行npmstart运行前端系统4.如何访问项目http://localhost:80815.VueCli中的项目开发方法注：Everythingisacomponentjs代码html代码css样式1.VueCli开发方法是开发一个一个组件对应一个业务功能模块，未来可以将多个组件组合在一起形成前端系统。2、以后使用vuecli开发时，不再写html，而是一个一个的写组件（组件后缀为.vue的文件），vuecli会把组件编译成运行时的html文件未来的包装。先简单介绍一下前端部分。毕竟我才刚刚起步，我是初学者。谢谢！在vue中，一切都是组件1.Vue.js是一个用于构建用户界面的渐进式框架。与其他重量级框架不同，Vue旨在自下而上地进行增量开发。Vue的核心库只专注于视图层，非常容易学习和与其他库或现有项目集成。另一方面，Vue完全有能力驱动使用Vue生态系统支持的单文件组件和库开发的复杂单页应用程序。2.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合视图组件[2]。3.Vue.js本身并不是一个全面的框架——它只专注于视图层。所以它非常容易学习，非常容易与其他库或现有项目集成。另一方面，当与相关工具和支持库一起使用时，Vue.js也能够完美地支持复杂的单页应用程序[3]。简单的说，他在这里把各个功能分开，方便需要的时候组合起来使用。4、通过各个展示页面，路由连接importVuefrom'vue'importRouterfrom'vue-router'importHomefrom"../components/Home";importUserfrom"../components/User";从“../components/Student”导入Student；从“../components/UserAdd”导入UserAdd；从“../components/UserEdit”导入UserEdit；Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',redirect:'/home'},{path:'/home',component:Home},{path:'/user',component:User,children:[{path:'add',component:UserAdd},//用户添加路由{path:'edit',component:UserEdit},//用户添加路由]},{path:'/student',component:Student},]})让我们开始这。举个两者连接的例子：这里他是直接调用后端的一个接口直接访问，但是沃尔玛这里需要下载安装一个工具，axios这里先说下axios是什么：在使用的时候,记得加上Vue.prototype.$http=axios;//修改内部的$http为axios$http.get("").post()Vue.config.productionTip=false通过它，实现起来更方便，前端接口与后端业务逻辑和数据的交互，让开发更方便。这个博客只是一个简单的解释。很多东西暂时不明白。先这样吧，回头看看，整理一下，再继续补。谢谢！！我的个人博客：天涯志我的公众号：
