项目1：搭建“古典文学网”的开发环境（定稿请参照该版本完善其他章节）

项目1搭建“古典文学网”的开发环境XXX202X-XX-XX

目录02.任务1：搭建项目后端开发环境05.任务4：开发“hivue”前端项目03.任务2：开发“hiflask”后端项目04.任务3：开发“hiflask”后端项目01.知识储备：全栈开发技术06.拓展任务

学习目标知识目标：

了解“古典文学网”项目需求，掌握其功能结构与设计理念；

了解“全栈开发”概念与特点，掌握其开发理念，并灵活运用于实践中；

了解“前后端分离技术”的原理与优势，掌握其技术栈及实际运用。能力目标：

通过学习“古典文学网”后端技术，能熟练搭建后端开发环境；

通过学习“古典文学网”前端技术，能够熟练搭建前端开发环境。素质目标：

培养软件工程师的系统思维，严格遵守行业规范和标准，提高软件质量和可靠性；

培养软件工程师的责任感、职业精神和团队精神，遵守职业道德。01项目描述

1.1.项目需求老袁对“古典文学网”项目进行了如下介绍：该项目是一个专注于高品质古典文学的在线阅读与交流平台，旨在推动中华文化的传承与发展。在这个平台上，用户可以欣赏到丰富的古典文学作品，参与书评讨论，并管理自己的个人中心。该项目采用全栈开发方式，运用前后端分离技术架构，使用Python、Flask、Vue.js、ElementPlus和MySQL等技术进行开发，旨在为用户提供一款功能强大、界面友好的Web应用。

1.2.项目WBS工作分解结构图小白认真听取了老袁对“古典文学网”项目的详细介绍，并结合项目需求文档，精心绘制了“古典文学网”项目的WBS工作分解结构图，如图所示。02知识储备

2.知识储备在“古典文学网”项目正式开发之前，老袁指导小白先初步了解项目所采用的技术框架，包括全栈开发、前后端分离技术等。

2.1.全栈开发全栈开发是一种能提升开发效率和软件质量的开发模式。这种开发模式，需要开发人员具备多元化的技能和实践经验，能独立承担开发一个应用程序的全部工作，涵盖前端开发与后端开发、数据库管理以及系统架构设计等多个方面。全栈开发人员应熟练掌握HTML、CSS、JavaScript等前端技术，同时还应了解后端语言如Python、Node.js、Ruby等，并对数据库管理、系统设计以及性能优化等领域有所涉猎。全栈开发的优势在于，它能提升开发效率和软件质量，同时降低沟通和协调成本。因为全栈开发人员具备全面的技能，所以他们能更深入地理解和掌握项目的整体架构和细节，从而更有效地完成开发工作。

2.2.前后端分离技术前后端分离技术是一种应用程序架构模式，它将前端（用户界面）和后端（服务器端）的开发任务明确区分，并通过预先定义的接口进行通信。这种架构模式的实施，使得前端和后端开发团队能够独立进行开发、测试和部署工作，从而极大地提高了软件开发的效率和质量。在前后端分离架构中，前端团队主要负责呈现数据以及实现用户交互，而后端团队则专注于处理业务逻辑和数据存储。前端团队可以利用各种前端技术和框架，创造出丰富、动态的用户界面，为用户提供流畅、直观的使用体验。同时，后端团队则可以利用后端技术和数据库管理系统，实现高效、稳定的数据处理和业务逻辑执行。前后端分离技术架构如图1.2所示。

2.2.前后端分离技术logo图1.2前后端分离技术架构图

2.3.Python开发技术Python的简介Python是由荷兰计算机科学家吉多范罗苏姆（GuidovanRossum）于1989年首次开发的编程语言，最初被设计为一种简单易学的脚本语言，主要用于编写自动化脚本。然而，随着计算机科学的不断发展，Python也逐步演变成为一种功能全面、用途广泛的编程语言。Python的应用领域非常广泛，无论是Web开发、数据科学、人工智能、机器学习，还是网络爬虫、系统自动化、游戏开发等领域，Python都发挥着重要的作用。Python的丰富库和框架，如Django、Flask、Pandas、NumPy、TensorFlow等，为开发者提供了强大的工具，使得Python成为许多领域的首选语言。Python语言的Logo图标如图所示。

pip包管理工具pip是Python的包管理工具，它提供了查找、下载、安装和卸载Python包的功能。自Python3.4+版本起，pip包管理工具已经被集成到Python中，使得在线安装依赖库变得非常方便。在Windows系统中，我们可以通过“命令行窗口”直接执行pip命令，或者在VisualStudioCode的终端窗口中执行。这使得在开发过程中管理Python包变得更加高效和便捷。

pip包管理工具

2.4.Flask框架Flask框架的简介Flask框架是一个用Python语言编写的轻量级Web应用框架（Microframework），它适合各种规模的Web项目，无论是小型个人网站还是大型企业级应用。此外，Flask框架的强大插件库为用户提供了实现个性化网站定制的可能性，使其非常适用于快速开发功能强大的Web应用程序和Web服务API。Flask框架的Logo图标如图所示。

2.4.Flask框架Flask框架的特点（1）轻量级和灵活Flask是一个轻量级的Web应用框架，它只包含核心功能，如路由、模板渲染等。这使得Flask非常灵活，开发者可以根据自己的需求自由添加和配置所需的功能。（2）易于扩展Flask采用扩展机制，开发者可以通过添加扩展来扩展其功能。Flask拥有强大的插件库，这些插件可以为Flask添加各种功能，如数据库管理、表单验证、用户认证等。（3）简洁的APIFlask的API非常简洁和易于理解，这使得开发者能够更快速地学习和使用Flask。同时，简洁的API也减少了开发者的学习成本和维护成本。（4）适用于各种应用Flask适用于各种规模和应用类型的Web项目，它的灵活性和可扩展性使得它能够应对各种复杂场景。

2.5.MySQL数据库MySQL数据库是一个开源的关系型数据库管理系统（RDBMS），它最初由瑞典的MySQLAB公司开发，而现在它是甲骨文公司（OracleCorporation）的一部分。由于其强大的性能和灵活性，MySQL已经成为最受欢迎的开源关系型数据库之一。MySQL数据库的Logo图标如图所示。

2.5.MySQL数据库MySQL支持多个操作系统，包括Linux、Windows、macOS等，因此它可以在各种不同的环境中运行。MySQL提供了高效、可靠、稳定的数据存储和管理服务。这使得它成为Web应用程序、企业应用程序和移动应用程序等领域的理想选择。

2.6.Vue开发技术Vue框架的简介Vue框架是一个构建用户界面的渐进式JavaScript框架，它的设计理念使得开发者可以灵活地将其应用于各种规模和复杂度的项目中。与其他大型框架不同，Vue被设计为可以自底向上逐层应用，这意味着开发者可以根据项目的实际需求逐步引入Vue的功能，从而实现平滑的过渡和扩展。Vue框架的Logo图标如图所示。

2.6.Vue开发技术Vue框架的简介Vue框架的核心库专注于视图层，这使得它易于上手，同时也便于与第三方库或已有项目整合。无论是简单的静态页面还是复杂的单页应用，Vue框架都能提供灵活而高效的解决方案。

2.6.Vue开发技术Vue框架的特点（1）轻量级与简单易学Vue的核心库专注于视图层，使得它相比于其他大型框架更为轻量级。同时，Vue采用了简洁的API设计，使得开发者可以快速上手并掌握其使用。（2）组件化开发Vue通过组件化的开发方式，将页面拆分为多个独立的组件，每个组件负责自己的逻辑和样式。组件间可以相互嵌套，使得开发者能够构建出复杂且富有层次感的界面。（3）响应式数据绑定Vue使用了响应式的数据绑定机制，当数据发生变化时，页面会自动更新以反映最新的数据状态。这种机制使得开发者无须手动操作DOM，大大简化了开发过程。03项目任务

3.1.搭建项目后端开发环境在项目的后端开发中，我们采用了Python语言、Flask框架、VisualStudioCode开发工具以及MySQL数据库等核心技术。在正式搭建开发环境之前，我们必须先确认项目电脑所使用的操作系统的版本，以确保兼容性和稳定性（本项目使用Windows64位操作系统）。随后，我们需下载与之兼容的开发工具。需求描述：

3.1.搭建项目后端开发环境任务步骤：1.安装Python开发环境2.安装Flask框架及扩展包3.安装VisualStudioCode开发工具4.安装MySQL数据库

3.1.搭建项目后端开发环境1.安装Python开发环境安装Python语言环境，需要下载Python安装包。我们通过浏览器访问其官方网站，选择适合自己操作系统版本的Python安装包，如图所示。（1）下载Python安装包

3.1.搭建项目后端开发环境下载Python安装包后，接下来进行安装。首先，使用鼠标左键双击下载的Python安装包，这将启动安装程序。安装程序通常会显示一个图形界面，其中包含几个步骤来引导用户完成安装过程，如图所示。1.安装Python开发环境（2）安装Python

3.1.搭建项目后端开发环境在上述界面勾选“Useadminprivilegeswheninstallingpy.exe”和“Addpython.exetoPATH”两项，并单击“Customizeinstallation”链接，按引导提示进行自定义安装，进入高级选项界面，如图所示。在上述的安装界面，勾选图示中的选项，并选中Python安装目录（请勿安装在ProgramFiles目录下）。单击“Install”按钮，完成安装。1.安装Python开发环境（2）安装Python

3.1.搭建项目后端开发环境首先，按下键盘上的Win+R快捷键，这将打开“运行”对话框。在对话框中，输入cmd命令，并单击“确定”或按回车键，以打开命令行窗口。接下来，在命令行窗口中，输入python命令，并按回车键，将显示Python的版本信息，即表示已经安装成功，如图所示。1.安装Python开发环境（3）验证Python

3.1.搭建项目后端开发环境由于一些客观原因，使用Python的pip包管理工具下载第三方库时速度很慢，这时可以使用镜像下载，提高下载速度。请在命令行窗口中输入以下命令，并按下“回车键”后，完成镜像的安装。pipconfigsetglobal.index-url

/pypi/simple1.安装Python开发环境（3）验证Python

3.1.搭建项目后端开发环境2.安装Flask框架及扩展包在进行项目的后端开发时，我们使用Flask框架作为主要开发技术。为此我们需要使用pip工具来安装Flask框架及相关扩展库。以下是在本项目中使用到的相关库及其安装命令的列表。

3.1.搭建项目后端开发环境安装Flask框架为例在此处，我们以安装Flask框架为例，展示如何使用pip工具安装Flask框架。首先，打开命令行窗口，在命令行窗口中，输入以下指令来安装Flask框架。pipinstallflask按下“回车键”后，pip将开始从Python软件包索引（PyPI）下载并安装Flask框架。2.安装Flask框架及扩展包

3.1.搭建项目后端开发环境3.安装VisualStudioCode开发工具安装VisualStudioCode（VSCode）开发工具，需要下载其安装包。我们通过浏览器访问VSCode的官方网站。在官方网站上，选择相应的VSCode安装包进行下载，如图所示。（1）下载VSCode安装包

3.1.搭建项目后端开发环境下载VSCode安装包后，接下来进行安装。首先，使用鼠标左键双击下载的VSCode安装包。这通常会启动安装向导，引导我们完成安装过程。VSCode的操作界面如图所示。3.安装VisualStudioCode开发工具（1）下载VSCode安装包

3.1.搭建项目后端开发环境为了进行项目开发，我们还需要安装一些支持Python的扩展插件。这些插件可以增强VSCode的功能，使其更好地支持Python语言。请按照以下步骤安装相关扩展插件：①

打开VSCode，单击左侧边栏的扩展图标（快捷键Ctrl+Shift+X）打开扩展面板。②

在搜索框中输入插件名称，然后在搜索结果中找到对应插件。③

单击插件旁边的“Install”按钮来安装插件。3.安装VisualStudioCode开发工具（2）VSCode扩展插件安装

3.1.搭建项目后端开发环境3.安装VisualStudioCode开发工具表1.3后端项目所使用到的VSCode扩展库

3.1.搭建项目后端开发环境我们通过浏览器访问MySQL的官方网站。在官方网站上，选择相应的MySQL安装包进行下载，如图所示。4.安装MySQL数据库（1）下载MySQL安装包

3.1.搭建项目后端开发环境下载MySQL安装包后，请使用鼠标左键双击MySQL安装包。这通常会启动安装向导，在安装引导界面，我们勾选“Full”选项，安装MySQL数据库，如图所示。4.安装MySQL数据库（2）安装MySQL数据库

3.1.搭建项目后端开发环境当我们单击“Next”按钮后，安装程序将开始检查我们的安装环境，如果在检查安装环境的过程中，提示缺少VC库（VisualC++库），请先安装VC库。单击“Next”按钮，进入安装确认界面，如图所示。在上述界面中，单击“Execute”按钮后，开始进行安装。4.安装MySQL数据库（2）安装MySQL数据库

3.1.搭建项目后端开发环境在安装完成界面，单击“Next”按钮后，安装程序会进入MySQL配置界面。在该配置过程中，可以配置MySQL的端口、登录账号及密码等配置信息，请按提示完成安装。4.安装MySQL数据库（2）安装MySQL数据库

3.2.开发“hiflask”后端项目为了确保开发环境能够正常运行，我们将开发一个简单的Flask项目进行测试。需求描述：

3.2.开发“hiflask”后端项目任务步骤：1.创建“hiflask”项目2.开发“hiflask”项目3.运行“hiflask”项目

3.2.开发“hiflask”后端项目1.创建“hiflask”项目首先，在磁盘中新建一个名为“hiflask”的文件夹，作为项目存放目录。接下来启动VSCode开发工具，单击菜单栏中的“File”选项，然后在下拉菜单中选择“OpenFolder”命令，打开刚才创建的“hiflask”文件夹，如图所示。

3.2.开发“hiflask”后端项目2.开发“hiflask”项目在“hiflask”项目中，请在VSCode的菜单栏中，单击“File”菜单，然后在下拉菜单中选择“NewFile...”子菜单，新建一个名为App.py的文件，并输入以下代码：#引入Flask框架fromflaskimportFlask#创建Flask框架引用app=Flask(__name__)#定义一个请求方法，用于输出文字@app.route("/")defhello_flask():

return"HelloFlask"#启动Flask程序if__name__=="__main__":

app.run(debug=True)

3.2.开发“hiflask”后端项目3.运行“hiflask”项目请打开“App.py”文件，在VSCode菜单栏中，选中“Run”菜单，然后在下拉菜单中选择“StartDebugging（F5快捷键）”子菜单，启动该项目（选中“PythonFileDebug……”），如图所示。

3.2.开发“hiflask”后端项目3.运行“hiflask”项目通过上面的操作，VSCode将启动“hiflask”项目，并在VSCode的Terminal终端出现如图所示文字，即启动成功。

3.2.开发“hiflask”后端项目运行“hiflask”项目在浏览器中输入上图中红框部分的URL，即可查看运行效果，如图所示。注意：在Terminal终端，可通过快捷键Ctrl+C，可以停止项目运行。

3.3.搭建项目前端开发环境在前端开发中，我们采用了Note.js、Vue.js、Postman等开发工具。在正式搭建开发环境之时，我们需下载与电脑操作系统兼容的开发工具。需求描述：

3.3.搭建项目前端开发环境任务步骤：1.安装Note.js环境2.安装Vue开发插件3.安装Postman开发工具

3.3.搭建项目前端开发环境1.安装Note.js环境安装Vue.js框架，需要下载Note.js安装包。我们通过浏览器访问Node.js的官方网站，选择相应的Node.js安装包进行下载，如图所示。下载Node.js安装包后，使用鼠标左键双击Node.js安装包，启动安装向导，引导我们完成安装。

3.3.搭建项目前端开发环境1.安装Note.js环境Node.js安装完成后，打开命令行窗口，输入“node–v”命令，并按回车键。如果Node.js已经成功安装，会出现Node.js的版本信息，如图所示。

3.3.搭建项目前端开发环境1.安装Note.js环境在进行Vue程序开发时，经常会使用到npm（NodePackageManager）包管理工具，用于安装、更新和管理Node.js的各种模块和包。但是由于一些客观原因，使用npm包工具下载模块和包速度很慢，这时可以使用“cnpm”（中国镜像的npm）包管理工具代替“npm”。打开命令行窗口，在命令行窗口中输入以下命令，并按下回车键后，完成镜像的安装。npminstall-gcnpm--registry=在后续的项目开发过程中，就可以使用它来安装和管理Node.js项目的依赖包。cnpm的使用方式和npm的是一样的，只需将npm的命令换成是cnpm就可以了。

3.3.搭建项目前端开发环境2.安装Vue开发插件Vue官方推荐使用的集成开发环境（IDE）是VisualStudioCode（VSCode），并建议配合Vue语言特性插件Vue-Official使用。我们需要在VSCode中安装一系列扩展插件，具体安装步骤参考本项目中“1.3.1.搭建项目后端开发环境”小节中的“VSCode扩展插件安装”内容。

3.3.搭建项目前端开发环境3.安装Postman开发工具在开发“古典文学网”项目时，前后端采用API接口的方式进行数据交互。为此，我们选择了Postman测试工具进行后端API接口测试。我们通过浏览器访问Postman的官方网站，选择相应的Postman安装包进行下载，如图所示。

3.3.搭建项目前端开发环境3.安装Postman开发工具下载Postman安装包后，请使用鼠标左键双击Postman安装包，通过安装向导，引导我们完成安装。首次使用Postman时，我们需要注册一个账号，并使用账号登录后，即可使用其全部功能。Postman的操作界面，如图所示。

3.4.开发“hivue”前端项目现在，我们已经搭建好“古典文学网”项目的前端开发环境，接下来将开发一个简单的Vue项目进行测试。需求描述：

3.4.开发“hivue”前端项目任务步骤：1.创建“hivue”项目2.开发“hivue”项目3.运行“hivue”项目

3.4.开发“hivue”前端项目1.创建“hivue”项目首先，确保我们安装了最新版本的Node.js，并确定项目工作目录。打开命令行窗口，通过cd命令进入项目工作目录，然后输入以下命令，并按回车键。cnpmcreatevue@latest

3.4.开发“hivue”前端项目1.创建“hivue”项目该命令将会创建一个Vue项目。在此过程中，我们将会看到一些诸如TypeScript和测试支持之类的可选功能提示，可通过左右选择按键选择是否引入可选功能，按下回车键确认，如图所示。

3.4.开发“hivue”前端项目2.开发“hivue”项目启动VSCode开发工具，打开刚才创建的“hivue”项目。如图所示。

3.4.开发“hivue”前端项目2.开发“hivue”项目打开“hivue”项目后，需要在VSCode里面进行换行符（eol）配置。单击左侧边栏的设置图标

打开设置面板，在搜索框输入eol关键字，将其配置为“\n”。如图所示。

3.4.开发“hivue”前端项目3.运行“hivue”项目首先，在VSCode单击菜单栏中的“Terminal”选项，接着在下拉菜单中选择“NewTerminal