标签：Vue 近取 实现 前端 Django 规格 api 文档 Key
| 项目 | 内容 |
|---|---|
| 这个作业属于哪个课程 | 2021春季计算机学院软件工程(罗杰 任健) |
| 这个作业的要求在哪里 | 技术规格说明书 |
| 我在这个课程的目标是 | 进一步提升工程化开发能力，积累团队协作经验，熟悉全栈开发流程 |
| 这个作业在哪个具体方面帮助我实现目标 | 介绍项目整体规格和技术基础，并进行简要分析 |
我们团队提出的『近取Key』网页端背单词软件为自选题目，不存在前人的任何架构以供继承，全部内容都将由本团队从零开始实现。该项目的具体功能设计可参见项目功能说明书，这里不再赘述。
一、项目技术栈
项目整体基于网页web端实现，目标适配PC、平板等大屏用户端。项目整体将统一部署到服务器云端，云端开发部署环境为ubuntu 16.04，目前已在阿里云上购买相应服务器，服务器基本配置如下：
- 2核4G，40G ESSD云盘存储，5Mbps公网带宽
前后端开发所涉及的具体技术栈如下：
- 前端：前端所用的程序设计语言为
css+html+js全家桶，采用Vue+Axios框架开发，利用postman软件进行后端模拟测试；- 低版本浏览器适配：使用Babel编译器，实现ES6语法的前向兼容
- 后端：后端所用的程序设计语言为
python+sql，采用Django+MySQL框架，可自行进行单元测试等操作；其中python版本为3.8，MySQL版本为5.7，后续可能会视具体兼容情况决定是否做相应调整。
二、功能设计
软件整体功能设计图如下：
三、软件架构
软件的整体架构如下图所示：
下面对其中的主要模块所承担的功能任务进行简要介绍。
数据爬虫
主要进行单词及其相关数据的爬取与预处理工作，批量对单词相关数据进行处理，并将其预先写入数据库中。
后端Django框架
基于MVC架构实现，利用Django提供的对象关系映射机制(ORM)、路由管理、用户系统组件可显著降低开发成本，提升整体开发效率。同时，Django提供的Django-rest-framework(DRF)插件也可方便地定义前后端交互API，并通过uwsgi进行代理，从而快速迭代实现前端所需的各类接口。
前端Vue.js+Axios
前端采用Vue.js框架实现，利用其“单文件组件”的组织结构，使得页面、样式和脚本代码被集成到了同一个.vue文件中，并可以通过组件这一形式实现前端开发的面向对象化，从而做到信息的封装与隐藏。
Nginx&CDN
此二者主要用于应对潜在的高并发情况，即当出现大量用户请求时，Nginx可通过反向代理从服务器集群中选择一个当前负载较小的服务器进行分派，从而实现静态资源负载均衡；CDN则可通过缓存加速机制使用户就近取得所需内容，解决Internet网络拥挤的状况，从而提高用户访问网站的相应速度。
四、开发目标
目前暂只考虑alpha阶段的相关开发目标。
4.1 代码编写与设计
后端
- 完成数据爬虫和预处理的相关代码实现
- 设计ER图，利用Django搭建并初始化数据库，导入相关数据
- 基于api文档，实现相关的所有API对应的controller单元
- 实现基于艾宾浩斯记忆曲线的复习推荐的相关算法
- 若时间尚有剩余，可对高并发场景进行针对性优化和设计
前端
- 设计功能设计图中各主要页面的基本布局与事件相应及处理逻辑
- 完成主要页面相关代码的撰写与实现
4.2 测试
后端
- 完成数据爬虫与各api的功能性测试（单元测试90%以上覆盖）
- 若时间尚有剩余，则考虑高并发场景，进行压力测试
- 压力指标：基于服务器实际负载上限与alpha阶段预期用户数综合确定
前端
- 利用postman对各api接口进行真实测试
- 测试细节：对于各get、post等方法，由Postman发出相应数据，前端捕捉后进行响应，检查基本逻辑是否正确无误
- 采用单元测试、组件测试与端到端（E2E）测试相结合的方式，联合使用Jest与Vue-test-utils单元测试工具，并利用Nightwatch.js实现E2E测试
集成
- 前后端部署后，进行集成模拟测试，即模拟用户在真实场景下的可能操作，前后端统一进行检错。
4.3 文档
文档编写方面，出于时间紧、任务重的综合考虑，我们团队决定采取非必要不编写的基本原则。即除必要的前后端交互所需的api文档外，其余说明文档视时间允许与任务需要决定是否撰写。
另外，虽然我们不强制要求说明文档的撰写，但我们非常鼓励在代码中添加必要的注释，从而保证代码的可读性，为后续的迭代工作做好预备，这方面的内容已被纳入本团队的贡献分考核指标中。基于此，我们或许可以借助相关工具从注释直接导出相应的说明文档。
五、基本分析
5.1 封装与抽象
底层实现抽象（基于Django）：
- 将SQL语句抽象为OOP的相应函数式操作，便于实现复杂语句的增删改查
- 将数据模型抽象为python中的类对象，便于定义属性及其相应约束
- 将结构变动信息抽象为migrations中的迁移记录，便于审核与检查
物理数据抽象：
- 将单词实体抽象为包含单词文本、释义、例句、音标音频等信息的映射关系，从而可降低其内部耦合度，自由添加额外信息
- 将词图抽象为单词与其位置的一一对应映射，从而可便于存储和复现
- 将词书抽象为视图，从而降低底层数据冗余
- 将前端页面的复杂逻辑抽象为一个个组件，便于相互调用
- 基于MVVM模型的思想，采用Vue框架，模块化编写单文件组件，将View的状态和行为抽象化，让视图UI和业务逻辑分开
用户视图抽象：
- 基于『词图』，在单词和词书之间额外增加了一层有丰富语义信息的数据抽象层次，从而帮助用户记忆
- 利用统计信息，获得每日打卡情况的整体统计数据，帮助了解评估整体学习效果
RESTful API：
- 将前后端完全分离，前端只能通过调用相应api实现对后端数据的访问，后端的其余数据无法被前端捕获，从而实现信息的封装与隐藏
5.2 高内聚低耦合
高内聚：
- 前后端各司其职，只通过api通信、交换数据
低耦合：
- 后端采用MVC架构，将数据、控制器与视图分离，降低各模块之间耦合度
- 前端采用MVVM架构，利用组件进一步划分功能，降低各页面各模块之间的相互影响
- 对于每一个页面的功能（如单词的拖拽、编辑、查看释义等），单独编写Vue组件，便于复用、降低耦合
5.3 错误机制与处理方法
后端：
- 构造异常，对可能的错误进行捕获
- 与前端通信时，若出现错误，则返回相应的Http错误码，便于Debug时判断具体的错误信息
- 利用Django，可在Debug模式下实时查看前端调用API接口时的具体异常信息，包括错误栈等
前端：
- 使用Vue提供的用于捕获异常的API：errorCaptured、errorHandler，对于不同的错误类型使用try...catch...分类进行处理；进一步地，对于不同的错误类型，我们将设置相应的内部错误码，从而明确前后端的通信规范。
5.4 高并发场景的应对方式
考虑到我们预期的用户规模不大，后端逻辑相对简单，因此在开发阶段项目不存在较高的并发需求。对于一般情况，MySQL + Nginx + uwsgi的部署策略即可满足要求。
若后续阶段出现强烈的高并发需求，则可借助CDN做进一步的静态资源分发，后端同时增加响应实例数量，并利用
假如出现更强烈的高并发需求，可以借助CDN分发静态资源（前端SPA），后端增加响应实例数量，数据库实现读写分离，进行分布式管理，同时添加redis等中间件消峰。
5.5 需求灵活变化
由于我们的软件整体设计上呈现扁平化趋势，且团队规模与软件大小均相对轻量，因此当出现新增需求时，我们可以实现“一站式”流水线应对方案。
具体操作流程为：
- 前端设计实现用户操作接口、相应界面与控制逻辑
- 前端判断现有api能否满足新需求需要，若不可，则定义新的api，同时更新api文档
- 后端基于api文档实现其内部控制逻辑，同时判断现有数据模型能否满足新需求需要
- 若不可，则调整数据模型，进行迁移
标签：Vue,近取,实现,前端,Django,规格,api,文档,Key 来源： https://www.cnblogs.com/mzztxx/p/14679508.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。