node.js的校园微商平台的设计与实现【字数:13643】
摘 要前端技术爆发式的发展在提高了开发效率和减少开发成本的同时,也带来了更多的机遇与挑战。新框架新技术每天都在更新迭代,用户对于应用体验的要求也越来越高,本课题的设计也应运而生,专注于更好的用户体验和更高效的开发方式。本课题使用React作为主要开发框架,使用Ant Design Pro框架基础进行开发,Webpake进行资源打包构建,Babel进行版本兼容, Git进行版本控制,Node.js作为后端框架,并使用MongoDB作为主数据库。系统主要分为以下几个模块用户基础功能模块、商品信息管理模块、购物车管理模块、订单管理模块以及店铺管理模块。计划开发一个界面美观,交互友好,具有响应式体验的现代化的校园二手交易微商平台,具有集商品管理系统,订单管理系统,销售数据图形化管理系统等模块集一体的现代化商城管理系统。
目录
1.引言 6
1.1项目背景 6
1.2 论文组织结构 7
2. 相关技术综述 8
2.1 前端框架相关 8
2.1.1 React 8
2.1.2 AntD 8
2.1.3 DvaJS 9
2.2 后端框架相关 9
2.2.1 NodeJS 9
2.2.2 Express 9
2.2.3 MongoDB 10
3. 校园微商平台系统分析 11
3.1 校园微商平台系统的系统范围 11
3.2 校园微商平台系统的功能性需求分析 11
3.2.1 用户基础功能模块的功能性需求分析 12
3.2.2 商品列表展示模块的功能性需求分析 13
3.2.3 购物车管理模块的功能性需求分析 14
3.2.4 订单管理模块的功能性需求分析 15
3.2.5店铺管理模块的功能性需求分析 16
3.3校园微商平台系统的非功能性需求分析 17
4.校园微商平台的系统设计 19
4.1校园微商平台系统的概要设计 19
4.2校园微商平台系统的前端模块设计 20
4.2.1用户基础功能模块的设计 20
4 *好棒文|www.hbsrm.com +Q: #351916072#
.2.2商品列表展示模块的设计 24
4.2.3购物车管理模块的设计 25
4.2.4订单管理模块的设计 26
4.2.5店铺管理模块的设计 27
4.3校园微商平台系统的数据库设计 28
4.3.1系统数据库ER图设计 28
4.3.2系统数据库表设计 28
5.校园微商平台系统的实现 32
5.1系统实现环境 32
5.2用户基础功能模块的实现 32
5.3商品列表展示模块的实现 37
5.4购物车管理模块的实现 39
5.5订单管理模块的实现 40
5.6 店铺信息管理模块的实现 42
6.总结与展望 46
6.1 系统项目总结 46
6.2 展望 47
参考文献 48
致谢 49
1.引言
1.1项目背景
最近几年web前端技术呈现出了爆炸式的发展趋势,ECMA Script标准(简称ES)由曾经的五年一次更新修正,到如今几乎每年一次的更新,短短四年内就从ES6(ES2015)更新到了如今的ES9(ES2019),通过在企业中实习参与了实际生产环境项目的开发之后,以实际生产需求为驱动,选择了在开发过程中使用较多的Ant Design+Umi+Dva的框架环境,后端选择NodeJS+Express+MongoDB,使用Gitflow作为版本控制规范,搭配Nginx进行运维方面的配置进行本次基于Node.js的校园微商平台系统的开发。
ES6以来,模块化和组件化带来了前端开发的模式革新,从以往的单文件重复功能粘贴复制流,转变为提取公共逻辑,使相同功能的代码组件化模块化,降低代码耦合度,提升代码复用性。弥补了JavaScript在ES5以前代码逻辑过于单薄的缺点,针对对象、数组、函数、原型链等的内置api方法进行了大量的优化和拓展[1]。这无疑使得JavaScript变得复杂了许多,但同时也使得JavaScript变得更为严谨和强大。
但是ES6给JavaScript所带来的诸多变化中,最为革命性的,甚至是颠覆了JavaScript程序编写方式的,是它针对两个问题所提出来的解决方案,一是作用域问题,二是异步问题。
在ES5以前,并没有严格意义上的块作用域,这就导致了在使用var进行声明的变量,在for循环等“伪”块作用域的运用中会导致作用域泄露,而ES6引入了let、const等声明和块作用域之后彻底改变了这一局面,新引入的let等变量声明方式会在所谓的ES5之前的伪作用域中重新定义一个块作用域并绑定新声明的变量,这使得变量作用域变得更加可靠。
同时ES6之后针对异步调用时大量的函数嵌套导致的代码结构复杂,逻辑条例难以理解的情况提出了以Promise为代表的一系列解决方案,引入reject、resolve等状态,通过Promise进行异步逻辑封装,链式引用Promise解决了这一JavaScript诞生以来最致命的异步调用问题。
在三大框架的选择上面,React作为React、Vue、Angular三大框架中使用人数最多,应用领域最广的框架,React也是生态圈最为完备的框架,庞大的组件库和第三方支持为React使用者带来了良好的开发体验,同时活跃的开发社区也带来了优越的技术支持。这也是本课题将React作为主要开发框架的一大原因。
本课题旨在以实际问题的角度出发,解决生产中可能会遇到的所有实际问题,以完全模拟实际生产达到自我提升的目的。
1.2 论文组织结构
论文主要分为六章,以下是每一章的介绍及主要研究的内容。
第一章引言。介绍研究的意义与背景。重点介绍了技术背景上ES6+的更新为前端开发环境所带来的变革。
第二章相关技术综述,对国内外的研究现状,相关技术的介绍,从前端框架和后端框架两个方面入手,前端介绍了React框架和Antd组件库,以及DvaJS数据流模型。
第三章系统分析。对系统进行功能性需求分析和非功能性需求分析。在功能模块细分的层次对系统进行了需求分析,并从安全性、实用性、易用性等原则对系统进行了非功能性分析。
第四章系统设计。介绍系统的概念设计和逻辑设计,以及其详细设计。首先通过总体架构图和模块划分图对系统的概要设计进行了介绍,然后对每个子模块通过类图进行了逻辑设计部分的介绍。
目录
1.引言 6
1.1项目背景 6
1.2 论文组织结构 7
2. 相关技术综述 8
2.1 前端框架相关 8
2.1.1 React 8
2.1.2 AntD 8
2.1.3 DvaJS 9
2.2 后端框架相关 9
2.2.1 NodeJS 9
2.2.2 Express 9
2.2.3 MongoDB 10
3. 校园微商平台系统分析 11
3.1 校园微商平台系统的系统范围 11
3.2 校园微商平台系统的功能性需求分析 11
3.2.1 用户基础功能模块的功能性需求分析 12
3.2.2 商品列表展示模块的功能性需求分析 13
3.2.3 购物车管理模块的功能性需求分析 14
3.2.4 订单管理模块的功能性需求分析 15
3.2.5店铺管理模块的功能性需求分析 16
3.3校园微商平台系统的非功能性需求分析 17
4.校园微商平台的系统设计 19
4.1校园微商平台系统的概要设计 19
4.2校园微商平台系统的前端模块设计 20
4.2.1用户基础功能模块的设计 20
4 *好棒文|www.hbsrm.com +Q: #351916072#
.2.2商品列表展示模块的设计 24
4.2.3购物车管理模块的设计 25
4.2.4订单管理模块的设计 26
4.2.5店铺管理模块的设计 27
4.3校园微商平台系统的数据库设计 28
4.3.1系统数据库ER图设计 28
4.3.2系统数据库表设计 28
5.校园微商平台系统的实现 32
5.1系统实现环境 32
5.2用户基础功能模块的实现 32
5.3商品列表展示模块的实现 37
5.4购物车管理模块的实现 39
5.5订单管理模块的实现 40
5.6 店铺信息管理模块的实现 42
6.总结与展望 46
6.1 系统项目总结 46
6.2 展望 47
参考文献 48
致谢 49
1.引言
1.1项目背景
最近几年web前端技术呈现出了爆炸式的发展趋势,ECMA Script标准(简称ES)由曾经的五年一次更新修正,到如今几乎每年一次的更新,短短四年内就从ES6(ES2015)更新到了如今的ES9(ES2019),通过在企业中实习参与了实际生产环境项目的开发之后,以实际生产需求为驱动,选择了在开发过程中使用较多的Ant Design+Umi+Dva的框架环境,后端选择NodeJS+Express+MongoDB,使用Gitflow作为版本控制规范,搭配Nginx进行运维方面的配置进行本次基于Node.js的校园微商平台系统的开发。
ES6以来,模块化和组件化带来了前端开发的模式革新,从以往的单文件重复功能粘贴复制流,转变为提取公共逻辑,使相同功能的代码组件化模块化,降低代码耦合度,提升代码复用性。弥补了JavaScript在ES5以前代码逻辑过于单薄的缺点,针对对象、数组、函数、原型链等的内置api方法进行了大量的优化和拓展[1]。这无疑使得JavaScript变得复杂了许多,但同时也使得JavaScript变得更为严谨和强大。
但是ES6给JavaScript所带来的诸多变化中,最为革命性的,甚至是颠覆了JavaScript程序编写方式的,是它针对两个问题所提出来的解决方案,一是作用域问题,二是异步问题。
在ES5以前,并没有严格意义上的块作用域,这就导致了在使用var进行声明的变量,在for循环等“伪”块作用域的运用中会导致作用域泄露,而ES6引入了let、const等声明和块作用域之后彻底改变了这一局面,新引入的let等变量声明方式会在所谓的ES5之前的伪作用域中重新定义一个块作用域并绑定新声明的变量,这使得变量作用域变得更加可靠。
同时ES6之后针对异步调用时大量的函数嵌套导致的代码结构复杂,逻辑条例难以理解的情况提出了以Promise为代表的一系列解决方案,引入reject、resolve等状态,通过Promise进行异步逻辑封装,链式引用Promise解决了这一JavaScript诞生以来最致命的异步调用问题。
在三大框架的选择上面,React作为React、Vue、Angular三大框架中使用人数最多,应用领域最广的框架,React也是生态圈最为完备的框架,庞大的组件库和第三方支持为React使用者带来了良好的开发体验,同时活跃的开发社区也带来了优越的技术支持。这也是本课题将React作为主要开发框架的一大原因。
本课题旨在以实际问题的角度出发,解决生产中可能会遇到的所有实际问题,以完全模拟实际生产达到自我提升的目的。
1.2 论文组织结构
论文主要分为六章,以下是每一章的介绍及主要研究的内容。
第一章引言。介绍研究的意义与背景。重点介绍了技术背景上ES6+的更新为前端开发环境所带来的变革。
第二章相关技术综述,对国内外的研究现状,相关技术的介绍,从前端框架和后端框架两个方面入手,前端介绍了React框架和Antd组件库,以及DvaJS数据流模型。
第三章系统分析。对系统进行功能性需求分析和非功能性需求分析。在功能模块细分的层次对系统进行了需求分析,并从安全性、实用性、易用性等原则对系统进行了非功能性分析。
第四章系统设计。介绍系统的概念设计和逻辑设计,以及其详细设计。首先通过总体架构图和模块划分图对系统的概要设计进行了介绍,然后对每个子模块通过类图进行了逻辑设计部分的介绍。
版权保护: 本文由 hbsrm.com编辑,转载请保留链接: www.hbsrm.com/jsj/qrs/63.html