「入行全栈 Django3.x 个人主页网站全记录」2.我的主页应用开发

缺乏、安全感 2022-09-10 00:07 25阅读 0赞

项目汇总：[「入行全栈 Django3.x 个人主页网站全记录」项目总览介绍][Django3.x]

### 文章目录 ###

*  内容介绍
 *  效果展示
 *  应用创建&配置
 *  应用 models.py
 *  管理 adminx.py
 *  视图 Views.py
 *  配置 urls.py
 *  前端渲染模板

# 内容介绍 #

MyHomePage 后台功能开发和配置。

其中项目中数据迁移部分不做说明，执行CMD命令。

python manage.py makemigrations  # 迁移到我们数据库
    python manage.py migrate # 同步到数据库

# 效果展示 #

**个人主页部分**  
![请添加图片描述][8878662af81e445eba3d8dd7790a0b5c.gif]  
**后台管理部分**  
![请添加图片描述][3d6e77a6920740049f26c584835f6aa3.gif]

# 应用创建&配置 #

**1.创建应用**  
进入文件根目录执行CMD命令创建新闻资讯应用，并将创建好的应用文件夹移动到目录的apps下即可。

cd MyHome
    python manage.py startapp MyHomePage

将创建好的应用文件夹移动到目录的apps下即可

**2.配置应用模块**

在settings.py文件中修改

INSTALLED_APPS = [
    	...
    	# 添加文章应用
        'apps.MyHomePage',

**3.不需要修改该的文件**

1.  **admin.py** 这个我们使用xadmin代替的原有版本的admin，因此这个文件不需要修改该
2.  **apps.py** 应用的配置文件，不需要动
3.  **test.py** 测试执行脚本，不需要动

# 应用 models.py #

这部分内容依据网页中的模板信息创建。

# coding:utf-8
    from django.db import models
    from django.utils import timezone
    
    
    # 我的基本信息
    class MyInformation(models.Model):
        my_info = models.CharField(
            max_length=255,
            verbose_name="我的基本信息", help_text="我的基本信息"
        )
        full_name = models.CharField(
            max_length=10,
            verbose_name="我的姓名", help_text="我的姓名"
        )
        age = models.CharField(
            max_length=2,
            verbose_name="我的年龄", help_text="我的年龄"
        )
        address = models.CharField(
            max_length=20,
            verbose_name="我的地址", help_text="我的地址"
        )
        email = models.EmailField(
            max_length=30,
            verbose_name="我的邮箱", help_text="我的邮箱"
        )
        phone = models.CharField(
            max_length=15,
            verbose_name="联系电话", help_text="联系电话"
        )
        wechart = models.CharField(
            max_length=20,
            verbose_name="我的微信", help_text="我的微信"
        )
        job = models.CharField(
            max_length=20,
            verbose_name="我的职业", help_text="我的职业"
        )
        qq = models.CharField(
            max_length=20,
            verbose_name="我的QQ", help_text="我的QQ"
        )
    
        class Meta:
            verbose_name = '我的基本信息'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.full_name
    
    
    # 我的技能
    class MySkill(models.Model):
        skill_info = models.CharField(
            max_length=255,
            verbose_name="技能基本信息", help_text="技能基本信息"
        )
    
        class Meta:
            verbose_name = '我的技能信息'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.skill_info
    
    
    # 我的教育&职业履历
    class EducationExperience(models.Model):
        education_experience_info = models.CharField(
            max_length=255,
            verbose_name="教育&职业履历", help_text="教育&职业履历"
        )
    
        class Meta:
            verbose_name = '我的教育&职业履历'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.education_experience_info
    
    
    class EducationExperienceList(models.Model):
        EducationExperienceChoices = (
            ("0", "教育信息"),
            ("1", "职业履历")
        )
        education_experience_type = models.CharField(
            choices=EducationExperienceChoices,
            max_length=1,
            verbose_name="类别选择", help_text="数据类别选择"
        )
        name = models.CharField(
            max_length=30,
            verbose_name="学校或者企业名称", help_text="学校或者企业名称"
        )
        duration_time = models.CharField(
            max_length=13, default="yyyy - yyyy",
            verbose_name="时间信息", help_text="时间信息"
        )
        info = models.CharField(
            max_length=50,
            verbose_name="学校或者企业介绍", help_text="学校或者企业介绍"
        )
    
        class Meta:
            verbose_name = '我的教育&职业履历列表'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.name
    
    
    # 我的收费服务
    class MyService(models.Model):
        service_info = models.CharField(
            max_length=255,
            verbose_name="收费服务介绍", help_text="收费服务介绍"
        )
    
        class Meta:
            verbose_name = '收费服务信息'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.service_info
    
    
    class MyServiceList(models.Model):
        title = models.CharField(
            max_length=30,
            verbose_name="服务名称", help_text="服务名称"
        )
        info = models.CharField(
            max_length=50,
            verbose_name="服务简介", help_text="服务简介"
        )
        img = models.ImageField(
            upload_to='MyService/', default='MyService/default.png',
            verbose_name='服务封面', help_text="若没有选择封面，则使用默认封面",
            null=True, blank=True
        )
        url = models.URLField(
            max_length=500,
            verbose_name="服务外链", help_text="服务外链"
        )
    
        class Meta:
            verbose_name = '收费服务列表'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.title
    
    
    # 我的项目
    class MyProject(models.Model):
        project_info = models.CharField(
            max_length=255,
            verbose_name="项目介绍", help_text="项目介绍"
        )
    
        class Meta:
            verbose_name = '项目介绍基本信息'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.project_info
    
    
    class MyProjectType(models.Model):
        type_en = models.CharField(
            max_length=20, default='',
            verbose_name="英文类别名称", help_text="英文类别名称"
        )
        type_name = models.CharField(
            max_length=20,
            verbose_name="类别名称", help_text="类别名称"
        )
    
        class Meta:
            verbose_name = '类别信息'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.type_name
    
    
    class MyProjectList(models.Model):
        type_name = models.ForeignKey(
            MyProjectType, on_delete=models.CASCADE,
            verbose_name='项目类别', help_text="项目类别"
        )
        project_name = models.CharField(
            max_length=30,
            verbose_name="项目名称", help_text="项目名称"
        )
        img = models.ImageField(
            upload_to='MyProject/', default='MyProject/default.png',
            verbose_name='项目封面', help_text="若没有选择封面，则使用默认封面",
            null=True, blank=True
        )
        url = models.URLField(
            max_length=500,
            verbose_name="项目外链", help_text="项目外链"
        )
    
        class Meta:
            verbose_name = '项目列表'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.project_name
    
    
    # 我的自媒体
    class MyArticle(models.Model):
        site_info = models.CharField(
            max_length=255,
            verbose_name="基本信息介绍", help_text="基本信息介绍"
        )
    
        class Meta:
            verbose_name = '我的自媒体介绍'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.site_info
    
    
    class MyArticleList(models.Model):
        title = models.CharField(
            max_length=30,
            verbose_name="自媒体站点名称", help_text="自媒体站点名称"
        )
        info = models.CharField(
            max_length=50,
            verbose_name="自媒体简介", help_text="自媒体简介"
        )
        img = models.ImageField(
            upload_to='MyArticle/', default='MyArticle/default.png',
            verbose_name='自媒体封面', help_text="若没有选择封面，则使用默认封面",
            null=True, blank=True
        )
        url = models.URLField(
            max_length=500,
            verbose_name="服务外链", help_text="服务外链"
        )
    
        class Meta:
            verbose_name = '自媒体列表'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.title
    
    
    # 联系我的信息
    class ContactMe(models.Model):
        name = models.CharField(
            max_length=50,
            verbose_name="姓名", help_text="姓名"
        )
        email = models.CharField(
            max_length=50,
            verbose_name="邮箱", help_text="邮箱"
        )
        subject = models.CharField(
            max_length=50,
            verbose_name="主题", help_text="主题"
        )
        message = models.TextField(
            default="",
            verbose_name="内容", help_text="内容"
        )
        add_time = models.DateTimeField(
            default=timezone.now,
            verbose_name="提交时间", help_text="提交时间"
        )
    
        class Meta:
            verbose_name = '联系我的信息'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.subject

# 管理 adminx.py #

# coding:utf-8
    from .models import *
    from xadmin import views
    import xadmin
    
    
    # 我的基本信息
    class MyInformationAdmin(object):
        list_display = ['full_name', 'age', 'email']
        show_bookmarks = False
    
    
    # 我的基本信息
    class MySkillAdmin(object):
        list_display = ['skill_info']
        show_bookmarks = False
    
    
    # 我的教育&职业履历
    class EducationExperienceAdmin(object):
        list_display = ['education_experience_info']
        show_bookmarks = False
    
    
    class EducationExperienceListAdmin(object):
        list_display = ['education_experience_type', 'name', 'duration_time', 'info', ]
        show_bookmarks = False
    
    
    # 我的收费服务
    class MyServiceAdmin(object):
        list_display = ['service_info']
        show_bookmarks = False
    
    
    class MyServiceListAdmin(object):
        list_display = ['title', 'info', 'url', ]
        show_bookmarks = False
    
    
    # 我的项目
    class MyProjectAdmin(object):
        list_display = ['project_info']
        show_bookmarks = False
    
    
    class MyProjectTypeAdmin(object):
        list_display = ['type_en', 'type_name']
        show_bookmarks = False
    
    
    class MyProjectListAdmin(object):
        list_display = ['type_name', 'project_name', 'url', ]
        show_bookmarks = False
    
    
    # 我的收费服务
    class MyArticleAdmin(object):
        list_display = ['site_info']
        show_bookmarks = False
    
    
    class MyArticleListAdmin(object):
        list_display = ['title', 'info', 'url', ]
        show_bookmarks = False
    
    
    # 联系我的信息
    class ContactMeAdmin(object):
        list_display = ['subject', 'email', 'add_time', ]
        show_bookmarks = False
    
    
    xadmin.site.register(MyInformation, MyInformationAdmin)
    xadmin.site.register(MySkill, MySkillAdmin)
    xadmin.site.register(EducationExperience, EducationExperienceAdmin)
    xadmin.site.register(EducationExperienceList, EducationExperienceListAdmin)
    xadmin.site.register(MyService, MyServiceAdmin)
    xadmin.site.register(MyServiceList, MyServiceListAdmin)
    xadmin.site.register(MyProject, MyProjectAdmin)
    xadmin.site.register(MyProjectType, MyProjectTypeAdmin)
    xadmin.site.register(MyProjectList, MyProjectListAdmin)
    xadmin.site.register(MyArticle, MyArticleAdmin)
    xadmin.site.register(MyArticleList, MyArticleListAdmin)
    xadmin.site.register(ContactMe, ContactMeAdmin)

# 视图 Views.py #

# coding:utf-8
    from django.shortcuts import render
    from django.views.generic.base import View  # 基于类实现需要继承的view
    from apps.MyHomePage.models import *
    from django.http import HttpResponse
    from apps.StatisticalData.views import *
    
    
    class MyHomeIndex(View):
        # 我的基本信息
        MyInformation = MyInformation.objects.all()
        # 我的技能
        MySkill = MySkill.objects.all()
        # 我的教育&职业履历
        EducationExperience = EducationExperience.objects.all()
        EducationExperienceList = EducationExperienceList.objects.all()
        # 我的收费服务
        MyService = MyService.objects.all()
        MyServiceList = MyServiceList.objects.all()
        # 我的项目
        MyProject = MyProject.objects.all()
        MyProjectType = MyProjectType.objects.all()
        MyProjectList = MyProjectList.objects.all()
        # 我的自媒体
        MyArticle = MyArticle.objects.all()
        MyArticleList = MyArticleList.objects.all()
        # 联系我
        ContactMeData = ContactMe()
    
        def get(self, request):
            # 记录访问信息
            visit_info(request, "访问主页")
    
            return render(request, 'HomePage/index.html', { 
                'MyInformation': self.MyInformation[0],
                'MySkill': self.MySkill[0],
                'EducationExperience': self.EducationExperience[0],
                'EducationExperienceList': self.EducationExperienceList,
                'MyService': self.MyService[0],
                'MyServiceList': self.MyServiceList,
                'MyProject': self.MyProject[0],
                'MyProjectType': self.MyProjectType,
                'MyProjectList': self.MyProjectList,
                'MyArticle': self.MyArticle[0],
                'MyArticleList': self.MyArticleList,
            })
    
        def post(self, request):
            # 记录访问信息
            visit_info(request, "主页信息提交")
    
            name = request.POST.get('name')
            email = request.POST.get('email')
            title = request.POST.get('title')
            message = request.POST.get('message')
    
            ContactMeData = self.ContactMeData
    
            ContactMeData.name = name
            ContactMeData.email = email
            ContactMeData.title = title
            ContactMeData.message = message
    
            ContactMeData.save()
    
            return HttpResponse("感谢您的提交")

# 配置 urls.py #

# coding:utf-8
    from django.urls import path
    from .views import *
    
    app_name = 'MyHomePage'
    
    urlpatterns = [
        path('MyHomeIndex', MyHomeIndex.as_view(), name='MyHomeIndex'),
    ]

# 前端渲染模板 #

**MyHomePage/index.html**

<!DOCTYPE html>
    <html lang="cn">
    {% load static %}
    <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>我的个人主页</title>
        
        <link href="{% static 'HomePage/css/bootstrap.min.css' %}" rel="stylesheet">
        
        <link href="{% static 'HomePage/css/font-awesome.min.css' %}" rel="stylesheet">
        
        <link href="{% static 'HomePage/css/magnific-popup.css' %}" rel="stylesheet">
        
        <link href="{% static 'HomePage/css/jquery.lineProgressbar.css' %}" rel="stylesheet">
        
        <link href="{% static 'HomePage/css/owl.carousel.css' %}" rel="stylesheet">
        
        <link href="{% static 'HomePage/css/slicknav.min.css' %}" rel="stylesheet">
        
        <link href="{% static 'HomePage/css/animate.css' %}" rel="stylesheet">
        
        <link href="{% static 'HomePage/css/style.css' %}" rel="stylesheet">
        
        <link href="{% static 'HomePage/css/responsive.css' %}" rel="stylesheet">
    </head>
    <body>
    
    <nav class="nav-area">
        <div class="container">
            <div class="row">
                <div class="col-md-2">
                    <a href="#" class="logo"><img src="{% static 'HomePage/img/logo.png' %}" alt="logo image"></a>
                </div>
                <div class="col-md-10">
                    <ul id="main-menu">
                        <li><a href="#home">主页</a></li>
                        <li><a href="#about">关于我</a></li>
                        <li><a href="#resume">履历</a></li>
                        <li><a href="#service">服务</a></li>
                        <li><a href="#work">项目</a></li>
                        <li><a href="#blog">博客</a></li>
                        <li><a href="#contact">联系我</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    
    
    <header class="header-area header-bg" id="home">
        <div class="header-inner">
            <span>欢迎访问</span>
            <h1>Mr数据杨的个人主页</h1>
            <h6>Python全栈工程师</h6>
            <div class="scroll-down">
                <span></span>
            </div>
            |
        </div>
    </header>
    
    
    <section class="about-area" id="about">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <img src="{% static 'HomePage/img/profile-pic.jpg' %}" alt="profile picture" width="350px">
                </div>
                <div class="col-md-6">
                    <div class="section-title inner">
                        <h2>关于我</h2>
                        <p>{
       { MyInformation.my_info }}</p>
                    </div>
                    <ul>
                        <li><strong>姓名 :</strong> {
       { MyInformation.full_name }}</li>
                        <li><strong>年龄 :</strong> {
       { MyInformation.age }}</li>
                        <li><strong>地址 :</strong> {
       { MyInformation.address }}</li>
                        <li><strong>邮箱 :</strong> {
       { MyInformation.email }}</li>
                        <li><strong>电话 :</strong> {
       { MyInformation.phone }}</li>
                        <li><strong>微信 :</strong> {
       { MyInformation.wechart }}</li>
                        <li><strong>职业 :</strong> {
       { MyInformation.job }}</li>
                        <li><strong>QQ :</strong> {
       { MyInformation.qq }}</li>
                    </ul>
                    <a href="#" class="boxed-btn"></a>
                    <a href="#" class="boxed-btn"></a>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="skill-section">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <div class="section-title main">
                        <h2>我的技能</h2>
                        <p>{
       { MySkill.skill_info }}</p>
                    </div>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-3 col-sm-6">
                    <div id="circle-1"></div>
                    <h4 class="text-uppercase">PYTHON</h4>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div id="circle-2"></div>
                    <h4 class="text-uppercase">MYSQL/MONGODB</h4>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div id="circle-3"></div>
                    <h4 class="text-uppercase">XMIND/MINDMANAGER</h4>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div id="circle-4"></div>
                    <h4 class="text-uppercase">OFFICE</h4>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div id="circle-5"></div>
                    <h4 class="text-uppercase">人工智能算法</h4>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="resome-area" id="resume">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <div class="section-title main">
                        <h2>学历 & 工作</h2>
                        <p>{
       { EducationExperience.education_experience_info }}</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-12">
                    <div class="education-details">
                        <div class="icon">
                            <i class="fa fa-briefcase"></i>
                        </div>
                        {% for data in  EducationExperienceList %}
                            {% if data.education_experience_type == '0' %}
                                <div class="single-education-list">
                                    <h4>{
       { data.name }}</h4>
                                    <span class="duration">{
       { data.duration_time }}</span>
                                    <p>{
       { data.info }}</p>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <div class="col-md-6 col-sm-12">
                    <div class="working-details">
                        <div class="icon">
                            <i class="fa fa-book"></i>
                        </div>
                        {% for data in  EducationExperienceList %}
                            {% if data.education_experience_type == '1' %}
                                <div class="single-education-list">
                                    <h4>{
       { data.name }}</h4>
                                    <span class="duration">{
       { data.duration_time }}</span>
                                    <p>{
       { data.info }}</p>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <div class="col-md-12 text-center">
                    <a href="#" class="boxed-btn"></a>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="service-section" id="service">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <div class="section-title main">
                        <h2>我的服务</h2>
                        <p>{
       { MyService.service_info }}</p>
                    </div>
                </div>
            </div>
            <div class="service-inner">
                <div class="row">
                    {% for data in MyServiceList %}
                        <div class="col-md-4 col-sm-6">
                            <div class="single-service-box">
                                <div class="icon">
                                    <img src="{ { MEDIA_URL }}{ { data.img }}" alt="service icon">
                                </div>
                                <h4>{
       { data.title }}</h4>
                                <p>{
       { data.info }}</p>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>
    
    
    <div class="counter-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center text-uppercase">
                    <h2>统计数据</h2>
                    <ul>
                        <li>
                            <div class="single-counter-item">
                                <div class="icon">
                                    <img src="{% static 'HomePage/img/project.png' %}" alt="project done image">
                                </div>
                                <span class="counter-number">
    										2350
    									</span>
                                <h4>文章总数</h4>
                            </div>
                        </li>
                        <li>
                            <div class="single-counter-item">
                                <div class="icon">
                                    <img src="{% static 'HomePage/img/like.png' %}" alt="like image">
                                </div>
                                <span class="counter-number">
    										2350
    									</span>
                                <h4>总访问数</h4>
                            </div>
                        </li>
                        <li>
                            <div class="single-counter-item">
                                <div class="icon">
                                    <img src="{% static 'HomePage/img/coffe-cup.png' %}" alt=" coffe cup">
                                </div>
                                <span class="counter-number">
    										2350
    									</span>
                                <h4>注册用户数</h4>
                            </div>
                        </li>
                        <li>
                            <div class="single-counter-item">
                                <div class="icon">
                                    <img src="{% static 'HomePage/img/photo-taken.png' %}" alt="">
                                </div>
                                <span class="counter-number">
    										2350
    									</span>
                                <h4>项目总数</h4>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <section class="portfolio-area" id="work">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <div class="section-title main">
                        <h2>我的项目</h2>
                        <p>{
       { MyProject.project_info }}</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-center">
                    <ul class="porfolio-menu">
                        <li data-filter="*" class="active">All</li>
                        {% for type in MyProjectType %}
                            <li data-filter=".{ { type.type_name }}">{
       { type.type_name }}</li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="col-md-12 text-center">
                    <div class="portolio-masonary">
                        {% for data in MyProjectList %}
                            <div class="single-porfolio-item grid-size { { data.type_name }}">
                                <div class="img-thumb">
                                    <img src="{ { MEDIA_URL }}{ { data.img }}" alt=" portfolio image ">
                                    <div class="hover">
                                        <div class="icon">
                                            <a href="{ { MEDIA_URL }}{ { data.img }}" class="image-popup" title="{ { data.project_name }} ">
                                                <i class="fa fa-search-plus" aria-hidden="true"></i>
                                            </a>
                                        </div>
                                        <div class="icon">
                                            <a href="{ { data.url }}">
                                                <i class="fa fa-link" aria-hidden="true"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="blog-area" id="blog">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <div class="section-title main">
                        <h2>我的博客</h2>
                        <p>{
       { MyArticle.site_info }}</p>
                    </div>
                </div>
            </div>
            <div class="row">
                {% for data in MyArticleList %}
                    <div class="col-md-4 col-sm-6">
                        <div class="single-blog-post">
                            <div class="post-thumb">
                                <img src="{ { MEDIA_URL }}{ { data.img }}" alt=" blog image" width="100px">
                            </div>
                            <h4>{
       { data.title }}</h4>
                            <ul class="post-meta">
                                <li><i class="fa fa-clock-o"></i></li>
                                <li><i class="fa fa-user"></i><a href="#"></a></li>
                                <li><i class="fa fa-comments"></i></li>
                            </ul>
                            <p>{
       { data.info }}</p>
                            <a href="{ { data.url }}" class="boxed-btn">点击前往</a>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
    
    
    <section class="contact-area" id="contact">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <div class="section-title main">
                        <h2>给我留言</h2>
                        <p>欢迎提出宝贵意见</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-12">
                    <div class="single-contact-box">
                        <div class="icon">
                            <img src="{% static 'HomePage/img/contact-icon-2.png' %}" alt="contact icon">
                        </div>
                        <h4>Email</h4>
                        <p>33034782@qq.com</p>
                    </div>
                    <div class="single-contact-box">
                        <div class="icon">
                            <img src="{% static 'HomePage/img/contact-icon-1.png' %}" alt="contact icon">
                        </div>
                        <h4>位置</h4>
                        <p>中国，天津</p>
                    </div>
                    <div class="single-contact-box">
                        <div class="icon">
                            <img src="{% static 'HomePage/img/contact-icon-3.png' %}" alt="contact icon">
                        </div>
                        <h4>我的电话</h4>
                        <p>+86 13388083388</p>
                    </div>
                </div>
                <div class="col-md-8 col-sm-12">
                    <div class="contact-form-wrapper">
                        <form method="post">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-6 col-sm-12">
                                    <input type="text" placeholder="您的姓名" name="name">
                                </div>
                                <div class="col-md-6 col-sm-12">
                                    <input type="email" placeholder="您的邮箱" name="email">
                                </div>
                                <div class="col-md-12">
                                    <input type="text" placeholder="留言主题" name="title">
                                    <textarea name="message" id="message" cols="30" rows="10" name="message" placeholder="留言内容"></textarea>
                                    <input type="submit" value="提交" class="boxed-btn">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    
    <footer class="footer-area">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <a href="#">备案号：津ICP:18009366</a>
                </div>
                <div class="col-sm-8 fr">备案时间：2018-12-03<a href="#"> </a>
                </div>
                <p></p>
            </div>
        </div>
    </footer>
    
    
    <div class="preloader">
        <div class="preloader-inner">
            <div class="cssload-box-loading"></div>
        </div>
    </div>
    
    
    <span class="go-top"><i class="fa fa-angle-double-up"></i></span>
    
    
    <script src="{% static 'HomePage/js/jquery.js' %}"></script>
    
    <script src="{% static 'HomePage/js/isotope.pkgd.js' %}"></script>
    
    <script src="{% static 'HomePage/js/jquery.magnific-popup.js' %}"></script>
    
    <script src="{% static 'HomePage/js/waypoints.min.js' %}"></script>
    
    <script src="{% static 'HomePage/js/circle-progress.min.js' %}"></script>
    
    <script src="{% static 'HomePage/js/typed.js' %}"></script>
    
    <script src="{% static 'HomePage/js/jquery.counterup.min.js' %}"></script>
    
    <script src="{% static 'HomePage/js/owl.carousel.min.js' %}"></script>
    
    <script src="{% static 'HomePage/js/imagesloaded.pkgd.js' %}"></script>
    
    <script src="{% static 'HomePage/js/bootstrap.min.js' %}"></script>
    
    <script src="{% static 'HomePage/js/jquery.slicknav.min.js' %}"></script>
    
    <script src="{% static 'HomePage/js/wow.min.js' %}"></script>
    
    <script src="{% static 'HomePage/js/scrollspy.js' %}"></script>
    
    <script src="{% static 'HomePage/js/main.js' %}"></script>
    <style> .copyrights { text-indent: -9999px; height: 0; line-height: 0; font-size: 0; overflow: hidden; } </style>
    <div class="copyrights" id="links20210126">
        Collect from <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
        <a href="http://cooco.net.cn/" title="组卷网">组卷网</a>
    </div>
    </body>
    </html>

[Django3.x]: https://blog.csdn.net/qq_20288327/article/details/120060658
[8878662af81e445eba3d8dd7790a0b5c.gif]: /images/20220829/8de24723c6b044a3b5c8108e1e48710f.png
[3d6e77a6920740049f26c584835f6aa3.gif]: /images/20220829/1f10e6dae71b430aacf89ea113ff5b29.png