Django第三次作业(项目上半部分)

最新推荐文章于 2024-06-09 15:00:03 发布

Fi9734

最新推荐文章于 2024-06-09 15:00:03 发布

阅读量474

点赞数

文章标签： django python 后端

本文链接：https://blog.csdn.net/weixin_56368473/article/details/125167814

版权

1.配置django环境

2.配置主路由和app里的子路由

3.更改HTML文件内容

1.配置django环境

django-admin startproject babies

新建app：commodity, index, shopper

python manage.py startapp index
python manage.py startapp commodity
python manage.py startapp shoppe

注册三个创建好的app

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'index',
'commodity',
'shopper',
]

将做好的前端网页：网页web静态模板中的三个文件夹放入babies项目的根目录下

并在setting中引入tempaltes

'DIRS': [os.path.join(BASE_DIR, 'templates')],

在setting中配置好mysql数据库，并在navicat中创建数据库babies

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

用命令提示符安装pymsql，并进行数据迁移操作

pip install pymysql
python manage.py migrate

此时babies数据库中生成一些表

2.配置主路由和app里的子路由

分别往三个app：index, commodity, shopper里新建路由urls.py，并在主路由babies\urls.py中添加三个子路由

在index\views.py里面添加代码

from django.shortcuts import render
def indexView(request):
return render(request,'index.html')

往index\urls.py里面添加代码

from django.urls import path
from index.views import indexView
urlpatterns = [
path('', indexView,name='index')
]

3.更改HTML文件内容

在templates\index.html里添加两句代码，分别在头顶位置和body结束位置

{% load staticfiles %} {% load static %}
{% block content %} {% endblock %}

将index.html中的链接全部更改

{% load staticfiles %} {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'layui/css/layui.css' %}">
<script type="text/javascript" src="{% static 'layui/layui.js' %}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body id="list-cont">
<div class="header">
<div class="headerLayout w1200">
<div class="headerCon">
<h1 class="mallLogo">
<a href="#" title="母婴商城">
<img src="{% static 'img/logo.png' %}">
</a>
</h1>
<div class="mallSearch">
<form action="" class="layui-form" novalidate>
<input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
<button class="layui-btn" lay-submit lay-filter="formDemo">
<i class="layui-icon layui-icon-search"></i>
</button>
<input type="hidden" name="" value="">
</form>
</div>
</div>
</div>
</div>

<div class="content content-nav-base">
<div class="main-nav">
<div class="inner-cont0">
<div class="inner-cont1 w1200">
<div class="inner-cont2">
<a href="index.html" class="active">首页</a>
           <a href="commodity.html" >所有商品</a>
           <a href="shopcart.html" >购物车</a>
<a href="shopper.html">个人中心</a>
</div>
</div>
</div>
</div>
<div class="category-con">
<div class="category-banner">
<div class="w1200">
<img src="{% static 'img/banner1.jpg' %}">
</div>
</div>
</div>
<div class="floors">
<div class="sk">
<div class="sk_inner w1200">
<div class="sk_hd">
<a href="javascript:;">
<img src="{% static 'img/s_img1.jpg' %}">
</a>
</div>
<div class="sk_bd">
<div class="layui-carousel" id="test1">
<div carousel-item>
<div class="item-box">
<div class="item">
<a href="javascript:;"><img src="{% static 'img/s_img2.jpg' %}"></a>
<div class="title">宝宝五彩袜棉质舒服</div>
<div class="price">
<span>￥49.00</span>
<del>￥99.00</del>
</div>
</div>
<div class="item">
<a href="javascript:;"><img src="{% static 'img/s_img3.jpg' %}"></a>
<div class="title">宝宝五彩袜棉质舒服</div>
<div class="price">
<span>￥49.00</span>
<del>￥99.00</del>
</div>
</div>
<div class="item">
<a href="javascript:;"><img src="{% static 'img/s_img4.jpg' %}"></a>
<div class="title">宝宝五彩袜棉质舒服</div>
<div class="price">
<span>￥49.00</span>
<del>￥99.00</del>
</div>
</div>
<div class="item">
<a href="javascript:;"><img src="{% static 'img/s_img5.jpg' %}"></a>
<div class="title">宝宝五彩袜棉质舒服</div>
<div class="price">
<span>￥49.00</span>
<del>￥99.00</del>
</div>
</div>
</div>
<div class="item-box">
<div class="item">
<a href="javascript:;"><img src="{% static 'img/s_img2.jpg' %}"></a>
<div class="title">宝宝五彩袜棉质舒服</div>
<div class="price">
<span>￥49.00</span>
<del>￥99.00</del>
</div>
</div>
<div class="item">
<a href="javascript:;"><img src="{% static 'img/s_img3.jpg' %}"></a>
<div class="title">宝宝五彩袜棉质舒服</div>
<div class="price">
<span>￥49.00</span>
<del>￥99.00</del>
</div>
</div>
<div class="item">
<a href="javascript:;"><img src="{% static 'img/s_img4.jpg' %}"></a>
<div class="title">宝宝五彩袜棉质舒服</div>
<div class="price">
<span>￥49.00</span>
<del>￥99.00</del>
</div>
</div>
<div class="item">
<a href="javascript:;"><img src="{% static 'img/s_img5.jpg' %}"></a>
<div class="title">宝宝五彩袜棉质舒服</div>
<div class="price">
<span>￥49.00</span>
<del>￥99.00</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="product-cont w1200" id="product-cont">
<div class="product-item product-item1 layui-clear">
<div class="left-title">
<h4><i>1F</i></h4>
<img src="{% static 'img/icon_gou.png' %}">
<h5>宝宝服饰</h5>
</div>
<div class="right-cont">
<a href="javascript:;" class="top-img"><img src="{% static 'img/img12.jpg' %}" alt=""></a>
<div class="img-box">
<a href="javascript:;"><img src="{% static 'img/s_img7.jpg' %}"></a>
<a href="javascript:;"><img src="{% static 'img/s_img8.jpg' %}"></a>
<a href="javascript:;"><img src="{% static 'img/s_img9.jpg' %}"></a>
<a href="javascript:;"><img src="{% static 'img/s_img10.jpg' %}"></a>
<a href="javascript:;"><img src="{% static 'img/s_img11.jpg' %}"></a>
</div>
</div>
</div>
<div class="product-item product-item2 layui-clear">
<div class="left-title">
<h4><i>2F</i></h4>
<img src="{% static 'img/icon_gou.png' %}">
<h5>奶粉辅食</h5>
</div>
<div class="right-cont">
<a href="javascript:;" class="top-img"><img src="{% static 'img/img12.jpg' %}" alt=""></a>
<div class="img-box">
<a href="javascript:;"><img src="{% static 'img/s_img7.jpg' %}"></a>
<a href="javascript:;"><img src="{% static 'img/s_img8.jpg' %}"></a>
<a href="javascript:;"><img src="{% static 'img/s_img9.jpg' %}"></a>
<a href="javascript:;"><img src="{% static 'img/s_img10.jpg' %}"></a>
<a href="javascript:;"><img src="{% static 'img/s_img11.jpg' %}"></a>
</div>
</div>
</div>
<div class="product-item product-item3 layui-clear">
<div class="left-title">
<h4><i>3F</i></h4>
<img src="{% static 'img/icon_gou.png' %}">
<h5>宝宝用品</h5>
</div>
<div class="right-cont">
<a href="javascript:;" class="top-img"><img src="{% static 'img/img12.jpg' %}" alt=""></a>
<div class="img-box">
<a href="javascript:;"><img src="{% static 'img/s_img7.jpg' %}"></a>
<a href="javascript:;"><img src="{% static 'img/s_img8.jpg' %}"></a>
<a href="javascript:;"><img src="{% static 'img/s_img9.jpg' %}"></a>
<a href="javascript:;"><img src="{% static 'img/s_img10.jpg' %}"></a>
<a href="javascript:;"><img src="{% static 'img/s_img11.jpg' %}"></a>

</div>
</div>
</div>
</div>
</div>

<div class="footer">
<div class="ng-promise-box">
<div class="ng-promise w1200">
<p class="text">
<a class="icon1" href="javascript:;">7天无理由退换货</a>
<a class="icon2" href="javascript:;">满99元全场免邮</a>
<a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
</p>
</div>
</div>
<div class="mod_help w1200">
<p>
<a href="javascript:;">关于我们</a>
<span>|</span>
<a href="javascript:;">帮助中心</a>
<span>|</span>
<a href="javascript:;">售后服务</a>
<span>|</span>
<a href="javascript:;">母婴资讯</a>
<span>|</span>
<a href="javascript:;">关于货源</a>
</p>
</div>
</div>

<script type="text/javascript">
layui.config({
{#base: '../pstatic/js/',#}
base: '{% static 'js/' %}'
}).use(['mm','carousel'],function(){
var carousel = layui.carousel,
mm = layui.mm;
var option = {
elem: '#test1'
,width: '100%'
,arrow: 'always'
,height:'298'
,indicator:'none'
}
carousel.render(option);
});
</script>
</body>
{% block content %} {% endblock %}
</html>