赞
踩
该项目主要实现的是电影后台管理系统,主要以VueJs和ElementUI实现前端界面设计,后端采用的是NodeJs和Express框架为基础实现后端API系统,数据存储采用的是MySQL,以前后端分离的方式进行系统开发,实现前后端项目业务分离的实现方式。该论文主要是介绍了电影网站后台数据的管理及维护;进而在App端上给予用户进行功能性操作。同时,在开发阶段即在开发环境下,通过Vue工程进行反向代配置操作,解决跨域问题;
【关键字】 电影网站后台、VueJs、ElementUI、NodeJs、Express
目录
一、 项目介绍 5
二、 需求分析 6
1、 前端需求 6
2、 后端需求 6
3、 开发环境 7
三、 技术介绍 7
1、 Vue 7
2、 ElementUI 7
3、 NodeJS 7
4、 MySQL 8
四、 功能实现 8
1、 前端服务构建 8
2、 前端API接口封装 8
3、 前端路由实现 9
4、 第三方组件ElementUI引入 10
5、 界面设计 10
6、 数据表设计 11
7、 后端服务构建 14
8、 MySQL数据库的接入 15
9、 Api路由的封装 15
五、 总结 16
六、 致谢 16
七、 参考文献 16
一、项目介绍
该项目主主要利用的是基于Vue的ElementUI实现的电影数据前端项目,并用NodeJs+Express实现后端数据逻辑处理,并将之存入MySQL数据库中,进行数据的持续化。前后端之间的数据联系,主要通过Axios的插件,进行Ajax的请求方式进行上传,在前端项目中,采用了多个插件如Moment日期处理插件等多个插件,后台采用则是采用的大量的中间件,对后端的数据请求进行封装和过滤,同时通过模块化的思想,对后端api路由接口进行封装,便于后端的维护。后端采用的是mysql插件与MySQL数据库进行连接。并将前端的照片数据。以流的形式,存放在后端静态资源目录下。
二、需求分析
1、前端需求
(1)通过在package.json文件中进行配置解决跨域问题;
(2)前台单页面路由分级设计;
(3)前台页面的的风格设计(利用Element的UI风格);
(4)对一些特殊的数据进行可视化处理;
(5)页面的动画效果设计(采用vue中的transition组件);
(6)界面功能如图2.1.1所示
图2.1.1 前端界面功能效果图
2、后端需求
(1)基于node的express插件快速开发后台服务;
(2)对后台数据接受的格式进行统一,方便模块的封装;
(3)创建静态文件,用以存放静态资源文件;
(4)实现接口路由文件(模块化);
(5)启动mysql数据库,并用node的插件进行连接;
(6)设计并定义多个实体类对象与数据库进行相互映射;
(7)统一http状态码的返回信息;
(8)后台返回数据格式统一为json格式,同样的接收的请求内容格式也为json;
3、开发环境
(1)后台开发环境:node环境+MySQL数据库(系统没有限制);
(2)前台开发环境:node环境+vue-cli2.0版本;
(3)开发工具:vsCode编译器+编译器中所需插件(Vetur插件);
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。