前端开发框架:vue.js
数据库 mysql 版本不限
后端语言框架支持:
1 java(SSM/springboot)-idea/eclipse
2.Nodejs+Vue.js -vscode
3.python(flask/django)--pycharm/vscode
4.php(thinkphp/laravel)-hbuilderx
数据库工具:Navicat/SQLyog等都可以
目录
摘要 1
Abstract 2
1绪论 4
1.1项目研究的背景 4
1.2开发意义 5
1.3国内外研究现状 5
2开发技术介绍 7
2.1 小程序介绍 7
2.2 小程序平台 7
2.3 开发环境 7
2.3.3 mysql数据库介绍 8
2.3.4 B/S架构 8
2.6 VUE框架介绍 9
3系统分析 11
3.1可行性分析 11
3.1.1财务的可行性 11
3.1.2技术上的可行性 11
3.1.3操作的可行性 12
3.2 小程序设计规则与运行环境 12
3.3 小程序功能分析 12
3.4 小程序流程的分析 13
3.4.1 个人中心管理流程 14
3.4.2 登录流程 14
4系统设计 15
4.1 软件功能模块设计 15
4.2 数据库设计 15
4.2.1 概念模型设计 15
4.2.2 物理模型设计 17
5系统详细设计 23
5.1 小程序端 23
5.2管理员功能模块 27
6系统测试 30
6.1 测试方法 30
6.2 测试目的 31
6.3 测试方案 31
6.4 测试用例 32
6.5 测试结论 32
7总结与心得体会 33
参考文献 34
致谢 35
1系统设计
4.1 软件功能模块设计
小程序整体功能如下图所示:
前端技术:nodejs+vue+elementui,
Express 框架于Node运行环境的Web框架,
语言 node.js
框架:Express
前端:Vue.js
数据库:mysql
数据库工具:Navicat
开发软件:VScode
视图层其实质就是vue页面,通过编写vue页面从而展示在浏览器中,编写完成的vue页面要能够和控制器类进行交互,从而使得用户在点击网页进行操作时能够正常。
代码结构讲解
1、 node_modules文件夹(有npn install产生)
这文件夹就是在创建完项目后,cd到项目目录执行npm install后生成的文件夹,下载了项目需要的依赖项。
2、package.json文件
此文件是项目的配置文件(可定义应用程序名,版本,依赖项等等)。node_modules文件夹下的依赖项是从哪里知道的呢?原因就是项目根目录下的这个package.json文件,执行npm install时会去找此文件中的dependencies,并安装指定的依赖项。
3、public文件夹(包含images、javascripts、stylesheets)
这个文件夹做过Web开发的应该一看就知道,为了存放图片、脚本、样式等文件的。
4、routes文件夹
用于存放路由文件。
5、views文件夹
存放视图。
图 4-1 整体功能模块图
4.2 数据库设计
4.2.1 概念模型设计
概念模型是对现实中的问题出现的事物的进行描述,ER图是由实体及其关系构成的图,通过E-R图可以清楚地描述系统涉及到的实体之间的相互关系。
用户信息实体图如图4-2所示:
我的实体图如图4-3所示:
图4-3我的实体图
在软件系统的开发过程中,最关键的一个步骤就是建立一个完整的表格,在这个表格中,首先要有一个完整的表格,然后才能决定各个表格的数量;通过对表格的组织、表格间的相互联系等进行分析,以确保整个体系的稳定。数据库的作用就是对工程中所有的数据进行保存,并保证其安全。一个完整的表格,包括了工程中的每个元素的字段和特性,本文经常使用概念模型进行设计,即为E-R模型。
图4-3 系统数据库
2系统详细设计
5.1 小程序端
用户登录,用户进入小程序,输入自己的账号和密码,并选择对应的角色进行系统登录操作,如图5-1所示
图5-1登录界面图
用户登陆系统后,可以对首页、互动交流、课程信息,我的等内容进行详细操作,如图5-3所示。
图5-3 小程序首页界面图
5.2管理员功能模块
管理员登录,管理员通过输入用户名,密码,在角色中选择管理员,点击登录进入系统操作进行操作,如图5-6所示。
图5-6管理员登录界面图
管理员登陆系统后,可以查看首页、轮播图管理、管理员管理、学生管理、互动交流、课程类型管理、课程信息管理、学习进度管理、知识点管理等功能,还能对每个功能逐一进行相应操作,如图5-7所示。