资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,项目前期准备,重构,IT,职业教育新生态,Vision Mission Passion,目 录,CONT,ENTS,1,2,3,4,项目概述,项目背景,功能列表,必备基础,HTTP,协议,Flask,功能,BootStrap,开发环境,编程环境,服务器环境,配套工具,MVC,模式,架构与界面,系统架构,PC,端界面,移动端界面,项目概述,项目背景,功能列表,PART,1,目录,1.,理解“蜗牛笔记”的项目背景,2.,理解“蜗牛笔记”博客系统的功能,课程目标,Flask,作为目前最流行的,Python Web,应用系统后台开发框架之一，在,Web,系统开发上有着非常全面的功能。,博客系统的功能相对不会过于复杂，对系统业务和需求的理解相对容易。,博客系统的交互相对简单，界面相对较少，这样可以减少本书对前端开发的占比，防止前端的开发喧宾夺主。,Flask,非常适合于开发一些中小型的网站，博客系统所涉及的功能又能够完全展示,Flask,的核心功能。,学完本课程的内容后，完全具备开发大型系统的基础能力。,博客系统非常适合手机端使用，对掌握响应式布局进而开发移动应用提供了很好的一条学习路径。,项目背景,功能列表,首页功能,：主要解决文章标题和内容摘要的展现，让用户马上看到关键内容。,文章阅读,：主要对文章的内容进行阅读，并同时进行评论和互动。,文章发布,：具备作者权限的用户发布新的文章，并对文章进行分类整理。,用户中心,：注册用户的控制面板，管理用户自己所关心的内容和在线投稿等。,系统管理,：管理员专用控制面板，对博客系统各类功能和内容进行管理。,高级功能,：基于,Web,系统开发为读者提供的进阶功能开发。,功能列表,PART,2,架构与界面,PC,端界面,移动端界面,系统架构,子目录,系统架构,PC,端界面,可以通过手机访问：,查看界面效果。,其他界面,登录注册页面,文章发布界面,PART,3,系统管理界面,目录,Pycharm,IDE,工具,前端,开发库,产品,/,服务,建议安装专业版，用于编写和调试,Python,代码，同时也可以很好地支持前端,HTML,和,JS,代码的开发和调试。,Python3.7,的,32,位版本，建议运行于,Windows 64,位版本上。,设计相应缓存策略来进行数据缓存从而提高蜗牛笔记的性能，支撑更多并发访问和响应速度。,开发蜗牛笔记需要使用到的前端库，包括,jQuery,、,Bootstrap,、,Vue,、,Bootbox,、,UEditor,在线编辑器等,关系型数据库，用于保存蜗牛笔记的表结构和数据。,Fiddler,：用于监控协议数据，编辑接口请求数据，可以用于接口调试。,PostMan,：程序员必备的接口调试工具。,接口,调试工具,MySQL,数据库,Redis,缓存,Python,运行环境,开发环境列表,建议安装,Python 3.7,版本，也可以尝试使用最新版本。,安装,Python,上述命令运行成功，则说明,Python,安装完成。,配置,Python,环境变量,本截图是基于,Windows10,的环境变量配置界面,如果是,Windows7,或更低版本，则,环境变量截图略有区别。,配置国内镜像,在当前登录用户的主目录下创建,pip,目录（如目录为：“,C:UsersDennypip”,），并创建,pip.ini,文件，使用豆瓣网的,Python,镜像，编辑文件为如下内容。,global,index-url=install PyMySQL#,连接,MySQL,数据库并执行,SQL,语句,pip install Flask-SQLAlchemy#,用于通过,ORM,操作,MySQL,数据库,pip install Jinja2#Flask,的模板引擎,pip install Flask#Flask,框架核心应用,pip install Flask-Cors#Flask,的跨域解决方案,pip install redis#Redis,缓存服务器处理库,pip install pillow#Python,的图像处理库,pip install requests#Python,中用于发送,HTTP,请求的库,pip install jieba#Python,中文分词库,pip install Whoosh#Python,中用于创建倒排索引的库,pip install blinker#,支持库，用于,Flask,的对象通信,pip install flask-msearch#,基于,Flask,和,SQLAlchemy,的全文搜索库,安装,Pycharm,Pycharm,分专业版和社区版，建议安装专业版，可以更好地支持,HTML+JS,的编辑。,创建,Flask,项目（一）,输入,WoniuNote,项目名称，并选择使用“,Existing interpreter,”。,创建,Flask,项目（二）,出现如下画面，说明项目创建成功。,安装,MySQL,（一）,安装过程选择,Developer Default,类型（默认选中），并最终确认安装了以下组件,安装,MySQL,（二）,在配置,MySQL,界面中，请将,“,Config Type”,选择为,“,Server Machine”,以便,MySQL,安装程序以服务器模式配置,MySQL,以达到更好的,MySQL,性能,安装,MySQL,（三）,安装完成后，进入,Windows,服务控制面板,运行,services.msc,命令,在服务列表中选择“,MySQL56”,右键单击“启动”,安装,MySQL,（四）,推荐安装,Navicat,客户端工具连接,MySQL,并进行数据库操作,输入,127.0.0.1,作为服务器地址,输入,root/123456,连接,MySQL,服务器,如果连接成功即完成安装。,安装,Redis,缓存服务器（一）,在,Redis,官网下载与,Windows,对应的最新版本，解压到任意目录，然后打开命令行，运行命令“,redis-server.exe”,启动,Redis,服务器。,安装,Redis,缓存服务器（二）,再打开一个命令行，启动一个,Redis,客户端去连接服务器，执行如下命令，如果访问成功则表达环境准备完全就绪。,Fiddler,监控协议,Fiddler,编辑和发送请求,Postman,发送,Get,请求,Postman,发送,Post,请求,PART,4,必备基础,Flask,功能,BootStrap,HTTP,协议,子目录,MVC,模式,HTTP,协议,-,请求,HTTP,协议的请求类型主流有,4,种，其功能和作用说明如下：,GET,请求：通常用于访问一个服务器资料，如一张图片或一个页面，也可以通过,URL,地址的查询字符串来向服务器提交参数。例如，大家看到的某个,URL,地址后面带的一串数字，或者？后面跟的一段,key=value&key=value,的地址，则都属于查询字符串参数。,POST,请求：通常用于向服务器端提交一段数据，例如，蜗牛笔记里面的登录和发布功能，需要用户将填写的内容提交给服务器端，或者当用户上传一个文件或图片时也需要提交，均使用,POST,请求进行。,PUT,请求：满足,RESTful,风格的服务器端接口而使用，用于更新服务器端某个资源。,DELETE,请求：也是为了满足,RESTful,风格而使用，用于删除服务器端某个资源。,HTTP,协议,-,响应,HTTP,的请求和响应均分为两个部分，一是,HTTP,请求和响应的标头，二是,HTTP,请求和响应的正文。两部分的主要作用有以下两点。,标头：标头是,HTTP,协议最为核心的一部分，必须满足协议规范，用于浏览器与服务器之间的通信，不可随意更改。请求端的标头主要用于描述往哪个服务器地址发送数据，以及告知服务器当前浏览器的一些基本信息，如操作系统版本、浏览器版本、是否缓存等信息。而响应端的标头则是服务器告知浏览器的一些基本信息，如服务器类型、响应时间、正文类型、正文长度、,Session,数据、响应类型等。而其中最常应用到的字段主要是,Set-Cookie,和,Content-Type,。其中,Set-Cookie,是服务器端响应给浏览器的,Cookie,信息，需要在下一次请求时发送回服务器。而,Content-Type,则告知浏览器当前的响应内容是什么类型，以便于浏览器决定如何渲染该响应，如响应的类型可能是,HTML,、,JSON,、图片、,JS,代码等。,正文：请求端的正文主要是要发送给服务器端的数据，通常只有,POST,请求有正文，其他类型的请求不需要正文。而响应端的正文则是服务器端响应给浏览器的内容，如一段,HTML,代码或一张图片，具体响应什么内容由程序员在后台开发的程序来决定，与协议无关。,HTTP,协议,-,标头和正文,HTTP,协议,-F12,监控截图,HTTP,协议,-Session,和,Cookie,当某一次用户首次访问一个网站时，服务器端会为当前浏览器生成一条身份标识，通常称之为,Session ID,，用于标识该用户的状态，并通过响应的标头字段“,Set-Cookie,”将该标识信息发送给浏览器。同时服务器端将该,Session ID,保存起来（通过内存或硬盘保存），并且浏览器也会保存该条信息。在用户发起第二个请求时，浏览器将这条,Session ID,以“,Cookie,”字段附加到请求的标头信息中再回传给服务器，服务器接收到这条,Session ID,以后，与自己保存的,Session ID,进行对比，就可以确定用户的身份，保存用户的状态。,路由规则：用于在开发过程中定义后台接口的地址标准，以便于前端页面的请求能够发送给正确的服务器地址。,参数传递：也是属于后台接口的标准，用于接收前端页面发过来的数据，无论是,GET,还是,POST,请求或者其他类型的请求。,URL,重定向：当后台服务器处理完后需要重定向到一个新的页面时，通过,URL,重定向功能来实现。,Session,和,Cookie,：支持通过使用,Session,和,Cookie,来维持客户端与服务器端的状态。,模块化：服务器端的功能通常比较复杂，通常会将不同的功能划分到后台不同的模块中以便于管理和维护代码。,Flask,通过,Blueprint,模块实现了网站后台的模块化开发。,拦截器：后台服务器通过对前端发过来的每一个请求进行拦截和检查，满足条件的请求进行处理，不满足条件的请求则可以直接响应给前端一个错误信息。例如，对于用户必须要登录成功后才能访问的接口，就可以使用拦截器对用户是否登录进行判断，如果没有登录，则直接被拦截，不允许访问对应的接口。,模板引擎：为了更加便捷地往前面,HTML,页面中填充数据，,Flask,引入了,Jinja2,模板引擎，通过在,HTML,页面中嵌入一段满足,Jinja2,语法规则的代码，可以快速将数据填充到,HTML,页面中供浏览器渲染。,数据库操作：几乎所有的服务器环境必须支持数据库的各类操作，,Flask,则通过引入,SQLAlchemy,框架来操作,MySQL,数据库，其底层基于,PyMySQL,库实现，定义了一套相对标准的,ORM,操作接口可以方便地操作数据库的增删改查。,Flask,功能介绍,本项目需要用到的,jQuery,的知识如下,:,jQuery,的,$(“#id”),和,$(“.class”),进行单个或批量元素的选择，以及使用,.val(),或,.text(),函数获取或修改元素或表单的内容。,jQuery,的,$.ajax(),和,$.post(),用于通过,Ajax,方式发送请求并处理服务器的响应结果。,jQuery,的,.parent(),、,.siblings(),或,.children(),函数用于按照元素的层次进行定位。,jQuery,的,.css(),函数用于修改,HTML,元素的样式。,jQuery,的,append(),函数可以将,HTML,内容动态添加到另外一个元素中。,jQuery,简介,Bootstrap,通过预先定义好的,CSS,样式来完成对页面的快速布局，通过流式栅格系统，随着屏幕或视区（,viewport,）尺寸的增加，系统会自动分为最多,12,列，根据这,12,列来进行排版布局，进而可以让,DIV,元素完全自适应窗口大小。,另外，,BootStrap,还支持各类图标库，可以为元素或者按钮快速添加一些小图标，增强页面的美观。并且，通过,BootStrap,内置的,JS,库（基于,jQuery,），可以快速开发一些常用的功能，如模态窗口，弹窗提示，,Tab,选项卡或者轮播图等。,Bootstrap,简介,Bootstrap-,栅格系统,MVC,分层模式,Model,层：模型层主要负责处理应用程序中数据逻辑的部分，如数据库操作。,Controller,层：控制层负责从视图读取数据，控制用户输入，并向模型发送数据，也同时对应着有一个服务器端的接口暴露给前端。,View,层：视图层主要用于程序中处理数据显示的部分，简单来说就是前端界面。,构建前端界面,重构,IT,职业教育新生态,Vision Mission Passion,邓 强,目 录,CONT,ENTS,1,2,3,4,页面设计思路,整体风格,响应式布局,其他界面,登录页面注册,文章发布界面,系统管理界面,文章阅读界面,功能列表,设计思路,代码实现,系统首页界面,功能列表,顶部设计,中部设计,前后端交互,构建调试环境,底部设计,页面设计思路,整体风格,响应式布局,PART,1,子目录,前后端交互,构建调试环境,理解“蜗牛笔记”的功能和需求。,完成对蜗牛笔记的前端界面设计和优化。,熟练运用BootStrap和CSS构建界面。,课程目标,一套博客系统的界面设计重点，在于让用户快速地找到自己感兴趣的文章。所以在风格设计上不易过于复杂，也不宜设计过多的功能。,整体界面设计为4个部分：顶部导航栏、中部左侧内容栏、中部右侧推荐栏和底部网站附加栏。,整体风格,为了更好地适配移动端，可以将放LOGO的一行进行收缩，将用户菜单和分类导航按钮进行折叠，接下来是内容呈现区域，占满手机端屏幕，将搜索框和推荐栏放置于主内容区的下面，底部的网站附加功能可以隐藏，也可以直接收缩。,整体风格,把文章列表和文章阅读界面设计完成后，用户中心和后台管理界面设计便相当容易，而且用户中心和后台管理都属于管理类页面，可以采用相同的布局，与文章列表和文章阅读页面略有差异即可。,整体风格,在使用BootStrap设计页面时，对一个列级DIV只需要设定两套样式，一套是针对PC端的，一套是针对移动端的。例如，可以为如下DIV指定xl、lg、md和sm为相同的PC端布局，而xs超小屏幕设置为移动端布局，具体代码如下。,上述代码可以看到，每个DIV元素的class属性设置太多，会导致代码的维护性变差，尤其当页面中的元素比较多的时候。所以，既然已经确定只设计两套界面方案，那么可以进行简写，对于sm及以上大小的设备，只需要设定sm的列宽，代码修改为以下内容。,响应式布局,以首页的中部内容来说，文章列表栏可以设置宽度为9列，文章推荐栏设置宽度为3列。在移动端时，则可以通过设定文章列表12列，文章推荐12列的方式变成独占一行，进而实现竖状浏览的效果。下面的代码演示了这样的设计方式。,注意，在栅格系统中，所谓的多少列的宽度并不是一个绝对的列宽，也不是基于container的列宽，而是基于父容器的相对宽度。例如，将一个子DIV，设置为5列（即5/12=41.667%），而其父容器的宽度是8列（8/12=66.667%），则该子DIV的实际宽度应为其外层容器宽度的0.41667*0.66667=0.27778倍，即如果外层容器的宽度是1140像素的container的话，那么该DIV的实际宽度应为1140*0.2778=317像素。,响应式布局,Web页面与后台的交互方式主要有3种：,直接提交HTML表单内容或直接通过超链接跳转。,通过模板引擎来渲染页面内容，页面内容的生成不是完整的HTML源代码，而是HTML标签夹杂着模板引擎标记，由后台服务器生成完整的HTML页面再响应给前端浏览器。,通过Ajax实现完全前后端分离，后台服务器只接收请求并返回JSON数据，不负责前端页面的构建。前端获取到后台的JSON数据后，再通过JavaScript代码或框架进行内容的填充。,前后端交互,在Flask运行环境下进行静态页面布局，确保各个静态资源的路径都按照Flask的规范进行设置，后期在与Flask进行整合时则无须修改HTML代码。请按照如下步骤进行配置。,构建调试环境,（,1,）在,PyCharm,中创建好,Flask,项目后，将,jQuery,，,BootStrap,，,Logo,图片等导入项目对应目录中。,（,2,）根据目录结构可以看到，项目根目录下默认创建了两个目录和一个,app.py,的源代码。其中,static,目录被设置为保存静态资源的目录，如,JavaScript,代码、,CSS,样式或图片资源等。而,templates,目录则主要用于保存前端,HTML,模板页面。,app.py,是,Flask,的入口程序，用于实例化,Flask,，配置,Flask,参数和启动,Flask,项目。,（3）修改app.py源代码，进行基础配置，具体配置及功能说明参考下面的代码和注释。,构建调试环境,from flask import Flask,render_template,#static_url_path,参数配置静态资源的基础路径，即所有页面访问静态资源使用,/,开始,app=Flask(_name_,static_url_path=/),#app.router(/),配置网站的首页路径,app.route(/),def index():,#,将,index.html,作为模板页面被,Flask,渲染后响应给浏览器,return render_template(index.html),if _name_=_main_:,app.run(),（4）在templates目录下创建index.html，并编写简单的HTML代码。,构建调试环境,蜗牛笔记,-,全功能博客系统,以蜗牛之名，行学习之实,（5）启动运行app.py，并在浏览器中访问：“127.0.0.1:5000/”，如果成功展示index.html页面内容，如图所示，则说明Flask环境配置成功，后续章节的前后端开发均基于该环境进行。,构建调试环境,（6）在后续开发中，难免会经常修改源代码，而在Flask的默认配置下，修改源代码后必须重启Flask服务才能看到运行效果，这样显得比较麻烦。所以需要在PyCharm中配置Flask的调试模式，让代码修改后Flask自动重启生效。打开PyCharm菜单“Run”下面的“Edit Configuration”子菜单，在弹出窗口中勾选“FLASK_DEBUG”选项，保存并重启Flask服务。,构建调试环境,如果上述调试模式配置生效，那么重启Flask服务时，会在PyCharm终端输出以下内容。,构建调试环境,FLASK_APP=app.py,FLASK_ENV=development,FLASK_DEBUG=1#,此处表明调试模式开启，说明配置成功,In folder E:/Workspace/pythonworkspace/WoniuNote,C:ToolsPython-3.7.4python.exe-m flask run,*Serving Flask app app.py(lazy loading),*Environment:development,*Debug mode:on#,此处也可表明调试模式开启，说明配置成功,*Restarting with stat,*Debugger is active!,*Debugger PIN:236-719-755,*Running on 127.0.0.1:5000/(Press CTRL+C to quit),PART,2,系统首页界面,顶部设计,中部设计,功能列表,子目录,底部设计,首页的详细功能模板构成如下：,（1）顶部的Logo和Slogan区域，纯静态内容展示，简单的进行处理。,（2）顶部的分类导航栏，用于文章分类，同时右侧放置用户菜单如登录，注销，用户中心。,（3）中部左侧显示轮播图和文章列表。文章列表可以分为4个部分：文章缩略图、文章标题、内容摘要和基本信息，如作者、分类、发布时间、浏览量、评论量和积分消耗等数据。,（4）中部右侧显示搜索工具栏和文章推荐栏，可以从多个维度进行推荐，本书选择3个维度进行推荐：最新文章、最多访问和特别推荐。,（5）由于一个博客系统的文章数量通常比较多，所以需要进行分页，可以在文章列表的下方显示分页导航按钮。,（6）底部为一些常规静态信息，进行常规布局。,功能列表,Logo区域,Logo区域就是一张图片和一条文字Slogan，只需要设计1300px的宽度，并实现水平居中，同时确保Logo和Slogan垂直居中。,顶部设计,实现效果如下,导航栏区域,导航栏的设计本身比较简单，但是考虑到需要适配移动端，所以仍然需要借助于BootStrap的响应式设计。同时，在移动端由于宽度不够，无法正常显示所有菜单，必须通过折叠的方式进行隐藏，并且将横向菜单变成竖向菜单。BootStrap对此设计提供了完整的支持,顶部设计,电脑运行效果如下,移动端运行效果,页面调试,顶部设计,Chrome,浏览器自带了移动端显示效果预览功能，不需要用手机访问。打开,F12,调试工具，单击“,Toggle device toolbar”,按钮即可预览移动端效果。,中部页面分为左右两栏，PC端设计为左边9列，右边3列的宽度，而在移动端则设计为全部12列宽度以迫使元素按照竖状进行布局。通常在设计静态页面时，由于静态页面并没有从数据库中获取数据进行填充的能力，所以可以直接使用一些固定在HTML页面中的图片和文字进行代替，待最后进行前后端整合的时候再进行替换。通过这样的方式才能够看到完整的页面设计效果。,中部设计,线框图设计完成后，可以开始填充静态内容，便于看到最终的页面效果，步骤如下。,（1）在轮播图的位置，准备三张图片，并使用BootStrap的轮播组件实现效果。,（2）文章摘要部分，准备一张图片用于显示文章缩略图。放置于最左侧。并且设置为在移动端环境下隐藏，以让出位置给文章标题和正文摘要的显示。同时为了首页能够显示一样大小的缩略图，建议通过CSS属性强制设计该图片的宽和高。,（3）文章摘要部分的正文部分，则可以使用三行显示内容。第一行显示文章标题，第二行显示文章信息，第三行显示正文摘要。,（4）搜索栏只需要显示一个文本框用于输入关键字，再加一个搜索按钮。,（5）文章推荐栏设置为两行，第一行显示一个标题，第二行显示文章列表，并使用列表元素进行显示。,中部设计,中部实现效果：,中部设计,底部设计代码：,底部设计,版权所有,蜗牛笔记,(V-1.0),备案号：蜀,ICP,备,15014130,号,友情链接,在线课堂,直播课堂,培训中心,UI,设计学院,联系我们,文章阅读界面,功能列表,设计思路,PART,3,代码设计,子目录,功能列表,文章阅读页面的功能点整理如下：,（1）首先需要将文章的标题、基本信息和正文内容全部展示出来。,（2）需要设置关联文章，如基于本篇文章的上一篇或下一篇。,（3）接下来是用户评论板块，主要包括发送评论、展示评论、对评论进行赞同或反对，以及回复对应的评论。,（4）提供收藏文章或编辑文章的附加功能，可以显示在标题栏处或正文结尾处。,设计思路,文章阅读的关键部分的设计思路：,（1）文章标题的显示，此处不仅可以显示文章标题，也可以显示文章基本信息，同时也可以将“编辑本文”和“收藏本文”功能也添加在标题栏里，让标题栏显得比较平衡。,（2）正文内容的显示，此处只需要提供一个DIV容器，不做过多样式设置，文章内容的排版交由作者在UEditor编辑器中进行。,（3）关联文章的显示，可以使用一个独立的DIV。,（4）文章评论板块，主要包括发表评论和显示评论，可以每一条评论独占一行。同时显示评论内容、评论者头像和评论时间，并且提供赞同、反对和回复功能。,所以整体界面设计上相对比较简单。为了使交互过程更加直观，可以利用BootStrap的图标功能，让界面更加丰富多彩一些。,代码实现,文章阅读页面最终效果图,其他界面,登录注册页面,文章发布界面,PART,4,系统管理界面,子目录,登录注册页面,为了减少页面之间频繁的跳转，在设计一些功能相对简单的界面时，编者建议使用模态框弹出的方式来处理。如登录、注册或者一些修改之类的小功能，均可以使用BootStrap自带的模态框来进行布局处理。另外，登录和注册通常是一体的，可以使用BootStrap的选项卡将登录和注册功能布局在同一个模态框中。,由于默认情况下，登录和注册模态框是隐藏的，需要单击导航栏上的“登录”来调出该模态框，在“登录”超链接上添加“data-toggle”和“data-target”属性。,登录,登录注册页面,登录注册页面效果如下：,文章发布界面,文章发布界面主由5个元素组成：标题输入框、内容编辑框、类别下拉框、积分下拉框、保存草稿箱和提交文章按钮。,重点需要关注一下内容编辑框，因为内容编辑涉及对UEditor插件的使用。文章发布界面属于后台管理模块的功能，必须要有权限的用户才能发布文章，所以除了顶部与底部内容与首页风格完全一致外，中部区域的内容需要重新设计，不再需要显示文章推荐侧边栏。,文章发布界面,文章发布界面实现效果：,系统管理界面,系统管理界面包含的内容较多，包括后台管理和用户中心。以文章管理举例，其他界面可如法炮制。,系统管理页面实现效果：,谢谢聆听,蜗牛学院，只为成就更好的你！,邓 强,2021,年,5,月,数据库设计,重构,IT,职业教育新生态,Vision Mission Passion,邓 强,目 录,CONT,ENTS,其他表的设计,用户评论表,文章收藏表,积分详情表,设计文章表,设计思路,数据字典,设计用户表,设计思路,数据字典,创建用户表,3,2,1,设计用户表,设计思路,PART,1,子目录,数据字典,创建用户表,熟练使用Navicat工具完成数据库设计。,掌握MySQL数据库中的表关系和数据类型。,进一步通过设计数据库来深入理解系统功能。,课程目标,设计思路,为用户表设计一个唯一标识字段，并且设置为自动增长，以此来标识不同的用户。同时也应该将该字段设计为主键，以便于与其他表产生关联。,设计用户名和密码用于注册和登录，为了安全起见，密码建议使用MD5进行加密处理。同时为了更加方便地与用户取得联系，也便于用户在忘记密码时能够找回密码，建议使用邮箱地址或者电话号码进行注册。,蜗牛笔记会显示作者名字，发表评论时也会显示评论者名字。显然不可能将用户的手机号码或者邮箱地址直接显示在页面上，所以应该为每一个用户指定一个昵称用于显示，显得更加友好。,为了更方便地与用户取得联系，可以在用户同意的情况下索取用户的QQ号码，QQ号码也对应着QQ邮箱，对于某些优秀文章也可以直接发送邮件的方式分享给用户。,为用户表的每一个用户指定一个角色，如admin、editor或user，用以标识用户类别，便于系统检查用户是否有权限操作相应功能。,由于蜗牛笔记设计了积分阅读功能，所以需要为用户表设计一个积分字段，用以汇总当前用户剩余积分。,为了让用户更加个性化，建议用户可以自己选择不同的头像，系统也可以默认给初始注册用户生成一个随机头像。,通常情况下，每一种表的每一条数据，都需要有两个时间标记，用于标记某行数据是什么时候创建的，什么时候被修改过。,设计思路,此处需要额外注意一点，由于user是MySQL系统关键字，为了避免出现与表名的混淆，将用户表命名为users。,数据字典,字段名称,字段类型,字段约束,字段说明,userid,int(11),自增长、主键、不为空,用户唯一编号,username,varchar(50),字符串、最长,50,、不为空,登录账号，可以为有效的邮箱地址或电话号码,password,varchar(32),MD5,加密字符串、不为空,登录密码,nickname,varchar(30),字符串、最长,30,、可为空,用户昵称,avatar,varchar(20),字符串、最长,20,、可为空,用户头像的图片文件名,qq,varchar(15),字符串、最长,15,、可为空,用户的,QQ,号码,role,varchar(10),字符串、不为空，,admin,表示管理员，,editor,表示作者，,user,表示普通用户,用户的角色,credit,int(11),整数类型、默认为,50,，表示用户注册时即赠送,50,积分,用户的剩余积分,createtime,datetime,时间日期类型、格式为,yyyy-mm-dd hh:mm:ss,该条数据的新增时间,updatetime,datetime,时间日期类型、格式同上,该条数据的修改时间,完成了用户表的数据字典设计后，接下来直接可以使用Navicat来创建用户表了。在创建数据库的第一张表之前，需要先创建一个数据库，将其命名为“woniunote”。,创建用户表,在创建数据库的时候需要特别注意，为了与,Python,和浏览器等应用系统的字符编码更好的匹配，请务必指定数据库的编码格式为,UTF-8,。,数据库创建完成后，接下来直接创建用户表，命名为“users”,创建用户表,创建完成数据库后，可以运行以下SQL语句先插入几条用户数据，便于后期开发过程中调试。事实上，用户注册的过程，在后台最终也是执行这样的SQL语句。,创建用户表,INSERT INTO users VALUES(1,woniu,e10adc3949ba59abbe56e057f20f883e,蜗牛,1.png,12345678,admin,0,2020-02-05 12:31:57,2020-02-12 11:45:57);,INSERT INTO users VALUES(2,qiang,e10adc3949ba59abbe56e057f20f883e,强哥,2.png,33445566,editor,50,2020-02-06 15:16:55,2020-02-12 11:46:01);,INSERT INTO users VALUES(3,denny,e10adc3949ba59abbe56e057f20f883e,丹尼,3.png,226658397,user,100,2020-02-06 15:17:30,2020-02-12 11:46:08);,PART,2,设计文章表,数据字典,设计思路,子目录,博客系统的核心便是文章内容，所以文章表的设计至关重要，文章表主要解决以下11个问题：,（1）文章的类别，属于哪一个技术类型下的文章。,（2）文章的标题列，用于存储文章的标题。,（3）文章的内容，以HTML格式存储。,（4）文章的作者信息，在用户表中已经有了作者信息，此处需要建立关联。,（5）文章的缩略图，用于在首页上显示以使排版更加美观。不建议在数据库中直接保存二进制数据，通常将图片保存在硬盘上，数据库中只存储相应路径。,（6）文章阅读次数、评论次数和收藏次数。此类汇总数据通常有两种处理方式，一是直接在代码中运行SQL语句的count函数进行实时汇总，二是直接在主表中对相应列进行更新操作。,设计思路,博客系统的核心便是文章内容，所以文章表的设计至关重要，文章表主要解决以下11个问题：,（7）文章的积分消耗，如果文章需要设置积分阅读功能，那么需要标识文章所需积分。,（8）文章的推荐标识，如果设置为推荐文章，则可以在首页文章推荐栏显示出来。,（9）文章的隐藏标识，用于标记文章是否被隐藏。,（10）由于发布文章时可以保存草稿箱，所以需要有一个字段来标识是否为草稿。,（11）普通用户不能直接发布文章，但是可以投稿，投稿后需要管理员进行审核或编辑后才能正式发布。所以需要一个字段来标识是否为正式文章还是待审核文章。,设计思路,其他注意事项：,文章表与用户表的主外键关系的设计，包括后续各类表的主外键约束关系。主外键约束可以确保多个表格的数据完整性和一致性，这也是关系型数据库的核心功能。但是实际经验是，针对互联网类业务系统，主外键约束并不是必需的，通过代码进行控制也是一种方案。因为一个复杂系统中表与表之间的关系太多后，往往增加更多数据库开销从而导致性能下降。,主外键约束主要是约束关联表之间的数据更新，尤其是插入和删除。插入外表数据时，确保外表中的外键数据一定存在于主表中，否则无法插入数据。而在删除主表数据时，确保外表中没有进行主键引用，否则无法删除主表数据。以此来保证数据的完整性和一致性。,设计思路,根据用户表的功能设计数据字典,数据字典,字段名称,字段类型,字段约束,字段说明,articleid,int(11),自增长、主键、不为空,文章唯一编号,userid,int(11),users,表外键、不为空,关联发布者信息,type,tinyint,整数、无默认值、不为空,关联文章类型,headline,varchar(100),字符串、最长,100,、不为空,文章标题,content,mediumtext,字符串、最大,16777216,字符,文章内容,thumbnail,varchar(20),字符串，最大,30,个字符,缩略图文件名,credit,int(11),整数、默认为,0,文章消耗的积分数,readcount,int(11),整数、默认为,0,文章阅读次数,replycount,int(11),整数、默认为,0,评论回复次数,recommended,tinyint,整数、默认为,0,（不推荐）,是否设为推荐文章,hidden,tinyint,整数、默认为,0,（不隐藏）,文章是否被隐藏,drafted,tinyint,整数、默认为,0,（非草稿）,文章是否是草稿,checked,tinyint,整数、默认为,1,（正式文章）,文章是否已被审核,createtime,datetime,时间日期类型,该条数据的新增时间,updatetime,datetime,时间日期类型,该条数据的修改时间,其他表的设计,用户评论表,文章收藏表,PART,3,积分详情表,子目录,用户评论表的设计需要重点解决一个问题：有效区分出哪些数据是原始评论，哪些数据是对原始评论的回复。,字段名称,字段类型,字段约束,字段说明,commentid,int(11),自增长、主键、不为空,评论唯一编号,userid,int(11),users,表外键、不为空,关联评论者信息,articleid,int(11),article,表外键、不为空,关联文章表信息,content,text,字符串、最大,65536,字符,评论的内容,ipaddr,varchar(30),字符串、最大,30,个字符,评论用户的,IP,地址,replyid,int(11),整数，如果是评论回复，则保存被回复评论的,commentid,，否则为,0,表示为原始评论,是否为原始评论及被回复评论的,ID,号,agreecount,int(11),整数、默认为,0,赞同该评论的数量,opposecount,int(11),整数、默认为,0,反对该评论的数量,hidden,tinyint,整数、默认为,0,（不隐藏）,评论是否被隐藏,createtime,datetime,时间日期类型,该条数据的新增时间,updatetime,datetime,时间日期类型,该条数据的修改时间,用户评论表,文章收藏表结构比较简单，标识清楚哪个用户，在什么时候，收藏了哪篇文章，并利用另外一列标识是否取消了收藏。,字段名称,字段类型,字段约束,字段说明,favoriteid,int(11),自增长
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
