从前端到前端框架

原文地址：从前端到前端框架 - Pleasure的博客

下面是正文内容：

前言

这是一篇笔记，主要用于帮助刚入门Web全栈不久的同学。以及个人思路的记录整理。

如果你是一个全栈大师就可以直接跳过了。当然想加深一下理解也没有问题。

可能会较多谈谈我的个人见解。

大家点个关注收藏一下。

正文

前端框架的诞生

要成为一个计算机全栈开发工程师，下面的路线基本上是必不可少的。

学习计算机软件应用网页编辑，基本上都是先从前端的HTML，CSS，以及JavaScript开始，以PHP语言为辅辅助语言（后端）。

PHP作为一种服务器端脚本语言，自1994年开发以来，因为开源简单易用而广受欢迎。支持表单提交数据库连接等功能，所以非常适合用来编写一些简单的动态网页，以及帮助初学者加深对Web应用程序和网站开发的理解。

然而，PHP语言并不能满足复杂的或者是企业级应用系统的开发，所以在实际应用中使用的较少。

因为在实际应用中不难发现随着网站需要引入的元素增多，需要定义的标签和属性也成倍地增多。这就会导致HTML，CSS，JavaScript等浏览器读取的网页结构文件更加的复杂，动则上千上万行，非常不利于后期的更新维护。

所以前端框架由此应运而生，当然前端框架主要包括Vue.js，React，Angular三种。

但是现在市场上的招聘还是以要求掌握Vue语言为主要趋势。

当然要成为Web全栈工程师，前后端都得兼顾，这也有利于对行业需求的理解。

算算涉足Web全栈领域有小半年也算入门了，至少能自己编写一些小项目，但是为了目前就业形势的需要，不得不开始涉足前端框架的范畴。

VUE中一些常见定义的扫盲

概念越来越抽象了，差点没理解……仅供大家参考，方便后续忘记定义的时候查阅。

Node.js： 是一个基于Chrome V8引擎的JavaScript运行环境，用于在服务器端运行JavaScript代码。它允许开发人员使用JavaScript构建服务器端应用程序。

Vue.js： 是一个用于构建用户界面的JavaScript框架，运行在浏览器中。Vue.js帮助开发人员构建动态且交互式的前端应用。由尤雨溪（Evan You）于2014年创建。

DOM（Document Object Model）：是一种编程接口，用于以树形结构表示文档，即网页的结构。提供了一种将文档解析为由节点（node）组成的树形结构的方式。

BOM（Browser Object Model）：是浏览器提供的一组对象，用于控制浏览器窗口和与用户交互。

npm（Node Package Manager）：是Node.js的包管理工具，广泛用于JavaScript生态系统中。类似于Linux系统中的apt，yum。

Vue CLI（Vue Command Line Interface）：是用于Vue.js项目的官方脚手架工具。Vue CLI提供了一系列命令和配置选项，用于快速搭建、开发和管理Vue.js项目，帮助开发者更高效地构建现代化的Web应用程序。

Webpack：是一个用于打包JavaScript应用程序的静态模块打包工具。Webpack将应用程序的各个模块打包成一个或多个 bundle，以便在浏览器中加载。

Vue项目文件夹下一些默认文件的作用：

• src 文件夹：
  • App.vue文件 是整个应用的主组件，包含了应用的整体结构和布局。
  • main.js 文件 是整个应用的 JavaScript 入口文件，初始化了 Vue 实例并挂载到 HTML 页面上。
  • components文件夹 通常包含可复用的 Vue 组件，这些组件可以在应用的不同部分中被引用。
  • assets文件夹 用于存放应用中的静态资源，如图片、字体、CSS等。
• public 文件夹：
  • index.html 文件 是整个应用的入口 HTML 文件，它包含一个根节点用于挂载 Vue 应用。
  • 一些不需要 webpack 处理的静态资源。
• node_modules 文件夹：包含了项目依赖的所有第三方 npm 模块。
• package.json 文件：是项目的配置文件，包含了项目的元数据、依赖信息、脚本命令等。
• vue.config.js 文件：是 Vue CLI 的配置文件，用于配置 webpack、代理、自定义路径别名等。

public文件夹和src文件夹下静态文件资源的区别：

public文件夹下的资源不会经过 webpack 的处理，不会被添加哈希值，直接复制应用，并且它们的路径在构建输出中会保持不变，即相对路径将被保留。一般用于不会被更新的资源比如说企业的logo，字体等。

src文件夹下的资源会被 webpack 进行处理，例如通过 url-loader 或 file-loader 将图片嵌入到 JavaScript 文件中或复制到构建输出目录作为模块。这些图片通常会被添加哈希值，以便实现缓存控制，避免浏览器缓存旧版本的文件。

总结一下，Vue作为网页前端一般配合Spring Boot后端（或者Express.js后端）进行使用，来开发企业级应用工程。

Spring中一些常见的定义扫盲

同样抽象的概念，只要知道大致关系和用途就差不多了吧……快被绕晕了。

Spring 是一个用于构建企业级应用的开源框架，它提供了广泛的基础设施支持和构建块，使得开发者能够更容易地设计、构建、测试和部署复杂的企业级应用。需要配置Java 运行时环境（JRE）或 Java 开发工具包（JDK），以及 Maven构建工具。

Maven（Apache Maven）：是一个用于构建和管理 Java 项目的强大工具。它提供了一种标准的项目结构、项目对象模型和一套插件，使得项目构建、依赖管理和项目报告等任务变得更加简单。

Project Object Model（POM）：项目对象模型，POM 是一个 XML 文件，包含了项目的元数据和配置信息。

P.S.:Ngnix作为反向代理服务器，一般用于Spring Boot的客户请求转发，处理静态资源等分流操作。内存消耗相对较低。

SSM 框架：是指 Spring + Spring MVC + MyBatis 框架的组合，它们是三个独立的开源框架，常常一起使用来构建 Java Web 应用程序。

Tomcat ：是一个开源的 Java 服务器，用于托管 Java Servlet、JavaServer Pages（JSP）和其他基于 Java 的 Web 应用程序。是 Apache 软件基金会的一个项目，也是目前最流行的 Java Web 服务器之一。

P.S.:Apache 是一个通用的 Web 服务器，支持多种语言和技术。但是Tomcat主要支持和处理 Java 相关的技术以及应用程序。

Spring 是一个基于 Java 的开发框架（工具集），Node.js 是一个基于 JavaScript 的运行时环境。

Spring Boot是Spring提供的一个子项目，专门用于快速构建Spring应用程序。Spring应用程序包括：Spring Framework核心工具，Spring Data用于数据获取，Spring AMQP用于消息传递，Spring Security用于认证授权，Spring Cloud用于服务管理。传统方式构建导入依赖项目配置繁琐，还可能会导致Java包冲突。

Spring Boot特性：起步依赖（Maven坐标——完成功能所需的所有坐标），自动配置（启动器依赖申明），内置了嵌入式的Web服务器（Tomcat——启动时非常的方便），不需要XML配置。

开始之前

环境搭建：执行接口文档中的big_event.sql脚本，准备数据库表。创建springboot工程，引入对应的依赖（web，mybatis，mysql驱动）。配置文件application.yml中引入mybatis的配置信息。创建包结构，并准备实体类。

正式开始创建工程

需要准备的软件以及环境。

Nodejs，JDK环境，以及软件应用IDEA。

具体的使用方式我已经在之前的博文中提及过了，可以参考下面的文章链接。

CSDN博客地址：

https://yiming1234.blog.csdn.net/article/details/136669437

https://yiming1234.blog.csdn.net/article/details/136120573

具体的操作步骤就等我下一篇文章吧。（没空写了）

尾声

后面打算会涉及系统项目的具体搭建步骤。

一个全栈工程师需要掌握的最基本的内容。