上一篇讲完整体的技术架构之后,这一篇主要讲以下几点:
前端所用技术、后端所用技术,以及前端项目开发实现
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了。搞定!收工。