django企业门户网站系统项目（五）

花开花落与云卷云舒

已于 2022-07-15 16:11:38 修改

阅读量2.5k

点赞数 1

分类专栏： django开发文章标签： python django django实战

于 2021-04-08 20:13:28 首次发布

本文链接：https://blog.csdn.net/qq_45758854/article/details/115528544

版权

django开发专栏收录该内容

29 篇文章 21 订阅

订阅专栏

接着上一章的内容，我们继续来完善系统，我们接下去的是“公司简介”模块。

在这一模块中我们分为两个页面：企业概况和荣誉资质。

我们在页面的侧边栏可以选择那一页的内容。

一、企业概况

在templates中新建文件夹aboutApp，用于存放公司简介的页面代码，在文件夹下新建honor.html和survey.html页面

在survey.html页面中，我们写上下面的代码：

{% extends 'base.html' %}
{% load static %}

{% block title %}
    企业概况_恒达科技
{% endblock %}

{% block content %}
<!-- 广告横幅 -->
<div class="container-fluid">
    <div class="row">
        <img class="img-responsive model-img" src="{% static 'img/about.jpg' %}">
    </div>
</div>
<!-- 主体内容 -->
<div class="container">
    <div class="row row-3">
        <!-- 侧边导航栏 -->
        <div class="col-md-3">
            <div class="model-title">
                公司简介
            </div>
            <div class="model-list">
                <ul class="list-group">
                    <li class="list-group-item" id="survey">
                        <a href="{% url 'aboutApp:survey' %}">企业概况</a>
                    </li>
                    <li class="list-group-item" id="honor">
                        <a href="{% url 'aboutApp:honor' %}">荣誉资质</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 说明文字和图片 -->
        <div class="col-md-9">
            <div class="model-details-title">
                企业概况
            </div>
            <div class="model-details">
                <div class="row">
                    <img class="img-responsive" src="{% static 'img/aboutCompany.jpg' %}">
                </div>
                <p>
                    恒达科技有限公司，位于科技园内，致力于人脸识别、
                    行为识别、机器人视觉核心算法研究和产品应用开发,以社会公共安全领域为主要应用方向，
                    提供极速、准确和防伪装的人脸识别产品，以及人工智能一体化整体解决方案。主营产品：
                    家用机器人、智能监控、基于人脸和行为识别应用方向的定制开发等服务。

                    恒达科技研发团队来自于国家级研究试验室，该团队为全球最早一批从事人脸识别研究机构之一，
                    研发团队成员早期主要从事人脸识别和行为识别研究。自2019年发布第一款人脸识别加密核验产品
                    以来，恒达研发团队进入自主人脸识别实践应用探索阶段。鉴于人脸识别技术逐渐走入工业和民用
                    应用领域市场，研发团队于2012年成立恒达科技有限公司，正式步入企业市场化运作轨道。
                    自研发团队成立之始，历经10余年的研究和实践沉淀，最后以恒达科技公司亮相工业和民
                    用应用领域市场，恒达团队经历了近20年的栉风沐雨和砥砺前行。目前，恒达智能监控、
                    人脸识别技术的应用和服务涵盖了工业和民用领域。
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

修改base.html文件的这一部分

                <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>

在aboutApp文件中的url.py文件中添加访问页面的路由信息。

from django.urls import path

from aboutApp import views

app_name = 'aboutApp'
urlpatterns = [
    path('survey/', views.survey, name='survey'),  # 访问企业概况
    path('honor/', views.honor, name='honor'),   # 访问荣誉资质页面


]

在style.css中继续添加样式代码：

/*公司简介*/
/*-------------主体------------*/
/* 主题标题 */
.model-details-title{
	padding:15px 0px;
	font-size:18px;
	border-bottom:1px #005197 solid; /* 底部添加蓝色边框 */
	color:#005197;
	margin-bottom:10px;
	margin-top:10px;
}
/* 文字段落 */
.model-details p{
	line-height:30px;
	text-indent:2em;
	text-align:justify;
	text-justify:inter-ideograph;
}
/* 主体图像 */
.model-details img{
	margin:0px auto;
}

/* 侧边导航栏 */
.row-3{
	margin-top:30px; /* 设置顶部边距 */
}

/*侧边导航栏标题样式*/
.model-title {
	text-align: center;
	color: #fff;
	font-size: 22px;
	padding: 15px 0px;
	background: #005197;
	margin-top: 25px;
}
/*侧边导航栏列表项样式*/
.model-list li{
	text-align:center;
	background-color:#f6f6f6;
	font-size:16px;
}
/*侧边导航栏列表项链接样式*/
.model-list li a{
	color:#545353;
}
/*侧边导航栏列表项链接激活样式*/
.model-list li a:hover{
	text-decoration:none;
	color:#005197;
}

/*侧边导航栏激活样式*/
.model-list li.active{
	text-align:center;
	background-color:#f6f6f6;
	font-size:16px;
	border-color: #ddd;
}
/*侧边导航栏激活状态下鼠标移过时样式*/
.model-list li.active:hover{
	text-align:center;
	background-color:#f6f6f6;
	font-size:16px;
	border-color: #ddd;
}

/*侧边导航栏激活状态时链接样式*/
.model-list li.active a {
    color: #005197;
}

在aboutApp/views.py中添加，其中sub_menu为标记当前访问了哪一个页面并且设置颜色为蓝色。


def survey(request):
    return render(request, 'aboutApp/survey.html', {'active_menu': 'about', 'sub_menu': 'survey'})

在base.html的页尾中继续添加代码，使sub_menu和active_menu被标记

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

如图所示：

此时，访问在浏览器中输入http://localhost:8000/aboutApp/survey/ 就可以访问到页面了。效果如下：

接下去我们就要来写我们的荣誉资质页面了，这里我们要求本机上要安装mysql数据库，或者其它的数据库，我用的是mysql数据库。

二、荣誉资质页面

2.1 创建数据库

首先，我们就要安装好mysql数据库并确定mysql是启动的。再次，我们要创建一个数据库用来存放项目的内容。

用cmd打开电脑的终端，并且进入mysql中。

在终端中输入

mysql -u root -p

然后输入密码，就可以进入mysql了，如图所示。

接下来，我们来创建一个数据库，输入

create database hengda;

回车，我们会看到OK字样，证明创建成功。

2.2 对数据库进行配置

来到项目的目录下的hengda/settings.py文件，找到下面代码并进行配置

# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases

DATABASES = {
     'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'hengda',
        'USER': 'root',
        'PASSWORD': '123456',
        'HOST': '127.0.0.1',
        'POST': '3306',
    }
}

2.3 django的models.py文件

找到aboutApp/models.py，在文件中写上如下代码：

from django.db import models


# Create your models here.

class Award(models.Model):
    # 荣誉
    description = models.TextField(max_length=500, blank=True, null=True)
    # 图片地址
    photo = models.ImageField(upload_to='Award/', blank=True)

    class Meta:
        verbose_name = verbose_name_plural = '荣誉资质'   # 在管理后台看到的表名
        db_table = 'Award'   # 在数据库中看到的表名

在模型中，我们用到了文件的上传，所以我们要为存放设置路径，因此，在hengda/settings.py的最后面添加如下代码，存储路径就会到项目的media/Award文件夹中。

# 对图片的路径进行存储
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(MEDIA_URL, "media/")

接下来我们进行数据的迁移：

python manage.py makemigrations

python manage.py migrate

到这里，可能会报错，我们再hengda/__init__.py中添加并下载爆红的库包就可以了。

import pymysql
pymysql.install_as_MySQLdb()

我们的数据就迁移成功了。

2.4 添加后台管理

这里，我们启用django自带的后台管理，是有点low，所以我们不用。我们用xadmin后台管理，美观又大方。

具体配置安装可以看我的另一篇博客django3.0 + python 3.8 + xadmin后台更改。

这里我们要将所有的admin.py改为adminx.py(重点)。

安装完成之后，我们再项目的终端，如图这里：

输入 python manage.py createsuperuser 然后输入用户名密码邮箱

去浏览器中登录后台管理，输入http://localhost:8000/admin/

就可以看到后台页面了，能进来就是成功了，我这里是添加了应用了，所以跟你的不一样。

将我们的模型注册到后台。

到aboutApp/adminx.py中，我们写下

from django.contrib import admin

# Register your models here.
import xadmin
from aboutApp.models import Award


class AwardAdmin(object):
    """xadmin后台注册"""
    list_display = ['id', 'description', 'photo']
    fields = ['description', 'photo']


xadmin.site.register(Award, AwardAdmin)

这样我们再后台就可以访问到了，标题中文之类的，在我的之前博客中有讲到，就是上面的那个链接。

好了，到这里后台已经完成了。

2.5 荣誉资质

到aboutApp/views.py中我们继续添加下面代码：


# 荣誉资质
def honor(request):
    awards = Award.objects.all()
    context = {
        'awards': awards,
        'active_menu': 'about',
        'sub_menu': 'honor'
    }
    return render(request, 'aboutApp/honor.html', context)

添加页面代码，到templates/aboutApp/honor.html中

{% extends 'base.html' %}
{% load static %}

{% block title %}
荣誉资质_恒达科技
{% endblock %}

{% block content %}
<!-- 广告横幅 -->
<div class="container-fluid">
    <div class="row">
        <img class="img-responsive model-img" src="{% static 'img/about.jpg' %}">
    </div>
</div>
<!-- 主体内容 -->
<div class="container">
    <div class="row row-3">
        <!-- 侧边导航栏 -->
        <div class="col-md-3">
            <div class="model-title">
                公司简介
            </div>
            <div class="model-list">
                <ul class="list-group">
                    <li class="list-group-item" id="survey">
                        <a href="{% url 'aboutApp:survey' %}">企业概况</a>
                    </li>
                    <li class="list-group-item" id="honor">
                        <a href="{% url 'aboutApp:honor' %}">荣誉资质</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 说明文字和图片 -->
        <div class="col-md-9">
            <div class="model-details-title">
                荣誉资质
            </div>
            <div class="row">
                {% for award in awards %}
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img src="{{award.photo.url}}">
                        <div class="caption">
                            <p>{{award.description}}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

访问路由：http://localhost:8000/aboutApp/honor/

我们就可以看到页面了

这一张就完成了。

上一章：django企业门户网站系统项目（四）

花开花落与云卷云舒

关注

1
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
django企业门户网站系统项目（五）

接着上一章的内容，我们继续来完善系统，我们接下去的是“公司简介”模块。在这一模块中我们分为两个页面：企业概况和荣誉资质。我们在页面的侧边栏可以选择那一页的内容。一、企业概况在templates中新建文件夹aboutApp，用于存放公司简介的页面代码，在文件夹下新建honor.html和survey.html页面在survey.html页面中，我们写上下面的代码：......
复制链接

扫一扫