Vue+SpringBoot项目实战之学习助手(三):技术选型

上一篇讲完整体的技术架构之后，这一篇主要讲以下几点：
前端所用技术、后端所用技术，以及前端项目开发实现

1.前端技术

在这次编写的项目中，所用到技术有

• 1.Vue
• 2.Element-UI
• 3.Jquery
• 4.JavaScript
• 5.axios
• 6.当然还有其他的技术，回头接触过哪些，可以再进行补充。

2.后端技术

• Spring Boot
• Spring Security
• Apache Log4j2
• LomBok
• Spring Data Redis
• MyBatis-Plus
• MyBatis

3.数据库相关

• MySql
• Redis

4.前端项目搭建

前端项目搭建，需要用到以下两个关键的知识点：
1.Node.js

• 是什么？
  Node.js发布于2009年5月，由Ryan Dahl 开发，它是一个基于 Chrome V8 引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。
  由以上描述,可以知道，它是一个平台，这是第一个概念。第二个，是事件驱动, 简单说，你点什么按钮（即产生什么事件），电脑执行什么操作（即调用什么函数）。这是简单来说，从事件角度来说，事件驱动的基本结构是由一个事件收集器、一个事件发送器、一个事件处理器完成。而Windows系统本身是基于“事件驱动”模型的。基于这种情况下，收集器、发送器已经由Window完成部分内容，了解了这两部分信息之后，我们在回头看这块儿知识点，已经有了一个大致的认知。
  至于其他的介绍，我们可以通过各种途径去详细了解它，在这里就不再过多讲解。
• 能干什么？
  只说个人工作中对它的使用和个人理解。只说自己用到的，那些高大上的就不说了。
  1、开发Web应用：Node.js可以与各种Web框架（如Express、Koa等）配合使用，使得开发者可以用JavaScript编写Web应用。
  2、构建实时应用：这个的话，可以通过上面的知识点，可以知道，它是使用了一个“事件驱动”,简单说，我们点击什么，就给我们展示什么。比如说浏览器、音频等，这里只是说一下，本人并没有做过这块儿的项目。
  3、连接数据库：从它的官网中的介绍，可以看到，它是支持连接数据库的，这一点可以去验证。
  4、处理高并发：这个高并发，我们经常听到，既然它能做到实施应用，那这个能做到处理高并发，那就能说的过去了。

怎么用?
当我们的电脑安装完Node.js之后，就有了使用的基础。在前端项目中，Node.js通常用于以下方面。

• 管理依赖项和包，我们使用命令行 npm install 管理前端项目的依赖项和包，可以轻松的安装、更新、管理项目的依赖项。
• 运行打包工具和构建工具，前端应用程序通常使用打包工具（如Webpack、Parcel等）和构建工具（如Gulp、Webpack等）管理和构建代码。Node.js可以运行这些工具，以自动化构建和打包前端应用程序。
• 当然还有其他的应用，大家可以侧重查找自己所属要的知识点。

2.Vue CLI

• Vue CLI是什么？
  我们可以通过查询官网进行查看：https://cli.vuejs.org/zh/guide/
  
• 它能干什么？
  Vue CLI能够帮助我们快速的搭建Vue.js项目和开发环境，额，有些简单，哈哈，但我也找不到其他词了。
• 怎么用？
  可以接着看示例。上面先铺垫了一下知识，要是表示OK，可以略过。

3.做大做强，再创辉煌(Node.js + Vue CLI)

• 使用Vue CLI搭建项目
  首先安装node.js，下载地址如下： https://nodejs.cn/download/
  
• 2.安装之后，打开cmd,查看安装的版本是否成功和正确。
  
• 3.接着安装Vue CLI
  在上面的安装成功的基础上，同样打开 cmd 使用命令行: vue -V。若出现，说明已经安装过，否则进行下一步
  

npm install -g @vue/cli

• 4.创建前端项目
  1.打开一个文件夹，创建一个文件存放项目。
  
  2.输入cmd,输入命令行： vue ui。稍微等待加载即可，
  
  3.图形化界面如下：
  
  设置项目名，项目路径
  
  选择手动
  
  勾选 Router,下一步：
  
  勾选2.x版本，config选择第一个，然后就创建项目。
  
  可以设置一个模版，也可以不选择，看自己
  
  然后等待一会儿，即可，右下角会有一个提示。
  
  然后打开文件夹，看下项目的架构，是否完整
  
  接着，我们使用VSCODE打开创建的项目。
  
  最后我们按照上面所说，启动项目。看到之后，就说明OK了。搞定！收工。