【无标题】Web学习总结

一.web是什么?

Web开发是一个内容广阔的技术。何为web呢？百度百科是这样解释的：web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

文档结构

web分为前端和后端

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

后端开发，也是软件开发，而软件开发市面上常用的语言就是Java、PHP等。后端的开发就是开发人员编写的不能直接看到的代码，后端开发人员写可使得按钮工作的代码，通过指出从数据库中提取哪些数据并将其传回到前端。后端开发人员比前端开发人员花费更多的时间在实现算法和解决问题上。

web 是world wide web（万维网）的简称，不是缩写，万维网是基于http协议进行交互的应用网络。互联网（Internet）是指连接计算机的网络（通过TCP/IP协议）。同理移动互联网是连接移动设备的网络。所以web是运行于互联网之上的系统，互联网上还有很多其他的应用，比如FTP/邮件系统等，这些不算在web里。进一步说，互联网是针对的计算机（点到点），web是针对的计算机上的应用（端到端）。以前，web可以说就是通过使用浏览器访问的各种资源，有了移动互联网之后，就扩展了，很多手机app也是通过http进行交互的，也是web的一部分。

二、Web的特点

1）一体性

Web 非常流行的一个很重要的原因就在于它可以在一页上同时显示色彩丰富的图形和文本的性能。在Web之前Internet上的信息只有文本形式。Web可以提供将图形、音频、视频信息集合于一体的特性。

（2）独立性

无论用户的系统平台是什么，你都可以通过Internet访问WWW，浏览WWW对系统平台没有什么限制。

（3）交互性

Web的交互性首先表现在它的超链接上，用户的浏览顺序和所到站点完全由他自己决定。另外通过FORM的形式可以从服务器方获得动态的信息。用户通过填写FORM可以向服务器提交请求，服务器可以根据用户的请求返回相应信息。
 

三、web学习

1.web简易网站登录

就以一个最简单的登录界面为例：两个输入框、一个提交按键、最多再加个“用户登录”提示，使用相应的HTML元素实现

下面就是实现登录页面

2.组员学习web项目

我们组员一起写web项目，经过了我们一起写web项目，我在组中的岗位是系统需求分析员，我总结出以下的学习经验。

1.功能说明

用户可根据已有账号进行登录，登录后的用户享有相对应的功能；若没有账号，用户和游客可以进行账号注册。

1.用户登入

当账号、密码全都匹配成功才能正常登录，并且跳转至首页。

当账号、密码匹配不一致时，则弹出提示“用户不存在或密码错误”；当密码少于6个字符或多于16个字符时，则弹出提示“密码不能少于6个字符或者多余16个字符”。

2.用户注册

若用户和游客还没有账号，可以在登入界面点击”立即注册”超链接跳转到注册界面。

无账号

                   --> 游客进入注册页面 --> 输入注册信息 --> 提交注册信息 --> 检查用户名是否已存在 --> 如果用户名已存在，返回错误信息，重新输入用户名 --> 如果用户名不存在，保存用户信息至数据库，并返回成功跳转到首页 -->

 

有账号

 

 --> 用户进入登录页面 --> 输入登录信息 --> 提交登录信息 --> 验证用户名和密码是否匹配 --> 如果匹配成功，登录成功，跳转至用户首页 --> 如果匹配失败，返回错误信息，重新输入登录信息 -->

登录流程图

流程图

3 系统非功能需求

3.1 异步

通过异步消息传递，将进行不同微结构之间传递，让数据分阶段处理，系统结构更清晰

3.2 高可靠性

系统采用集群方法进行服务管理,有异常检测系统,可以及时识别有问题的节点并重启服务,提高了业务的高可用性。

3.3 安全

恰当的安全策略,即使客户愉快的访问,也要确保安全性,数据加密、避免ddos入侵、sql注入式攻击等方法。

3.4 数据存储量

每年的大数据存储容量(G)及未来几年该数量的预期(增长)数值。指标包括累计存储容量(G)、年增长(G)。

3.5 可扩展性

可实现负载均衡；日后若信息量较大，则系统可相应增加服务器实现扩展。

3.6 响应时间

分日常交互类、日常查询类、批量交易分别考虑。

3.7 可维护性

通过高度自动化的持续集成技术开发,自主编译、自行部署、自动测试,可以减少在软件产品迭代过程中的重复性劳动强度,从而降低错误的概率,使软件产品的在修正bug和增强新功能时,更加可靠。

3.8 易理解性

软件交互给用户信息时，要清晰，准确，且要易懂，使用户能够快速理解软件。

系统开发环境

本项目对电脑的硬件环境要求不高，目前大部分人所使用的笔记本电脑拥有基本配置即可进行操作，都能去设计并运行调试。

本系统的所采用的主要语言为：Java语言，在使用前需要进行必要的系统配置，否则无法使用。

在前端方面，网站页面使用的是HTML+CSS+JS和Thymeleaf模板引擎做数据渲染，在后端方面，项目使用的是SpringBoot整合JPA。其具体的各类开发环境如表所示。

		名称	版本
软件环境	编程语言	Java、JavaScript
	JDK 版本	JDK	1.8.0_221
	编程环境	IntelliJ IDEA	2019-06-R-win32-x86_64
	Web 服务器	Apache Tomcat	9.0.24
	数据库	MySQL	8.0.12
	测试环境	谷歌浏览器	90.0.818.51
硬件环境	Windows版本	Windows10
	处理器	Intel(R)Core(TM)i7-8750H
	内存	8.00GB
	系统类型	64位操作系统，基于x64

项目测试

测试类型	单元测试       集成测试          √系统测试             验收测试
功能模块名称	测试用例
	输入	操作步骤	预期输出	测试结论
				通过	不通过	不执行
1.登入	1.输入相对应的账号密码	1.点击登入  2.输入相应的账号密码 3.点击登入	一.执行步骤3后登入成功，跳转至系统主页	√
2.注册	1.选择注册 2.输入相对应的注册信息	1.点击登入 2.点击立即注册 3.输入相应的注册信息 4.立即注册	一.执行步骤4后注册成功，跳转至登入界面	√
3.修改用户号信息	1.输入需要修改的用户信息	1.点击个人信息 2.选择我的信息 3.修改字段信息 4.点击保存	一.执行步骤4后保存成功	√
4.查看服饰地区	1.点击服饰地区	1.点击个人信息 2.点击查看服饰地区	一.执行步骤2后展示实体店所投递过的服饰信息	√
5.查看不同民族服饰	1.点击服饰信息 2.进入详情界面 3.点击喜欢服饰查看	1.点击服饰信息 2.进入详情界面 3.点击所需服饰	一.执行步骤3后选择服饰成功	√
6.选择摄影师	1.输入相应摄影师信息	1.点击查看摄影师信息 2.选择喜欢的摄影师 3.预约拍照时间	一.执行步骤1后查找摄影师信息成功 二.执行步骤2后选择摄影师成功 三.执行步骤3后预约摄影师成功	√
选择化妆师	1.输入化妆师信息	1.点击查看化妆师信息 2.选择喜欢的化妆师 3.预约化妆时间	一.执行步骤1后查找化妆师信息成功 二.执行步骤2后选择化妆师成功 三.执行步骤3后预约化妆师成功	√

四、web心得体会

1. 学习前端技术：前端开发是构建用户界面的关键，你需要学习HTML、CSS和JavaScript等前端技术。这些技术将帮助你创建吸引人的网站和用户友好的界面。

2. 掌握后端开发：除了前端技术，你还应该学习后端开发来处理数据和业务逻辑。掌握一门后端语言（如PHP、Python、Java等）和数据库（如MySQL、MongoDB等）是很有帮助的。

3. 使用框架和库：为了提高开发效率和代码质量，你可以使用流行的Web开发框架和库，如Vue.js、React.js、Angular等。这些工具提供了许多有用的功能和组件，可以简化开发过程。

4. 设计响应式网站：现在越来越多的用户使用移动设备访问网站，所以你需要确保你的网站能够在不同的屏幕尺寸上正确显示。学习响应式设计技术，使你的网站在不同设备上都有良好的用户体验。

5. 保持学习和更新：Web开发是一个不断发展和变化的领域，新的技术和工具不断涌现。保持学习和更新，关注最新的趋势和最佳实践，将帮助你保持竞争力和提高开发技能。