前端工具和环境：
- Node.js V10.15.0
- Vue.js V2.5.21
- yarn: V1.13.0
- IDE:VScode
后端工具和环境：
- Maven: 3.52
- jdk: 1.8
- MySql: 14.14
- IDE: IDEA
- Spring Boot: 2.0+
- Zookeeper：3.4.13
前后端分离(服务端渲染、浏览器渲染)
实现真正的前后端解耦。
核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。
前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端，例如：浏览器，安卓，IOS等等)打下坚实的基础。
Vue.js
在讲Vue之前，需要大概了解下 HTML、CSS、JS是什么？
HTML是写标签的；CSS是写样式的；JS是给网页增加动态效果
Vue介绍
1,Vue是一套用于构建用户界面的渐进式框架，网址：cn.vuejs.org/
2,Vue在Github的欢迎度
3,不需要操作Dom，实现了MVVM
// jquery的操作$("#test3").val("Dolly Duck");// Vue的操作MVVM，实现了双向绑定4,学习成本低，文档浅显易懂
Vue 建项目
1,Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。基于Vue cli项目脚手架，网址：cli.vuejs.org/zh/guide/
2,运行以下命令其一来创建一个新项目，有默认选默认即可
vue create vue-hello-world (命令行) vue ui (界面)3,在创建好项目以后，运行以下命令将能看到初次项目创建的界面
cd vue-hello-world yarn serve4,默认情况下，在 浏览器访问 http://localhost:8080/ 将能看到如下界面：
Vue 相关结构和生命周期介绍
1,目录结构如下图：
2,单个.vue文件的组成部介绍
3,组件化应用构建
使用小型、独立和通常可复用的组件构建大型应用,一个页面如搭积木一样
4,Vue的生命周期如下图：
钩子方法: 模板方法的执行结果，该方法就叫做钩子方法，个人理解：影响了模板的执行，把函数勾住了，这个方法就是钩子函数。
Vue 常用指令
声明式渲染
{{ message }}
data: { message: 'Hello Vue!'}条件渲染
现在你看到我了
data: { seen: true}循环渲染
{{ todo.text }}
data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ]}监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
Greet
methods: { greet: function () { // `this` 在方法里指向当前 Vue 实例 alert('Hello ' + this.name + '!') }}计算属性缓存 vs 方法
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }, methods: { // 方法 reversedMessage: function () { return this.message.split('').reverse().join('') } }})数据变化，watch
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { // 当两个值变化时，将会触发此函数 fullName: function () { return this.firstName + ' ' + this.lastName } }})表单输入绑定
Message is: {{ message }}
缩写
v-bind 缩写
......v-on 缩写
......路由
// 可提供懒加载 const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] })User// js跳转router.push({ name: 'user', params: { userId: 123 }})使用 axios 访问 API
// get请求 axios.get('/user', { params: { ID: 12345 }}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});// post 请求axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone'}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});在学习完以上知识以后，将能使用Vue做出简单的页面运用
扩展：
TypeScript、Vue组件间传值、Mock、Vuex、调试、JavaScript的同步异步,作用域、ES6、部署(打包、优化、部署在静态服务器上、node中间层)、虚拟DOM、Http的get和post等。
相关:
https://github.com/SimulatedGREG/electron-vue
Spring Boot
在讲Spring Boot之前，需要大概了解下Java的一些相关
Java的工作原理
JVM 虚拟机
介绍
Spring Boot 是所有基于 Spring 开发的项目的。Spring Boot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的配置文件。系统学习springboot,可以在Java知音公众号回复关键字"Springboot聚合" ，网罗优质教程。
使用Spring Boot开发单个RESTful服务
由于网上资源众多，就不详细编写创建步骤了。这里找了一个网上的教程，大家可以按这个步骤去创建一个项目，能用浏览器能访问就行。SpringBoot新建HelloWorld工程：
项目目录结构
和前端交互
1,前端的Http请求会到controller这一层，而controller层根据相应路由信息注解会跳转到相应的类。
// 如： /api/user 的get请求将会被 UserQry() 函数处理@RequestMapping("/api")public class UserController { @RequestMapping(value ="/user
