Web-1-网站工作流程介绍

 

我们学习web开发,首先要知道什么是Web? Web: 全球广域网,也称为万维网(www World Wide Web),能够通过浏览器访问的网站

c50c6b519a1e0eb8119cec4efdf7ee82.png

2f0bca3eb712b45d01716fa15ba2fc23.png

 

2fc6692da10e91a6ab02312d52e9d9b7.png

比如我展示的这京东,淘宝唯品会都叫做网站,那么现在大家想一下,你还知道什么网站? 知道什么是Web以后,现在我们来介绍一下web(网站的工作流程)

网站的工作流程

1.首先我们需要通过浏览器访问发布到前端服务器中的前端程序,这时候前端程序会将前端代码返回给浏览器。如下图所示:

716f77bb9336ecf6b597e25b19975990.png

2.浏览器得到前端代码,此时浏览器会将前端代码进行解析,然后展示到浏览器的窗口中,这时候我们就看到了网站页面,如下图所示:

2abad88d2a3f04fdd97035636e5bf1d3.png

3.但是此时这个页面是没有数据的,因为数据在我们的数据库中,所以我们浏览器需要根据前端代码中指定的后台服务器的地址 向 我们的后台服务器(内部有java程序)发起请求,后台服务器再去从数据库中获取数据,然后返回给浏览器。

d72588883868f1df10c02021cc15bac9.png

4.浏览器拿到后台返回的数据后,然后将数据展示在前端资源也就是网页上,然后我们就看到了如下图所示的完整的内容

c788f0eb94f3bfc5f54726df9c71281f.png

整个流程如下: 1.浏览器先向前端服务器请求前端资源,也就是我们所说的网页 2.浏览器再向后台服务器发起请求,获取数据 3.浏览器将得到的后台数据填充到网页上,然后展示给用户去看

网站的开发模式

接下来我们来聊聊网站的开发模式,主要有2种:前端台分离和混合开发 前后台分离:(目前企业开发的主流)这种开发模式的特点如下

  • 前端人员开发前端程序,前端程序单独部署到前端服务器上
  • 后端人员开开发后端程序,后端程序单独部署到后端服务器上

    87afc95d57ceb9b3ff3b987e51cd9970.png

    混合开发:(早期的开发技术,目前慢慢退出市场),这种开发模式的特点是:前端人员开发的代码和后端人员开发的代码在同一个项目中,一起打包部署。

    771b412d045dd959c991cb735a89b21a.png

网站的开发技术

最后我们来看看web阶段需要学习哪些技术呢?如下图我们列举了课程中需要学习的知识点

fb2390ff1f466c41aaf025f553a7db6b.png

以下是图表的方式整理了我们web阶段要学习的技术和其对应的作用

前端web开发:

技术描述
HTML用于构建网站的基础结构的
css用于美化页面的,作用和化妆或者整容作用一样
JavaScript实现网页和用户的交互
Vue主要用于将数据填充到html页面上的
Element主要提供了一些非常美观的组件
Nginx一款web服务器软件,可以用于部署我们的前端工程

后端web开发:

技术描述
Maven一款java中用于管理项目的软件
Mysql最常用的一款数据库软件之一
SpringBootspring家族的产品,当前最为主流的项目开发技术。
Mybatis用于操作数据库的框架

所以只有我们学完上述的技术,我们才能开发出一个麻雀虽小,五脏俱全的网站。

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023-08-03 LeetCode每日一题(删除注释)

2023-08-03每日一题 一、题目编号 722. 删除注释二、题目链接 点击跳转到题目位置 三、题目描述 给一个 C 程序,删除程序中的注释。这个程序source是一个数组,其中source[i]表示第 i 行源码。 这表示每行源码由 ‘\n’ 分隔。 在 C 中有两种注释风…

Qt 中操作xml文件和JSON字符串

文章目录 1、概述1.1、xml介绍1.2、json介绍 2、xml文件增删改查2.1、写xml文件内容2.2、读xml文件内容2.3、删除xml文件内容2.4、修改xml文件内容 3、构建JSON字符串3.1、JSON字符串排版4、剪切板操作 1、概述 1.1、xml介绍 XML 指可扩展标记语言(EXtensible Mark…

复现原型链污染漏洞

目录 一、复现原型链污染漏洞 hackit 2018 1、创建hackit_2018.js文件 2、运行hackit_2018.js文件 3、寻找原型链漏洞 4、污染原型链 hackit 2018 1、创建hackit_2018.js文件 const express require(express) var hbs require(hbs); var bodyParser require(body-par…

【数据结构】快速排序

快速排序是一种高效的排序算法,其基本思想是分治法。它将一个大问题分解成若干个小问题进行解决,最后将这些解合并得到最终结果。 快速排序的主要思路如下: 选择一个基准元素:从待排序的数组中选择一个元素作为基准(…

计算机视觉(五)深度学习基础

文章目录 深度学习基础卷积神经网络与传统神经网络区别深度学习与神经网络的区别 目标函数选择合适的目标函数Softmax层 改进的梯度下降梯度消失的直观解释激活函数学习步长SGD的问题Momentum动量Nesterov MomentumAdagradRMSpropAdam 各种梯度下降算法比较关于算法选择的建议B…

redis入门2-命令

Redis的基本数据类型 redis的基本数据类型(value): string,普通字符串 hash(哈希),适合存储对象 list(列表),按照插入顺序排序,可以由重复的元素 set(无序集合),没有重复的元素 sorted set(有序集合)&…

华为数通HCIP-PIM原理与配置

组播网络概念 组播网络由组播源,组播组成员与组播路由器组成。 组播源的主要作用是发送组播数据。 组播组成员的主要作用是接收组播数据,因此需要通过IGMP让组播网络感知组成员位置与加组信息。 组播路由器的主要作用是将数据从组播源发送到组播组成员。…

【Ansible】Ansible自动化运维工具之playbook剧本搭建LNMP架构

LNMP 一、playbooks 分布式部署 LNMP1. 环境配置2. 安装 ansble3. 安装 nginx3.1 准备 nginx 相关文件3.2 编写 lnmp.yaml 的 nginx 部分3.3 测试 nginx4. 安装 mysql4.1 准备 mysql 相关文件4.2 编写 lnmp.yaml 的 mysql 部分4.3 测试 mysql5. 安装 php5.1 编写 lnmp.yaml 的 …

Datax 数据同步-使用总结(一)

1,实时同步? datax 通常做离线数据同步使用。 目前能想到的方案 利用 linux 的定时任务时间戳的方式做增量同步。 2,同步速度快不快? 单表同步速度还是挺快的 但是如果遇到复杂的 sql 查询,其同步效率&#xff0c…

opencv-34 图像平滑处理-双边滤波cv2.bilateralFilter()

双边滤波(BilateralFiltering)是一种图像处理滤波技术,用于平滑图像并同时保留边缘信息。与其他传统的线性滤波方法不同,双边滤波在考虑像素之间的空间距离之外,还考虑了像素之间的灰度值相似性。这使得双边滤波能够有…

《面试1v1》ElasticSearch 和 Lucene

🍅 作者简介:王哥,CSDN2022博客总榜Top100🏆、博客专家💪 🍅 技术交流:定期更新Java硬核干货,不定期送书活动 🍅 王哥多年工作总结:Java学习路线总结&#xf…

问道管理:沪指窄幅震荡跌0.18%,有色、汽车等板块走低

3日早盘,沪指盘中窄幅震动下探,创业板逆市上扬;两市半日成交不足5000亿元,北向资金净卖出超15亿元。 到午间收盘,沪指跌0.18%报3255.88点,深成指跌0.23%,创业板指涨0.2%;两市算计成交…

6.如何用CSV文件生成异构图数据集

我们将使用GroupLens研究小组收集的MovieLens数据集。 这个数据集描述了MovieLens的五星评级和标记活动。该数据集包含来自600多名用户的9000多部电影的约10万个评分。我们将使用该数据集生成两种节点类型,分别保存电影和用户的数据,以及一种连接…

两个镜头、视野、分辨率不同的相机(rgb、红外)的视野校正

文章目录 背景实际效果查找资料资料1资料2 解决方案最终结果 背景 目前在做的项目用到两个摄像头,一个是热成像摄像头、另一个是普通的rgb摄像头。 一开始的目标是让他们像素级重合,使得点击rgb图像时,即可知道其像素对应的温度。但是在尝试…

spark history网络流量占用高问题记录

生产环境遇到一台机器网络流量占用高告警 由于监控只有机器总的网络流量,没有具体进程的 于是只能登陆服务器,安装nethogs:yum install nethogs 然后执行nethogs命令查看进程流量 观察到主要是spark history server这个进程占用流量高(最高…

【树】 二叉树 堆与堆排序 平衡(AVL)树 红黑(RB)树

目录 1 树1.1 认识树1.2 树的相关概念1.3 树的表示孩子兄弟表示法 2 二叉树2.1 概念2. 2 特殊二叉树2.3 二叉树的性质2.4 二叉树的存储结构 3 堆 — 完全二叉树的顺序结构实现3.1 堆的概念3.2 核心代码3.3 堆应用1 堆排序2 TOP-K问题 4 二叉树的链式存储4.1 二叉链结构与初始化…

4G WWAN设备类型

WWAN设备类型 USB dongle是设备接入互联网的重要方式之一,典型的通过USB接口与主设备连接,然后主设备通过4G/5G接入互联网,作为移动宽带设备,它有那些设备类型及暴露方式呢? 移动宽带设备类型:ModemManage…

vue-cli3项目优化

首先添加两个量化的插件,方便对项目目前的情况进行分析: 1.添加speed-measure-webpack-plugin插件 —量化的指标可以看出前后对比 使用步骤: 安装speed-measure-webpack-plugin依赖 npm install speed-measure-webpack-plugin -D配置vue.c…

【微信小程序】van-uploader实现文件上传

使用van-uploader和wx.uploadFile实现文件上传,后端使用ThinkPHP。 1、前端代码 json:引入van-uploader {"usingComponents": {"van-uploader": "vant/weapp/uploader/index"} }wxml:deletedFile是删除文件函…

【Linux 网络】 传输层协议之TCP协议 TCP的三次握手和四次挥手

TCP协议 TCP协议段格式谈谈什么是 “可靠” 和 “不可靠”TCP协议段——序号与确认序号TCP协议段——窗口大小TCP协议段 —— 六个标志位确认应答机制(ACK)超时重传机制连接管理机制TCP 的三次握手四次挥手TCP三次握手四次挥手总结图 滑动窗口流量控制拥…