Task04 前后端基础及交互
1 前后端交互基本流程
本项目的前端采用基于vue框架的Vant UI组件库,完成用户注册页、用户退出页、用户热门列表页、用户推荐列表页、新闻详情页等功能;后端采用Flask框架,使用MySQL、MongoDB和Redis作为数据存储,根据新闻推荐系统的整体功能,提供用户注册、用户登录、用户推荐页列表、用户热门页列表、新闻详情、用户行为等服务请求,完成用户从注册到新闻浏览、点赞和收藏的全流程。
2 Web及前端基础
Web(World Wide Web)即全球广域网,也称为万维网,它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务,为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面,其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
Web前端主要是通HTML,CSSJS,ajax,DOM等前端技术,实现网站在客服端的正确显示及交互功能。
2.1 Web 标准构成
主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
-
结构标准:结构用于对网页元素进行整理和分类,对于网页来说最重要的一部分 。通过对语义的分析,可以对其划分结构。具有了结构的内容,将更容易阅读.
-
表现标准:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS 。为了让网页能展现出灵活多样的显示效果.
-
行为标准:行为是指网页模型的定义及交互的编写 。使用户对网页进行操作,网页可以做出响应性的变化。
总的来说,
-
Web标准有三层结构,分别是结构(HTML)、表现(CSS)和行为(JS)
-
结构类似人的身体, 表现类似人的着装, 行为类似人的行为动作
-
理想状态下,他们三层都是独立的, 放到不同的文件里面
2.2 HTML
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
超文本的含义
- 超越文本限制:可以加入图片、声音、动画、多媒体等内容
- 超级链接文本:可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。
语法骨架格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个页面</title>
</head>
<body>
<h1>一个一级标题</h1>
<p>一个段落。</p>
</body>
</html>
- 声明为 HTML5 文档
- 元素是 HTML 页面的根元素
- 元素包含了文档的元(meta)数据
- 定义网页编码格式
元素描述了文档的标题
- 元素包含了可见的页面内容
元素定义一个标题
元素定义一个段落
参考链接:
https://www.runoob.com/html/html-tutorial.html
https://www.w3school.com.cn/html/index.asp
2.3 CSS
- CSS(Cascading Style Sheets) ,通