您现在的位置是:首页 > 技术教程 正文

从前端到前端框架

admin 阅读: 2024-04-01
后台-插件-广告管理-内容页头部广告(手机)

原文地址:从前端到前端框架 - 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

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

尾声

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

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

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索
排行榜