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 最常用的一款数据库软件之一
SpringBoot spring家族的产品,当前最为主流的项目开发技术。
Mybatis 用于操作数据库的框架

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