论文总字数：16411字

目 录

1 引言 1

1.1 项目背景 1

1.2 项目目的 1

1.3 主要内容 1

2 理论支持 2

2.1 前端技术栈 2

2.1.1 Vue 2

2.1.2 webpack 2

2.1.3 Ecmascript 6 3

2.1.4 ESlint 3

2.1.4 Axios 3

2.1.5 vue-router 3

2.2 后端系统使用CI框架 3

2.3 Mysql数据库 3

2.4 阿里云服务器 4

2.5 docker容器技术 4

3 需求分析 4

3.1 系统的功能性需求 4

3.1.1展示界面的web端 4

3.1.2 提供数据的服务器端 5

3.2系统的非功能性需求 5

3.3用例图 6

3.3.1用户注册用例描述 7

3.3.2用户登录用例描述 7

3.3.3修改个人信息用例描述 8

3.3.4查看动漫列表用例描述 8

3.3.5用户对动漫点赞用例描述 9

3.3.6用户对动漫取消点赞用例描述 9

3.3.7用户发帖用例描述 10

3.3.8用户查看单词表用例描述 10

3.3.9密码修改用例描述 11

3.4类图 11

4 系统设计 12

4.1 服务端设计 13

4.1.1 包图 13

4.1.2 服务端设计序列图 14

4.2 客户端设计 16

4.2.1 客户端状态图 16

4.3 数据库设计 16

5 系统实现 17

5.1 数据库存储 17

5.2 客户端的实现 17

5.2.1 系统登录 17

5.2.2 系统注册 18

5.2.3 查看全部新番 19

5.2.4 查看某一天的动漫 20

5.2.5 记录看番进度 20

5.2.6 留言版 21

5.2.7 单词表功能 22

5.2.8 添加生词功能 22

5.2.9 模态框 22

5.2.10 分页功能 23

5.2.11 个人信息 23

5.3 服务端的实现 24

5.3.1 数据的伪删除 24

5.3.2 公共方法的提取 24

5.3.3 常量的提取和使用 25

5.4 docker与部署 25

6 结束语 26

参考文献 27

致 谢 28

基于php的动漫资源交流平台

潘道蒙

，China

Abstract: This paper describes an animation resource exchange platform using php back-end technology and vue front-end technology and the latest front-end separation technology. The back end uses the lightweight php framework CodeIgniter (referred to as the CI framework), and the system operates through the CI framework and the mysql database. This system adopts the latest front-end and back-end separation technology and aims at better maintainability and scalability. The front end uses Vue, one of the most popular MVVM frameworks (model-view-viewmodel), to separate the user graphical interface from the back-end logic and business logic, improving the readability and maintainability of the code. The system stores the animation names and corresponding resources for each quarter. The system also provides message board functions for users to express their own opinions and opinions, and displays the user information on the user details page. This article introduces the entire system development process from requirements analysis, detailed design and system implementation.

Key words: Front and rear separation；php；codeIgniter；Vue；mysql；

1 引言

1.1 项目背景

目前，动漫产业已经成为娱乐产业非常重要的部分，特别对于青少年，动漫产业如日中天。由动漫衍生出来的周边商品也能带来巨大的商业价值。而中国在动漫产业方向的发展明显落后于日本等国家，与动漫相关的网站也相对较少。中国迫切得需要发展出这样的一个产业链，这样的一个生态。

要打造一个供大家关于动漫的学习交流平台，一个web端应用是最为合适的，它不仅可以提供丰富的内容，还无需安装，多端同步，具有诸多优点。而目前最流行的web应用框架就是前后端分离。前端使用目前最流行的Vue，后端使用开发迅速的php。二者结合不仅能实现敏捷开发，而且利于维护，可扩展。

Vue是一套渐进式框架用于构建用户界面。和其他的框架不同的是，Vue注重视图层，使用数据驱动，数据的改变可以引导界面的改变，使开发变得非常容易，开发者只需要关注数据的变化就行了。同时，Vue可以简单和其他nodejs的库进行整合，解决了重复造轮子的问题，复杂的单页应用对于Vue来说也可以很好地驱动。

php的CI框架以他的轻量著称，但同时也不缺少任何必要的功能。CI作为一个简单易用的工具包，可以帮助开发者快速地构建一个完善的web应用。CI提供了大量的常用类库，以及简单的接口和逻辑结构，通过减少代码量，我们可以更加专注于创造性的工作。

1.2 项目目的

随着动漫产业的不断发展，关注动漫的人也越来越多了。每当到1月，4月，7月，10月，各大动漫出版社都不断地推出最新的动漫，想看的动漫琳琅满目，种类繁多，当然资源地址也很分散。每部动漫都可能在不同的网站上上架，这个时候人们就急切地需要一个系统来收集并且展示这些动漫的信息，类似于网页导航，来满足用户的需求。同时，看完动漫后，一个提供用户交流自己的想法和观点的平台也是极其必要的。对于日本这个国家来说，它每年的动漫产品出口值远远超过了他的钢铁出产值，从全球的主要国家来看，动漫已经成为了一个庞大的产业。在中国，青少年喜爱的动漫大多数都集中在日本，欧美，其中日本居多，中国国产动漫的占比极少，可见我国的动漫产业的发展步伐是明显落后于国外动漫产业的。相关的为动漫服务的系统和网站也相比较少，完成这个项目之后，可以为整个动漫社区添加一些活力，为中国动漫产业的发展添一份力。

1.3 主要内容

使用前端开发技术和后端开发技术，实现一个动漫资源交流平台，通过这个平台，用户可以轻松地获取到动漫最新的资讯，同时也可以通过该平台的导航，跳转到对应的播放平台，进行动漫学习活动。该平台为用户打开了一扇动漫世界新的大门。除此之外，在观赏完动漫之后，用户需要一个论坛来交流自己的意见，为此，平台提供了一个留言板的版块，用户可以尽情地在此发表自己的意见，交流感想。在看日本动漫的同时，用户也在学习日语，为了让用户更好地学习日语，该平台特此开了一个日语学习的版块，展示有日语，中文翻译，和假名等信息。日本单词表提供翻页的功能，可以自己添加生词。

每个用户都需要登录注册后使用本平台，每个用户都可以编辑展示自己的个人信息。并且在个人中心页面，记录有自己的操作记录，包括注册，登录和发帖等。

2 理论支持

2.1 前端技术栈

2.1.1 Vue

Vue.js是一套UI框架用于构建用户界面，它专注于MVVM模型的ViewModel层，通过双向的数据绑定将Model层和View层链接起来。它的特点如下：

1. 渐进式框架，采用自底向上增量开发设计
2. 模板双向绑定机制
3. 利用指令（directive）对DOM进行封装
4. 组件化设计思想
5. 如下图，将UI页面分割为若干组件进行组合和嵌套。

图 2.1 组件树

2.1.2 webpack

Webpacks是一个关于javascript的静态模块打包器，通过它开发者们可以对自己写的javascript文件进行预处理，webpack处理应用程序时，会构建出一个依赖关系图，将模块打包成一个或多个bundle。

2.1.3 Ecmascript 6

Ecmascript 6（简称ES6）是javascript语言的规范，由标准化组织 ECMA制定并发布，ES6包含有许多ES5所没有的新特性，这些新特性整体提升了这门语言的可读性。

2.1.4 ESlint

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。ESLint被设计为完全可配置的，开发者们可以通过配置文件来打造一套属于自己的规范。

2.1.4 Axios

Axios是一个基于promise的HTTP库，通过ES6的async和await的写法，可以有效避免多重回调，Axios可以在浏览器和node.js中使用。

2.1.5 vue-router

Vue非常适合单页面（SPA）应用开发，而单页面应用的核心是路由和模板。Vue核心库本身提供模板机制（mushtache），路由支持则由第三方库vue-router提供（Vue-router 2.0- 中文文档）。

2.2 后端系统使用CI框架

CI框架是php的一款轻量级框架，包含有大量的常用类库。CI框架是真正快速地框架，很难找到一个比CI性能更好的框架了。CI框架使用MVC机构，即模型-试图-控制器架构，他很好的将逻辑层和表示层分离。对于前后端分离项目来说，CI只需要用model层来和数据库交互，然后通过controller层返回json数据就行了。同时CI生成的URL是非常简洁的。CI拥有全面的类库，包括访问数据库，发送邮件，验证表单数据，会话管理等，能满足大部分web开发的需求。

2.3 Mysql数据库

Mysql是一款非常有名的关系型数据库，它具有以下优点：

1. 它的SQL内部封装的方法速度很快，不存在内存漏洞。
2. 所有列都有缺省值。使用INSERT插入数据后，如果某列没有值，则会被设置为缺省值。
3. 在不同的平台上MySQL都能很好的工作，和php的相性非常好。
4. 它支持非常多种的数据类型，满足大部分的业务要求。

2.4 阿里云服务器

本项目的所有前后端项目都部署在阿里云服务器上，通过外网直接能访问到。域名使用的是本人的姓名全拼 (pandaomeng.com)。使用阿里云服务器，开发者可以通过登录到阿里云的管理后台管理服务器实例，开放端口配置防火墙等。

2.5 docker容器技术

docker是指容器化技术，用它可以创建和使用linux容器，linux容器是与系统其它部分隔离开的一系列进程，他和搭载的系统互不干扰，但是由可以相互联系。docker通过使用linux内核和内核功能来分隔进程，是的每个进程都可以独立运行。使用docker的目的也正是这种独立性，通过将应用程序部署到docker中，可以保证环境配置的正确性，和每个独立系统的安全性。容器提供了基于镜像的部署模式，通过镜像部署应用项目，可以真正地做到自动部署，节省部署的时间。相比于传统的虚拟机，docker容器的启动速度可以到达秒级，而虚拟级则是分级，造成这样的差距的原因在于docker是直接使用的硬件资源。

3 需求分析

3.1 系统的功能性需求

需求的模块有：展示界面的web端，提供数据的服务器端。

3.1.1展示界面的web端

系统的用户有管理员和普通用户。

功能如下：

1. 系统提供管理员和普通用户的登录界面：

该登录界面要求用户输入账号名密码，提交表单后，在后台进行验证，若登录失败则通过弹窗的形式告知用户，若登录成功则跳转到主界面。

1. 系统提供普通用户的注册页面。
2. 系统提供查看最近新番时间表的功能：

该页面显示这个季度最新的动漫资讯，显示动漫的封面图片，开播时间和其他基本信息，并且提供给用户观看地址和下载链接。

1. 系统提供根据周几来筛选的功能：

用户可以通过点击周几来筛选自己想要查看的动漫。

1. 系统提供为喜欢的动漫点赞的功能：
   通过点击每部动漫的爱心按钮，用户可以将这部动漫的状态改为收藏状态。被喜欢的动漫会置顶。
2. 系统提供为记录看到第几集的功能：

通过点击点亮第几集，来标记当前的看番状态。

1. 系统提供用户中心功能，可以查看用户的具体信息：
   在用户中心，用户可以编辑自己的信息，查看自己的操作记录等。
2. 系统提供留言板功能：

在留言板页面，用户可以留言发表自己的意见，所有用户的留言都根据时间顺序排序，后发表的在前。

1. 系统提供留言板分页功能：
   留言板一般页数较多，提供分页的功能。
2. 系统提供日语单词表功能：

在这个页面，用户可以查看单词表，互相学习交流日语。

3.1.2 提供数据的服务器端

后台服务端为前端提供数据接口。

剩余内容已隐藏，请支付后下载全文，论文总字数：16411字

相关图片展示：