自学WEB服务器搭建01-安装Express+Node.js框架完成Hello World!

一、前言,网站开发扫盲知识

1.网站搭建开发包括什么?

前端、后端(服务端)+数据库

 前端开发主要涉及用户界面(UI)和用户体验(UX),负责实现网站的外观和交互逻辑。前端开发使用HTML、CSS和JavaScript等技术来构建网页,并通过各种工具和框架(如React、Vue.js、Angular等)来简化开发过程。前端开发关注于网页设计、布局、样式、动画效果以及与用户的交互。

后端开发则处理网站的业务逻辑和数据存储。它负责处理用户提交的请求、进行数据处理和存储、与数据库或其他第三方服务进行交互等。后端开发使用各种编程语言(如JavaScript、Python、Java、Ruby等)和框架(如Node.js、Django、Spring、Ruby on Rails等)来构建服务器端应用程序。

一个网站的全部结构

除了前端和后端开发,还有其他一些重要的方面需要考虑,例如数据库设计、安全性、性能优化、测试和部署等。

因此,一个完整的网站搭建和开发过程往往涉及到前端开发和后端开发两个方面的工作,它们密切合作以实现一个功能完整、用户友好且高效的网站。

  1. 结构(Structure):网页的结构是指网页的骨架,包括 HTML/HTML5 标签和元素。这些标签和元素用于组织和呈现网页的内容,如文本、图像、链接等。

  2. 样式(Presentation):网页的样式是指网页的外观和布局,通常由 CSS 代码定义。CSS 用于设置字体、颜色、大小、间距、边框等属性,以控制网页元素的呈现效果。

  3. 行为(Behavior):网页的行为是指网页与用户交互的功能,通常由 JavaScript 代码实现。JavaScript 用于处理用户事件(如点击、滚动等)、动态修改网页内容和样式,以及实现一些特效和交互功能。

  4. 内容(Content):网页的内容是指网页实际展示给用户的文本、图像、音频、视频等资源。内容是网页的核心,决定了网页的主题和目的。

  5. 媒体(Media):网页的媒体是指网页中使用的图片、音频、视频等多媒体资源。这些资源可以通过 HTML 标签嵌入到网页中,为网页增加视觉效果和听觉体验。

  6. 交互(Interaction):网页的交互是指网页与用户之间的互动,通常通过表单、按钮、链接等元素实现。用户可以通过这些元素与网页进行交互,如提交表单、点击按钮等。

  7. 导航(Navigation):网页的导航是指网页中用于引导用户浏览其他页面或内容的链接、按钮和菜单。导航元素有助于用户在网页之间进行跳转,查找所需信息。

2.什么是网页框架?干什么用?

  • 网页框架主要服务于前端和后端

  • 前端框架负责处理网页的呈现、交互和用户体验,通常包括 HTML、CSS 和 JavaScript。
  • 后端框架负责处理服务器端的逻辑、数据存储和与前端框架的通信。

前端框架的例子有:

  1. React:一款由 Facebook 开发的高性能、组件化的 JavaScript 库,用于构建用户界面。
  2. Angular:一款由 Google 开发的前端框架,使用 TypeScript 编写,提供了丰富的功能和组件库。
  3. Vue.js:一款渐进式、组件化的 JavaScript 框架,用于构建用户界面。
  4. jQuery UI:一款基于 jQuery 的用户界面库,提供了丰富的 UI 组件和动画效果。

后端框架的例子有:

  1. Django:一款基于 Python 的 Web 框架,用于构建动态网站和 Web 应用程序。
  2. Flask:一款基于 Python 的轻量级 Web 框架,用于构建 Web 应用程序。
  3. Express(Node.js):一款基于 Node.js 的 Web 开发框架,用于构建高性能、可扩展的 Web 应用程序。
  4. Ruby on Rails:一款基于 Ruby 的 Web 框架,用于构建 Web 应用程序。

二、安装与Hello World

首先假定你已经安装了 Node.js,

win+R-cmd 打开命令终端窗口

1.创建文件目录到本地服务器

接下来为你的应用创建一个目录,然后进入此目录并将其作为当前工作目录。

$ mkdir myapp
$ cd myapp
mkdir myapp

创建一个文件夹叫 myapp。路径位于C:\Users\你的计算机名\myapp

cd myapp 是进入这个文件夹内

2.利用node.js 命令 导入项目依赖管理文件

$ npm init

一直按回车,最后回复yes!

`npm init`是一个命令行工具,用于初始化一个新的npm包(或者项目)。它会引导你通过一系列的问题和选项来创建一个`package.json`文件,以记录和管理你的应用程序的配置信息。

npm的全称是Node Package Manager,即Node.js包管理器。

"init"是"initialize"的缩写,意思是初始化或开始的意思。在计算机领域中,"init"通常用于描述开始或创建一个新的实体、进程或配置。

在软件开发中,"init"常用于表示初始化一个项目、设置默认值或创建初始文件等操作。例如,"npm init"命令用于初始化一个新的npm包,创建一个初始的package.json文件。

通过运行`npm init`命令,你可以提供一些基本的项目信息,例如包的名称、版本、描述、入口文件等。你还可以选择性地提供其他信息,如作者、许可证、存储库URL等。

`npm init`的主要作用包括:

1. 创建`package.json`文件:它是一个用于管理和描述Node.js项目的配置文件。

2. 管理依赖项:在初始化过程中,你可以选择是否在`package.json`中添加项目的依赖项,并指定它们的版本。

3. 保存项目的元数据:`package.json`文件中记录了项目的元数据信息,包括名称、版本、作者、许可证等。

4. 简化项目的管理:通过创建`package.json`文件,你可以使用npm来安装依赖项、运行脚本、发布软件包等。

总之,`npm init`命令是用于初始化一个新的npm包(或者项目),并生成`package.json`文件。这个文件在后续的开发、测试和部署过程中起着重要的作用。

3.安装express依赖包

$ npm install express --save

npm install express --save是一个用于安装Express框架及其依赖项的npm命令。

具体解释如下:

  • npm是Node.js的包管理器,用于管理和安装JavaScript包和依赖项。
  • installnpm命令的一个子命令,用于安装包或模块到当前项目中。
  • express是一个流行的Node.js框架,用于构建Web应用程序和API。这个命令将安装最新版本的Express框架。
  • --save是一个选项,指示npm将包信息保存到package.json文件的dependencies部分。它会自动将依赖项的名称和版本添加到package.json文件中,以便在将来重新安装项目时能够正确地安装依赖项。

因此,当你运行npm install express --save时,npm会下载并安装最新版本的Express框架,并将其作为项目的依赖项保存在package.json文件中。

4.编写Hello world example

4.1在文件夹myapp 中创建个js文件叫app.js(自己命名)

用记事本打开这个js文件,输入hello world 代码

const express = require('express')
const app = express()
const port = 3000app.get('/', (req, res) => {res.send('Hello World!')
})app.listen(port, () => {console.log(`Example app listening on port ${port}`)
})

4.2 在命令行中进入包含app.js文件的目录

4.3 命令窗口输入:

cd myapp  //进入myapp目录!

 node app.js

node app.js是一个运行Node.js应用程序的命令。

具体解释如下:

  • node是Node.js的可执行文件,用于运行JavaScript代码。
  • app.js是一个JavaScript文件,其中包含了Node.js应用程序的代码。

当你运行node app.js时,Node.js解释器将读取并执行app.js文件中的代码。这将启动你的Node.js应用程序,并根据app.js文件中的代码逻辑执行相应的操作。

浏览器输入127.0.0.1:3000  或者http://localhost:3000/

(这个地址是当前服务器的本地地址,不需要域名就可以访问 端口3000是刚才我们指定的,不懂可以问呱呱www.readygpt.cn)

 恭喜完成Hello world!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/141775.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多线程进阶:常见的锁策略、CAS

之前我们所了解的属于多线程的初阶内容。今天开始,我们进入多线程进阶的学习。 锁的策略 乐观锁 悲观锁 这不是两把具体的锁,应该叫做“两类锁” 乐观锁:预测锁竞争不是很激烈(这里做的工作可能就会少一些) 悲观锁…

3.6+铁死亡+WGCNA+机器学习

今天给同学们分享一篇3.6铁死亡WGCNA机器学习的生信文章“Identification of ferroptosis related biomarkers and immune infiltration in Parkinsons disease by integrated bioinformatic analysis”,这篇文章于2023年3月14日发表在BMC Med Genomics期刊上&#…

Mac电脑信息大纲记录软件 OmniOutliner 5 Pro for Mac中文

OmniOutliner 5 Pro是一款专业级的Mac大纲制作工具,它可以帮助用户更好地组织和管理信息,以及制作精美的大纲。以下是OmniOutliner 5 Pro的主要功能和特点: 强大的大纲组织和管理功能。OmniOutliner 5 Pro为用户提供了多层次的大纲结构&…

【QT】QT事件Event大全

很高兴在雪易的CSDN遇见你 ,给你糖糖 欢迎大家加入雪易社区-CSDN社区云 前言 本文分享QT中的事件Event技术,主要从QT事件流程和常用QT事件方法等方面展开,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞关注,小易…

virtualbox安装linux虚拟机访问互联网(外网)的方法

virtualbox安装linux虚拟机访问互联网(外网)的方法 设置方法效果图 设置方法 效果图

Linux系统编程-文件

目录 1、系统编程介绍以及文件基本操作文件编程系统调用文件基本读写练习 2、文件描述符以及大文件拷贝文件描述符大文件拷贝对比试验 3、文件实战练习 1、系统编程介绍以及文件基本操作 系统编程是基于Linux封装好的一些函数,进行开发。 Linux文件信息属性在indo…

用AI解决量子学问题

3 人工智能用于量子力学 在这一部分中,我们提供了有关如何设计高级深度学习方法以有效学习神经波函数的技术评述。在第3.1节中,我们概述了一般情况下定义和解决量子多体问题的方法。在第3.2节中,我们介绍了学习量子自旋系统基态的方法。在第…

微信收款码费率0.38太坑了

作为一个有多年运营经验的商家,我本人在申请收款功能时曾经走过了不少弯路。我找遍了市面上的知名的支付公司,但了解到的收款手续费率通常都在0.6左右,最低也只能降到0.38。这个过程吃过不少苦头。毕竟,收款功能是我们商家的命脉&…

Java笔记三

包机制: 为了更好地组织类,Java提供了包机制,用于区别类名的命名空间。 包语句的语法格式为:pack pkg1[. pkg2[. pkg3...]]; 般利用公司域名倒置作为包名;如com.baidu.com,如图 导包: 为了能够…

Python学习 day01(注意事项)

注释 print语句 变量 数据类型的转换 运算符 / 的结果为浮点数。若// 的两边有一个为浮点数,则结果为浮点数,否则为整数。 字符串 7. 精度控制 8. input()

五、点击切换、滚动切换、键盘切换

简介 通过事件改变当前展示的信息组件,交互的事件有点击上下切换、鼠标轮动上下切换、键盘上下键切换。欢迎访问个人的简历网站预览效果 本章涉及修改与新增的文件:App.vue、public 一、鼠标点击上下箭头切换 <template><div class="app-background"…

python学习--类的浅拷贝与深拷贝

变量的赋值操作 只是形成两个变量&#xff0c;实际上还是指向同一个对象 浅拷贝 Python拷贝一般都是浅拷贝&#xff0c;拷贝时&#xff0c;对象包含的子对象内容不拷贝&#xff0c;因此&#xff0c;源对象与拷贝对象会引用同一个子对象 深拷贝 使用copy模块的deepcopy函数…

古彝文识别:文化遗产的数字化之旅

目录 &#x1f345;前言&#x1f353;古彝文介绍&#x1f353;古彝文识别的重难点&#x1f352;原籍难以获取&#xff0c;传统翻译过程繁琐&#xff0c;周期长。&#x1f352;版式多样&#xff0c;笔画相近。&#x1f352;图像质量差&#xff0c;手写识别难。&#x1f352;古彜…

成为威胁:网络安全中的动手威胁模拟案例

不断变化的网络威胁形势要求组织为其网络安全团队配备必要的技能来检测、响应和防御恶意攻击。然而&#xff0c;在研究中发现并继续探索的最令人惊讶的事情是&#xff0c;欺骗当前的网络安全防御是多么容易。 防病毒程序建立在庞大的签名数据库之上&#xff0c;只需更改程序内…

Vue组件库Element

目录 Vue组件库ElementElement简介Element快速入门环境配置Element常用组件Table表格Table表格演示Table表格属性详解 Pagination分页Pagination分页演示Pagination分页属性详解Pagination分页事件详解 Dialog对话框Dialog对话框组件演示Dialog对话框属性详解 Form表单Form表单…

使用nvm快速切换node版本,windows安装nvm实现管理node版本

使用nvm node管理工具管理node版本&#xff0c;可以做到node版本随意切换&#xff0c;能快速的降低、升高node版本 这里写目录标题 使用nvm node管理工具管理node版本&#xff0c;可以做到node版本随意切换&#xff0c;能快速的降低、升高node版本安装和使用步骤&#xff1a; 一…

XC6206 低压线性稳压器 300mA低功耗LDO

XC6206系列是一款采用CMOS和激光修整技术制造的高精度、低能耗、3端子、正电压调压器。该系列提供了一个大的电流和一个明显的小的辍学电压。 XC6206由限流器电路、驱动器晶体管、精确参考电压和纠错电路组成。该系列兼容低ESR陶瓷电容。电流限制器的折叠电路作为短路保护以及输…

如何通过Gunicorn和Niginx部署Django

本文主要介绍如何配置Niginx加载Django的静态资源文件&#xff0c;也就是Static 1、首先需要将Django项目中的Settings.py 文件中的两个参数做以下设置&#xff1a; STATIC_URL /static/ STATIC_ROOT os.path.join(BASE_DIR, static) 然后在宝塔面板中执行python manage.…

86、Redis 的 value 所支持的数据类型(String、List、Set、Zset、Hash)---->String相关命令

本次讲解要点&#xff1a; String相关命令&#xff1a;String是指value中的数据类型 启动redis服务器&#xff1a; 打开小黑窗&#xff1a; C:\Users\JH>e: E:>cd E:\install\Redis6.0\Redis-x64-6.0.14\bin E:\install\Redis6.0\Redis-x64-6.0.14\bin>redis-server.…

10.12广州见 | 第十六届智慧城市大会报名通道全面开启

第十六届中国智慧城市大会 将于10月12日至13日 在广州举办 智慧城市是数字中国、智慧社会的核心载体&#xff0c;是数字时代城市发展的高级形态。由中国服务贸易协会、中国测绘学会、中国遥感委员会主办的第十六届中国智慧城市大会&#xff0c;将以“数实融合开放创新智引未…