Simple OKR项目简记 （二）：环境搭建
前言
从这篇文章开始，就开始真正的动手实践过程了。在整个系列博文当中会记录整个开发过程中的一些关键配置步骤和代码。如果有任何细节上的问题，欢迎各位读者进行评论或者通过搜索引擎进行搜索学习。
由于笔者的学识水平和精力有限，在书写过程当中难免会有疏漏和错误，欢迎细心的读者留言纠正，一起学习！
其实网上类似的项目环境搭建的博文有非常多，但是笔者还是想根据Simple OKR的项目开发重新记录一下。一是为了能够确保项目的功能都能够运行，二是能够记录更多细节，三是为了读者能够有一个相对较好的配置体验。博主在进行一些开源项目的学习过程当中，经常需要花费很大的精力去解决许多关于开发环境配置的问题，往往需要搜索非常多的资料进行试错才能完成一些排坑的工作（当然也有可能是因为博主的水平比较有限，QAQ）。
前端部分
本节将介绍单页面应用和前后端分离设计的基础知识，配置Vue 3基本开发环境，并创建工程模板。
单页面应用
维基百科上对单页面应用的定义如下：
单页应用（英语：single-page application，缩写SPA）是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面。尽管可以用位置散列或HTML5历史API来提供应用程序中单独逻辑页面的感知和导航能力，但页面在过程中的任何时间点都不会重新加载，也不会将控制转移到其他页面。与单页应用的交互通常涉及到与网页服务器后端的动态通信。
——维基百科
从上述的描述当中可以总结出单页面应用的特点：在打开时加载所有资源，不会在交互过程中重新加载其他页面。由于不会有页面跳转，所以相较于传统应用与后端交互过程会设计到更多的动态通信。
前后端分离
前后端分离在近年来已经成为了行业的主流，通过应用服务器+网页服务器的组合，有效地进行解耦。
我们以用户登录这个功能需求为主题，想象一下在传统的动态页面架构下，登录的后端逻辑与登录表单是高度耦合的。因为在JSP或者PHP页面当中，HTML代码和后端登录逻辑是写在同一个文件夹当中的。假如有一天万恶的项目经理要求这个老系统出一个移动端或者桌面端，那么博主能想到的屎山代码做法就是在桌面端构建一个HTTP请求去登录了。这也就是相对于请求这个简单动作而言的，如果这个页面上本身就还有一些Ajax相关的请求操作，或者有一些其他JavaScript的功能对后端逻辑起作用，还是想服用整套系统的话，即便成功了也会束手束脚。
而对于前后端分离的设计，由于前端本身就是通过Ajax技术向后端服务发起请求完成相应的操作。所以如果想要开发一个桌面端，可以按照需求完成界面，同样通过Http，socket或者Websocket等通信协议调用后端提供的API。这样同样的一套后端服务程序在绝大多数场景下能够支撑起Web、桌面端和移动端的应用需求。
当然，如果Web端是一个单页面的应用，我们甚至可以使用Electron等桌面开发工具包将其打包成一个基于Chrome和V8引擎的桌面端APP。
上述两小节简单的介绍是希望能够给刚入门的读者对单页面和前后端分离有一个粗浅的认识，方便后续项目中的学习和认知。下一小节将带大家手把手建立Vue 3的单页面开发环境
Vue 3环境配置
下载安装NodeJS
确保安装的时候将Node的可执行文件添加到了Windows的执行路径当中
对于安装过程中是否要安装额外的工具软件可以根据每位读者的需求决定。需要说明的是，勾选安装额外的工具后需要网络进行下载，网络环境比较差的同学可能需要等待一段时间。
看到上述界面后就代表已经安装完成了，可以打开一个新的命令行工具窗口，输入node -v，如果能够输出版本号就说明已经正确安装完成了。
安装yarn
首先将npm的镜像更换到淘宝源
>npm config set registry https://registry.npm.taobao.org安装yarn作为全局的包管理工具
> npm install --global yarn同样的，安装完成后需要修改yarn的镜像源
> yarn config set registry https://registry.npm.taobao.org/安装Vue 3 CLI工具和typescript
通过yarn分别安装Vue 3 CLI工具和typescript支持
> yarn global add @vue/cli
> yarn global add typescript
安装完成后，在命令行当中使用vue cli工具创建项目
创建Vue 3项目
> vue create my-vue-app手动选择项目的属性
具体配置如下图所示：开启typescript等支持
选择版本的时候需要选择 Vue 3.x的版本 ，最终的配置如下图所示
等待项目创建完成后，依据指示，进入到创建的项目目录运行开发服务器
> cd my-vue-app
> yarn serve 程序运行后可以看到服务器监听的地址
在浏览器中输入上述网址，就可以看到Vue 3项目自带的demo程序。至此Vue 3的基本开发环境就搭建好了。
关于Vue 3和Nodejs相关内容会在后续的博文中陆续进行介绍。
后端部分
本节将介绍后端中常用的RESTful API和Spring Boot框架的基础知识，安装JDK，并通过VSCode插件创建相应的工程模板。
RESTful API
表现层状态转换（英语：Representational State Transfer，缩写：REST）是Roy Thomas Fielding博士于2000年在他的博士论文中提出来的一种万维网软件架构风格，目的是便于不同软件/程序在网络（例如互联网）中互相传递信息。表现层状态转换是根基于超文本传输协议（HTTP）之上而确定的一组约束和属性，是一种设计提供万维网络服务的软件构建风格。符合或兼容于这种架构风格（简称为 REST 或 RESTful）的网络服务，允许客户端发出以统一资源标识符访问和操作网络资源的请求，而与预先定义好的无状态操作集一致化。因此表现层状态转换提供了在互联网络的计算系统之间，彼此资源可交互使用的协作性质（interoperability）。相对于其它种类的网络服务，例如SOAP服务，则是以本身所定义的操作集，来访问网络上的资源。
目前在三种主流的Web服务实现方案中，因为REST模式与复杂的SOAP和XML-RPC相比更加简洁，越来越多的Web服务开始采用REST风格设计和实现。例如，Amazon.com提供接近REST风格的Web服务运行图书查询；雅虎提供的Web服务也是REST风格的。
——维基百科
RESTful API的特征有：
- 统一接口
- 无状态
- 可缓存
- 客户端服务器分离模式
- 分层的系统
由于RESTful API的这些特性，非常适合与单页面应用程序组成前后端分离的架构呈现出非常优秀灵活的Web程序。
Spring Boot框架
上一小节当中我们给RESTful API抛出了一个简单的引子，这一节将介绍RESTful API的应用载体Spring Boot开发框架。
Spring Boot是Pivotal团队在Spring的基础上提供的一套全新的开源框架，其目的是为了简化Spring应用的搭建和开发过程，简化了复杂的配置依赖。利用框架，开发者可以简便的给予Spring框架创建独立执行的，产品级的应用程序。
由于Spring Boot有内嵌的应用服务器，Spring自动配置工具和产品级的功能属性，近年来受到了全球大量开发者的支持和使用，有着非常良好的社区和生态。借助其完备的开箱即用的starter包和生态，不管是简单的RESTful API还是庞大的企业级微服务项目，都能够找到合适的解决方案。
上述灌水希望能够对各位读者对RESTful和Spring Boot有一个比较感性的认识。有很多是个人不太成熟的见解，如果大佬们有不同想法请轻喷。
后端开发环境配置
本小节从JDK的安装配置开始介绍如何配置Spring Boot的开发环境
下载安装VSCode
百度或者直接点击文末的链接进行下载
双击VSCode的安装包，一路next
安装完成后读者可以根据自己的编辑习惯参考网上的资料对VSCode进行相应的个性化配置。
下载安装JDK
可以通过搜索引擎搜索OPenJDK或者使用文末的链接进行下载
下载好后也是双击安装包进行安装
在安装过程需要勾上设置JAVA_HOME环境变量的选项，当然也可以后续自己在Windows中添加
配置JAVA_HOME，CLASSPATH和PATH的工作，各位读者可以搜索其他博文，网上有非常多的教程和资料，这里不再赘述。安装完成后，在命令行中输入
> java --version如果配置正确就能够得到如下版本信息的输出
版本信息根据每位读者使用的JDK发行版不同可能略有差异
安装Maven工具
Maven的安装相对比较简单，只需要下载解压，添加环境变量即可。
下载地址可以自行搜索，或者使用文末的链接
将下载后的压缩包解压到磁盘中合适的位置，并将maven文件夹下的bin目录添加到系统的PATH环境变量当中。
打开一个新的命令行工具窗口，输入mvn进行测试。
如果能够得到类似下图的输出，则证明mvn工具已经可以使用了。
需要说明的是命令行中的错误信息是由于我们并没有在一个maven项目目录中运行mvn命令，工具找不到项目文件。
安装VSCode Java和Spring拓展并创建项目
打开VSCode的拓展管理窗口，我们用到拓展有：
- Extension Pack for Java
- Spring Boot Extension Pack
拓展安装完成后，我们可以使用组合键Ctrl+Shift+P调出VSCode的命令输入窗口进行输入
>Spring Initializr: Create a Maven Project
之后工具会通过列表交互的方式让我们选择Spring的依赖
图中所选的四个项目是博主比较常用的配置，最后选择Selected xxx dependencies确认完成选择后，插件会让我们选择一个目录进行项目的生成。生成完成后会在右下角提示进行打开项目。
打开生成的项目目录后如下图所示
我们在src当中找到默认生成的主类，通常会以XXXAplication进行命名，XXX与之前输入的程序名有关。
由于我们之前安装了Java的拓展包，因此在加载完整个Maven的Project之后会在主函数上出现Run|Debug的字样，点击Run或者Debug可以运行项目或者调试。
不过加载Maven依赖的过程可能在网络不好的环境下需要有点耐心。当然没有耐心的同学可以百度一会如何解决这个问题，后续博主也会专门写一篇博文记录如何提速。（哎呀呀，又挖了一个坑不知道什么时候能填）
如果Run和Debug都能运行的话，后端的基本配置就成功了。由于这篇博文就是来灌项目搭建的水的，所以这个后端项目当中并不存在任何的RESTful API服务，路由拦截器，数据持久化和缓存等等功能后端常见的功能。这些功能会在后续博文中慢慢的加入进来，有兴趣的同学记得关注博主哦。
项目更新地址：mrchipset/simple-okr-web.git
参考资料
- 单页面应用——维基百科
- NodeJS官网
- 修改npm使用淘宝镜像
- Vue 3 CLI安装
- RESTful API——维基百科
- Visual Studio Code
- IBM OpenJDK 下载
- Apache Maven