web项目前后端详解-1-概览(视频演示、FeatureList)

这一系列，我将对我个人网站的实现进行全面的解析，将涉及前端、后端、通信和安全四个部分。

以下是各部分可能涉及的知识：

前端：HTML、CSS、JavaScript、JQuery、Vue、Jinja2。

后端：Python、Nginx、MySQL、Linux、Supervisor、阿里云。

通信：OSI、TCP、UDP、HTTP、HTTPS、加解密。

安全：常见的网络攻防技术。

下面先看一个视频，了解一下目前我的网站实现的功能：

V1.0版本，实现了5个页面：主页、登录页、博客详情页、博客管理页、博客编辑页

以下是我的FeatureList：

所属页面	功能	说明	插图
主页、博客详情页、博客管理页	数字瀑布流背景	数字串像瀑布落下，各个串下跌速率不同，伴随明暗变化，同时数字在不断增加。
	可复用页眉、页脚	页面设计为可复用的三段分体式，页眉页脚直接继承复用，页中内容按需变更。
	粘性导航栏	平常导航栏随页面上下移动，当导航栏触及页面顶部时，固定在页面顶部。 点击首页按键，返回主页面。
	二级菜单	鼠标滑动到导航栏某个选项时，在选项下方弹出二级菜单。
主页	侧边栏、博客卡片区弹性布局	侧面栏区域和博客卡片区域按25%、75%比例分配横向可用空间，同时可随着页面大小变化，动态重新分配空间。
	侧边栏	侧边栏有3个信息展示卡片，第一个卡片展示网站博主的logo和slogan，同时作为博客登录页的入口。 第二个卡片展示博主热门文章，可点击跳转。 第三个卡片展示博主的友情链接，可点击跳转。
	博客卡片区	此区域以卡片的形式，展示博主的所有博客，卡片的内容为标题和摘要，载入界面时，卡片有顺序从右往左的飞入的入场动画，同时伴随可见度由0到1的变化。 点击卡片，跳转到相应博客的详情页面。
博客详情页	展示博客详情	继承主页的页眉和页脚和背景，根据跳转前的博客ID，在页中，自动加载相应的博客标题和博客正文。
登录页	登录	提供输入账号、密码的表单和登录按钮，输入正确的账号、密码，跳转博客管理页面，并保持登录状态，过期时间为1天。
博客管理页	博客新建	点击新建按键，跳转博客编辑页面。
	博客简要信息	以表格的形式，展示每个博客的标题、作者、创建时间。
	博客编辑	提供编辑按键，点击跳转博客编辑页面。
	博客删除	提供删除按键，点击弹窗提示：删除后不可恢复，请确认。 点击取消，隐藏弹窗，不做任何操作。 点击确认，删除对应博客。
博客编辑页	自动填充	页面从新建按键跳转，不自动填充。 页面从编辑按键跳转，自动填充标题、摘要、正文。
	标题	提供标题输入表单和【标题】提示文本
	摘要	提供摘要输入表单和【摘要】提示文本
	富文本功能按键区	提供富文本功能按键，提供以下功能： 1、加粗 2、无序列表 3、水平线 4、段落 5、标题1 6、标题2 7、标题3 8、普通链接，显示为链接文本，可点击跳转 9、图片链接，输入链接后，光标处显示图片 10、图片插入，从文件夹选择图片，然后上传服务器，服务器返回图片链接，通过链接显示为图片。 11、上一步 12、下一步 点击按键，即在选中文本或光标位置产生效果。
	编辑区	提供编辑区域，可以编辑文本的样式，可以编辑图片的大小。
	辅助显示区	用于显示编辑区的HTML文本，便于理解样式的原理。
	提交	将博客所有相关内容，提交服务器保存。提交前弹窗提示，需手动确认。提交成功返回博客管理页。
	取消	放弃博客的改动，返回博客管理页。放弃前弹窗提示，需手动确认。