服务器-->网站制作-->接口开发,一篇文章一条龙服务(2)

2024-03-10 15:04

本文主要是介绍服务器-->网站制作-->接口开发,一篇文章一条龙服务(2),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

作者:q: 1416279170v: lyj_txd

前述:本人非专业,兴趣爱好自学自研,很多没有说清楚的地方见谅,欢迎一起讨论的小伙伴~

上期回顾,了解 服务器,网站制作,接口开发之见的关系,以及拥有了自己的服务器,现在,我们就来搭建一个自己的网站吧。

网站制作

了解网站的运行流程

还是老样子,不想看概论的直接到实操环节

在一个完整的网站项目中,前端和后端工作通常需要协同合作。
前端负责设计优秀的用户界面和用户体验后端则负责实现网站的核心功能和数据处理
前后端之间通过接口(API)进行通信,实现数据的传输与交互。

  • 提前预告一下,下一节会讲一下这个接口的实现流程
    在这里插入图片描述

前端就像电影屏幕,呈现给观众
后端就像放映机,执行着放每一帧画面的逻辑
前端和后端是网站制作中不可或缺的两个重要方面,它们共同构建了一个完整的、功能完备的网站。

前端

  • 定义:前端是指用户直接与之交互的部分,包括网站的界面、设计、内容呈现和交互功能等。
    技术栈:前端开发主要涉及 HTML、CSS 和 JavaScript 等技术,用于构建网页结构、样式和交互行为。
  • 工作内容:前端开发人员负责将设计转化为可交互的网页,确保网站在不同设备上显示良好,实现用户友好的交互体验。
  • 工具:常用的前端开发工具包括编辑器(如VSCode)、浏览器开发者工具、JS 框架(如React、Vue.js)等。

后端

  • 定义:后端是网站的服务器端部分,负责处理数据存储、业务逻辑、安全性和与数据库交互等任务。
  • 技术栈:后端开发可使用各种编程语言和框架,如Node.js、Python(Django、Flask)、Java(Spring)、PHP等。
  • 工作内容:后端开发人员设计和开发服务器应用程序,处理用户请求、进行数据处理、向前端提供数据接口等。

实操环节

大概流程: 先在本地建一个hmtl的界面 == > 上传到服务器 == > 将服务器使用公网访问 ==> 展示页面以及基本设置

创建前端页面

目前已经有很多网站都可以下载到免费的html界面,可以根据自己喜欢去下载适合自己想打造的前端界面。
这里推荐一个
下面就拿这个作为例子,去下载一篇。

如果你有能力能够自己写一个完整的html,js,css设计,也可以根据自己的需求,去找一个前端设计师(简单的可以找我),提需求然后购买。

关于html的制作教程,如果需求多的话,可以出教程;如果是少部分人需要的话就略过了哦,本人文章有js方向的教程,也可以去看哦~

界面官网

首先进入下载界面的官网选择自己喜欢的一个界面,点击 Free Download
(不用登录!!!不用登录!!!不用登录!!!)
也可以通过 live demo,在线看效果。
在这里插入图片描述
保存在除C盘以外的位置。

个性化设置html(简版)

可以改成自己的东西
在这里插入图片描述

上传到服务器

链接上你的服务器
在这里插入图片描述
在/home/ubuntu 中建立一个专门的文件夹存放 hmtl 的相关文件,全选解压后的文件,用鼠标拖到新建的test文件夹中。
在这里插入图片描述

暴露公网IP

现在可以试一下用 公网IP,尝试访问
在这里插入图片描述
结果是这样的,显然是行不通的。

这时候我们需要一个工具,nginx

nginx (理论,不想了解直接跳过)

  1. Web 服务器:
  • Nginx 可以作为静态和动态内容的 Web 服务器,用于托管和传输网页文件、图片、视频等静态资源。
  • 它支持高并发连接处理和请求分发,能够有效地处理大量的并发请求,提供快速响应和高可靠性。
  1. 反向代理:
  • Nginx 可以作为反向代理服务器,将客户端的请求转发到后端的多个服务器上,并将响应返回给客户端。
  • 这种配置可以实现负载均衡、缓存加速、SSL 终端、安全过滤等功能,提高网站的性能、可靠性和安全性。
  1. 负载均衡器:
  • Nginx 可以作为负载均衡器,将请求分发到多个后端服务器上,平均分担服务器的负载。
  • 它支持多种负载均衡算法(如轮询、IP 哈希、加权轮询等),能够根据服务器的性能和可用性进行智能调度。
  1. 缓存服务器:
  • Nginx 支持静态和动态内容的缓存,可以将经常访问的内容缓存在内存中,减少对后端服务器的请求。
  • 这种配置可以大大提高网站的性能和响应速度,特别适用于高流量的动态网站和 API 服务。

安装 nginx

sudo apt install nginx

在这里插入图片描述
如果遇到这个给问题,需要先更新 apt

sudo apt update
sudo apt upgrade

再输入安装, 输入 y 确认安装。

启动 nginx

sudo systemctl start nginx

查看nginx运行状态:

sudo systemctl status nginx.service  # 查看nginx状态 active (running) 为开启状态

在这里插入图片描述

再次访问 公网IP ,你会得到如下界面
安装成功
这就表示安装成功了!!!

展示页面以及基本设置

现在展示是是 nginx 的 默认的界面,下面只需要将路径设置到你的文件下面就可以完成将页面换到你的网站了。

进入修改模式

进入改写配置文件

sudo nano /etc/nginx/sites-available/default

下滑找到
在这里插入图片描述
改为 你转移文件的目录html文件

保存

改好之后, 按 ctrl + x, 输入Y回车

将nginx更新

重新加载

sudo service nginx reload

刷新公网IP访问界面

在这里插入图片描述
完成!!!
至此,网站的制作就是以上的内容了,如果有不懂的地方可以随时联系我,下方是我的联系方式;如果你学会了,对你有用,也可以赏作者一杯咖啡~
在这里插入图片描述

在这里插入图片描述

最近开通了知识星球,欢迎来访
在这里插入图片描述

往后的代码只会在知识星球里面出现哦~♥♥

这篇关于服务器-->网站制作-->接口开发,一篇文章一条龙服务(2)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/794611

相关文章

Django开发时如何避免频繁发送短信验证码(python图文代码)

《Django开发时如何避免频繁发送短信验证码(python图文代码)》Django开发时,为防止频繁发送验证码,后端需用Redis限制请求频率,结合管道技术提升效率,通过生产者消费者模式解耦业务逻辑... 目录避免频繁发送 验证码1. www.chinasem.cn避免频繁发送 验证码逻辑分析2. 避免频繁

Spring Boot集成/输出/日志级别控制/持久化开发实践

《SpringBoot集成/输出/日志级别控制/持久化开发实践》SpringBoot默认集成Logback,支持灵活日志级别配置(INFO/DEBUG等),输出包含时间戳、级别、类名等信息,并可通过... 目录一、日志概述1.1、Spring Boot日志简介1.2、日志框架与默认配置1.3、日志的核心作用

Python极速搭建局域网文件共享服务器完整指南

《Python极速搭建局域网文件共享服务器完整指南》在办公室或家庭局域网中快速共享文件时,许多人会选择第三方工具或云存储服务,但这些方案往往存在隐私泄露风险或需要复杂配置,下面我们就来看看如何使用Py... 目录一、android基础版:HTTP文件共享的魔法命令1. 一行代码启动HTTP服务器2. 关键参

PyQt5 GUI 开发的基础知识

《PyQt5GUI开发的基础知识》Qt是一个跨平台的C++图形用户界面开发框架,支持GUI和非GUI程序开发,本文介绍了使用PyQt5进行界面开发的基础知识,包括创建简单窗口、常用控件、窗口属性设... 目录简介第一个PyQt程序最常用的三个功能模块控件QPushButton(按钮)控件QLable(纯文本

Spring Boot 与微服务入门实战详细总结

《SpringBoot与微服务入门实战详细总结》本文讲解SpringBoot框架的核心特性如快速构建、自动配置、零XML与微服务架构的定义、演进及优缺点,涵盖开发环境准备和HelloWorld实战... 目录一、Spring Boot 核心概述二、微服务架构详解1. 微服务的定义与演进2. 微服务的优缺点三

SpringBoot改造MCP服务器的详细说明(StreamableHTTP 类型)

《SpringBoot改造MCP服务器的详细说明(StreamableHTTP类型)》本文介绍了SpringBoot如何实现MCPStreamableHTTP服务器,并且使用CherryStudio... 目录SpringBoot改造MCP服务器(StreamableHTTP)1 项目说明2 使用说明2.1

基于Python开发一个图像水印批量添加工具

《基于Python开发一个图像水印批量添加工具》在当今数字化内容爆炸式增长的时代,图像版权保护已成为创作者和企业的核心需求,本方案将详细介绍一个基于PythonPIL库的工业级图像水印解决方案,有需要... 目录一、系统架构设计1.1 整体处理流程1.2 类结构设计(扩展版本)二、核心算法深入解析2.1 自

RabbitMQ消息总线方式刷新配置服务全过程

《RabbitMQ消息总线方式刷新配置服务全过程》SpringCloudBus通过消息总线与MQ实现微服务配置统一刷新,结合GitWebhooks自动触发更新,避免手动重启,提升效率与可靠性,适用于配... 目录前言介绍环境准备代码示例测试验证总结前言介绍在微服务架构中,为了更方便的向微服务实例广播消息,

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

关于DNS域名解析服务

《关于DNS域名解析服务》:本文主要介绍关于DNS域名解析服务,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录DNS系统的作用及类型DNS使用的协议及端口号DNS系统的分布式数据结构DNS的分布式互联网解析库域名体系结构两种查询方式DNS服务器类型统计构建DNS域