Web实战丨基于django+html+css+js的学院门户网站-程序员宅基地

技术标签：《 Web大作业》《 Python实战项目100例》 django 前端 html

文章目录

写在前面
项目概述
- 基本信息
- 项目需求
项目框架
写在后面

写在前面

本期内容：基于Django+Html+Css+JavaScript的学院门户网站

项目需求：

python
django

项目下载地址：https://download.csdn.net/download/m0_68111267/88726654

项目概述

Web系统与技术课程旨在培养学生对Web系统的设计、开发和管理能力。课程内容包括Web系统的基本概念、体系结构和工作原理，以及常用的Web开发技术和工具。学生将学习HTML、CSS、JavaScript等前端技术，掌握服务器端技术如PHP、ASP.NET、Java等，了解数据库的设计和管理，学习Web系统的安全性和性能优化等方面的知识。通过课程学习，学生将掌握Web系统的设计与开发方法，能够独立完成一个简单的Web应用的设计与开发，具备Web系统的维护和管理能力。本课程注重实践操作，通过大量的编程实践和项目实践，培养学生的实际操作能力和团队合作能力。本项目将模拟一个学院网站设计，具体包括：“首页”“学院简介”“新闻动态”“服务支持”“产品中心”“科研基地”“人才招聘”共7个模块，每个模块可能包含两至三个子模块用于进一步细分功能。

基本信息

本项目主要用Python的Django，以及Html+Css+JavaScript实现。

前端代码：Html+Css+JavaScript
后端代码：Python
数据库：db.sqlite3
网站首页地址：http://127.0.0.1:8000（本地运行）
网站后台地址：http://127.0.0.1:8000/admin
后台账号：Want595
后台密码：Want595

项目需求

科研基地：该模块主要用于展示学院科研基地相关内容，包括科研基地的文字描述和图片等，该模块功能较为单一，仅包含一个页面，并以静态页面形式提供访问和浏览。
学院简介：包含两个子模块，分别是“学院概况”和“校园风光”。“学院概况”用于对学院进行简短的展示，包括说明文字和图片，用以展示学院的历史、核心产品、经营理念等。“校园风光”子模块主要以展报形式罗列学院历年来获得的风光，该模块随着学院发展，需要动态地增加相关内容。因此，为了方便管理员后期编辑网站内容，需要将该页面内容与数据库进行绑定，后期可以动态地添加荣誉信息。
产品中心：包含三个子模块，分别是“家用机器人”“智能监控”和“人脸识别技术”，对应学院的三大主流产品。用户浏览产品时通过各个子模块链接切换可以按类别对产品进行浏览。因此，“产品中心”模块实现时需要能够从后台数据库按类型获取数据并进行页面渲染。
新闻动态：“新闻动态”模块包含三个子模块，分别是“学院要闻”“行业新闻”和“通知公告”。与“产品中心”模块类似，用户可以通过各个子模块链接按新闻类型切换到指定子模块进行浏览。新闻内容以图文形式进行展现，并且管理员可以自定义图片和文字的格式。
人才招聘：该模块包含两个子模块，分别是“欢迎咨询”和“加入我们”。“欢迎咨询”子模块主要用于展示学院联系人信息以及学院地理位置，需要在实现时嵌入百度地图以方便浏览者查找位置。“加入我们”子模块用来为学院招聘提供一个互动渠道，招聘员在网站上发布招聘职位并显示在该子模块页面上，应聘者浏览该页面并通过该页面上的表单提交个人信息。
服务支持：该模块包含一个子模块“资料下载”。“资料下载”子模块用于为用户提供资料下载链接，用户通过这些链接可以下载该学院的风景等等。
首页：该模块作为一个学院门户网站的入口模块具有非常重要的作用，需要能够全方位地展示学院各版块功能，同时需要兼具美观、清晰的特性。另外，作为一个集成模块，首页需要调用其他模块的相关数据信息，并能够对数据进行过滤和排序。
后台：网站后台管理系统主要是用于对网站前台的信息进行管理，如文字、图片和其他日常文件的发布、更新、删除等操作。简单来说就是对网站数据进行维护，使得前台内容能够得到及时更新和调整。学院网站需要建设高效稳定的后台管理系统以方便管理人员查看、编辑、修改网站内容。在实际的网站部署时，学院网站往往部署在云服务器上，网站管理人员只需要通过互联网即可登录后台管理系统实现网站维护。交互性友好的后台管理系统可以使得网站管理人员即使没有开发经验依然可以快速地进行信息查找和修改，实现网站的稳定运维。

项目框架

程序设计

1. 系统配置

1-1

1-2

2. 主要代码

各个界面都继承了base.html文件：

{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>常熟理工丨{% block title %}{% endblock %}</title>
        <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
        <link href="{% static 'css/style.css' %}" rel="stylesheet">
        <script src="{% static 'js/jquery.min.js' %}"></script>
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
    </head>
    <body>
        <div class="container top">
            <div class="row">
                <div class="col-md-6">
                    <a>
                        <img class="img-responsive" src="{% static 'img/logo.jpg' %}">
                    </a>
                </div>
                <div class "col-md-3 hidden-xs">
                    <a class="phone">
                        <span class="glyphicon glyphicon-phone"></span>
                        电话：6666 6666
                        &nbsp;&nbsp;
                    </a>
                </div>
                <div class="col-md-3 hidden-xs">
                    <a class="mail">
                        <span class="glyphicon glyphicon-envelope"></span>
                        邮箱：[email protected]
                    </a>
                </div>
            </div>
        </div>

        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example" aria-expanded="false">
                        <span>导航栏</span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="bs-example">
                    <ul class="nav navbar-nav" style="width:100%;">
                        <li class="nav-top">
                            <a href="{% url 'home' %}">首页</a>
                        </li>
                        <li class="dropdown nav-top">
                            <a href="#" class="dropdown-toggle on" data-toggle="dropdown">学院简介</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="{% url 'aboutApp:survey' %}">学院概况</a>
                                </li>
                                <li>
                                    <a href="{% url 'aboutApp:honor' %}">校园风光</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown nav-top" id='news'>
                            <a href="#" class="dropdown-toggle on" data-toggle="dropdown">新闻动态</a>
                            <ul class="dropdown-menu">
                                <li><a href="{% url 'newsApp:news' 'company' %}">学院要闻</a></li>
                                <li><a href="{% url 'newsApp:news' 'industry' %}">行业新闻</a></li>
                                <li><a href="{% url 'newsApp:news' 'notice' %}">通知公告</a></li>
                            </ul>
                        </li>
                        <li class="dropdown nav-top" id='products'>
                            <a href="#" class="dropdown-toggle on" data-toggle="dropdown">产品中心</a>
                            <ul class="dropdown-menu">
                                <li><a href="{% url 'productsApp:products' 'robot' %}">家用机器人</a></li>
                                <li><a href="{% url 'productsApp:products' 'monitor' %}">智能监控</a></li>
                                <li><a href="{% url 'productsApp:products' 'face' %}">人脸识别</a></li>
                            </ul>
                        </li>
                        <li class="dropdown nav-top">
                            <a href="#" class="dropdown-toggle on" data-toggle="dropdown">服务支持</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="{% url 'serviceApp:download' %}">资料下载</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-top" id='science'>
                            <a href="{% url 'scienceApp:science' %}">科研基地</a>
                        </li>
                        <li class="dropdown nav-top">
                            <a href="#" class="dropdown-toggle on" data-toggle="dropdown">人才招聘</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="{% url 'contactApp:contact' %}">欢迎咨询</a>
                                </li>
                                <li>
                                    <a href="{% url 'contactApp:recruit' %}">加入我们</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="line"></div>
        
        {% block content %}
        {% endblock %}


        <div class="row" id="map-footer">
            <div class="col-md-2">
                <dl>
                    <dt>学院简介</dt>
                    <dd><a href="{% url 'aboutApp:survey' %}">学院概况</a></dd>
                    <dd><a href="{% url 'aboutApp:honor' %}">校园风光</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt>产品中心</dt>
                    <dd><a href="{% url 'productsApp:products' 'robot' %}">家用机器人</a></dd>
                    <dd><a href="{% url 'productsApp:products' 'monitor' %}">智能监控</a></dd>
                    <dd><a href="{% url 'productsApp:products' 'face' %}">人脸识别</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt>服务支持</dt>
                    <dd><a href="{% url 'serviceApp:download' %}">资料下载</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt>人才招聘</dt>
                    <dd><a href="{% url 'contactApp:contact' %}">欢迎咨询</a></dd>
                    <dd><a href="{% url 'contactApp:recruit' %}">加入我们</a></dd>
                </dl>
            </div>
            <div class="col-md-4" id="wx">
                <p>扫描二维码，了解我们</p>
                <img class="qrimg" src="{% static 'img/qr.png' %}" alt="wx">
                <p>客服热线：<b style="font-size:20px">666 777 888</b></p>
            </div>
        </div>

        <div class="contanier web-footer">
            <div class="row" id="map-footer">
            </div>
            <div class="row" id="patent-footer">
                <p>版权所有丨Want595</p>
            </div>
        </div>

        <script>
            $(function(){
      
                $(".dropdown").mouseover(function(){
      
                    $(this).addClass("open");
                });
                $(".dropdown").mouseleave(function(){
      
                    $(this).removeClass("open");
                });
            });
        </script>

        <script type="text/JavaScript">
            $('#{
      {active_menu}}').addClass("active");
        </script>

        <script type="text/JavaScript">
            $('#{
      {sub_menu}}').addClass("active");
        </script>

    </body>


</html>

这是一个基本的HTML模板文件，用于构建一个网页。

首先，{% load static %}是Django模板中的一个指令，用于加载静态文件。static是一个Django应用中存放静态文件的目录。

然后，定义了一些常用的HTML标签，如head、body、div、a等。

在head标签中，引入了一些外部的样式文件和脚本文件，这些文件是通过静态文件目录中的路径来引用的。例如，link href=“{% static ‘css/bootstrap.css’ %}” rel=“stylesheet” 就引入了一个名为bootstrap.css的样式文件。

在body标签中，有一个顶部的导航栏和一个主内容区域。导航栏使用了Bootstrap框架的样式，并通过Django的URL命名空间来定义导航链接的目标页面。

在主内容区域中，使用了Django的模板继承机制。其中{% block title %}{% endblock %}表示一个可被子模板重写的标题区域，子模板可以在这个区域中填入自己的标题信息。类似地，{% block content %}{% endblock %}表示一个可被子模板重写的内容区域，子模板可以在这个区域中填入自己的页面内容。

在页面底部，有一个底部导航栏和一个版权信息区域。底部导航栏分为几个部分，每个部分都有自己的链接目标页面。版权信息区域显示了一个二维码图片，以及客服热线的电话号码。

最后，使用了一些JavaScript代码，来实现一些交互功能。例如，当鼠标悬停在导航栏的下拉菜单上时，菜单会展开；当子模板中定义了active_menu和sub_menu变量时，对应的导航链接会被添加active类，以表示当前页面。

总结来说，这个模板文件是一个基本的网页骨架，在其中定义了页面的结构和样式，并通过Django的模板继承机制，允许子模板填充自己的标题和内容区域。同时，通过JavaScript代码，实现了一些交互效果。

运行结果

1. 首页

2. 学院简介

3. 新闻动态

4. 人脸识别

5. 服务支持

6. 科研基地

7. 人才招聘

8. 后台

项目总结

在基于Django开发一个简单的校园网站的过程中，我深刻体会到了Django框架的强大和便捷性。首先，Django提供了强大的数据库操作功能，轻松地实现了数据的增删改查。通过Django的ORM模块，我可以方便地定义数据模型，并且可以使用Python代码对数据库进行操作，避免了手写SQL语句的繁琐。其次，Django的模板系统使得网站的页面设计变得简单而又灵活。通过使用Django的模板语言，我可以轻松地将数据传递给前端页面，并且可以使用模板标签和过滤器对数据进行处理和展示。此外，Django还提供了完善的表单处理功能，我可以方便地定义表单并进行数据的验证和保存。最重要的是，Django的开发环境非常友好。通过使用Django自带的服务器，我可以直接在本地进行开发和测试，而无需额外安装和配置其他服务器软件。同时，Django还提供了丰富的开发工具和调试工具，使得开发过程更加高效和便捷。总的来说，基于Django开发一个简单的校园网站不仅给我带来了很大的开发便利，还让我深入了解和掌握了Django框架的基本原理和用法，对于以后进行Web开发有很大的帮助。

写在后面

我是一只有趣的兔子，感谢你的喜欢！

本文链接：https://blog.csdn.net/m0_68111267/article/details/135511066

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

蓝凌EIS智慧协同平台saveImg接口存在任意文件上传漏洞_蓝凌eis智慧协同平台文件上传漏洞-程序员宅基地

文章浏览阅读979次。蓝凌智慧协同平台eis集合了非常丰富的模块，满足组织企业在知识、协同、项目管理系统建设等需求。_蓝凌eis智慧协同平台文件上传漏洞

LLaVA-1.5-程序员宅基地

文章浏览阅读193次。与InstructBLIP或Qwen-VL在数亿甚至数十几亿的图像文本配对数据上训练的、专门设计的视觉重新采样器相比，LLaVA用的是最简单的LMM架构设计，只需要在600K个图像-文本对上，训练一个简单的完全连接映射层即可。结果表明，LLaVA-1.5不仅可以使用更少的预训练和指令微调数据，而且还可以利用最简单的架构、学术计算和公共数据集来实现最佳的性能——在12个基准中的11个上取得了SOTA。为了解决这个问题，研究人员建议在VQA问题的末尾，添加一个可以明确输出格式的提示，进而让模型生成简短回答。

ORACLE基本数据类型总结_oracle 数值类型最大值-程序员宅基地

文章浏览阅读442次。2013-08-17 21:04 by 潇湘隐者, 100246 阅读, 5 评论, 收藏, 编辑 ORACLE基本数据类型（亦叫内置数据类型 built-in datatypes)可以按类型分为：字符串类型、数字类型、日期类型、LOB类型、LONG RAW& RAW类型、ROWID & UROWID类型。在讲叙字符串类型前，先要讲一下编码。字符串类型的数据可依编码方式分成_oracle 数值类型最大值

10种机器学习算法_决策树和mlp-程序员宅基地

文章浏览阅读315次。作为数据科学家的实践者，我们必须了解一些通用机器学习的基础知识算法，这将帮助我们解决所遇到的新领域问题。本文对通用机器学习算法进行了简要的阐述，并列举了它们的相关资源，从而帮助你能够快速掌握其中的奥妙。▌1.主成分分析（PCA）/ SVDPCA是一种无监督的方法，用于对由向量组成的数据集的全局属性进行理解。本文分析了数据点的协方差矩阵，以了解哪些维度（大部分情况）/数据点（少数情况）更为重要，即它..._决策树和mlp

桥接模式的实现-程序员宅基地

文章浏览阅读148次。在这个示例中，我们使用std::shared_ptr来管理Implementor对象的生命周期，确保在不再需要时自动释放资源。通过智能指针的使用，我们避免了手动管理内存的复杂性，提高了代码的可靠性和可维护性。希望这个示例能帮助你理解如何使用智能指针来实现桥接模式。当使用智能指针来实现桥接模式时，我们可以利用std::shared_ptr或std::unique_ptr来管理对象的生命周期，确保资源的正确释放。

制造业敏感文件外发不安全？一招解锁更高效的加密方式！-程序员宅基地

文章浏览阅读440次，点赞11次，收藏8次。云盒子在制造业上有丰富的部署经验，在面向制造类企业的重要文件，可以通过审计、授权、文件加密进行多重保护，使得图纸文件、专利技术、采购订单等敏感数据等到有效保护，做到无处可泄，同时安全可靠，也不会对日常工作效率有影响，实现真正有效的企业文件保护的目的，达到既防止机密文件外泄和扩散，又支持内部知识积累和文件共享的目的。云盒子的加密方式是通过将本地文件数据上传到云盘进行统一加密存储，而不是对设备加密，通过【本地加密】+【云加密】双重组合下，不管用什么设备打开文件都受到管控，使管理者管理起来能够更高效。

随便推点

计算几何讲义——计算几何中的欧拉定理-程序员宅基地

文章浏览阅读188次。在处理计算几何的问题中，有时候我们会将其看成图论中的graph图，结合我们在图论中学习过的欧拉定理，我们可以通过图形的节点数(v)和边数(e)得到不是那么好求的面数f。平面图中的欧拉定理：定理：设G为任意的连通的平面图，则v-e+f=2，v是G的顶点数，e是G的边数，f是G的面数。证明：其实有点类似几何学中的欧拉公式的证明方法，这里采用归纳证明的方法。对m..._怎么证明平面图欧拉定理

c语言中各种括号的作用,C语言中各种类型指针的特性与用法介绍-程序员宅基地

文章浏览阅读750次。C语言中各种类型指针的特性与用法介绍本文主要介绍了C语言中各种类型指针的特性与用法，有需要的朋友可以参考一下!想了解更多相关信息请持续关注我们应届毕业生考试网!指针为什么要区分类型：在同一种编译器环境下,一个指针变量所占用的内存空间是固定的。比如,在16位编译器环境下,任何一个指针变量都只占用8个字节,并不会随所指向变量的类型而改变。虽然所有的指针都只占8个字节,但不同类型的变量却占不同的字节数..._c语言带括号指针

缅甸文字库缅甸语字库缅甸字库算法_0x103c-程序员宅基地

文章浏览阅读9.5k次。字库交流 QQ:2229691219 缅甸语比较特殊、缅甸语有官方和民间之分，二者不同的是编码机制不同，因此这2种缅甸语的字串翻译、处理引擎、字库都是不同的。我们这里只讨论官方语言。缅文、泰文等婆罗米系文字大多是元音附标文字，一般辅音字母自带默认元音可以发音，真正拼写词句时元音像标点符号一样附标在辅音上下左右的相应位置。由于每个元音位于辅音的具体位置是有自己的规则的，当只书写..._0x103c

Python+django+vue校园二手闲置物品拍卖系统pycharm毕业设计项目推荐_基于python+django+vue实现的校园二手交易平台-程序员宅基地

文章浏览阅读200次。在校园，随着学生数量的增多，存在许多生活和学习物品，许多学习用品经过一学期学习之后往往被闲置，一些出于一时喜欢而购买的物品使用机会少而被闲置，还有一些物品以低廉的价格卖给资源回收站，造成巨大的资源浪费。校园闲置物品拍卖系统使用python技术，MySQL数据库进行开发，系统后台使用django框架进行开发，具有低耦合、高内聚的特点，其中校园用户通过人脸识别的方法增加系统安全性，在闲置物品推荐中，使用协同过滤算法进行商品推荐。系统的开发，帮助高校有效的对闲置物品进行管理，提高了闲置物品销售的效率。_基于python+django+vue实现的校园二手交易平台

【推荐系统论文精读系列】(十)--Wide&Deep Learning for Recommender Systems_引用《wide & deep learning for recommender systems》-程序员宅基地

文章浏览阅读1.1k次，点赞3次，收藏3次。文章目录Wide & Deep Learning for Recommender Systems一、摘要二、介绍三、推荐系统综述四、Wide&Deep学习4.1 Wide部分4.2 Deep部分4.3 联合训练 Wide&Deep ModelPreferenceWide & Deep Learning for Recommender Systems一、摘要具有非线性特征转化能力的广义线性模型被广泛用于大规模的分类和回归问题，对于那些输入数据是极度稀疏的情况下。通过使用交_引用《wide & deep learning for recommender systems》

c++ sleep函数_Linux 多线程应用中如何编写安全的信号处理函数-程序员宅基地

文章浏览阅读171次。关于代码的可重入性，设计开发人员一般只考虑到线程安全，异步信号处理函数的安全却往往被忽略。本文首先介绍如何编写安全的异步信号处理函数；然后举例说明在多线程应用中如何构建模型让异步信号在指定的线程中以同步的方式处理。Linux 多线程应用中编写安全的信号处理函数在开发多线程应用时，开发人员一般都会考虑线程安全，会使用 pthread_mutex 去保护全局变量。如果应用中使用了信号，而且信号的产生不..._linux c++ sleep 不被中断