先介绍一些我的看法(辩证看待):
接下来我会直接给效果图和代码,你只需要复制代码,然后调整自己的代码,用python manage.py runserver 命令自己运行,额其实前面有一下步骤我偷懒了没写,自己补充哦。
urls.py文件
from django.contrib import admin
from django.urls import path,include
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('home/',views.home),
path('article_detail/<int:id>/', views.article_detail, name='article_detail'),
path('home/publish_article/',views.publish_article),
]
views.py文件
from django.shortcuts import render,get_object_or_404
from app01.models import Upcontent
from django.shortcuts import HttpResponse
from django.shortcuts import redirect
from django.http import HttpResponse, HttpResponseRedirect
from .models import Question
from django.template import loader
from django.http import Http404
from .models import Choice, Question
from django.urls import reverse
from django.views import generic
# Create your views here.
def home(request):
contents = Upcontent.objects.order_by('-id')
return render(request, 'home.html',{'contents':contents} )
def article_detail(request,id):
article=Upcontent.objects.get(id=id)
context={'article':article}
return render(request,'article_detail.html',context)
def publish_article(request):
if request.method == 'POST':
title = request.POST.get('title')
text = request.POST.get('text')
action = request.POST.get('action')
Upcontent.objects.create(title=title, text=text)
return redirect('/home')
return render(request, 'publish_article.html')
templates里的home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>黑白相间导航栏</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
nav {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
padding: 0 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-left: 10px;
}
nav li a {
color: #fff;
text-decoration: none;
padding: 10px;
border-radius: 5px;
}
nav li a:hover {
background-color: #fff;
color: #333;
}
.dropdown {
display: inline-block;
position: absolute;
top: 12;
left:1300px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
padding: 12px 16px;
border-radius: 5px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: #333;
font-size: 14px;
padding: 6px 0;
display: block;
}
.dropdown12 {
position: relative;
display: inline-block;
}
.dropdown12-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown12:hover .dropdown12-content {
display: block;
}
.headswiper-content {
display: flex;
/* 以容器的方式 */
flex-wrap: wrap;
/* #换行 */
align-items:flex-end ;
flex-direction: column;
}
.headswiper-item {
width: 100%;
padding: 10px;
background-color: #f9f9f9;
text-align: justify;
position:relative
}
.headswiper-item:hover {
background-color: white;
}
.headswiper-item h2 {
font-size: 1.2em;
margin-bottom: 5px;
}
.headswiper-item p {
margin-top: 0;
}
.headswiper-item a {
color: #333;
text-decoration: none;
}
.headswiper-item a:hover {
text-decoration: underline;
}
.content {
border: 1px solid #ccc;
background-color: #f7f7f7;
padding: 10px;
margin-bottom: 10px;
height:80px;
width:600px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.content a {
color: #333;
text-decoration: none;
}
.content a:hover {
color: #666;
text-decoration: underline;
}
.anniu {
background-color: none;
border: none;
color: white;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 4px;
}
</style>
</head>
<body>
<nav>
<ul>
<li >
<a href="#">经济常识</a>
</li>
<li><a href="#">IT常识</a></li>
<li><a href="#">逻辑推理</a></li>
<li><a href="">农业机械</a></li>
<li><a href="publish_article/">发布</a></li>
<li class="dropdown">
<a href="/home/sign_in">登录</a>
<div class="dropdown-content">
<a href="/home/sign_in">用户登录</a>
<a href="/administrator">管理员登录</a>
</div>
</li>
</ul>
</nav>
{% for content in contents %}
<h2>
<a href="{% url 'article_detail' content.id %}">{{content.title}}</a>
</h2>
<p>
{{content.text}}
</p>
{% endfor %}
</body>
</html>
article_detail.html里的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>{{ article.title }}</h1>
<p>{{ article.text}} </p>
</body>
</html>
publish_article.html里的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.input-box {
display: flex;
flex-direction: column;
padding: 50px;
border: 1px solid #ccc;
border-radius: 5px;
}
.title-input input,
.subtitle-input input {
font-size: 16px;
padding: 16px;
border: solid 1px #ccc;
border-radius: 5px;
margin-bottom: 30px;
}
.submit-btn {
background-color: #007bff;
color: #fff;
font-size: 8px;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.submit-btn:hover {
background-color: #0062cc;
}
/* 设置按钮宽度和高度 */
button {
width: 100px;
height: 40px;
}
/* 设置按钮定位 */
.button-container {
position: relative;
}
button {
position: relative;
top: 50%;
left: 50%;
transform: translate(-60%, 100%);
}
textarea{
resize: vertical;
}
nav {
background-color: #e6e6e6e8;
font-size: 18px;
position: absolute;
top: 114px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
position: relative;
}
nav li {
margin-right: 20px;
}
nav a {
color: #777104;
font-weight: bold;
text-decoration: none;
}
nav a:hover {
color: #e1e1e1;
}
</style>
</head>
<body>
{% block content %}
<form action="" method="POST" >
{% csrf_token %}
<div class="input-box">
<div class="title-input">
<input type="text"style="width: 500px;"name="title" placeholder="请输入正标题">
</div>
<textarea name="text" cols="30" rows="40" placeholder="正文"></textarea>
<input type="submit" value="发布">
</div>
</form>
{% endblock %}
</body>
</html>
models.py文件里的代码
from django.db import models
import datetime
from django.utils import timezone
# Create your models here.
class Upcontent(models.Model):
title=models.CharField(max_length=100, null=False, blank=False)
text=models.TextField(null=False, blank=True, default='')
def __str__(self):
if self.title is not None:
return self.title
else:
return "Untitled"
settings.py文件里要做的操作
在INSTALLED_APPS内添加 'app01',
以上是能完成输入输出数据的一个网站基本功能的。