首页 > 其他分享 >从前端到前端框架

从前端到前端框架

时间:2024-03-14 10:31:18浏览次数:11  
标签:Web Vue Java 框架 Spring 前端 JavaScript js

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

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

尾声

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

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

标签:Web,Vue,Java,框架,Spring,前端,JavaScript,js
From: https://blog.csdn.net/2302_79791164/article/details/136700267

相关文章

  • 微前端qiankun框架子应用主和应用之间通信方法
    子应用主应用间如何通信qiankun官方提供了actions通信,qiankun内部使用initGlobalState(state)定义全局状态,该方法执行后返回一个MicroAppStateActions实例,实例中包含三个方法,分别是onGlobalStateChange、setGlobalState、offGlobalStateChange。MicroAppStateActionsonGlob......
  • 通讯框架 t-io 学习——给初学者的Demo:ShowCase设计分析
    前言最近闲暇时间研究Springboot,正好需要用到即时通讯部分了,虽然springboot有websocket,但是我还是看中了t-io框架。看了部分源代码和示例,先把helloworld敲了一遍,又把showcase代码敲了一遍,决定做一个总结。本篇文章并不会解释T-io是如何通讯的,而是从showcase这个给t-io初学......
  • 【前端素材】推荐优质在线绿色有机果蔬商城网页Fulo平台模板(附源码)
    一、需求分析绿色新鲜有机果蔬商城是指一个专门销售绿色、有机、新鲜水果和蔬菜的在线平台,旨在为用户提供优质的、健康的食品购物体验。1、功能分析:绿色新鲜有机果蔬商城是指一个专门销售绿色、有机、新鲜水果和蔬菜的在线平台,旨在为用户提供优质的、健康的食品购物体验。下......
  • 高级前端开发工程师必须要熟练掌握的数组知识
    昨天分享了对象相关的基础知识,今天我们来了解一下JavaScript中另外一个非常重要的数据类型— 数组。1. 什么是数组数组是一种数据结构,用于存储和组织一组相关的元素。在编程中,数组提供了一个有效的方式来处理大量相似或相关的数据。每个值在数组中都有一个唯一的索引......
  • 2024 跨平台/跨语言 技术框架收集
    取舍点:跨平台、跨语言、热更新、性能/占用通信ZeroMQ跨平台、跨语言的高性能异步消息传递库。支持通过各种传输(TCP、进程内、进程间IPC、组播、WebSocket等)的常见消息传递模式(发布/订阅、请求/回复、客户端/服务器等),使进程间消息传递像线程间消息传递一样简单。本地进程间通......
  • Vite构建的前端项目在执行 "npm run dev" 命令时报错 "failed to load vite.config.ts
    报错信息:Failedtoloadconfigfromxx/.../xx/vite.config.tserrorduringbuild:Error:Youinstalledesbuildforanotherplatformthantheoneyou'recurrentlyusing.Thiswon'tworkbecauseesbuildiswrittenwithnativecodeandneedstoinstal......
  • Day40:安全开发-JavaEE应用&SpringBoot框架&JWT身份鉴权&打包部署JAR&WAR
    目录SpringBoot-身份鉴权-JWT技术SpringBoot-打包部署-JAR&WAR思维导图Java知识点功能:数据库操作,文件操作,序列化数据,身份验证,框架开发,第三方组件使用等.框架库:MyBatis,SpringMVC,SpringBoot,Shiro,Log4j,FastJson等技术:Servlet,Listen,Filter,Interceptor,JWT,AOP,反射机制待......
  • 【开源】SpringBoot框架开发人事管理系统
    目录一、摘要1.1项目介绍1.2项目录屏二、功能模块2.1管理员功能模块2.2普通员工功能模块2.3答辩文案三、系统展示四、核心代码4.1查询职称4.2新增留言回复4.3工资申请4.4工资审核4.5员工请假五、免责说明一、摘要1.1项目介绍基于JAVA+Vue+SpringBo......
  • 【开源】SpringBoot框架开发班级考勤管理系统
    目录一、摘要1.1项目介绍1.2项目录屏二、功能模块2.1系统基础支持模块2.2班级学生教师支持模块2.3考勤签到管理2.4学生请假管理三、系统设计3.1功能设计3.1.1系统基础支持模块3.1.2班级学生教师档案模块3.1.3考勤签到管理模块3.1.4学生请假管理模块3.2......
  • 【开源】SpringBoot框架开发假日旅社管理系统
    目录一、摘要1.1项目介绍1.2项目录屏二、功能模块2.1系统介绍2.2QA问答三、系统展示四、核心代码4.1查询民宿4.2新增民宿评论4.3查询民宿新闻4.4新建民宿预订单4.5查询我的民宿预订单五、免责说明一、摘要1.1项目介绍基于JAVA+Vue+SpringBoot+MySQ......