Web开发介绍

你的名字 2023-10-12 12:05 40阅读 0赞

## Web开发介绍 ##

## 1 什么是web开发 ##

**Web**：全球广域网，也称为**万维网**(www **W**orld **W**ide **W**eb)，能够通过浏览器访问的**网站**。

所以**Web开发**说白了，就是**开发网站**的，例如下图所示的网站：**淘宝**，**京东**等等

![在这里插入图片描述][387124791a5640999fb5c4430ac3b044.png_pic_center]

那么我们知道了web开发是开发网站的，那么我们需要学习哪些知识呢？以及这些知识在我们整个网站开发中占据什么位置呢？对于这些问题，我们就必须知道网站整体的工作流程。

## 2 网站的工作流程 ##

接下来我们先来看看网站的工作流程，这样才能在我们的脑海中构建初步的知识架构体系。

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

![在这里插入图片描述][0c0d75f705e64f42bb97f3640b1d64e1.png_pic_center]

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

![在这里插入图片描述][5316e4ba0be9459d8942e01c68746a62.png_pic_center]

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

![在这里插入图片描述][ed1f3a854b0e45ad930ae04f55b62673.png_pic_center]

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

![在这里插入图片描述][fb2879ece38f4528b2f019f3c1f9891e.png_pic_center]

**整个流程如下：**

1.浏览器先向前端服务器请求**前端资源**，也就是我们所说的**网页**

2.浏览器再向**后台服务器**发起请求，获取**数据**

3.浏览器将得到的后台**数据**填充到**网页**上，然后展示给用户去看

## 3 网站的开发模式 ##

接下来我们来聊聊网站的开发模式，主要有2种：前端台分离和混合开发

**前后台分离**：（\*\*目前企业开发的主流，\*\*市场占有率70%以上）这种开发模式的特点如下

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

![在这里插入图片描述][f08adce5e4b547adb4b92714cb024101.png_pic_center]

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

![在这里插入图片描述][0fca4b4378c446b4ad7877ddea5cab51.png_pic_center]

## 4 网站的开发技术 ##

最后我们来看看web阶段需要学习哪些技术呢？如下图我们列举了课程中需要学习的知识点  
![在这里插入图片描述][bad198f78e884238a68deed6de413dac.png_pic_center]

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

前端web开发：

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

后端web开发：

<table> 
 <thead> 
  <tr> 
   <th>技术</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Maven</td> 
   <td>一款java中用于管理项目的软件</td> 
  </tr> 
  <tr> 
   <td>Mysql</td> 
   <td>最常用的一款数据库软件之一</td> 
  </tr> 
  <tr> 
   <td>SpringBoot</td> 
   <td>spring家族的产品，当前最为主流的项目开发技术。</td> 
  </tr> 
  <tr> 
   <td>Mybatis</td> 
   <td>用于操作数据库的框架</td> 
  </tr> 
 </tbody> 
</table>

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

| Mybatis | 用于操作数据库的框架 |

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

618，清华社 IT BOOK 多得图书活动开始啦！活动时间为 2023 年 6 月 7 日至 6 月 18 日，清华  
社为您精选多款高分好书，涵盖了 C++、Java、Python、前端、后端、数据库、算法与机器学习等多  
个 IT 开发领域，适合不同层次的读者。全场 5 折，扫码领券更有优惠哦！快来京东点击链接 IT BOOK  
多得（或扫描京东二维码）查看详情吧！  
————————————————  
版权声明：本文为CSDN博主「云和数据.ChenGuang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/zhangchen124/article/details/131096227![在这里插入图片描述][a2586610c8044f828a12324747692243.png]

[387124791a5640999fb5c4430ac3b044.png_pic_center]: https://img-blog.csdnimg.cn/387124791a5640999fb5c4430ac3b044.png#pic_center
[0c0d75f705e64f42bb97f3640b1d64e1.png_pic_center]: https://img-blog.csdnimg.cn/0c0d75f705e64f42bb97f3640b1d64e1.png#pic_center
[5316e4ba0be9459d8942e01c68746a62.png_pic_center]: https://img-blog.csdnimg.cn/5316e4ba0be9459d8942e01c68746a62.png#pic_center
[ed1f3a854b0e45ad930ae04f55b62673.png_pic_center]: https://img-blog.csdnimg.cn/ed1f3a854b0e45ad930ae04f55b62673.png#pic_center
[fb2879ece38f4528b2f019f3c1f9891e.png_pic_center]: https://img-blog.csdnimg.cn/fb2879ece38f4528b2f019f3c1f9891e.png#pic_center
[f08adce5e4b547adb4b92714cb024101.png_pic_center]: https://img-blog.csdnimg.cn/f08adce5e4b547adb4b92714cb024101.png#pic_center
[0fca4b4378c446b4ad7877ddea5cab51.png_pic_center]: https://img-blog.csdnimg.cn/0fca4b4378c446b4ad7877ddea5cab51.png#pic_center
[bad198f78e884238a68deed6de413dac.png_pic_center]: https://img-blog.csdnimg.cn/bad198f78e884238a68deed6de413dac.png#pic_center
[a2586610c8044f828a12324747692243.png]: https://img-blog.csdnimg.cn/a2586610c8044f828a12324747692243.png