服务器-->网站制作-->接口开发,一篇文章一条龙服务(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

相关文章

服务器集群同步时间手记

1.时间服务器配置(必须root用户) (1)检查ntp是否安装 [root@node1 桌面]# rpm -qa|grep ntpntp-4.2.6p5-10.el6.centos.x86_64fontpackages-filesystem-1.41-1.1.el6.noarchntpdate-4.2.6p5-10.el6.centos.x86_64 (2)修改ntp配置文件 [r

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善,其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性, 将与教育相关的数据要素在区块链上进行存证确权,在确保数据可信的前提下,促进教育的公平、透明、开放,为教育教学质量提升赋能,实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护,支撑教育资源共享、教学质量评估、

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前,需要制作不同类型格式的根文件系统         在产品研发阶段,我们还是需要使用nfs的方式挂载根文件系统         优点:可以直接在上位机中修改文件系统内容,延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展,越来越多的企业开始将其应用于实际业务中。然而,区块链技术的专业性使得其集成开发成为一项挑战。针对此,广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术,提供一套全面的区块链开发工具和开发环境,支持开发者快速开发和部署区块链应用。此外,该平台还可以提供一套全面的区块链开发教程和文档,帮助开发者快速上手区块链开发。

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧