小龙报个人主页作者简介C研发嵌入式机器人方向学习者❄️个人专栏《AI》✨永远相信美好的事情即将发生文章目录前言一、什么是前端二、前端在哪些应用场景中出现2.1 网站2.2 小程序2.3 浏览器插件三、客户端vs前端?四、前端最重要的三个技术4.1 HTML— 网站的骨架4.2 CSS — 让网页更美观4.3 JavaScript — 给网页加上交互4.4 前端最重要的两个网站GitHub npm4.4.1 GitHub —— 开源代码集散地4.4.1.1 什么是GitHub4.4.1.2 GitHub 的主要作用4.4.1.3 GitHub 的优势4.4.2 npm —— 前端库与依赖管理的仓库4.4.2.1 什么是npm4.4.2.2 npm 的主要作用4.4.2.3 npm 的优势五、用好 AI 编写前端必备的 4 个概念5.1 框架 (Framework)5.2 模板 (Template/Boilerplate)5.3 SDK5.4 库 (Library)5.5 总结六、什么是后端6.1 后端的概念6.2 后端的编程语言6.2.1 JavaScript (Node.js)6.2.2 Python6.3 新手需要掌握的4个后端概念6.3.1 API应用程序接口6.3.2 服务器Server6.3.2.1 云服务器Cloud Server6.3.3.2 Web服务器HTTP Web Server6.3.3.2 Web应用程序6.4 数据库Database6.4.1 对象存储 (Object Storage)总结与每日励志前言互联网应用的运行离不开前端与后端的协同配合二者相辅相成构筑起完整的网络服务体系。很多编程新手对前后端边界、核心技术、开发概念认知模糊难以理清学习思路。本文通俗易懂地拆解前后端核心定义、应用场景、基础技术详解框架、API、服务器等关键概念适配AI时代编程学习需求帮助零基础学习者快速建立完整的开发知识体系。一、什么是前端简单的说前端就是你在浏览器中直接看到并与之互动的部分比如按钮、图片、文字和动画等。它主要由HTML、CSS和JavaScript构成负责将网站或应用的内容展示得漂亮、布局合理并且响应你的操作与后端的数据和业务逻辑进行交互。二、前端在哪些应用场景中出现2.1 网站网站是最常见的前端应用。无论是企业官网、电商平台还是博客论坛前端都负责页面的结构、样式以及与用户的互动。当你在浏览器中输入网址访问网站时实际上就加载了前端代码这些代码决定了页面的布局和动态效果。2.2 小程序小程序是国内的一种特殊的前端展示例如微信小程序、支付宝小程序等。这些应用同样运行在专用的“浏览器”或容器中。因为开发语言和展示方式与网站H5类似也归属于前端范畴。2.3 浏览器插件三、客户端vs前端?那么我们平时开发手机上的应用。例如iOS应用和安卓应用那是属于前端吗结论我们平时说前端只是指网站、小程序、浏览器插件的开发。iOS应用和安卓应用一般我们叫它客户端。详细的区分主要是按照所使用的技术进行区分的还有更多端的说法可参考●前端专指那些运行在浏览器或小程序容器中的代码即网站、小程序、浏览器插件等并且主要依赖于HTML、CSS和JavaScript这三大技术栈。●客户端iOS/Android/鸿蒙这些平台开发的应用是原生客户端应用主要使用Swift/Objective-CiOS或 Kotlin/JavaAndroid进行开发虽然它们也涉及界面但通常不属于前端的范畴。●桌面端Windows或者MacOS上的应用开发我们叫它桌面端。●大前端同时包含前端客户端桌面端你可以说它是大前端小提示理论上来说你学会了前端的3个技术(HTML/CSS/JavaScript)之后也可以客户端和桌面端。小结:●前端的范围网站、小程序、浏览器插件等运行在浏览器或类似容器中的代码●不属于前端的范畴iOS/Android/鸿蒙的原生客户端应用。●重点前端代码的主要任务就是构建用户界面让用户能在页面上浏览内容并进行交互四、前端最重要的三个技术在前端开发中有三项基础技术是每个开发者必须掌握的HTML、CSS和JavaScript。它们分别承担着不同的角色协同构成了现代前端开发的核心。虽然目前AI可以很方便地帮我们编写代码但是你最起码得清楚它们分别是什么4.1 HTML— 网站的骨架HTML超文本标记语言HyperText Markup Language负责定义网页的基本结构和内容。你可以把 HTML 想象成是网页的“骨架”它提供了所有内容的基本框架比如文本、图片、链接、按钮等。●基本概念 使用各种标签如h1、p、div、a、img等来描述网页的不同部分。●主要作用 定义网页所有的元素和结构帮助浏览器解析并显示页面内容。●示例!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8title我的第一个网页/title/headbodyh1欢迎来到我的网站/h1p这里是一个简单的HTML示例。/p/body/html4.2 CSS — 让网页更美观CSS层叠样式表Cascading Style Sheets主要用于为HTML结构添加样式。可以把 CSS 看作是给网页搭配衣服它使得静态的HTML内容变得美观和有吸引力同时也负责页面的布局和响应式设计。●基本概念* 通过选择器如标签选择器、类选择器、ID选择器为HTML中的元素设置颜色、字体、间距、布局以及动画效果等一系列样式CSS的代码写在style标签中。●主要作用 美化网页让网站在各种设备上都能呈现一致而吸引人的视觉效果。●示例!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8title美化网页的示例/titlestylebody{background-color:#f5f5f5;font-family:Arial,sans-serif;margin:20px;}h1{color:#333;}p{color:#666;line-height:1.6;}/style/headbodyh1欢迎来到我的网站/h1p这是一个使用CSS美化的网页示例。/p/body/html4.3 JavaScript — 给网页加上交互JavaScript 是一门编程语言它使得网页具备交互性和动态效果。通过JavaScript能够响应用户点击、输入、滚动等行为使网页不再是静态的而是充满生命力和互动性。●基本概念 JavaScript 是一门功能强大的脚本语言支持变量、函数、条件语句、循环以及各种数据结构和编程范式。JavaScript的代码写在script标签中。●主要作用提供动态效果和交互功能如表单校验、数据实时加载、动画效果等以及与后端服务器交互数据。●示例!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8title动态网页示例/title/headbodybutton idmyButton点击我/buttonscriptdocument.getElementById(myButton).addEventListener(click,function(){alert(按钮被点击了);});/script/body/html扩展说明除了在浏览器中运行外借助 Node.jsJavaScript 还可以用于后端开发实现全栈 JavaScript 开发。所以从理论上来说学习了JavaScript你可以不用学习其他编程语言了。小结:●HTML 提供了网页的结构和基础内容相当于建筑的框架。●CSS 负责网页的外观和样式使内容呈现得更加美观动人。●JavaScript 为网页添加动态行为和交互功能也是前端必备的编程语言4.4 前端最重要的两个网站GitHub npm在前端开发中GitHub 和 npm是两个必不可少的平台。它们不仅是新手探索前端领域的重要入口更是专业开发者构建、分享和复用代码的核心基地。尤其在 AI 时代通过这两个平台我们可以更高效、更合理地找到自己需要的模板、框架、SDK 以及库从而加速应用的开发。4.4.1 GitHub —— 开源代码集散地4.4.1.1 什么是GitHubGitHub官网:是目前世界上最大的代码托管和协作平台。无论你是刚入门的小白还是经验丰富的开发者都可以在 GitHub 上找到成千上万的开源项目和资源。4.4.1.2 GitHub 的主要作用●分享与协作开发者可以在 GitHub 上托管代码与世界各地的程序员共同协作不断迭代和完善项目。●模板和 boilerplate 资源很多优秀的项目早已整理出标准化的模板或脚手架boilerplate帮助新手从零开始构建网站或应用。●学习和启发通过浏览和参与开源项目你可以学习到先进的开发理念、架构设计以及实践经验。4.4.1.3 GitHub 的优势●社区力量全球活跃的开发者社区不断为项目贡献代码、文档和经验。●代码安全和版本管理借助 GitHub 的版本控制系统开发者可以跟踪代码变更轻松管理更新和问题修复。●工具生态Github拥有很多的工具生态例如你如果把你的代码在Github托管可以使用Vercel轻松部署项目。4.4.2 npm —— 前端库与依赖管理的仓库4.4.2.1 什么是npmnpm官网: Node Package Manager不仅是 Node.js 的包管理工具更是全世界最大的 JavaScript 库和工具的仓库。通过 npm我们可以快速下载并集成各种功能完善的工具库和框架从而大大降低开发门槛。4.4.2.2 npm 的主要作用●依赖管理帮助开发者管理项目中各种第三方库和模块确保版本一致和依赖正确。●丰富的资源库不仅包含前端框架如 React、Vue 等的官方包也囊括了许多辅助开发的小工具和插件。●快速原型开发通过 npm可以轻松集成已有的解决方案加速从想法到产品的转换。4.4.2.3 npm 的优势●便捷的安装与更新借助 npm 命令可以快速安装所需的包并自动处理包之间的依赖关系。常用的两个命令如下○npm install安装项目的依赖○npm run dev运行起来项目●生态系统完善依托于庞大的社区和不断更新的资源库无论你需要 UI 组件、数据处理工具还是开发辅助工具都可以在 npm 中找到。总结:●GitHub 是一个开源代码的集散地提供了大量的模板、框架和开发实例同时也是你学习和参与开源社区的好地方。●npm 则是管理前端以及 Node.js依赖的标准平台拥有海量的库和工具让你在构建项目时能轻松集成所需功能。在 AI 时代通过合理利用 GitHub 和 npm 的资源我们可以更高效地开发应用不必从零开始而是专注于创新和业务逻辑的实现。五、用好 AI 编写前端必备的 4 个概念在 AI 时代编程更多的是将现有的优秀资源合理地进行组合而不是从零开始写代码。对于没有编程基础的新手而言掌握这4个概念能够让你更好的和AI进行沟通并且从Github和npm上找到和使用你想要的工具。5.1 框架 (Framework)框架是一种预先定义好的开发结构它为你构建应用提供了基础模板和运行规则。常见的前端框架有 React/Next.js 以及 Vue/Nuxt.js。Next.js最为推荐的框架AI友好 生态丰富Nuxt较为推荐Vue的语法对新手友好在使用框架时通常需要关注以下两个重要概念●页面Page 页面代表应用中的一个独立界面或路由。例如一个电商网站可能会有首页、产品详情页和购物车等不同页面。框架通常内置路由管理帮助你轻松管理各个页面之间的导航和状态。●组件Component 组件是页面的基本构建单元是可重复使用的 UI 模块。无论是按钮、输入框还是整个导航栏都可以被看作组件。组件化结构不仅提高了开发效率还使得代码更易维护和扩展。5.2 模板 (Template/Boilerplate)模板或脚手架是一份预先配置好的框架代码 业务代码。它通常包含了项目的目录结构、配置文件、常用依赖以及某个业务的基础代码。比如你可以选取一个博客的模板修改成为自己的博客或者可以选择一个导航站的模板修改成为自己的导航站。注Github上有许多开源免费的模板Next.js和Nuxt.js官方也有很多免费的模板Next.js Starter TemplatesNuxt Templates模板的作用●快速建立项目节省环境搭建和配置的时间。●提供最佳实践和统一的编码风格。●上手就可以用的UI样式●降低新手的学习曲线让你专注于业务逻辑而不是底层配置。小结使用模板可以大大提升开发效率尤其在 AI 时代许多模板不仅支持前后端联调还集成了常用的 AI SDK 或工具让你能够迅速搭建出具备智能化功能的应用。5.3 SDKSDKSoftware Development Kit软件开发工具包是一组用于构建应用的工具和资源的集合。一个 SDK 通常包含●API应用程序接口 提供标准化的调用接口让你可以方便地使用某项服务或技术而不需关心底层的实现细节。●文档和示例代码帮助你了解如何集成和使用这些 API 以及最佳实践。●工具和库用于简化开发流程比如调试工具、测试环境和代码生成器。在 AI 开发中的作用 目前很多 AI 服务都提供了专门的 SDK。通过集成SDK你可以快速为你的应用加上 AI 能力而不必从零开发复杂的算法和服务。例如OpenAI就提供了Node.js和Python的SDK。小结SDK 为开发者提供了一站式的集成解决方案使得将软件功能或者AI 功能嵌入到应用中变得简单、高效。5.4 库 (Library)库是一组预先编写好的、可重用的代码集合用于解决特定问题。与框架不同库通常不规定整个项目的结构而是专注于提供某项功能或算法的实现。作用●简化代码通过调用库中的函数你可以轻松实现复杂的功能。●提高效率避免重复造轮子利用别人已经写好的、经过检验的代码。●灵活性高你可以根据需要选择和替换不同的库而无需受到整个项目框架的限制。举例 在前端开发中可能会使用图形库例如Apache ECharts实现数据可视化或使用日期处理库Moment.js来简化时间计算。选择合适的库可以让你的开发工作更专注于业务需求而不必关注基础逻辑的实现。小结库是实现特定功能的“小工具箱”它们可以独立使用也可以与框架和模板组合构建出功能丰富的应用。5.5 总结理解并合理运用框架、模板、SDK 和 库这四大概念是在 AI 时代高效开发的关键。它们各自解决了项目搭建、结构规划、功能集成和代码复用等问题●框架为你的项目提供整体结构和组件化设计。●模板为你提供一个快速启动项目的预设基础。●SDK提供集成特定业务或AI功能的完整工具包。●库为你提供实现具体功能的代码集合。当你清楚地理解这些概念后你不仅能够更准确地向 AI 提问和搜索解决方案还能更有信心地设计和构建自己的应用程序。通过整合这些资源你将能够更快速地从想法迈向实际产品真正玩转 AI 编程时代。六、什么是后端6.1 后端的概念后端是用户看不见的应用“幕后引擎”负责处理业务逻辑、数据存储、安全验证及资源调度。简单来说后端是支撑前端运行的“大脑”和“数据库”确保用户的请求能被正确处理并返回结果。●前端关注用户界面与交互浏览器、小程序中运行。●后端关注数据处理、数据存储、安全性和业务逻辑服务器上运行。●协作关系前端通过API调用后端服务后端返回JSON/XML格式数据供前端展示。6.2 后端的编程语言后端的编程语言相比前端只有JavaScript来说要丰富很多例如Python、Java、Golang、PHP、C#等。但是对于新手而言特别是AI时代学习开发那么更推荐学习两个编程语言JavaScript和Python。如果只推荐一个那就一定是JavaScript。6.2.1 JavaScript (Node.js)●特点基于事件驱动的异步编程适合高并发场景可复用前端的JavaScript的工具。●应用场景实时应用聊天室、API 服务、微服务。●常用框架○Express轻量灵活生态丰富。○NextJs企业级框架支持 TypeScript 和模块化开发。○Koa更现代的 Express 替代品。6.2.2 Python●特点语法简洁易读适合快速开发拥有丰富的库和框架。●应用场景Web 开发、数据分析、人工智能、自动化脚本。●常用框架○DJangGO全功能 Web 框架适合中大型项目。○Flask轻量级框架适合小型项目或 API 开发。○FastAPI高性能 API 框架支持异步编程。6.3 新手需要掌握的4个后端概念6.3.1 API应用程序接口API (应用程序编程接口)是一组预先定义的规则和工具让不同的软件程序能够相互通信和交换数据。API的主要用途:让应用程序能调用其他程序的功能隐藏复杂的实现细节标准化不同程序之间的数据交换打个比方:●API就像餐厅的服务员 - 你(客户端)不需要直接跑到厨房(服务器)去点菜和取餐而是通过服务员(API)来传达你的需求和获取结果●或者可以把它想象成插座 - 你不需要了解电力是如何产生和传输的,只要遵循插座的规格(API规则)就能使用电力例如你想开发一个天气的应用那么就可以去高德地图API上注册一个开发者账号调用其中的天气查询API你就直接拥有了获取天气查询的能力了还有现在的各个大模型都是有提供API调用的例如DeepSeek开放平台就提供了DeepSeekAPI调用文档6.3.2 服务器Server如果我们单独说服务器的时候一般是指托管前后端代码和数据的远程计算机硬件7x24小时响应请求。但是现在其实基本上不会有人购买一台服务。但当我们说到Server的时候其实有不同的Server的概念容易混淆的是云服务器和web服务器的概念。并且我也来解释一下我们的web应用程序和这两者之间的关系服务器●可以理解为远程的电脑●24小时运行你的程序●处理用户的请求6.3.2.1 云服务器Cloud Server当我们现在说买一台服务器的时候99%的场景是指去阿里云或者腾讯云上购买一台云服务器也就是Cloud server的概念图片是阿里云的海外官网为了让大家看到Cloud Server。让我们切到国内版本的阿里云可能大家看得更清楚这边我们其实有非常多的服务器可以选择大部分场景只要选择轻量应用服务器即可。如果购买云服务器之后你可以简单的理解为你购买了一台远程的7x24不关机的计算机的一部分计算资源。不用去关心它是什么VM或者容器的概念。6.3.3.2 Web服务器HTTP Web Server当我们提到Web服务器的时候其实是指的安装在服务器上的软件例如Nginx这样的软件。他们全称是HTTP Web Server。这类软件最核心的功能是帮助你处理HTTP请求和一些静态的资源用户发过来的请求会首先经过HTTP Web Server然后再到我们的应用程序。当然我们应用程序处理之后的数据也会经过HTTP Web Server再返回给用户。6.3.3.2 Web应用程序理解了前面两个Server之后我们再来看我们为什么需要云服务器因为我们需要一台服务器来托管我们的Web应用程序。通过下面这张图你就能够理解云服务器、Web服务器和我们的Web应用程序之间的关系了。6.4 数据库Database数据库●就像远程的Excel表格●存储应用的各种数据●需要时随时查询使用我相信数据库的概念大家或多或少都能理解。如果你实在没有接触过数据库那你可以理解为这是在服务器上放的Excel表这些表中保存了你项目的所有数据。当你需要数据的时候你的应用程序会从这个Excel表上获取数据。●数据库两大分类关系型数据库和NoSQL数据库●ORM工具通过代码操作数据库如Prisma Sequelize)避免手写SQL6.4.1 对象存储 (Object Storage)对象存储●专门存放文件的仓库●主要存图片、视频等大文件●存完后可以通过网址访问对象存储的概念可能对大家很陌生那我来问几个问题1.你有没有想过你平时上传的照片和视频是放在哪儿的是放到数据库里吗2.你有没有想过怎么样才能让图片可以通过链接访问是的对象存储就是用来解决这两个问题的我们平时上传的照片和视频一般都是放在对象存储里面的。一旦放在对象存储里面它就能够通过链接进行访问。照片和视频这种大文件我们都不会用数据库存储而是一般会在数据库里面存储对象存储返回的链接url地址。总结与每日励志✨本文系统科普了前后端开发的完整基础知识清晰划分前端、客户端、桌面端的应用边界详解HTML、CSS、JavaScript三大核心技术同时介绍后端开发语言、API、服务器、数据库等关键概念讲解框架、模板、SDK、代码库等高效开发工具贴合当下AI编程学习趋势帮助零基础学习者理清开发逻辑、搭建系统知识框架。技术学习从无一蹴而就唯有脚踏实地积累、耐心打磨代码、主动攻克难点紧跟技术迭代节奏持续深耕精进方能不断突破自我在编程道路上稳步前行、收获成长。