spring boot框架及搭建流程、vue.js框架核心描述

摘要

1. SpringBoot简介
   SpringBoot是一个默认就集成了绝大部分常规开发时都使用的依赖、完成了绝大部分的常规配置、基于SpringMVC的框架。

SpringBoot的核心思想是约定大于配置，因为在传统的SSM项目中，创建项目后，需要自定义大量的配置，而不同的项目的配置却大同小异，甚至就是完全相同，所以，SpringBoot就直接完成了相关的配置，并要求使用者遵循配置值的约定，例如它将DispatcherServlet的映射路径配置为/*，则使用者就按照这个配置值使用即可，无须自已编写配置！

2. 示例使用SpringBoot开发用户注册
   2.1. 创建SpringBoot项目
   如果要创建SpringBoot项目，常规的创建方式有：

基于SpringBoot的父级项目来创建新的项目；
使用开发工具的创建向导来创建；
从Spring网站创建项目并导入到本地开发工具中。
什么是vue
是一套构建用户界面的渐进式（用到哪一块就用哪一块，不需要全部用上）前端框架，Vue 的核心库只关注视图层

一、spring boot搭建及功能描述

1. 开发工具：IntelliJ IDEA
2. 百度搜索–IntelliJ IDEA–Ultimate版本
3. lanyu注册码：淘宝上购买JetBrain全家桶
4. 安装教程：https://www.runoob.com/w3cnote/intellij-idea-usage.html
   创建过程由截图展现：
   
   
   

1、创建一个springboot工程

如果计算机中已经有了Maven，IntelliJ自带的内置的Maven插件，在当前计算机的目录下
C:\Users\Administrator.m2\repository

spring boot官网：
https://spring.io/projects/spring-boot/

https://start.spring.io/

2、IDEA连接数据库详细步骤：

3、.idea目录和.mvn目录与开发工具有关，不是源码

修改IDEA中字体的大小

利用鼠标的滚轮控制字体大小

4、Springboot的实例代码

正常情况：蓝色的文件夹–java文件 | 绿色的文件夹–test测试文件
如果文件夹没有颜色，说明不是Maven工程，进行修改：

工程连接数据库进行访问：

控制台打印结果：

二、vue.js核心特点

1、响应的数据绑定

传统的js操作页面：在以前使用js操作页面的时候是这样的，需要操作某个html元素的数据，就的使用js代码获取元素然后在处理业务逻辑

响应式数据绑定的方式操作页面，可以直接使用像下面代码那样的写法就可以将数据填充到页面中

2、可组合的视图组件

一个页面映射为组件树。划分组件可维护、可重用、可测试，也就是一个页面由多个组件组合而成


vue中实现组件引入示例

第一步：import导入需要引入的组件文件；

第二步：注册组件；

第三步：在需要引入组件的文件中加上组件标签（这个标签的标签名就是注册的组件名字，多个单词的和这里有xx-xx的形式）

需要注意的是：组件可以嵌套引入，也就是说组件可以引入其他组件

3、虚拟DOM

虚拟DOM的概述

运行的js速度是很快的，大量的操作DOM就会很慢，时常在更新数据后会重新渲染页面，这样造成在没有改变数据的地方也重新渲染了DOM节点，这样就造成了很大程度上的资源浪费。

利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM

当数据发生变化时，能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上

4、MVVM模式

MVVM概述：M：Model数据模型 ， V：view 视图模板 ， vm：view-Model：视图模型

vue的MVVM实例（双向数据绑定）：当输入框输入数据的时候，相应的message也会改变

vue是如何实现双向数据绑定的：当数据发生改变—自动更新视图。利用Object.definedProperty中的setter/getter代理数据，监控对数据的操作

5、声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM，初始化根实例，vue自动将数据绑定在DOM模板上
声明式渲染与命令式渲染区别
声明式渲染：所谓声明式渲染只需要声明在哪里，做什么，而无需关心如何实现
命令式渲染：需要具体代码表达在哪里，做什么，如何实践
需求：求数组中每一项的倍数，放在另一个数组中实例
命令式渲染

声明式渲染