Self-study WEB backend 01-Install Express+Node.js framework to complete Hello World!

1. Introduction, website development literacy knowledge

1. What does website construction and development include?

front end

Front-end development mainly involves user interface (UI) and user experience (UX), and is responsible for realizing the appearance and interaction logic of the website. Front-end development uses technologies such as HTML, CSS, and JavaScript to build web pages, and uses various tools and frameworks (such as React, Vue.js, Angular, etc.) to simplify the development process. Front-end development focuses on web design, layout, style, animation effects, and interaction with users.

Mainly use javascript+HTML+CSS to write code files, and rely on the browser engine to run (the operating environment is like a car that cannot live without the track, a dancer that cannot live without the stage, and a fish that cannot live without water). The mainstream one is Google Chrome. V8 engine! Therefore, opening the front-end code file directly with a browser is equivalent to running it!

Backend (server)

Back-end development handles the business logic and data storage of the website. It is responsible for processing requests submitted by users, performing data processing and storage, interacting with databases or other third-party services, etc. Backend development uses various programming languages (such as JavaScript, Python, Java, Ruby, etc.) and frameworks (such as Node.js, Django, Spring, Ruby on Rails, etc.) to build server-side applications.

Similarly, the back-end code files also need an engine to run. That is a running environment like Node.js installed on the server or computer!

Database ( Database Management System (DBMS )

Mainly stores user data

The entire structure of a website

Apart from front-end and back-end development, there are other important aspects to consider such as database design, security, performance optimization, testing and deployment, etc.

Therefore, a complete website construction and development process often involves front-end development and back-end development, which work closely together to achieve a fully functional, user-friendly and efficient website.

Structure: The structure of a web page refers to the skeleton of the web page, including HTML/HTML5 tags and elements. These tags and elements are used to organize and present the content of a web page, such as text, images, links, etc.
Style (Presentation): The style of a web page refers to the appearance and layout of the web page, usually defined by CSS code. CSS is used to set properties such as fonts, colors, sizes, spacing, borders, etc. to control the presentation of web page elements.
Behavior: The behavior of a web page refers to the function of the web page interacting with the user, usually implemented by JavaScript code. JavaScript is used to handle user events (such as clicks, scrolling, etc.), dynamically modify web page content and styles, and implement some special effects and interactive functions.
Content: The content of a web page refers to the text, images, audio, video and other resources actually displayed to users on the web page. Content is the core of a web page and determines its theme and purpose.
Media: The media of a web page refers to the multimedia resources such as images, audio, and video used in the web page. These resources can be embedded into web pages through HTML tags to add visual effects and auditory experience to web pages.
Interaction: The interaction of web pages refers to the interaction between web pages and users, usually through elements such as forms, buttons, links, etc. Users can interact with web pages through these elements, such as submitting forms, clicking buttons, etc.
Navigation: The navigation of a web page refers to the links, buttons and menus in a web page that are used to guide users to browse other pages or content. Navigation elements help users jump between web pages and find the information they need.

2. What is a web frame? What is it for?

Web frameworks mainly serve the front-end and back-end .
Front-end frameworks are responsible for handling the rendering, interaction, and user experience of web pages, and usually include HTML, CSS, and JavaScript.
The back-end framework is responsible for handling server-side logic, data storage, and communication with the front-end framework.

Examples of front-end frameworks include:

React: A high-performance, component-based JavaScript library developed by Facebook for building user interfaces.
Angular: A front-end framework developed by Google, written in TypeScript, providing a rich library of functions and components.
Vue.js: A progressive, componentized JavaScript framework for building user interfaces.
jQuery UI: A jQuery-based user interface library that provides a rich set of UI components and animation effects.

Examples of backend frameworks include:

Django: A Python-based web framework for building dynamic websites and web applications.
Flask: A lightweight Python-based web framework for building web applications.
Express (Node.js): A Node.js-based web development framework for building high-performance, scalable web applications.
Ruby on Rails: A Ruby-based web framework for building web applications.

2. Installation and Hello World

First assume that you have installed Node.js ,

win+R-cmd opens the command terminal window

1. Create a file directory to the local server

Next create a directory for your application, then change into this directory and make it the current working directory.

$ mkdir myapp
$ cd myapp

mkdir myapp

Create a folder called myapp. The path is located at C:\Users\your computer name\myapp

cd myapp is to enter this folder

2. Use the node.js command to import the project dependency management file

$ npm init

Keep pressing enter and finally reply yes!

`npm init` is a command line tool used to initialize a new npm package (or project). It walks you through a series of questions and options to create a `package.json` file to record and manage your application's configuration information.

npmThe full name is Node Package Manager, which is the Node.js package manager.

"init" is the abbreviation of "initialize", which means initialization or start. In the computer field, "init" is often used to describe starting or creating a new entity, process, or configuration.

In software development, "init" is often used to indicate operations such as initializing a project, setting default values, or creating initial files. For example, the "npm init" command is used to initialize a new npm package and create an initial package.jsonfile.

By running the `npm init` command, you can provide some basic project information, such as package name, version, description, entry file, etc. You can also optionally provide additional information such as author, license, repository URL, etc.

The main functions of `npm init` include:

1. Create a `package.json` file: It is a configuration file used to manage and describe Node.js projects.

2. Manage dependencies: During the initialization process, you can choose whether to add the project's dependencies in `package.json` and specify their versions.

3. Save the metadata of the project: The `package.json` file records the metadata information of the project, including name, version, author, license, etc.

4. Simplify project management: By creating a `package.json` file, you can use npm to install dependencies, run scripts, publish software packages, etc.

In short, the `npm init` command is used to initialize a new npm package (or project) and generate the `package.json` file. This file plays an important role in the subsequent development, testing and deployment process.

3. Install express dependency package

$ npm install express --save

npm install express --saveis an npm command used to install the Express framework and its dependencies.

The specific explanation is as follows:

npmIs a package manager for Node.js, used to manage and install JavaScript packages and dependencies.
installIs npma subcommand of the command used to install packages or modules into the current project.
expressis a popular Node.js framework for building web applications and APIs. This command will install the latest version of the Express framework.
--saveis an option that indicates which portion of the file npmto save package information to . It automatically adds the dependency's name and version to the file so that the dependency is installed correctly when you reinstall the project in the future.package.jsondependenciespackage.json

So when you run npm install express --save, npm will download and install the latest version of the Express framework and save it in a package.jsonfile as a dependency of your project.

4.Write Hello world example

4.1 Create a js file called app.js in the folder myapp (name it yourself)

Open this js file with notepad and enter the hello world code

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

app.js4.2 Enter the directory containing the file on the command line

4.3 Command window input:

cd myapp //Enter the myapp directory!

 node app.js

node app.jsis a command that runs Node.js applications.

The specific explanation is as follows:

nodeIs an executable file of Node.js, used to run JavaScript code.
app.jsis a JavaScript file that contains the code for a Node.js application.

When you run node app.jsit, the Node.js interpreter will read and execute app.jsthe code in the file. This will launch your Node.js application and app.jsperform the appropriate actions based on the code logic in the file.

Enter 127.0.0.1:3000 or http://localhost:3000/ in the browser

(This address is the local address of the current server. You can access port 3000 without a domain name. We just specified it. If you don’t understand, you can ask www.readygpt.cn)