网站现状分析,电子商务网站系统规划,舆情分析,网站的备案在哪备案吗前端开发入门一
已经有若干年没有web相关的代码了#xff0c;以前主要是用C/C编写传统的GUI程序#xff0c;涉及界面、多线程、网络等知识点。最近准备开发一个浏览器插件#xff0c;才发现业界已经换了天地#xff0c;只得重新开始学习了#xff0c;好在基本的学习能力还…前端开发入门一
已经有若干年没有web相关的代码了以前主要是用C/C编写传统的GUI程序涉及界面、多线程、网络等知识点。最近准备开发一个浏览器插件才发现业界已经换了天地只得重新开始学习了好在基本的学习能力还在而且有AI加持应该不是太大问题Let’s get started.
开发环境
开发工具选择了vsCode是微软开发的一个代码编辑器可以通过插件来增加对不同语言的工具的支持整体来看与eclipse相似。之前教C时总是推荐学生用visual studio后来发现对于初学者VS尤其是后面的界面越来越复杂软件越做越大对于他们来说太复杂于是改成Dev C再后来直接用了OJ平台布置作业结果很多学生直接在Web里面写代码连调试机会都没有了有问题直接甩给老师只能一声叹息现在学生…
回到正题发现现在开发web程序的工具丰富多了要学的知识也多下面简单列一些都是这几天接触的
Node.js
个人理解是一个类似于web服务器的后台工具还是用官网定义说吧Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境用于在服务器端运行JavaScript。 在Windows下直接上官方下载安装即可这样免去了安装IIS或者Apache服务器等到真的应用时再安装方便了开发。安装成功后在VS的terminal里面输入
node -v如果能显示其版本号则表示安装成功。
优点包括
内置 npmNode Package Manager拥有全球最大的开源库生态系统。跨平台支持Windows、Linux、macOS 等操作系统。事件驱动与非阻塞 I/O避免线程阻塞适合高并发场景如聊天服务、API 网关。
TypeScript
是一种由微软开发的开源编程语言它是 JavaScript 的一个超集为 JavaScript 添加了可选的静态类型和基于类的面向对象编程。设计目标是为了更好地支持大型应用程序的开发这样就好理解了就好比C之于C通过类型系统来提高代码的可维护性和可读性TypeScript 的编译器通常被简称为 tsc它是将 TypeScript 代码转换为 JavaScript 代码的工具。——这一点又有点象Java语言。增加了OOP的概念包括类、接口模块等并且允许声明变量类型。
JavaScript 框架
早期好像是Jquery最近下载了一个JQuery项目发现已经是过去时了脚本语言发展真快现在流行的是React、Vue、Angular。
React
React 是一个由 Meta原Facebook 开发的开源 JavaScript 库专注于构建高效、灵活的用户界面UI。它于 2013 年发布现已成为全球最流行的前端框架之一尤其适合构建复杂的大型单页面应用SPA。 核心特征
将 UI 拆分为独立、可复用的组件每个组件管理自己的状态和逻辑。包括函数组件新和类组件。JSX(JavaScript XML)一种类似 HTML 的语法扩展允许在 JavaScript 中直接编写 UI 结构。虚拟DOM(Virtual DOM)避免直接操作真实 DOM 的性能损耗。
React 的生态系统
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如
工具/库用途备注React Router‘实现前端路由SPA 页面切换’Redux全局状态管理适合复杂应用“”Next.js服务端渲染SSR和静态站点生成Next.js服务端渲染SSR和静态站点生成Vite极速构建工具替代 WebpackMaterial-UIUI 组件库快速搭建美观界面
官方文档https://react.dev新版文档 教程推荐
官方教程Tic-Tac-Toe 游戏教程免费课程Scrimba 的 React 入门
Vue
Vue 是一款用于构建用户界面UI的渐进式 JavaScript 框架专注于简化Web 应用的开发适合中小型项目快速开发。
Vue 自动追踪数据变化并实时更新视图。——所见即所得组件化开发将Web页面拆分为独立、可复用的组件每个组件包含自己的逻辑和样式。——那不就是向传统GUI开发那一套靠齐这是好事。虚拟 DOMDocument Object Model代表性的如HTML通过虚拟 DOM 高效更新页面仅渲染变化的部分提升性能。——可以理解为画图程序里面仅更新部分区域。最新版本是Vue 3支持 Composition API、TypeScript 等。官方文档中文VueJs/英文VueJs
react vs Vue 总结React 凭借其组件化、高性能和强大的生态成为构建现代Web 应用的首选之一, 适合中大型项目但对新手需要一定学习成本。若追求快速上手可考虑 Vue若需要极致灵活性和跨平台支持React 是更优选择。
其它一些工具
Webpack是一个现代JavaScript应用程序的静态模块打包器module bundler。它的主要目的是将各种资源如HTML文件、CSS样式表、图片、JavaScript文件等打包成一个或多个bundle以便于在浏览器中使用。
Express
Express 是一个快速、无配置、极简的 Node.js Web 应用框架它为 Web 和移动应用程序提供了一组强大的功能使得构建单页、多页或混合 Web 应用程序变得更加容易。Express 是 Node.js 最流行的中间件框架之一用于处理网站的路由、请求和响应等基础任务。
Mongoose
Mongoose 是一个为 Node.js 环境设计的 MongoDB 对象模型工具库。
它管理着数据验证、业务逻辑以及数据之间的关系并提供了一个简单的接口来与 MongoDB 数据库进行交互。Mongoose 是一个对象数据模型ODM库它封装了 MongoDB 的驱动使得与数据库的交互更加容易和直观。
svg-captcha用于生成验证码
dotenv管理环境变量
关于以上资料多数来自于AI问答
