【高级程序设计】期末大作业-电影网站页面展示

模板及美术素材：重返未来1999官网/原神官网/绝区零官网/豆瓣/音范丝

我们小组利用课程作业案例“python网站设计”中django框架，基于之前的框架代码实现网页功能。
其中，django的主要内容为：

首先，manage.py作为控制总文件，调控整个框架的合理运行，在该文件终端执行python manage.py runserver 即可开启整个网页系统，将自动弹出本地链接，点击链接即可进入浏览器网页

其次，sqlite作为数据库存储信息，同时记录文件数据，便于网页执行与功能实现。
Index目录下是网页设计的文件本地存储，templates文件夹下是网页html模板，而static下则是css,js和img文件夹，分别存储网页需要的css文件，javascript文件以及图片，这是根据django的框架来分配的，同时也符合流程化体系化开发的原则。

在基础网页搭建好之后，所有的网页功能都只需要修改html,css,js以及img这四个文件，来调控前端内容，再略微修改控制代码，即可流畅实现功能。

（1）开始界面
因为涉及到用户的登录，我决定单独拿出一个“简化版”的网页前端，用于区分注册登录前的网站以及登录后的网站显示。
因为我们选择的是“电影”主题，我选择使用今年上映的《蜘蛛侠：平行宇宙》电影横板海报作为开始界面的封面，在右上角则是“注册”和“登录”功能。
页面上的二维码和页面左上角的“X”图标都可以跳转到我的个人网站，这不是本地的，而是在线基于github pages搭建的博客，这也表示我们的网站可以跳转到任意在线网站，有着良好的可拓展性，而非局限于本地网页内容。
（2）注册、登录、修改密码界面
这三个界面原理相同，html代码相近，显示也大体一致。
我根据用户习惯制定了跳转和显示的逻辑：

1. 注册界面有“注册”的确认键，同时可以跳转到“登录”和“返回主页”；
2. 登录界面有“登录”的确认键，同时可以跳转到“注册”、“修改密码”和“返回主页”；
3. 修改密码界面有“确认重置”的确认键，同时可以跳转到“登录”和“返回主页”；
   同时，为了页面美观，我将两个近似的海报分别置于“注册”和“登录”页，后者比前者多了一群冒险的小伙伴，意为注册成功后，用户登录即展开一场电影的奇遇。
   （3）登录后的主界面
   这是整个网页最复杂，耗时最久，也是最精美的页面，除最开始的注册登录外，几乎所有功能都被集成在这一个页面，所以主界面更像是一个精美的目录，而点击图片或者文字，才能进入详情页的电影世界。网页的基础框架及特效来源于重返未来的官网，我们尝试以深邃神秘的风格为基调，复刻一款心目中的电影官网。
   进入主界面，首先是封面页，我选用今年中国电影的001号备案——《流浪地球2》，作为登录后主界面的封面，既有电影瑰丽想象的浪漫，也有科技驱动的理性，同时也与我们主要内容之一的《2023电影年度报告》暗合。
   滑动鼠标滚轮，接下来是新闻页，我们将需要详细呈现的文本内容以文字标题的形式放在新闻栏目中，点击标题，如“【数据挖掘】豆瓣电影评论数据可视化”即可进入子页面。
   再往下则是电影台词页，我们精选了十份经典电影台词作为网页的基调，在网页左侧滑动滚轮即可切换台词。这一页与封面页大为不同，整体风格凝练，文本量低，也没有许多子页面，是为了网页的“经典”、“优美”、“独特品味”关键词而设计的额外页，此页面大面积留白，也为用户提供了思考的空间。
   之后则是海报页，放置一些电影海报，如《沙丘》。
   主页面的最下方是三个功能模块，分别是视频、音乐与海报。我们设置这个页面，便于读者跳转到我们设计好的电影播放页、音乐鉴赏页以及海报展示页。
   右上角是“个人中心”与“管理员”页面，点击文字即可跳转链接。
   （4）详情页
   这个页面都是由同一个html模块修改内容而来，一方面维持了网站整体风格基调，另一方面，也使得网页添加修改得以标准化，将文章加入预先设计好的格式，便可生成新的网页。
   详情页主要呈现文字和图片，类似个人博客形式，发布文章内容。
   其中既有符合主题的2023电影年度总结报告，是我们利用数据挖掘分析豆瓣、哔哩哔哩网站所获得的年度电影数据数据分析，又有基于文本挖掘的电影评论情感分析，在此基础上，我们尝试对所获取的电影数据进行可视化，使我们的网站既有“电影”的艺术情调，又有“硬核”的理科数据分析技术。
   （5）管理员页
   点击管理员页将直接跳转到admin界面，实现对用户信息的增删改查。后续优化方面，我们也可以设计一个网页，保持相同功能，但有着全新ui，同时能够在线修改，而非仅存于本地数据库。

开发环境
开发工具：
IDE: PyCharm Professional
语言: Python 3.9。
Web框架: Django
数据库：sqlite3，MongoDB
管理工具: MongoDB Compass（用于数据库管理和查询）
（二）系统各模块实现

1. 网站模块实现
   网站所需html文件如下，其中news开头的为新闻详情页，以文本和图片为主；loginSuccess.html即是登录后主页面，功能最复杂；而海报、音乐、视频则是依据《重返未来》官网的前端代码修改而来，因为只是通过F12查看的代码，能够复刻相似的ui界面和美术风格，就已经很满意了，毕竟我们小组里没有美工，图形、色调、线条都需要一个贴合主题的展示。
   
   网站所需图片众多，我们分为了两部分：海报保留在mongoDB数据库中，而需要立即渲染的图片我们放在了django框架下static/img的文件夹中，其中有数据分析结果的图表，以及电影年终总结的海报。
   
   图9 网站图片
   网页跳转基于model-control-view的设计模式，与华为购物商城的设计思路一致。
   由于网页页面众多，跳转逻辑复杂，我选用函数的形式对每一个跳转功能进行控制。每一个跳转动作对应一个页面，也就对于MVC中的一个函数。这样的好处是各个功能之间是相互独立的，如果我删除某个界面，不会对整个框架和系统造成影响，同时，如果我想再增加一个界面，也就只需要复制一个函数，再把名称稍作改动，这样可以提高效率。
   后续优化方面：可以将相同功能的跳转函数合并到一个类下，这样使得代码更简洁，但坏处是一个结构如果后来人贸然改变会有风险。
   用户登录前
   （1）起始页（未登录）
   
   （2）注册页
   
   登录页
   
   修改密码页
   
   （1）主界面（登录后）
   封面：
   
   新闻页：
   
   台词页：
   
   海报页（主界面）：
   
   影音页：
   
   视频页
   
   音乐页
   
   
   
   海报墙
   
   
   
   
2. 管理员页
   进入admin页面
   
   个人中心
   
   2023年度电影榜单
   
   豆瓣评论数据可视化
   
   文本挖掘-电影评论情感倾向分析