第一章：实现奇妙昆虫的首页：
提示：此处可进行观看其它博客
- 创建应用：
- 首先创建一个文件夹来存放你的项目：
- 进入 “项目”根目录，cmd执行下述命令，新建一个 Django 项目
django-admin.py startproject project_name
注意,命令中的"project_name"是创建的项目文件夹名称,可替换成其他名称。
- 然后你的 “项目” 目录中出现了与项目同名的一个目录，即project_name。打开这个目录,你会看到两个内容：
运行自己的项目
1.在项目根目录，使用 manage.py 脚本，执行下述命令
python manage.py runserver
在控制台执行完命令后出现以下结果则代表运行成功
Microsoft Windows [版本 10.0.22621.2715]
(c) Microsoft Corporation。保留所有权利。
D:\pythonweb\end\pollination>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
December 17, 2023 - 09:21:46
Django version 4.2.6, using settings 'pollination.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
接下来我们打开浏览器,输入 URL:http://127.0.0.1:8000/，出现下面的则代表创建项目成功：
- 接着进行创建你的首页应用：
python manage.py startapp HomeApp
- init.py:这个文件是一个空文件，它告诉Python解释器将此文件夹视为一个包(package)。在Python中，包是一种组织模块和子模块的方式。
- admin.py:这个文件包含Django
admin站点的配置。当您在Django管理后台中注册模型时，这些配置将被应用到相应的模型上。 - apps.py:这个文件通常位于每个应用的根目录下。它定义了一个应用类，该类继承自django.apps.AppConfig,并实现了一些方法，如ready()、name等。这些方法在应用启动时会被调用。
- migrations/:这个文件夹包含了Django项目的数据库迁移文件。当您对模型进行更改时，需要创建新的迁移文件来描述这些更改。然后，您可以使用python
manage.py migrate命令将这些更改应用到数据库。 - models.py:这个文件包含了您的Django项目的所有模型定义。模型是用于表示数据库中表的结构的Python类。
- tests.py:这个文件包含了针对您的Django项目中所有模型编写的测试代码。测试可以帮助确保您的代码按预期工作，并在发生更改时自动运行。
- views.py:这个文件包含了处理HTTP请求的视图函数。视图函数接收HTTP请求作为参数，并返回HTTP响应。在Django中，视图函数通常与URL模式关联，以便根据用户请求的URL调用相应的视图函数。
注意：templates是我创建的存放html前端文件的地方，创建好需要进行配置，在你创建的项目目录project_name 下面有一个settings.py：
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
创建应用成功后，需要将APP应用进行注册
在项目文档中找到settings.py文件-INSTALLED_APPS配置文件中将创建的应用名称加到文件中，注意：新添加应用后必须在设置文件中进行注册
接下来就是其它文件的编写：
views.py
from django.shortcuts import render
# Create your views here.
def home(request):
return render(request, 'home.html')
urls.py:
可以没有这个文件，就是给首页配置一级路由，在项目目录project_name 下面有一个urls.py中进行配置：如图
然后运行项目```python
python manage.py runserver
我先把我的首页代码贴出，你也可根据自己的想法来编写：
```python
{% 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>奇妙（传粉昆虫多样性平台）</title>
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/newss.css' %}">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<a id="top"></a>
<div class="container top">
<div class="row">
<div class="col-md-6">
<a>
<img class="img-responsive" src="{% static 'img/logo.png' %}">
</a>
</div>
<div class="col-md-3 hidden-xs">
<a class="phone ant">
<span class="glyphicon glyphicon-phone"></span>电话：18381752989
</a>
</div>
<div class="col-md-3 hidden-xs">
<a class="mail ant">
<span class="glyphicon glyphicon-envelope"></span>邮箱：1794154463@qq.com
</a>
</div>
<div class="col-md-3 hidden-xs" style="margin-top: 50px; width: 400px;margin-left: 30px;">
<div class="mi">
<input type="search" name="" id="" placeholder="请输入要的搜索的信息"
style="width: 320px; border-color: aquamarine;">
<button type="button" style="border-color: aqua;">搜索</button>
</div>
</div>
</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="active 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:news_list' %}">新闻动态</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 'kongchongzhanshi:sql1' %}">昆虫数据库</a></li>
<li><a href="{% url 'kongchongzhanshi:file_list' %}">研究资料</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 'shibie:chat' %}">昆虫智能问答</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:team' %}">研究团队图谱</a></li>
<li><a href="{% url 'serviceapp:kun' %}">昆虫关系图谱</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:article' %}">昆虫论坛</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 'contactApp:qimiao' %}">咨询</a></li>
<li><a href="{% url 'contactApp:qimiao' %}">加入奇妙</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="line"></div>
<div id="ad" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#ad" data-slide-to="0" class="active"></li>
<li data-target="#ad" data-slide-to="1"></li>
<li data-target="#ad" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="{% static 'img/banner1.png' %}" style="height: 624.8px; width: 100%;" alt="广告横幅1">
</div>
<div class="item">
<img src="{% static 'img/banner2.jpg' %}" style="height: 624.8px; width: 100%;" alt="广告横幅2">
</div>
<div class="item">
<img src="{% static 'img/banner3.png' %}" style="height: 624.8px; width: 100%;" alt="广告横幅3">
</div>
</div>
<a class="left carousel-control" href="#ad" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#ad" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="line3" style="width: 100%; height: 70px;"> </div>
<!-- 首页主体部分 -->
<div class="container">
<div class="row row-3" style="width: 1000px; height: 500px; margin: auto 0; ">
<!-- 新闻中心 -->
<div class="col-md-12 col-pro">
<div class="row">
<div class="col-md-12">
<span class="part1">
<a href="{% url 'aboutapp:news_list' %}" style=" font-size: 24px;
font-weight: bold;"> 新闻中心</a>
</span>
<span class="part1 en">
/News Center
</span>
<a class="btn btn-default btn-xs more-btn" href="{% url 'aboutapp:news_list' %}">+ 更多</a>
<div class="1" style="height: 3px;background: #005197;width: 1200px;"></div>
<div id="wrapper">
<div class="header"></div>
<div class="main">
<div class="news1">
<div class="moduletitle">
<h1>武夷拟网蚊</h1>
<strong>Lay-Z</strong>
</div>
<div class="content">
<div class="mcline1">
<img src="{% static 'xw/kunchong1.jpg' %}" />
<span>水生昆虫多样性对维护武夷山生态系统的稳定和安全具有重要作用，这6个昆虫新种的发现不仅丰富了武夷山昆虫地理分布区系和物种多样性，
而且这些新种的幼虫生活在洁净溪流中，成虫多发现在山涧溪流周边，
它们对栖息环境的水质有着很高的要求，大多可以作为优良水质的指示物种。</span>
</div>
</div>
</div>
<!--第二个新闻列表-->
<div class="news2">
<div class="moduletitle">
<h1>武夷倒毛摇蚊</h1>
<strong>Lay-Z</strong>
</div>
<div class="content">
<div class="mcline1">
<img src="{% static 'xw/kunchong2.jpg' %}" style="height:370px;" />
<span>昆虫是健康的生态系统一个很重要的组成部分，
是维护陆地生态系统及生物圈的主要成员，它们通过传粉、
媒介及植食等相互作用，在生态系统中发挥着关键作用，对整个生物界和人类的生存影响深远。
伴阎甲属为大陆新记录属，
小娜宽额日蝇、长须枝芒丛蝇、十五星裸瓢虫.
</span>
</div>
</div>
</div>
<div class="news1">
<div class="moduletitle">
<h1>扇刺合脉等翅石蛾</h1>
<strong>Lay-Z</strong>
</div>
<div class="content">
<div class="mcline1">
<img src="{% static 'xw/kunchong3.jpg' %}" />
<span>长期以来，国家植物园一直在关注园内昆虫生物多样性，进行了大量踏查工作，
目前已记录的昆虫超过1500种。调查发现的枝芒丛蝇属，为中国新记录属，伴阎甲属为大陆新记录属，
小娜宽额日蝇、长须枝芒丛蝇、十五星裸瓢虫、宽带直脉食蚜蝇等20余种昆虫为我国、北京新记录物种。</span>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
<!-- <div class="news" style="border: solid #005197 2px ;"></div> -->
</div>
</div>
</div>
</div>
</div>
<div class="row row-3" style="padding-left: 180px;">
<div class="col-md-4">
<!-- 通知公告 -->
<span class="part1">
<a href="#" style=" font-size: 24px;
font-weight: bold;">奇妙平台概况</a>
</span>
<span class="part1 en">
/ Overview of the Wonderful Platform
</span>
<a class="btn btn-default btn-xs more-btn" href="{% url 'aboutapp:survey'%}">+ 更多</a>
<div class="lin" style="height: 3px;background: #005197;width:80px;"></div>
<div>
<p class="text1">
<font color="#d30a1c">奇妙（传粉昆虫多样性平台）</font>
奇妙平台是一个多功能的综合性研究平台，致力于为用户提供全面的学术和科研支持。该平台拥有先进的技术和丰富的资源，为研究人员、学生和科研机构提供了一个高效、便捷的工作环境。
在奇妙平台上，用户可以轻松地找到各种学术资源，包括文献资料、研究工具、数据集等。平台还提供了强大的数据分析和可视化工具，帮助用户深入挖掘和理解数据。此外，奇妙平台还定期举办学术活动，如研讨会和讲座，促进学术交流和合作。
奇妙平台以用户体验为核心，提供了直观友好的界面和个性化的服务。用户可以根据自己的需求定制工作流程，并与其他研究人员共享信息和经验。平台还拥有强大的社区支持，用户可以与志同道合的人分享想法，解决问题，相互学习和成长。
总之，奇妙平台为广大科研人员提供了一个便捷、全面的研究环境，旨在推动学术进步和创新发展。无论是学生、教师还是研究机构，都能在奇妙平台上找到所需的资源和支持，助力于他们的学术成就和科研成果。
</p>
</div>
</div>
<div class="col-md-4">
<!-- 科研基地 -->
<span class="part1">
<a href="#" style=" font-size: 24px;
font-weight: bold;">研究平台</a>
</span>
<span class="part1 en">
/ Research Platform
</span>
<div class="lin" style="height: 3px;background: #005197;width:80px;"></div>
<div>
<a href="#"><img class="img-responsive" src="{% static 'img/ky.png' %}"></a>
<p class="text1">
<font color="#d30a1c">奇妙（传粉昆虫多样性平台）研究平台</font>
奇妙传粉昆虫平台具有专业性、全面性、功能性、用户友好性、资源整合性、创新性和安全性等方面的优势，可以为传粉昆虫研究和保护工作提供有力的支持和指导。
</p>
</div>
</div>
<div class="col-md-4">
<!-- 联系我们 -->
<span class="part1">
<a href="{% url 'contactApp:contact' %}" style=" font-size: 24px;
font-weight: bold;">联系我们</a>
</span>
<span class="part1 en">
/ Contact us
</span>
<div class="lin" style="height: 3px;background: #005197;width:80px;"></div>
<div>
<ul class="list-unstyled procurement-li">
<li>业务质询一：如何快速加入我们</li>
<li>业务质询二：产品的销售区间</li>
<li>咨询电话：18381752989</li>
<li>企业传真：333333333</li>
<li>地址：四川南充顺庆西华师大华风校区</li>
<li>邮编：741306</li>
<li>
网址：<a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>
</li>
</ul>
<div class="platform"><a href="{% url 'contactApp:contact' %}">更多详情</a></div>
</div>
</div>
</div>
<div class="row fo" id="map-footer">
<style>
.fo {
background-image:url('{% static 'img/dibu.jpg' %}');
background-size: cover;
}
</style>
<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 'kongchongzhanshi:sql1' %}">昆虫数据库</a></dd>
<dd><a href="{% url 'kongchongzhanshi:file_list' %}">传粉昆虫多样性研究资料</a></dd>
</div>
<div class="col-md-2">
<dl>
<dt>技术支持</dt>
<dd><a href="{% url 'shibie:chat' %}">昆虫智能问答</a></dd>
</dl>
</div>
<div class="col-md-2">
<dl>
<dt>服务支持</dt>
<dd><a href="{% url 'serviceapp:team' %}">研究团队图谱</a></dd>
<dd><a href="{% url 'serviceapp:kun' %}">昆虫关系图谱</a></dd>
<dd><a href="{% url 'serviceapp:article' %}">昆虫论坛</a></dd>
</dl>
<dl>
<dt>信息门户</dt>
<dd><a href="{% url 'user:index' %}">进入后台</a></dd>
</dl>
</div>
<div class="col-md-4" id="wx">
<p>扫描二维码，关注奇妙平台微信公众号，了解更多</p>
<img class="qrimg" src="{% static 'img\qr1 copy.jpg' %}" alt="wx">
<p>客服热线：<b style="font-size:20px">18381752989</b></p>
</div>
</div>
<div class="sidebar" style=" position: fixed;width: 200px;height: 350px;
top: 50%; /* 将侧边栏置于屏幕垂直方向的中间位置 */
right: 10px; /* 距离屏幕右边的距离 */
transform: translateY(-50%); /* 在垂直方向上使侧边栏向上偏移自身高度的一半，以实现垂直居中效果 */
/* background-color: #f5f5f5; */
padding: 10px;
border-radius: 6px;">
<ul style=" list-style: none;
padding: 0;
margin: 0;">
<li style="color: rgb(237, 240, 240);font-size: 25px;height: 43px; text-align: center;font-weight: bold; ">
<a href="{% url 'aboutapp:survey' %}">平台概况</a></li>
<li style="color: rgb(230, 237, 237);font-size: 25px;height: 43px; text-align: center;font-weight: bold; ">
<a href="{% url 'kongchongzhanshi:sql1' %}">昆虫数据库</a></li>
<li><a href="{% url 'serviceapp:team' %}">团队图谱</a></li>
<li><a href="{% url 'kongchongzhanshi:sql1' %}">昆虫数据库</a></li>
<li><a href="{% url 'serviceapp:article' %}">昆虫论坛</a></li>
<li><a href="http://127.0.0.1:8000/admin/">进入后台</a></li>
<li><a href="#">研究基地</a></li>
<li><a href="#top">返回顶部</a></li>
<style>
.sidebar {
background-color: rgba(30, 28, 29, 0.9)
}
.sidebar li {
color: rgb(238, 246, 246);
font-size: 25px;
height: 43px;
text-align: center;
font-weight: bold;
font-family: serif;
}
.sidebar li:hover {
color: green;
}
</style>
</ul>
</div>
<script>
$(function () {
$(".dropdown").mouseover(function () {
$(this).addClass("open");
});
$(".dropdown").mouseleave(function () {
$(this).removeClass("open");
});
});
//处理缩略图
function DrawImage(hotimg) {
$(hotimg).jqthumb({
width: '100%', // 宽度
height: '250px', // 高度
zoom: '1', // 缩放比例
method: 'auto' // 提交方法，用于不同的浏览器环境，默认为‘auto’
});
}
let input = document.querySelector('input')
let ul = document.querySelector('.result-list')
//2.注册事件
//onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容
input.onfocus = function () {
console.log('点击了，出现光标了，此时可以输入文字')
//(1)显示ul
ul.style.display = 'block'
//(2)自身边框改变 （通过新增search类名）
this.classList.add('search')
}
//onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容
input.onblur = function () {
console.log('点其他地方了，光标消失了，此时不可以输入文字')
//隐藏ul
ul.style.display = 'none'
//自身边框改变 （通过移除search类名）
this.classList.remove('search')
}
</script>
</body>
</html>
即可得到：
总结
提示：可进行点击下面的链接查看项目展示视频
项目演示视频
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
