注目のプログラム例
Python+Django ブックモール Web サイトのフロントエンドとバックエンド
動作環境のインストールやリモート デバッグが必要な場合は、記事の下部にある個人用QQ名刺を参照してください。専門および技術担当者がリモートでサポートします。
序文
このブログは、<<Python+Django ブックモール Web サイトのフロントエンドとバックエンド>> のコードを書いています。コードはきちんとしていて、規則的で、読みやすいです。学習およびアプリケーションの推奨の最初の選択肢。
記事ディレクトリ
1. 必要なツールソフトウェア
2. ステップを使用する
1. スタイルの紹介
2. コードの実装
3. 走行結果
3. オンラインサポート
1. 必要なツールソフトウェア
1. Python、Pycharm
2.ジャンゴ
2. ステップを使用する
1. スタイルの紹介
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<title>login</title>
<style type="text/css">
#box4{
background-color: #5ACCC9;
width: 500px;
height: 50px;
margin:auto ;
float: left;
position:absolute;
top: -290;
left: 0;
right: 0;
bottom: 0;
border-style:none;
border-radius: 5px;
}
#box1{
background-color: #8C7EF3;
width: 500px;
height: 300px;
margin:auto ;
float: inline;
position:relative;
top: 10px;
left: 0;
right: 0;
bottom: 0;
border-style:none;
border-radius: 5px;
}
.p1{
color: black;
font-size: 20px;
margin-left:20px;
margin-top: 25px;
font-family: microsoft yahei;
font-weight: normal;
text-align: left;
line-height:23px;
position: center;
}
#box2{
background-color: #8C7EF3;
width: 120px;
height: 250px;
margin-top:20px;
margin-left:70px;
float: left;
text-align: center;
position:static;
}
#box3{
background-color: #8C7EF3;
width: 230px;
height: 250px;
margin-top:20px;
float: left;
text-align: center;
position:static;
}
#input0{
width: 200px;
height: 30px;
margin-top:20px;
}
#input1{
width: 100px;
height: 50px;
margin: 20px;
font-family: microsoft yahei;
font-weight: normal;
font-size: 16px;
}
#input2{
width: 130px;
height: 50px;
margin: 0px;
font-family: microsoft yahei;
font-weight: normal;
font-size: 16px;
float: left;
border-width: 0px;
border-radius: 3px;
}
#pgheader1{
background: rgb(51,51,51);
width: 100%;
min-width: 960px;
height: 35px;
margin: 0px auto;
width: 100%;
position: relative;z-index:5;
border-color: rgb(255, 255, 255);
border-width: 0px;
border-style: solid;
}
#pgheader2{
padding-top: 10px;
padding-right: 0px;
display: inline-block;
z-index: 1000;
color: rgb(255,255,255);
font-size:15px;
}
</style>
</head>
2. コードの実装
コードは以下のように表示されます。
<body>
<div style="width: 100%; display: flex; justify-content: space-between;background-color:#3FE3E1" >
<a style="margin-left: 20px;padding: 10px; color: #333; text-decoration: none;">欢迎光临</a>
<div style="float: right;display: flex;justify-content: right;">
<a id="loginS" style="margin-right: 20px;padding: 10px; color: #333; text-decoration: none;" href="/accounts/logout/" >当前用户名:{
{user}}</a>
<a style="margin-right: 20px;padding: 10px; color: #333; text-decoration: none;" href="/accounts/logout/">注销</a>
<a style="margin-right: 20px;padding: 10px; color: #333; text-decoration: none;" href="/accounts/login/">登录</a>
</div>
</div>
<!--<div style="width: 100%; display: flex; justify-content: center;">-->
<!-- <table style="margin: auto;">-->
<div style="display: flex;justify-content:right;width:75%;margin: 10px auto;background-color: ">
<form style="margin-top: 0px;display: inline-block;" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<td ><input type="text" name="searchWeb" value=""></td>
<td style="vertical-align: middle;" ><input type="submit" value="搜索"></td>
<td style="vertical-align: middle;" ><input type="submit" name="displayAllWeb" value="显示所有"></td>
<td style="vertical-align: middle;" ><input type="submit" name="newWeb" value="新建"></td>
</form>
</div>
<div class="container">
<h3>文章列表</h3>
<table class="table table-striped">
<thead>
<tr >
<th style="width: 50px">编号</th>
<th style="width: 50px">类目</th>
<th style="width: 100px">名称</th>
<th style="width: 100px">价格(元)</th>
<th style="width: 100px">浏览</th>
<th style="width: 100px">编辑</th>
</tr>
</thead>
<tbody>
<tr>
{% for ii in page_object %}
<tr>
<form style="margin-top: 0px;display: inline-block;" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<td style="vertical-align: middle;">{
{ ii.id }}</td>
<td style="vertical-align: middle;">{
{ ii.category }}</td>
<td style="vertical-align: middle;">{
{ ii.usert }}</td>
<td style="vertical-align: middle;"><a href="{
{ ii.id }}/">{
{ ii.title }}</a></td>
<td style="vertical-align: middle;">{
{ ii.data1 }}</td>
<td style="vertical-align: middle;">{
{ ii.file }}</td>
<td style="vertical-align: middle;">{
{ ii.file2 }}</td>
<td style="vertical-align: middle;">{
{ ii.file3 }}</td>
<td><img src="../../media/{
{ ii.img }}" width="100" height="100"></td>
<td style="vertical-align: middle;">{
{ ii.img2 }}</td>
<td hidden><input type="text" name="itemWeb" hidden value="display"></td>
<td hidden><input type="text" name="idWeb" hidden value={
{ ii.id }}></td>
<td style="vertical-align: middle;" ><input type="submit" value="浏览"></td>
</form>
<!-- <form style="margin-top: 7.2px;display: inline-block;" action="" method="post" enctype="multipart/form-data">-->
<!-- {% csrf_token %}-->
<!-- <td><a hidden href="{
{ ii.id }}/">{
{ ii.title }}</a></td>-->
<!-- <td><input type="text" name="itemWeb" hidden value="modify"></td>-->
<!-- <td><input type="text" name="idWeb" hidden value={
{ ii.id }}></td>-->
<!-- <td><input type="submit" value="编辑"></td>-->
<!-- </form>-->
<td style="vertical-align: middle;"><a href="{
{ ii.id }}/"><input type="button" value="编辑"></a></td>
</tr>
{% endfor %}
</tr>
</tbody>
</table>
<!--分页***************************************分页-->
{% if is_paginated %}
<ul class="pagination pull-right" id="myPage">
{% endif %}
{#上一页按钮开始#}
{# 如果当前页有上一页#}
{% if page_object.has_previous %}
{# 当前页的上一页按钮正常使用#}
<li class="previous"><a href="?page={
{ page_object.previous_page_number }}">上一页</a></li>
{% else %}
{# 当前页的不存在上一页时,上一页的按钮不可用#}
<li class="previous disabled"><a href="#">上一页</a></li>
{% endif %}
{#上一页按钮结束#}
{% if data.first %}
<li class="page"><a href="?page=1">1</a></li>
{% endif %}
{% if data.left %}
{% if data.left_has_more %}
<li class="page"><a href="javascript:void(0)">...</a></li>
{% endif %}
{% for i in data.left %}
<li class="page"><a href="?page={
{ i }}">{
{ i }}</a></li>
{% endfor %}
{% endif %}
<li class="page active" ><a href="javascript:void(0)"> {
{ page_num }}</a></li>
{% if data.right %}
{% for i in data.right %}
<li class="page"><a href="?page={
{ i }}">{
{ i }}</a></li>
{% endfor %}
{% if data.right_has_more %}
<li class="page"><a href="javascript:void(0)">...</a></li>
{% endif %}
{% endif %}
{% if data.last %}
<li class="page"><a
href="?page={
{ paginator.num_pages }}">{
{ paginator.num_pages }}</a>
</li>
{% endif %}
{% if page_object.has_next %}
<li class="next"><a href="?page={
{ page_object.next_page_number }}">下一页</a></li>
{% else %}
<li class="next disabled"><a href="#">下一页</a></li>
{% endif %}
{# 下一页按钮结束#}
<div class="btn-group">
<button type="button" class="btn btn-primary">原始</button>
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">切换下拉菜单</span>
</button>
<ul class="dropdown-menu" role="menu" style="width: 20px">
{% for i in paginator.page_range %}
<li class="page"><a href="?page={
{ i }}">{
{ i }}</a></li>
{% endfor %}
</ul>
</div>
</ul>
</div>
</body>
</html>
3. 走行結果
3. オンラインサポート:
動作環境のインストールやリモート デバッグが必要な場合は、 記事の下部にある個人用 QQ名刺を参照してください。専門および技術担当者がリモートでサポートします。 1) リモートインストールおよび操作環境、コードデバッグ2) Qt、C++、Python エントリーガイド3) インターフェース美化4) ソフトウェア制作
ブロガーおすすめ記事: Python 顔認識統計 QT フォーム - CSDN ブログ
ブロガーおすすめ記事: Python Yolov5 炎煙認識ソースコード共有 - CSDN ブログ
Python OpenCV は歩行者用入口に出入りする人の数を認識します - Python は人の数を認識します - CSDN ブログ
個人ブログ ホームページ: alicema1111 の blog_CSDN ブログ - Python、C++、Web ページ分野のブロガー
すべてのブロガーの記事はここをクリックしてください: alicema1111 の blog_CSDN ブログ - Python、C++、Web ページ分野のブロガー