广东东软学院软件工程系门户网站设计实现
Design and Implementation of Portal Website
of Software Engineering Department of Neusoft
Institute Guangdong
日
容摘
网站基SSM框架+Vuejs +Element Ui实现前端分离设计广东东软学院软件工程系门户网站实现目展示灵活性高交互力强时性门户网站网站提供度高快速效信息查询准确灵活数理等拥强功台理着5G时代获取信息需求量日益渐中乏年高考考生学专业通网络获取相关信息学专业门户网站应运生寻找够易理方便高考毕业生提供准确快速软件工程专业介绍门户网站成问题
广东东软学院作IT类院校软件工程系门户网站学校进行宣传重渠道展现学校风貌师生提供良交互台助学校教学工作开展
网站设计中前端页面属渐进式MVVM框架VueElement Ui桌面端组件库开发动态页面网站台SSM框架MYSQL数库
关键词：Vuejs Web SSM MVVM MYSQL
Abstract
This website is based on the SSM framework + Vuejs + Element Ui to achieve the front and back end separation design of Neusoft Institute Guangdong Software Engineering Portal The main purpose is to show an instant portal website with high flexibility and strong interaction ability The website provides a high degree of freedom fast and effective information query accurate and flexible data management and other background management with powerful functions Because with the advent of the 5G era there is an increasing demand for information There are many candidates for the college entrance examination every year They obtain the professional information of the university through the Internet As a result professional portals for each university appeared Then how to find a portal website that can be easily managed convenient to use and can provide accurate and fast software engineering professional introduction for college entrance examination graduates becomes a problem
As a IT college Neusoft Institute Guangdong is one of the important channels for the software engineering department to promote the school It should not only show the school＇s style but also provide a good interactive platform for teachers and students and help the development of school teaching
In the website design the frontend pages use the Vue and Element Ui desktop component libraries that belong to the progressive MVVM framework to develop dynamic pages and the backend of the website uses the SSM framework and MYSQL database
Key words Vuejs Web SSM MVVM MySQL
目录
1绪 1
11项目开发目 1
12项目开发意义 1
13门户网站现状 1
14项目创新思路 2
15文基结构 2
2技术工具台 4
21前端架构 4
211 Vuejs 4
212 Vue CLI 4
213 Vue Router 4
214 Vuex 4
215 Element Ui组件库 5
216 Axios 5
217 MVVM开发模式 5
218 虚拟DOM 5
219 跨域问题 5
22端技术 6
23端项目结构 7
24开发环境 8
（1）软件环境 8
（2）硬件环境 9
（3）开发工具 9
3系统分析 9
31行性分析 10
311 技术行性 10
312 操作行性 10
313 济行性 10
314法律行性 10
32项目开发流程分析 11
321 系统开发流程分析 11
322 项目操作流程分析 11
323网站数添加流程分析 12
324 网站数更改流程分析 12
325 网站数删流程分析 13
33 系统例分析 13
34例说明 14
4系统设计 15
41系统概述 15
42 项目结构设计 15
43 数库结构设计 16
431 数库基设计原 16
432 数库概念模型 17
433 数库表设计 20
5系统实现 23
51门户网站首页 23
52专业介绍 25
53文章列表界面 27
54理员登陆界面 28
55台理员界面 29
551七牛云CDN图片储存 30
552轮播图设置 31
553教师列表 32
554培养方案 34
555课程设置 34
556富文编辑器 36
557文章设置页面 37
558日志列表 39
559理员信息 39
56数库实现 40
6项目测试 41
61项目测试意义 41
62项目性测试 41
63项目性测试总结 42
7总结 43
参考文献 44
致谢 46
1绪
11项目开发目
着互联网蓬勃发展国行业信息化程度日益加深[[] 李鹏楼 高性门户网站信息发布系统设计实现[D]北京邮电学2019
]获取信息需求量越越互联网成获取信息重渠道4G5G时代互联网拥更新速度快信息时性特点式样门户网站应运生提供生活方面信息中乏学校专业介绍网站限度高考毕业生提供准确快速关广东东软学院软件工程专业介绍造理方便信息时更新界面友门户网站
12项目开发意义
广东东软学院软件工程系门户网站承担着学校关专业信息介绍发布宣传校师生高考考生等信息获取务门户网站理方式较传统发布相关信息需专业计算机员修改更新暴露前门户网站维护局限性片面性
门户网站界面美观户良访问体验时台理功实现具户快速手操作方便更新灵活特点现阶段流框架技术演进网站简便性实性网站开发效率幅度提升时刚毕业高考生学专业解建立专门关软件工程专业门户网站项势必行工作
13门户网站现状
互联网门户网站具服务容丰富服务功便捷特点着互联网相关法律法规完善网站规范化越越高信息真实性时性户访问体验较改善行业快速发展互联网相关方面服务然相较门户网站现阶段流框架仅网站具跨台屏幕适应界面友等优势信息呈现网站维护方面着优势
现时代进步行业网站容开始变化更迎户需求现单纯新闻者坛远远够户造成吸引门户网站服务容针相关户集中某方面说网易搜狐集中游戏资源新浪重点微博门户网站户浏览量旦增会形成流量流量带利益巨说网站营收头广告新浪搜狐说广告贡献营收份额网易游戏电商广告邮箱方面进行业务够吸引方面需求户
14项目创新思路
针型门户网站创新思路两方面：
（1）表层
网站表层门面拥门面相予访客第印象说网站容必须清晰目标定位具体展现访客什样门面极重争取容做信息时性界面做设计整洁美体验做迅速便捷
（2）深层
网站深层脑拥脑予整网站完整功网站台理实现设计超前化项目台理容方面针没计算机语言基础知识户直接手操作时配备相关模板进行文章代码编辑简单说网站需超前设计理念设计风格功专业性完整性予网站全方面维护
15文基结构
第章：绪章项目开发目意义门户网站现状进行介绍
第二章：技术工具台章详细项目开发技术工具台进行说明
第三章：系统分析章技术操作济方面项目进行行性分析项目开发流程进行详细说明分析项目例情况
第四章：系统设计章先整项目进行概述然项目结构进行设计针项目数库进行设计
第五章：系统实现章网站容进行介绍分网站首页专业介绍文章列表登录页理员界面进行详细项目实现介绍
第六章：项目测试章详细项目进行功性测试性测试分出测试结果进行分析总结
第七章：总结章整项目实现程进行总结总结验收获未作出期
2技术工具台
21前端架构
网站前端采Vuejs + Element Ui组件库 + Axios
211 Vuejs
Vuejs套构建户界面渐进式框架[[] 吕英华渐进式JavaScript框架Vuejs全家桶应[J]电子技术软件工程2019(22)3940
]型框架样轻量级框架身重视视图层特点简单易学简单语法项目创建进行双数绑定视图数结构进行分离操作数完成数修改需逻辑代码进行修改相较框架拥更快渲染速度更体积Vue全家桶前需搭建相关环境提前安装WebpackNodeNpm[[] 麦冬陈涛梁宗湾轻量级响应式框架Vuejs应分析[J]信息电脑(理版)2017(07)5859
]
212 Vue CLI
Vue CLI脚手架快速创建启动Vue项目项目带热重载保存项目时静态检查构建生产环境配置脚手架特点户配置感纠结专注撰写应
213 Vue Router
Vue RouterVue全家桶里面官方路理器单页面应构建提供良路导航核心改变视图时断端发送请求然路器提供HashHistory两种模式实现种方式时会重新加载页面
214 Vuex
Vuex专门Vue项目开发状态理模式知道开发中视图断变化需数支撑项目集中理组件状态保证状态种相应规发生控变化
215 Element Ui组件库
Element Ui组件库饿组件库专门开发设计师提供美观桌面端组件帮助设计师快速开发原型基Vue开发组件库直接安装组件配题配色搭配端数绑定
216 Axios
AxiosVue中承担着访问端api展示数作目浏览器中创建XMLHttpRequest然数动转换成JSON格式方便前端接收数现阶段基promiseHTTP客户端Axios非常流行
217 MVVM开发模式
MVVMModelViewViewModel简写[[] 校丽丽 基MVVM模式前端框架插件库设计实现[D]西南科技学2019
]MVVM开发模式前早MVPMVC等开发模式MVVM模式鉴桌面应程序MVC思想纯JavaScript象Model表示显示View两者做程度分离关联起ViewModelModel数ViewView数修改步Model整实现方式DOM时间监听两方实现称双数绑定
218 虚拟DOM
DOM中文名称文档象模型[[] 柴青山 基MVVM模式Vuejs框架物流软件动化测试系统中应研究[D]北京邮电学2019
]Web界面DOM树实现构建Web页面中某部分发生改变DOM书某结点会相应改变虚拟DOM解决浏览器性问题设计东西说操作更新中更新次DOM动作虚拟DOM会立更改DOM更新diff容保存JS象中终象次性attchDOM树样做JS象存中速度更快
219 跨域问题
通axios远程访问json数绝数浏览器采源策略[[] 赵军基Vuejs疫情统计图表实现[J]电脑编程技巧维护2020(03)144147
]Javascript施加安全限制开发程中前端项目端口号端项目端口号样造成跨域问题解决跨域问题方式前端端项目中修改图21前端代码图22端代码图示：
图21 前端代码图
图22 前端代码图
22端技术
项目端技术SSM框架框架流Java EE企业级框架身具定影响力市场型应者网络企业级网站开发搭建SSM框架Spring + Spring MVC + MyBatis缩写Maven搭建工程进行搭建SSM框架
Spring前流Java Web开发框架[[] 刘丽华薛玉倩基spring MVC学生信息理系统[J]通讯世界201926(10)173174
]时轻量级Java开发框架解决应开发中会出现复杂性问题中重两第控制反转（Ioc）容器解决硬编码高耦合第二面切面（AOP）功快速简单解决传统OOP难实现功应中帮助实现耦合日志记录显示安全理数库事务
Spring MVC框架基ServletMVC框架目前流行应程序基模型视图控制器 (ModelViewController MVC) 模式进行设计实现[[] 刘宁陆荣国缪万胜MVC体系架构模式框架持续抽象进化[J]计算机工程2008(04)107110
]配合Spring原生特性开发更加简单规范时提供种轻度耦合方式更容易分离控制器模型中等等象
MyBatis基Java持久层框架[[] 荣艳冬关Mybatis持久层框架应研究[J]信息安全技术20156(12)8688
]目消JDBC代码参数手工设置结果集检索简单说MyBatis简单XML注解帮助项目开发中进行理数增删查改框架
Maven快速搭建SSM框架理工具[[] 连瑞梅基Java选课理系统设计实现[J]电脑知识技术202016(05)6771+77
]够快速解决搭建中赖安装复杂性问题理赖
23端项目结构
端项目基SSM + Maven项目架构面接口编程MVC模式分表现层持久层业务层视图层[[] 李洋SSM框架Web应开发中设计实现[J]计算机技术发展201626(12)190194
]页面发送request请求（View视图层）表现层（Controller层）Controller层接受客户端HTTP协议传送请求参数进行相应流程处理然POJO业务层（Service层）业务层完成具体业务逻辑POJODao层（Mapper层）Dao层数库请求数然次返回数呈现页面进行项目流程构建盖楼层面盖楼先持久层然面表现层两层间业务层减少两层联系
表现层（springMVC）Controller层接收响应客户端请求常说web层springMVCspringMVC设计模式常说MVC 概括应JavaBeanmodel应JSPView应servletcontroller然项目中没JSPView忽略springMVC接收客户端HTTP协议发送请求然调相关响应返回客户端
业务层（Spring）Service层具体负责业务模块逻辑应设计实程中会发现Service没做什工作实然名字发现处理业务需考虑具体实现接收servlet调Dao程中位中间缓两层关系两层达解耦效果降低间关联
持久层（Mybatis）Dao层（Mapper层）具体负责数库进行设计交互简单说处理数DAO层第步先设计DAO接口第二部定义接口实现类放进Spring配置文件中模块进行数业务处理时候调接口
视图层View层负责前端页面展示层需Controller层结合起开发网站项目中需JSP页面显示需获取Controller层接口数库获取数转化成JSON格式输出Vue页面中
图23 SSM结构图示：
图23 SSM结构图
24开发环境
（1）软件环境
序号
名称
版
备注
1
Windows10
1909
操作系统
2
Mysql
80
数库
3
Tomcat
9033
Web容器
4
Jdk
8
工具包
5
Axios
0192
HTTP库
6
Vue Cli
30
构建工具
7
Webpack
400
模块包器
8
Npm
300
安装包理工具
9
node
600
JavaScript 运行环境
10
vue
252
Vue版
11
vuerouter
301
项目路理器
12
vuex
313
项目数状态理
表21 软件详细表
（2）硬件环境
序号
名称
配置
备注
1
战神K550D
12G存+1TB SSD硬盘25GHz Intel Core i7
2
CPU
Intel（R）Core(TM)i74710MQ
表 22 硬件信息表
（3）开发工具
序号
名称
版
备注
1
JDK
8
工具包
2
IntelliJ IDEA
201933
端编译器
3
Visual Studio Code
144
前端编译器
4
Navicat
12
数库客户端
5
Maven
363
项目理工具
6
Postman
7221
测试端接口
表 23 开发工具信息表
3系统分析
31行性分析
基Vue + Element Ui + SSM框架广东东软学院软件工程门户网站目标高考毕业生关软件工程介绍校师生发布专业信息台确定项目开发目标接四方面行讨项目行性
311 技术行性
网站开发Vue + Element Ui + SSM框架开发程中针前端页面开发计界面美观度数库里面数进行调开发理作开放方Vue框架开发前端页面搭配Element Ui组件库够前端界面友功配备完善简单然基MYSQL建立数库端数具完整性安全性稳定性特点SSM框架开发端项目特点开发速度快理方便性相较框架更加稳定然升级性较高现SSM框架开发项目发展趋完善应广泛项目开发领域中
综述项目开发具技术行性
312 操作行性
基Vue项目开发端理台开发环境完善台登陆界面简单美观更加方便理者操作理者需太计算机专业知识门户进行修改理发布文章等等操作时普通电脑进行访问门户网站台
综述项目开发具操作行性
313 济行性
项目前端属Vue项目开发搭配饿（Element UI）组件库端项目开发SSM框架够调MYSQL数库数程序开发计算机配置求较低软件环境安装容易具备力需求量系统简洁开发周期短说开发成较低
综述项目开发具济行性
314法律行性
项目开发作行研究行设计项目开发环境源代码差门户网站开发项目合法开发环境中进行存违法问题
综述项目开发具法律行性
32项目开发流程分析
321 系统开发流程分析
项目开发程中项目开发进行分析分析网站台理户理员然开发功模块整合起测试网站流程分析图31项目开发流程图示：
图321项目开发流程图
322 项目操作流程分析
访客：访客仅访问门户网站
理员：进入门户网站首页访问登录台理界面需输入户名密码网站会动通接口访问数库储存数验证户密码否正确果数验证正确话进入台理界面拥理整门户网站页面功果数验证失败会提示登录失败网站操作流程分析参考图32操作流程图示：
图32 操作流程图
323网站数添加流程分析
理员增加门户网站容端理台选择想添加容类然输入需添加数页面会根理员输入数进行表单验证果验证成功没问题话会通接口写入数库里面户输入数验证失败会禁止提交表单求重新输入网站数添加流程分析图图33数添加操作流程图示：
图33 数添加操作流程图
324 网站数更改流程分析
理员修改网站容首先理员选择想修改容类然选择修改数填写需修改数然页面会数进行验证果合法话点击提交修改写入数库果验证失败会提示错误信息需重新修改提交更改流程分析图34数修改操作流程图示：
图34 数修改操作流程图
325 网站数删流程分析
理员果遇网站中想删容先选择想删容然点击删钮页面会端接口发送删指令果数存会成功删数刷新页面果数存页面会提示错误信息刷新页面删数流程分析图35数删操作流程图示：
图35 数删操作流程图
33 系统例分析
理员拥信息台页面鼠标划拉箭头出现拉框中修改信息密码理员通登录验证成功访问台界面包括网站公告文章系统系统日志网站展示信息等容进行网站消息更新消息增加发布公告信息等等功理员例分析图36理员例分析图示：
图36 理员例分析图
34例说明
编号
参者
例名称
例说明
01
理员
理员登录
理员通登录窗口登录账号进入台理系统
02
新增文章
理员手动添加文章
03
查询文章
理员查询文章
04
删文章
理员删指定文章
05
修改文章
理员修改指定文章
06
新增课程
理员手动添加课程
07
查询课程
理员查询指定课程
08
删课程
理员删指定课程
09
修改角色
理员修改指定课程
10
查询侧边框设置
理员查询指定侧边框设置
11
修改侧边框设置
理员修改指定侧边框设置
12
查询教师信息
理员查询指定教师信息
13
增加教师信息
理员手动添加教师信息
14
删教师信息
理员删指定教师信息
15
修改教师信息
理员修改指定教师信息
16
查询培养方案
理员查询培养方案
17
新增培养方案
理员手动添加培养方案
18
删培养方案
理员删指定培养方案
19
修改培养方案
理员修改指定培养方案
20
新增轮播图
理员手动添加轮播图
21
查询轮播图
理员查询指定轮播图
22
删轮播图
理员删指定轮播图
23
修改轮播图
理员修改指定轮播图
23
查询日志
理员查询系统日志
4系统设计
41系统概述
网站基BS结构Web服务应开发程中直接访问网站首页解关广东东软学院软件工程专业相关方面介绍理员普通电脑安装Browse浏览器访问网站台理台时Web服务器面装配数库理员网站台理功实现数交互理员连接互联网时网站工作原理图41工作原理图示：
图41 工作原理图
42 项目结构设计
网站结构设计首先总体进行初步设计然前端进行页面细节细分细节作部分分开发出组件Vue项目组件拼装起成页面形成总体门户界面设计台前端界面设计门户网站显示容进行分类分设置页面予台页面子路设置子模块功间联系进行设计设计组件接口组件间数传递
组件实现程中页面确定具体基结构然结构组件进行实现方案计划网站更实现出想结果首先需收集组件中需资料然进行分析解进行资料整合资料整合完毕开始网站门户页面台页面进行初步设计进步优化界面设计出理想结构良网站框架
网站总体架构设计图42网站结构图示：
图42 网站结构图
43 数库结构设计
理员数库理工具台数理进行想操作说删增加查找更改项目开发离开数库数支持项目中数库开发项目中重组成部分数库开发坏决定项目开发进度否受影响
数库开发首先需网站进行分析收集网站什样数需求然根数需求设计数库结构运行数库理数库
431 数库基设计原
数库设计量题数类张表中量实现表原次项目数库设计开发程中需规范化设计满足第三范式情况时量进行数冗余消避免数修改插入删时出现异常进行数库设计程中重取考虑数表动态适应性
432 数库概念模型
数库设计前需进行需求分析分析程中需解整项目数需求然通数抽象设计出整项目概念模型正常说项目概念模型ER模型基项目必少工具广泛应领域项目中图43文章列表ER图示：
图43 文章列表ER图
图44课程列表ER图示：
图44 课程列表ER图
图45侧边栏信息ER图示：
图45 侧边栏信息ER图
图46培养方案信息ER图示：
图46 培养方案信息ER图
图47轮播图列表ER图示：
图47 轮播图列表ER图
图48日志列表ER图示：
图48 日志列表ER图
图48教师信息ER图示：
图48 教师信息ER图
图49理员信息ER图示：
图49理员信息ER图
433 数库表设计
设计数库阶段通常会现数库理工具作数库设计基础
表410 tbarticle文章信息表
列名
名称
数类型
键
注释
AAuthor
文章作者
varchar(255)
false
AContent
文章容
longtext
false
ADate
文章创建日期
datetime
false
Aid
文章序号
int(255)
True
增唯
AImg
文章封面图链接
varchar(255)
false
AImportant
重性
varchar(255)
false
AStatus
状态
varchar(255)
false
AStyle
类
varchar(255)
false
ATitle
文章标题
text
false
表411 tbbook课程信息表
列名
名称
数类型
键
注释
id
课程序号
int(255)
true
唯增
bookauthor
课程书作者
varchar(255)
false
bookimg
课程封面图
longtext
false
bookinfo
课程信息
varchar(255)
false
bookname
课程名字
varchar(255)
false
booktype
课时间
varchar(255)
false
表412 tbnotice侧边栏信息表
列名
名称
数类型
键
注释
Nid
侧边栏序号
int(255)
True
唯增
Notice
侧边栏容
longtext
false
NoticeName
侧边栏标题
varchar(255)
false
表413 tbpeiyang培养方案列表
列名
名称
数类型
键
注释
id
培养方案列表id
int(11)
true
唯增
pname
年培养方案
varchar(255)
false
purla
培养方案pdf链接
varchar(255)
false
purlb
培养方案教材库pdf链接
varchar(255)
false
purlc
培养方案指导性教学进程pdf链接
varchar(255)
false
表414 tbslide 轮播图列表
列名
名称
数类型
键
注释
body
轮播图描述
varchar(255)
false
id
轮播图id
int(11)
True
唯增
imgurl
轮播图图片链接
varchar(255)
false
label
轮播图标题
varchar(255)
false
status
发布状态
varchar(255)
false
url
轮播图跳转链接
varchar(255)
false
表415 tbsyslog日志列表
列名
名称
数类型
键
注释
accessDate
产生日期
datetime
false
accessInterface
接口名字
varchar(100)
false
accessIp
请求ip
varchar(50)
false
accessSource
请求客户端名字
varchar(50)
false
executeTime
响应时间
int(11)
false
id
日志id
int(11)
true
唯增
interfaceParams
请求字段
text
false
logId
日志唯序号
varchar(32)
false
唯
requestType
请求类型
varchar(20)
false
表416 tbteacher日志列表
列名
名称
数类型
键
注释
teaimg
教师图片
varchar(255)
false
teainfo
教师信息
varchar(255)
false
teaname
教师名字
varchar(255)
false
status
发布状态
varchar(255)
false
teaposition
教师职位
varchar(255)
false
teatel
教师电话
varchar(255)
false
teaweb
教师页
varchar(255)
false
tid
序号
int(255)
True
唯增
表417 tbuser日志列表
列名
名称
数类型
键
注释
age
年龄
int(11)
false
id
序号
int(11)
false
唯增
password
密码
varchar(50)
false
sex
性
int(11)
false
uName
昵称
varchar(20)
false
userName
账号
varchar(20)
false
5系统实现
51门户网站首页
访客浏览器输入链接直接访问广东东软学院软件工程门户网站中门户网站映入眼帘导航栏菜单样导航栏简洁白色题标准东软蓝形成鲜明图形式题页面门户网站轮播图先图片广东东软学院门户片选广东东软学院计算机学院15届林文豪师兄作品图51首页1图示：
图51 首页1
然图方网站基数包括已发布文章数量然发布数量包括类文章图首页1组件头部组件首页容组件形成Vue项目组件化开发头部组件台理员登陆链接直接登录登陆界面显示昵称显示注销选项图52首页2图示
图52 首页2
首页新发布新闻容侧边栏容侧边栏容首先根ip确定位置日天气然心知天气api接口接着重公告通告先公告板显示文字公告说紧急公告发布台理员页面进行容更改根重程度发布排序超链接计算机语言列表连接着国学计算机语言网站侧边栏计算机语言列表通台代码定义编辑显示出容根需通Html代码修改面计算机语言址链接等者更新容述容图53首页容图图54侧边栏示：
图53 首页3
图54 侧边栏
容尾部轮播图轮播图图片标题容想链接址台理员页面进行设置然选择链接址图55轮播图示：
图55 轮播图
首页末端典东软蓝配色网站尾部中加入实时更新日期时钟更新版权信息年份动更新版权信息年份该尾部广东东软学院学院网站样式样没太出入图56尾部图示：
图56 尾部图
52专业介绍
分页二拥二级菜单分页中软件工程专业介绍分页面布局分侧边栏容容开始软件工程专业介绍分2014年前2014年专业区广东东软学院2014年升级科高校2014年前关软件类专业名字软件技术2014年新增科专业中软件工程页面2014年开始年培养计划指导性教学进程年素材库然台进行年度更新接软件工程关专业课程列表通四查年会学课程三课程相较三分专业实践方课程相说选择较专业会年实践学期（学期）课程中时间段课程介绍图57专业介绍图图58课程列表图图59实践学期图示：
图57 专业介绍
图58 课程列表
图59 实践教学
侧边栏教师信息栏关软件工程专业教师侧边栏寻找侧边栏提供模糊查询针教师名字者教师信息进行模糊查询中添加教师教学页Vue项目中滤器教师手机号码进行隐私保护手机号码中间四位变星号图510教师信息列表图示：
图510 教师信息列表
53文章列表界面
文章列表界面首页查更文章进行跳转导航栏进行跳转文章列表全部类型发表文章通分类查类型文章分新闻快讯公告通告学生天图511文章列表图示：
图511文章列表图
片文章点击进该文章详细容包括文章标题文章容文章作者日期图512文章详情图示：
图512 文章详情页
54理员登陆界面
理员登陆界面提供空验证rule规规范化登录果输入错误者输入框空出现错误提示防止恶意登录理员输入相应账号密码成功登录然跳转台理界面图513理员登录界面图图514空验证图示：
图513 理员登录界面
图514 空验证
55台理员界面
理员通登录验证验证成功便跳转台理员界面理员界面通组件化实现左边侧边栏面固定头部容通监测路变化进行容更改更改相应路容该理员界面仅通登录进入中首页路侧边栏分页子路侧边栏页面进行公告预览公告更改右侧定义侧边栏设置图515台页面图示：
图515 台页面
551七牛云CDN图片储存
需图片传页面七牛云CDN存储服务图片传七牛云址然获取图片链接直接返回图片链接输入框文中添加页面预览传图片进行图片移实现七牛云CDN图片储存服务需七牛云网站申请相应api接口通计算获取相应token已通已备案域名服务进行图片储存
（1）图片传
点击传钮动实现图片传
（2）图片移
点击图片名字删钮重新传图片
（3）token生成
七牛云token生成七牛云网站面获取AccessKeySecretKey然importjs文件获取genUpToken方法先确定传策略传策略序列化成json格式数然序列化传策略进行Base64编码通步骤获取encoded接着SecretKeyencoded编码进行HMACSHA1加密做URL安全Base64编码encoded_signedencoded_signed编码通genUpToken方法AccessKeyencode_signedencoded序间连接起获取整传token
（4）传图片名字序列化
传图片时候获取图片类型否jpgjpegpng格式图片储存fileExtension变量中限制图片2MB获取图片宽高果传图片100*100图片传失败果片宽高没问题然调时间方法获取时时间时间格式yymmddhhmmss储存nowtime变量中生成获取图片名字变量文件名uploadpic+nowtime+fileExtension样文件名会重复
（5）图片链接获取
图片链接获取七牛云域名服务中设置域名加传图片时生产文件名图片链接生成返回双数绑定图片链接址输入框中
图516图片传图示
图516 图片传
552轮播图设置
轮播图设置页面轮播图列表列表轮播图图片址轮播图标题轮播图描述轮播图连接址轮播图状态操作理
（1）添加操作
轮播图设置页面点击添加操作弹出添加框输入轮播图CDN址者直接传七牛云传七牛云文件储存服务完成添加
（2）发布状态
通操作列表中发布钮更改缩略图否发布状态发布草稿状态首页会显示缩略图发布状态更理容否门户网站中显示
（3）编辑操作
点击编辑操作会出现缩略图编辑话框原数存话框列表中进行更改操作
（4）删操作
点击删操作数库中删缩略图记录会存数库中
图517缩略图列表图图518缩略图修改图示：
图517缩略图列表图
图518缩略图修改图
553教师列表
教师列表设置页面老师项信息中包括图片址教师图片预览老师名字等等信息老师信息发布状态操作理
（1）添加操作
教师设置页面点击添加操作弹出添加框输入教师信息然选择输入图片址者直接传七牛云传七牛云文件储存服务完成添加操作
图519教师列表图示：
图519教师列表图
（2）发布状态
通操作列表中发布钮更改信息否发布状态发布草稿状态发布状态更理容否门户网站中显示
（3）编辑操作
点击编辑操作会出现教师信息编辑话框原数存话框列表中进行更改操作
图520教师信息编辑图示：
图520教师信息编辑图
（4）删操作
点击删操作数库中删记录会存数库中
554培养方案
（1）添加操作
培养方案列表页面点击添加操作弹出添加框输入文件CDN址者直接传七牛云传七牛云文件储存服务完成添加操作
（2）编辑操作
点击编辑操作会出现编辑话框原数存话框列表中进行更改操作
（3）删操作
点击删操作数库中删记录会存数库中
图521培养方案图示：
图521培养方案图
555课程设置
课程设置页面课程项信息中包括图片址图片预览课程信息分注明学什时间会接触课程发布状态操作理等等课程信息
（1）添加操作
课程设置页面点击添加操作弹出添加框输入课程信息然选择输入图片址者直接传七牛云传七牛云文件储存服务完成添加操作
图522课程列表图图523增加课程图示：
图522 课程列表
图523 增加课程
（2）发布状态
通操作列表中发布钮更改信息否发布状态发布草稿状态发布状态更理容否门户网站中显示
（3）编辑操作
点击编辑操作会出现课程信息编辑话框原数存话框列表中进行更改操作
图524课程信息编辑图示：
图524课程信息编辑图
（4）删操作
点击删操作数库中删记录会存数库中
556富文编辑器
项目开源项目Tinymce富文编辑器Tinymce富文编辑器功强界面简洁然目前Vue实战中较流富文编辑器广泛嵌入Web应程序中目前支持市面流浏览器子安项目文章发布页面中台理员未必懂代码实现文章容详情页美观时候需编辑器直接输入想文章容进行文章容排版时开源代码直接手编辑器html代码文章容进行排版富文编辑器够满足时日常编辑需会理员编写文章容逆行处理保证html代码格式储存端数库中排版形式展示文章页面中实现页面灵活性然选择Tinymce原家老牌做富文公司文档配置非常
Vue项目前导入Tinymcecdn址然Tinymce封装组件实现页面方富文编辑器项目文章设置页面进行
557文章设置页面
文章设置页面文章项信息中包括封面图图片址图片预览文章容文章类文章发布状态操作理等等文章信息
（1）添加操作
文章设置页面点击添加操作弹出添加框输入文章容然选择输入图片址者直接传七牛云传七牛云文件储存服务完成添加操作储存草稿操作
图525添加文章图示：
图525 添加文章
（2）发布状态
通操作列表中发布钮更改文章否发布状态发布草稿状态发布状态更理容否门户网站中显示
图526发布状态图示：
图526 发布状态
（3）编辑操作
点击编辑操作会出现文章信息编辑页面原数存话框列表中进行更改操作更直接文章页面源代码作出修改
图527文章编辑图图528 文章代码编辑示：
图527 文章编辑
图528 文章代码编辑
（4）删操作
点击删操作数库中删记录会存数库中
（5）倒序查询
点击勾选框倒叙查询出新添加文章
（6）模糊查询
模糊查询相应文章标题快速搜出需文章
558日志列表
日志列表予理员查门户网站接口访问信息包括访问接口时间请求方式请求具体接口请求接口参数请求接口分访问源请求接口ip址请求接口执行时间方便理员接口出现问题者请求时间变长快速针相应接口进行优化
图529日志列表图示：
图529 日志列表
559理员信息
理员页面右角显示理员昵称修改信息修改密码注销操作注销操作直接返回登陆页面修改信息修改年龄性等等
图530理员图图531理员信息修改图图532理员密码修改图示：
图530 理员
图531 理员信息修改
图532 理员密码修改
56数库实现
系统理者登录数库台实现数库数理图533数库界面图示：
图533数库界面
6项目测试
整项目开发步项目测试广东东软学院软件工程门户网站整项目说重环节系统测试程中检测出项目完整性否出现重漏洞否面整项目理员访客需求项目测试直接会影响整项目开发结果整项目全面性进行项目运行测试项目安全性流畅度实性性坏整项目运行环境系统求否符合分析时期
先进行界面测试测试流浏览器否够正常运行页面果流浏览器显示没问题做储存数保存设置情况测试项目性电脑配置否够完美运行项目验证否符合分析时配置期
61项目测试意义
网站开发完成进行项目测试前端测试功测试针浏览器适应性问题测试针理员体验测试等等前端测试页面完成会测试端纯端测试包括服务器数库性测试致性测试等等测试期间两阶段第测试第二纠错纠错保障项目正常运行修改项目运行中出现错误
图61测试整项目流程图示：
图61测试流程图
62项目性测试
性测试系统环境中完整项目运行期间测试项目运行响应速度延迟情况没出现项目线时候网络响应时间会会长响应时间6秒正常情况时进行发访问测试方瞬间增减访问量会会网络响应出现延迟情况正常情况10秒
63项目性测试总结
基SSM框架+Vuejs+ElementUi广东东软学院软件工程门户网站开发鉴国流开发网站验确保理员正常进行网站理维护访客十分容易访问网站网站兼容性强流浏览器正常访问界面友理功完善拥良操作空间户体验感强项目测试基SSM框架+Vuejs+ElementUi广东东软学院软件工程门户网站系统运行良满足开发需求
7总结
项目详细介绍Vuejs框架SSM框架MVVM开发模式MYSQL数库项目详细分析确定行性次项目开发程中懂踏项目开发指条路实非常艰难辛苦遇困难解决困难种喜悦感觉柳暗花明村整喜悦感升正源知识渴软件工程专业解更加深入明白开发技术需持恒学验证熟练掌握
项目开发前简单解端项目开发相关知识没十分系统学端知识明白端框架技术明白设计理念面问题会会写明白然通网官网学视频寻求懂端知识学帮助问题进行解决说程中快提高学力掌握端SSM框架知识更加利项目开发快速手类似框架项目开发知道学道路实践必缺少样东西实践程中断总结验提高学力更帮助踏职业生涯道路
项目开发鉴类项目优势扬长避短项目进行完善项目开发会存足进步研究
参考文献
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档
广东东软学院软件工程系门户网站设计实现
Design and Implementation of Portal Website
of Software Engineering Department of Neusoft
Institute Guangdong
日
容摘
网站基SSM框架+Vuejs +Element Ui实现前端分离设计广东东软学院软件工程系门户网站实现目展示灵活性高交互力强时性门户网站网站提供度高快速效信息查询准确灵活数理等拥强功台理着5G时代获取信息需求量日益渐中乏年高考考生学专业通网络获取相关信息学专业门户网站应运生寻找够易理方便高考毕业生提供准确快速软件工程专业介绍门户网站成问题
广东东软学院作IT类院校软件工程系门户网站学校进行宣传重渠道展现学校风貌师生提供良交互台助学校教学工作开展
网站设计中前端页面属渐进式MVVM框架VueElement Ui桌面端组件库开发动态页面网站台SSM框架MYSQL数库
关键词：Vuejs Web SSM MVVM MYSQL
Abstract
This website is based on the SSM framework + Vuejs + Element Ui to achieve the front and back end separation design of Neusoft Institute Guangdong Software Engineering Portal The main purpose is to show an instant portal website with high flexibility and strong interaction ability The website provides a high degree of freedom fast and effective information query accurate and flexible data management and other background management with powerful functions Because with the advent of the 5G era there is an increasing demand for information There are many candidates for the college entrance examination every year They obtain the professional information of the university through the Internet As a result professional portals for each university appeared Then how to find a portal website that can be easily managed convenient to use and can provide accurate and fast software engineering professional introduction for college entrance examination graduates becomes a problem
As a IT college Neusoft Institute Guangdong is one of the important channels for the software engineering department to promote the school It should not only show the school＇s style but also provide a good interactive platform for teachers and students and help the development of school teaching
In the website design the frontend pages use the Vue and Element Ui desktop component libraries that belong to the progressive MVVM framework to develop dynamic pages and the backend of the website uses the SSM framework and MYSQL database
Key words Vuejs Web SSM MVVM MySQL
目录
1绪 1
11项目开发目 1
12项目开发意义 1
13门户网站现状 1
14项目创新思路 2
15文基结构 2
2技术工具台 4
21前端架构 4
211 Vuejs 4
212 Vue CLI 4
213 Vue Router 4
214 Vuex 4
215 Element Ui组件库 5
216 Axios 5
217 MVVM开发模式 5
218 虚拟DOM 5
219 跨域问题 5
22端技术 6
23端项目结构 7
24开发环境 8
（1）软件环境 8
（2）硬件环境 9
（3）开发工具 9
3系统分析 9
31行性分析 10
311 技术行性 10
312 操作行性 10
313 济行性 10
314法律行性 10
32项目开发流程分析 11
321 系统开发流程分析 11
322 项目操作流程分析 11
323网站数添加流程分析 12
324 网站数更改流程分析 12
325 网站数删流程分析 13
33 系统例分析 13
34例说明 14
4系统设计 15
41系统概述 15
42 项目结构设计 15
43 数库结构设计 16
431 数库基设计原 16
432 数库概念模型 17
433 数库表设计 20
5系统实现 23
51门户网站首页 23
52专业介绍 25
53文章列表界面 27
54理员登陆界面 28
55台理员界面 29
551七牛云CDN图片储存 30
552轮播图设置 31
553教师列表 32
554培养方案 34
555课程设置 34
556富文编辑器 36
557文章设置页面 37
558日志列表 39
559理员信息 39
56数库实现 40
6项目测试 41
61项目测试意义 41
62项目性测试 41
63项目性测试总结 42
7总结 43
参考文献 44
致谢 46
1绪
11项目开发目
着互联网蓬勃发展国行业信息化程度日益加深[[] 李鹏楼 高性门户网站信息发布系统设计实现[D]北京邮电学2019
]获取信息需求量越越互联网成获取信息重渠道4G5G时代互联网拥更新速度快信息时性特点式样门户网站应运生提供生活方面信息中乏学校专业介绍网站限度高考毕业生提供准确快速关广东东软学院软件工程专业介绍造理方便信息时更新界面友门户网站
12项目开发意义
广东东软学院软件工程系门户网站承担着学校关专业信息介绍发布宣传校师生高考考生等信息获取务门户网站理方式较传统发布相关信息需专业计算机员修改更新暴露前门户网站维护局限性片面性
门户网站界面美观户良访问体验时台理功实现具户快速手操作方便更新灵活特点现阶段流框架技术演进网站简便性实性网站开发效率幅度提升时刚毕业高考生学专业解建立专门关软件工程专业门户网站项势必行工作
13门户网站现状
互联网门户网站具服务容丰富服务功便捷特点着互联网相关法律法规完善网站规范化越越高信息真实性时性户访问体验较改善行业快速发展互联网相关方面服务然相较门户网站现阶段流框架仅网站具跨台屏幕适应界面友等优势信息呈现网站维护方面着优势
现时代进步行业网站容开始变化更迎户需求现单纯新闻者坛远远够户造成吸引门户网站服务容针相关户集中某方面说网易搜狐集中游戏资源新浪重点微博门户网站户浏览量旦增会形成流量流量带利益巨说网站营收头广告新浪搜狐说广告贡献营收份额网易游戏电商广告邮箱方面进行业务够吸引方面需求户
14项目创新思路
针型门户网站创新思路两方面：
（1）表层
网站表层门面拥门面相予访客第印象说网站容必须清晰目标定位具体展现访客什样门面极重争取容做信息时性界面做设计整洁美体验做迅速便捷
（2）深层
网站深层脑拥脑予整网站完整功网站台理实现设计超前化项目台理容方面针没计算机语言基础知识户直接手操作时配备相关模板进行文章代码编辑简单说网站需超前设计理念设计风格功专业性完整性予网站全方面维护
15文基结构
第章：绪章项目开发目意义门户网站现状进行介绍
第二章：技术工具台章详细项目开发技术工具台进行说明
第三章：系统分析章技术操作济方面项目进行行性分析项目开发流程进行详细说明分析项目例情况
第四章：系统设计章先整项目进行概述然项目结构进行设计针项目数库进行设计
第五章：系统实现章网站容进行介绍分网站首页专业介绍文章列表登录页理员界面进行详细项目实现介绍
第六章：项目测试章详细项目进行功性测试性测试分出测试结果进行分析总结
第七章：总结章整项目实现程进行总结总结验收获未作出期
2技术工具台
21前端架构
网站前端采Vuejs + Element Ui组件库 + Axios
211 Vuejs
Vuejs套构建户界面渐进式框架[[] 吕英华渐进式JavaScript框架Vuejs全家桶应[J]电子技术软件工程2019(22)3940
]型框架样轻量级框架身重视视图层特点简单易学简单语法项目创建进行双数绑定视图数结构进行分离操作数完成数修改需逻辑代码进行修改相较框架拥更快渲染速度更体积Vue全家桶前需搭建相关环境提前安装WebpackNodeNpm[[] 麦冬陈涛梁宗湾轻量级响应式框架Vuejs应分析[J]信息电脑(理版)2017(07)5859
]
212 Vue CLI
Vue CLI脚手架快速创建启动Vue项目项目带热重载保存项目时静态检查构建生产环境配置脚手架特点户配置感纠结专注撰写应
213 Vue Router
Vue RouterVue全家桶里面官方路理器单页面应构建提供良路导航核心改变视图时断端发送请求然路器提供HashHistory两种模式实现种方式时会重新加载页面
214 Vuex
Vuex专门Vue项目开发状态理模式知道开发中视图断变化需数支撑项目集中理组件状态保证状态种相应规发生控变化
215 Element Ui组件库
Element Ui组件库饿组件库专门开发设计师提供美观桌面端组件帮助设计师快速开发原型基Vue开发组件库直接安装组件配题配色搭配端数绑定
216 Axios
AxiosVue中承担着访问端api展示数作目浏览器中创建XMLHttpRequest然数动转换成JSON格式方便前端接收数现阶段基promiseHTTP客户端Axios非常流行
217 MVVM开发模式
MVVMModelViewViewModel简写[[] 校丽丽 基MVVM模式前端框架插件库设计实现[D]西南科技学2019
]MVVM开发模式前早MVPMVC等开发模式MVVM模式鉴桌面应程序MVC思想纯JavaScript象Model表示显示View两者做程度分离关联起ViewModelModel数ViewView数修改步Model整实现方式DOM时间监听两方实现称双数绑定
218 虚拟DOM
DOM中文名称文档象模型[[] 柴青山 基MVVM模式Vuejs框架物流软件动化测试系统中应研究[D]北京邮电学2019
]Web界面DOM树实现构建Web页面中某部分发生改变DOM书某结点会相应改变虚拟DOM解决浏览器性问题设计东西说操作更新中更新次DOM动作虚拟DOM会立更改DOM更新diff容保存JS象中终象次性attchDOM树样做JS象存中速度更快
219 跨域问题
通axios远程访问json数绝数浏览器采源策略[[] 赵军基Vuejs疫情统计图表实现[J]电脑编程技巧维护2020(03)144147
]Javascript施加安全限制开发程中前端项目端口号端项目端口号样造成跨域问题解决跨域问题方式前端端项目中修改图21前端代码图22端代码图示：
图21 前端代码图
图22 前端代码图
22端技术
项目端技术SSM框架框架流Java EE企业级框架身具定影响力市场型应者网络企业级网站开发搭建SSM框架Spring + Spring MVC + MyBatis缩写Maven搭建工程进行搭建SSM框架
Spring前流Java Web开发框架[[] 刘丽华薛玉倩基spring MVC学生信息理系统[J]通讯世界201926(10)173174
]时轻量级Java开发框架解决应开发中会出现复杂性问题中重两第控制反转（Ioc）容器解决硬编码高耦合第二面切面（AOP）功快速简单解决传统OOP难实现功应中帮助实现耦合日志记录显示安全理数库事务
Spring MVC框架基ServletMVC框架目前流行应程序基模型视图控制器 (ModelViewController MVC) 模式进行设计实现[[] 刘宁陆荣国缪万胜MVC体系架构模式框架持续抽象进化[J]计算机工程2008(04)107110
]配合Spring原生特性开发更加简单规范时提供种轻度耦合方式更容易分离控制器模型中等等象
MyBatis基Java持久层框架[[] 荣艳冬关Mybatis持久层框架应研究[J]信息安全技术20156(12)8688
]目消JDBC代码参数手工设置结果集检索简单说MyBatis简单XML注解帮助项目开发中进行理数增删查改框架
Maven快速搭建SSM框架理工具[[] 连瑞梅基Java选课理系统设计实现[J]电脑知识技术202016(05)6771+77
]够快速解决搭建中赖安装复杂性问题理赖
23端项目结构
端项目基SSM + Maven项目架构面接口编程MVC模式分表现层持久层业务层视图层[[] 李洋SSM框架Web应开发中设计实现[J]计算机技术发展201626(12)190194
]页面发送request请求（View视图层）表现层（Controller层）Controller层接受客户端HTTP协议传送请求参数进行相应流程处理然POJO业务层（Service层）业务层完成具体业务逻辑POJODao层（Mapper层）Dao层数库请求数然次返回数呈现页面进行项目流程构建盖楼层面盖楼先持久层然面表现层两层间业务层减少两层联系
表现层（springMVC）Controller层接收响应客户端请求常说web层springMVCspringMVC设计模式常说MVC 概括应JavaBeanmodel应JSPView应servletcontroller然项目中没JSPView忽略springMVC接收客户端HTTP协议发送请求然调相关响应返回客户端
业务层（Spring）Service层具体负责业务模块逻辑应设计实程中会发现Service没做什工作实然名字发现处理业务需考虑具体实现接收servlet调Dao程中位中间缓两层关系两层达解耦效果降低间关联
持久层（Mybatis）Dao层（Mapper层）具体负责数库进行设计交互简单说处理数DAO层第步先设计DAO接口第二部定义接口实现类放进Spring配置文件中模块进行数业务处理时候调接口
视图层View层负责前端页面展示层需Controller层结合起开发网站项目中需JSP页面显示需获取Controller层接口数库获取数转化成JSON格式输出Vue页面中
图23 SSM结构图示：
图23 SSM结构图
24开发环境
（1）软件环境
序号
名称
版
备注
1
Windows10
1909
操作系统
2
Mysql
80
数库
3
Tomcat
9033
Web容器
4
Jdk
8
工具包
5
Axios
0192
HTTP库
6
Vue Cli
30
构建工具
7
Webpack
400
模块包器
8
Npm
300
安装包理工具
9
node
600
JavaScript 运行环境
10
vue
252
Vue版
11
vuerouter
301
项目路理器
12
vuex
313
项目数状态理
表21 软件详细表
（2）硬件环境
序号
名称
配置
备注
1
战神K550D
12G存+1TB SSD硬盘25GHz Intel Core i7
2
CPU
Intel（R）Core(TM)i74710MQ
表 22 硬件信息表
（3）开发工具
序号
名称
版
备注
1
JDK
8
工具包
2
IntelliJ IDEA
201933
端编译器
3
Visual Studio Code
144
前端编译器
4
Navicat
12
数库客户端
5
Maven
363
项目理工具
6
Postman
7221
测试端接口
表 23 开发工具信息表
3系统分析
31行性分析
基Vue + Element Ui + SSM框架广东东软学院软件工程门户网站目标高考毕业生关软件工程介绍校师生发布专业信息台确定项目开发目标接四方面行讨项目行性
311 技术行性
网站开发Vue + Element Ui + SSM框架开发程中针前端页面开发计界面美观度数库里面数进行调开发理作开放方Vue框架开发前端页面搭配Element Ui组件库够前端界面友功配备完善简单然基MYSQL建立数库端数具完整性安全性稳定性特点SSM框架开发端项目特点开发速度快理方便性相较框架更加稳定然升级性较高现SSM框架开发项目发展趋完善应广泛项目开发领域中
综述项目开发具技术行性
312 操作行性
基Vue项目开发端理台开发环境完善台登陆界面简单美观更加方便理者操作理者需太计算机专业知识门户进行修改理发布文章等等操作时普通电脑进行访问门户网站台
综述项目开发具操作行性
313 济行性
项目前端属Vue项目开发搭配饿（Element UI）组件库端项目开发SSM框架够调MYSQL数库数程序开发计算机配置求较低软件环境安装容易具备力需求量系统简洁开发周期短说开发成较低
综述项目开发具济行性
314法律行性
项目开发作行研究行设计项目开发环境源代码差门户网站开发项目合法开发环境中进行存违法问题
综述项目开发具法律行性
32项目开发流程分析
321 系统开发流程分析
项目开发程中项目开发进行分析分析网站台理户理员然开发功模块整合起测试网站流程分析图31项目开发流程图示：
图321项目开发流程图
322 项目操作流程分析
访客：访客仅访问门户网站
理员：进入门户网站首页访问登录台理界面需输入户名密码网站会动通接口访问数库储存数验证户密码否正确果数验证正确话进入台理界面拥理整门户网站页面功果数验证失败会提示登录失败网站操作流程分析参考图32操作流程图示：
图32 操作流程图
323网站数添加流程分析
理员增加门户网站容端理台选择想添加容类然输入需添加数页面会根理员输入数进行表单验证果验证成功没问题话会通接口写入数库里面户输入数验证失败会禁止提交表单求重新输入网站数添加流程分析图图33数添加操作流程图示：
图33 数添加操作流程图
324 网站数更改流程分析
理员修改网站容首先理员选择想修改容类然选择修改数填写需修改数然页面会数进行验证果合法话点击提交修改写入数库果验证失败会提示错误信息需重新修改提交更改流程分析图34数修改操作流程图示：
图34 数修改操作流程图
325 网站数删流程分析
理员果遇网站中想删容先选择想删容然点击删钮页面会端接口发送删指令果数存会成功删数刷新页面果数存页面会提示错误信息刷新页面删数流程分析图35数删操作流程图示：
图35 数删操作流程图
33 系统例分析
理员拥信息台页面鼠标划拉箭头出现拉框中修改信息密码理员通登录验证成功访问台界面包括网站公告文章系统系统日志网站展示信息等容进行网站消息更新消息增加发布公告信息等等功理员例分析图36理员例分析图示：
图36 理员例分析图
34例说明
编号
参者
例名称
例说明
01
理员
理员登录
理员通登录窗口登录账号进入台理系统
02
新增文章
理员手动添加文章
03
查询文章
理员查询文章
04
删文章
理员删指定文章
05
修改文章
理员修改指定文章
06
新增课程
理员手动添加课程
07
查询课程
理员查询指定课程
08
删课程
理员删指定课程
09
修改角色
理员修改指定课程
10
查询侧边框设置
理员查询指定侧边框设置
11
修改侧边框设置
理员修改指定侧边框设置
12
查询教师信息
理员查询指定教师信息
13
增加教师信息
理员手动添加教师信息
14
删教师信息
理员删指定教师信息
15
修改教师信息
理员修改指定教师信息
16
查询培养方案
理员查询培养方案
17
新增培养方案
理员手动添加培养方案
18
删培养方案
理员删指定培养方案
19
修改培养方案
理员修改指定培养方案
20
新增轮播图
理员手动添加轮播图
21
查询轮播图
理员查询指定轮播图
22
删轮播图
理员删指定轮播图
23
修改轮播图
理员修改指定轮播图
23
查询日志
理员查询系统日志
4系统设计
41系统概述
网站基BS结构Web服务应开发程中直接访问网站首页解关广东东软学院软件工程专业相关方面介绍理员普通电脑安装Browse浏览器访问网站台理台时Web服务器面装配数库理员网站台理功实现数交互理员连接互联网时网站工作原理图41工作原理图示：
图41 工作原理图
42 项目结构设计
网站结构设计首先总体进行初步设计然前端进行页面细节细分细节作部分分开发出组件Vue项目组件拼装起成页面形成总体门户界面设计台前端界面设计门户网站显示容进行分类分设置页面予台页面子路设置子模块功间联系进行设计设计组件接口组件间数传递
组件实现程中页面确定具体基结构然结构组件进行实现方案计划网站更实现出想结果首先需收集组件中需资料然进行分析解进行资料整合资料整合完毕开始网站门户页面台页面进行初步设计进步优化界面设计出理想结构良网站框架
网站总体架构设计图42网站结构图示：
图42 网站结构图
43 数库结构设计
理员数库理工具台数理进行想操作说删增加查找更改项目开发离开数库数支持项目中数库开发项目中重组成部分数库开发坏决定项目开发进度否受影响
数库开发首先需网站进行分析收集网站什样数需求然根数需求设计数库结构运行数库理数库
431 数库基设计原
数库设计量题数类张表中量实现表原次项目数库设计开发程中需规范化设计满足第三范式情况时量进行数冗余消避免数修改插入删时出现异常进行数库设计程中重取考虑数表动态适应性
432 数库概念模型
数库设计前需进行需求分析分析程中需解整项目数需求然通数抽象设计出整项目概念模型正常说项目概念模型ER模型基项目必少工具广泛应领域项目中图43文章列表ER图示：
图43 文章列表ER图
图44课程列表ER图示：
图44 课程列表ER图
图45侧边栏信息ER图示：
图45 侧边栏信息ER图
图46培养方案信息ER图示：
图46 培养方案信息ER图
图47轮播图列表ER图示：
图47 轮播图列表ER图
图48日志列表ER图示：
图48 日志列表ER图
图48教师信息ER图示：
图48 教师信息ER图
图49理员信息ER图示：
图49理员信息ER图
433 数库表设计
设计数库阶段通常会现数库理工具作数库设计基础
表410 tbarticle文章信息表
列名
名称
数类型
键
注释
AAuthor
文章作者
varchar(255)
false
AContent
文章容
longtext
false
ADate
文章创建日期
datetime
false
Aid
文章序号
int(255)
True
增唯
AImg
文章封面图链接
varchar(255)
false
AImportant
重性
varchar(255)
false
AStatus
状态
varchar(255)
false
AStyle
类
varchar(255)
false
ATitle
文章标题
text
false
表411 tbbook课程信息表
列名
名称
数类型
键
注释
id
课程序号
int(255)
true
唯增
bookauthor
课程书作者
varchar(255)
false
bookimg
课程封面图
longtext
false
bookinfo
课程信息
varchar(255)
false
bookname
课程名字
varchar(255)
false
booktype
课时间
varchar(255)
false
表412 tbnotice侧边栏信息表
列名
名称
数类型
键
注释
Nid
侧边栏序号
int(255)
True
唯增
Notice
侧边栏容
longtext
false
NoticeName
侧边栏标题
varchar(255)
false
表413 tbpeiyang培养方案列表
列名
名称
数类型
键
注释
id
培养方案列表id
int(11)
true
唯增
pname
年培养方案
varchar(255)
false
purla
培养方案pdf链接
varchar(255)
false
purlb
培养方案教材库pdf链接
varchar(255)
false
purlc
培养方案指导性教学进程pdf链接
varchar(255)
false
表414 tbslide 轮播图列表
列名
名称
数类型
键
注释
body
轮播图描述
varchar(255)
false
id
轮播图id
int(11)
True
唯增
imgurl
轮播图图片链接
varchar(255)
false
label
轮播图标题
varchar(255)
false
status
发布状态
varchar(255)
false
url
轮播图跳转链接
varchar(255)
false
表415 tbsyslog日志列表
列名
名称
数类型
键
注释
accessDate
产生日期
datetime
false
accessInterface
接口名字
varchar(100)
false
accessIp
请求ip
varchar(50)
false
accessSource
请求客户端名字
varchar(50)
false
executeTime
响应时间
int(11)
false
id
日志id
int(11)
true
唯增
interfaceParams
请求字段
text
false
logId
日志唯序号
varchar(32)
false
唯
requestType
请求类型
varchar(20)
false
表416 tbteacher日志列表
列名
名称
数类型
键
注释
teaimg
教师图片
varchar(255)
false
teainfo
教师信息
varchar(255)
false
teaname
教师名字
varchar(255)
false
status
发布状态
varchar(255)
false
teaposition
教师职位
varchar(255)
false
teatel
教师电话
varchar(255)
false
teaweb
教师页
varchar(255)
false
tid
序号
int(255)
True
唯增
表417 tbuser日志列表
列名
名称
数类型
键
注释
age
年龄
int(11)
false
id
序号
int(11)
false
唯增
password
密码
varchar(50)
false
sex
性
int(11)
false
uName
昵称
varchar(20)
false
userName
账号
varchar(20)
false
5系统实现
51门户网站首页
访客浏览器输入链接直接访问广东东软学院软件工程门户网站中门户网站映入眼帘导航栏菜单样导航栏简洁白色题标准东软蓝形成鲜明图形式题页面门户网站轮播图先图片广东东软学院门户片选广东东软学院计算机学院15届林文豪师兄作品图51首页1图示：
图51 首页1
然图方网站基数包括已发布文章数量然发布数量包括类文章图首页1组件头部组件首页容组件形成Vue项目组件化开发头部组件台理员登陆链接直接登录登陆界面显示昵称显示注销选项图52首页2图示
图52 首页2
首页新发布新闻容侧边栏容侧边栏容首先根ip确定位置日天气然心知天气api接口接着重公告通告先公告板显示文字公告说紧急公告发布台理员页面进行容更改根重程度发布排序超链接计算机语言列表连接着国学计算机语言网站侧边栏计算机语言列表通台代码定义编辑显示出容根需通Html代码修改面计算机语言址链接等者更新容述容图53首页容图图54侧边栏示：
图53 首页3
图54 侧边栏
容尾部轮播图轮播图图片标题容想链接址台理员页面进行设置然选择链接址图55轮播图示：
图55 轮播图
首页末端典东软蓝配色网站尾部中加入实时更新日期时钟更新版权信息年份动更新版权信息年份该尾部广东东软学院学院网站样式样没太出入图56尾部图示：
图56 尾部图
52专业介绍
分页二拥二级菜单分页中软件工程专业介绍分页面布局分侧边栏容容开始软件工程专业介绍分2014年前2014年专业区广东东软学院2014年升级科高校2014年前关软件类专业名字软件技术2014年新增科专业中软件工程页面2014年开始年培养计划指导性教学进程年素材库然台进行年度更新接软件工程关专业课程列表通四查年会学课程三课程相较三分专业实践方课程相说选择较专业会年实践学期（学期）课程中时间段课程介绍图57专业介绍图图58课程列表图图59实践学期图示：
图57 专业介绍
图58 课程列表
图59 实践教学
侧边栏教师信息栏关软件工程专业教师侧边栏寻找侧边栏提供模糊查询针教师名字者教师信息进行模糊查询中添加教师教学页Vue项目中滤器教师手机号码进行隐私保护手机号码中间四位变星号图510教师信息列表图示：
图510 教师信息列表
53文章列表界面
文章列表界面首页查更文章进行跳转导航栏进行跳转文章列表全部类型发表文章通分类查类型文章分新闻快讯公告通告学生天图511文章列表图示：
图511文章列表图
片文章点击进该文章详细容包括文章标题文章容文章作者日期图512文章详情图示：
图512 文章详情页
54理员登陆界面
理员登陆界面提供空验证rule规规范化登录果输入错误者输入框空出现错误提示防止恶意登录理员输入相应账号密码成功登录然跳转台理界面图513理员登录界面图图514空验证图示：
图513 理员登录界面
图514 空验证
55台理员界面
理员通登录验证验证成功便跳转台理员界面理员界面通组件化实现左边侧边栏面固定头部容通监测路变化进行容更改更改相应路容该理员界面仅通登录进入中首页路侧边栏分页子路侧边栏页面进行公告预览公告更改右侧定义侧边栏设置图515台页面图示：
图515 台页面
551七牛云CDN图片储存
需图片传页面七牛云CDN存储服务图片传七牛云址然获取图片链接直接返回图片链接输入框文中添加页面预览传图片进行图片移实现七牛云CDN图片储存服务需七牛云网站申请相应api接口通计算获取相应token已通已备案域名服务进行图片储存
（1）图片传
点击传钮动实现图片传
（2）图片移
点击图片名字删钮重新传图片
（3）token生成
七牛云token生成七牛云网站面获取AccessKeySecretKey然importjs文件获取genUpToken方法先确定传策略传策略序列化成json格式数然序列化传策略进行Base64编码通步骤获取encoded接着SecretKeyencoded编码进行HMACSHA1加密做URL安全Base64编码encoded_signedencoded_signed编码通genUpToken方法AccessKeyencode_signedencoded序间连接起获取整传token
（4）传图片名字序列化
传图片时候获取图片类型否jpgjpegpng格式图片储存fileExtension变量中限制图片2MB获取图片宽高果传图片100*100图片传失败果片宽高没问题然调时间方法获取时时间时间格式yymmddhhmmss储存nowtime变量中生成获取图片名字变量文件名uploadpic+nowtime+fileExtension样文件名会重复
（5）图片链接获取
图片链接获取七牛云域名服务中设置域名加传图片时生产文件名图片链接生成返回双数绑定图片链接址输入框中
图516图片传图示
图516 图片传
552轮播图设置
轮播图设置页面轮播图列表列表轮播图图片址轮播图标题轮播图描述轮播图连接址轮播图状态操作理
（1）添加操作
轮播图设置页面点击添加操作弹出添加框输入轮播图CDN址者直接传七牛云传七牛云文件储存服务完成添加
（2）发布状态
通操作列表中发布钮更改缩略图否发布状态发布草稿状态首页会显示缩略图发布状态更理容否门户网站中显示
（3）编辑操作
点击编辑操作会出现缩略图编辑话框原数存话框列表中进行更改操作
（4）删操作
点击删操作数库中删缩略图记录会存数库中
图517缩略图列表图图518缩略图修改图示：
图517缩略图列表图
图518缩略图修改图
553教师列表
教师列表设置页面老师项信息中包括图片址教师图片预览老师名字等等信息老师信息发布状态操作理
（1）添加操作
教师设置页面点击添加操作弹出添加框输入教师信息然选择输入图片址者直接传七牛云传七牛云文件储存服务完成添加操作
图519教师列表图示：
图519教师列表图
（2）发布状态
通操作列表中发布钮更改信息否发布状态发布草稿状态发布状态更理容否门户网站中显示
（3）编辑操作
点击编辑操作会出现教师信息编辑话框原数存话框列表中进行更改操作
图520教师信息编辑图示：
图520教师信息编辑图
（4）删操作
点击删操作数库中删记录会存数库中
554培养方案
（1）添加操作
培养方案列表页面点击添加操作弹出添加框输入文件CDN址者直接传七牛云传七牛云文件储存服务完成添加操作
（2）编辑操作
点击编辑操作会出现编辑话框原数存话框列表中进行更改操作
（3）删操作
点击删操作数库中删记录会存数库中
图521培养方案图示：
图521培养方案图
555课程设置
课程设置页面课程项信息中包括图片址图片预览课程信息分注明学什时间会接触课程发布状态操作理等等课程信息
（1）添加操作
课程设置页面点击添加操作弹出添加框输入课程信息然选择输入图片址者直接传七牛云传七牛云文件储存服务完成添加操作
图522课程列表图图523增加课程图示：
图522 课程列表
图523 增加课程
（2）发布状态
通操作列表中发布钮更改信息否发布状态发布草稿状态发布状态更理容否门户网站中显示
（3）编辑操作
点击编辑操作会出现课程信息编辑话框原数存话框列表中进行更改操作
图524课程信息编辑图示：
图524课程信息编辑图
（4）删操作
点击删操作数库中删记录会存数库中
556富文编辑器
项目开源项目Tinymce富文编辑器Tinymce富文编辑器功强界面简洁然目前Vue实战中较流富文编辑器广泛嵌入Web应程序中目前支持市面流浏览器子安项目文章发布页面中台理员未必懂代码实现文章容详情页美观时候需编辑器直接输入想文章容进行文章容排版时开源代码直接手编辑器html代码文章容进行排版富文编辑器够满足时日常编辑需会理员编写文章容逆行处理保证html代码格式储存端数库中排版形式展示文章页面中实现页面灵活性然选择Tinymce原家老牌做富文公司文档配置非常
Vue项目前导入Tinymcecdn址然Tinymce封装组件实现页面方富文编辑器项目文章设置页面进行
557文章设置页面
文章设置页面文章项信息中包括封面图图片址图片预览文章容文章类文章发布状态操作理等等文章信息
（1）添加操作
文章设置页面点击添加操作弹出添加框输入文章容然选择输入图片址者直接传七牛云传七牛云文件储存服务完成添加操作储存草稿操作
图525添加文章图示：
图525 添加文章
（2）发布状态
通操作列表中发布钮更改文章否发布状态发布草稿状态发布状态更理容否门户网站中显示
图526发布状态图示：
图526 发布状态
（3）编辑操作
点击编辑操作会出现文章信息编辑页面原数存话框列表中进行更改操作更直接文章页面源代码作出修改
图527文章编辑图图528 文章代码编辑示：
图527 文章编辑
图528 文章代码编辑
（4）删操作
点击删操作数库中删记录会存数库中
（5）倒序查询
点击勾选框倒叙查询出新添加文章
（6）模糊查询
模糊查询相应文章标题快速搜出需文章
558日志列表
日志列表予理员查门户网站接口访问信息包括访问接口时间请求方式请求具体接口请求接口参数请求接口分访问源请求接口ip址请求接口执行时间方便理员接口出现问题者请求时间变长快速针相应接口进行优化
图529日志列表图示：
图529 日志列表
559理员信息
理员页面右角显示理员昵称修改信息修改密码注销操作注销操作直接返回登陆页面修改信息修改年龄性等等
图530理员图图531理员信息修改图图532理员密码修改图示：
图530 理员
图531 理员信息修改
图532 理员密码修改
56数库实现
系统理者登录数库台实现数库数理图533数库界面图示：
图533数库界面
6项目测试
整项目开发步项目测试广东东软学院软件工程门户网站整项目说重环节系统测试程中检测出项目完整性否出现重漏洞否面整项目理员访客需求项目测试直接会影响整项目开发结果整项目全面性进行项目运行测试项目安全性流畅度实性性坏整项目运行环境系统求否符合分析时期
先进行界面测试测试流浏览器否够正常运行页面果流浏览器显示没问题做储存数保存设置情况测试项目性电脑配置否够完美运行项目验证否符合分析时配置期
61项目测试意义
网站开发完成进行项目测试前端测试功测试针浏览器适应性问题测试针理员体验测试等等前端测试页面完成会测试端纯端测试包括服务器数库性测试致性测试等等测试期间两阶段第测试第二纠错纠错保障项目正常运行修改项目运行中出现错误
图61测试整项目流程图示：
图61测试流程图
62项目性测试
性测试系统环境中完整项目运行期间测试项目运行响应速度延迟情况没出现项目线时候网络响应时间会会长响应时间6秒正常情况时进行发访问测试方瞬间增减访问量会会网络响应出现延迟情况正常情况10秒
63项目性测试总结
基SSM框架+Vuejs+ElementUi广东东软学院软件工程门户网站开发鉴国流开发网站验确保理员正常进行网站理维护访客十分容易访问网站网站兼容性强流浏览器正常访问界面友理功完善拥良操作空间户体验感强项目测试基SSM框架+Vuejs+ElementUi广东东软学院软件工程门户网站系统运行良满足开发需求
7总结
项目详细介绍Vuejs框架SSM框架MVVM开发模式MYSQL数库项目详细分析确定行性次项目开发程中懂踏项目开发指条路实非常艰难辛苦遇困难解决困难种喜悦感觉柳暗花明村整喜悦感升正源知识渴软件工程专业解更加深入明白开发技术需持恒学验证熟练掌握
项目开发前简单解端项目开发相关知识没十分系统学端知识明白端框架技术明白设计理念面问题会会写明白然通网官网学视频寻求懂端知识学帮助问题进行解决说程中快提高学力掌握端SSM框架知识更加利项目开发快速手类似框架项目开发知道学道路实践必缺少样东西实践程中断总结验提高学力更帮助踏职业生涯道路
项目开发鉴类项目优势扬长避短项目进行完善项目开发会存足进步研究
参考文献
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档