Django---简易贴吧

最新推荐文章于 2022-11-28 00:00:17 发布

CaiJin1217

最新推荐文章于 2022-11-28 00:00:17 发布

阅读量778

点赞数 3

分类专栏： Python---Django PythonLittleCase

本文链接：https://blog.csdn.net/CaiJin1217/article/details/80184778

版权

PythonLittleCase 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Python---Django

5 篇文章 0 订阅

订阅专栏

1、views.py文件：

from django.shortcuts import render
from app1.models import UserInfo,ConcentInfo,HeadImgInfo
# 引入分页
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
# 密码加密
from django.contrib.auth.hashers import make_password,check_password
# 引入时间
import time
import os
# 引入随机数
import re
import random
# Create your views here.
#跳转到首页
def gotoIndex(request):
    uId=request.GET.get("uId")
    allConcentDatas=ConcentInfo.objects.all()
    for i in allConcentDatas:
        i.uId=UserInfo.objects.get(uId=i.uId).uName
    return render(request,'index.html',{"allConcentDatas":allConcentDatas})
    pass
#跳转到注册页面
import json
def toregist(request):
    headImgInfo=HeadImgInfo.objects.all()
    #验证码
    list1=["a","b","c","d","e","f","g"]
    list2=['1','2','3','4','5','6','7','8','9','0']  
    list3=['A','B','C','D','E','F','G']
    #索引 
    num1=random.randint(0,len(list1)-1)
    num2=random.randint(0,len(list2)-1)
    num3=random.randint(0,len(list3)-1)
    num4=random.randint(0,len(list1)-1)
    str1=list1[num1]+list2[num2]+list3[num3]+list1[num4]
    #设置缓存
    request.session['str1']=str1
    print(str1)
    list1=[]
    for i in headImgInfo:
        list1.append(i.hname)
    return render(request,'register.html',{"hname":json.dumps(list1),'str1':str1})
    pass

#注册
def register(request):
    uId=request.POST.get("uId")
    uName=request.POST.get("uName")
    upassWd=request.POST.get("upassWd")
    # 密码加密
    psd1=make_password(upassWd,None,'pbkdf2_sha256')
    usex=request.POST.get("usex")
    uage=request.POST.get("uage")
    uhobby=request.POST.get("uhobby")
    usign=request.POST.get("usign")
    utel=request.POST.get("utel")
    userInfo=UserInfo.objects.all()
    # 获取验证码
    putyzm=request.POST.get("putyzm")
    str1=request.session['str1']
    print(putyzm)
    if str1==putyzm:
            # 上传头像
        f1=request.FILES.get('upimg',None)
        upload_folder='E:/2018中软实训/Python/第七周/贴吧/postBar1/app1/static/headPic'
        if not os.path.exists(upload_folder):
            os.mkdir(upload_folder) 
        path=os.path.join(upload_folder,str(f1))
        # print(path)
        with open(path,'wb+') as pic:
            for p in f1.chunks():
                # print(p)
                pic.write(p)
            #添加信息存在
        if str(f1)=="None":
            return render(request,'register.html',{"msg":"未上传头像！！"})
        else:       
            if UserInfo(uName=uName):
                    #添加信息不重复
                if UserInfo.objects.filter(uName=uName):
                    return render(request,'register.html',{"msg":"用户名重名"})

                else:
                    UserInfo(uId=uId,uName=uName,upassWd=psd1,usex=usex,uage=uage,uhobby=uhobby,usign=usign,utel=utel).save()
                    # 保存数据记录到数据库里
                    request.session['uName']=uName
                    uId=UserInfo.objects.get(uName=uName).uId
                    request.session['uId']=uId
                    HeadImgInfo(himg=upload_folder+'/%s'%str(f1),hname=f1,uId=uId).save()
                    return render(request,'demo2.html',{"msg":"注册成功！！"})
            else:
                return render(request,'register.html',{"msg":"注册失败！！"})
    else:
        return render(request,'register.html',{"msg":"验证码失败！！"})


#首页搜索
def dosousuo(request):
    #获取客户端数据
    shuru=request.GET.get("shuru")
    print(shuru)
    uId=request.GET.get("uId")
    # allConcentDatas=ConcentInfo.objects.all()
    allConcentDatas=ConcentInfo.objects.filter(ctitle__contains=shuru)
    for i in allConcentDatas:
        i.uId=UserInfo.objects.get(uId=i.uId).uName
    return render(request,'index.html',{"allConcentDatas":allConcentDatas})
    pass


def gotoregister(request):
    return render(request,'demo2.html') 

# 登录
def gotologin(request):
    return render(request,'login.html')
# 登陆成功并跳转个人中心界面
def dologin(request):   
    uName=request.GET.get("uName")
    upassWd=request.GET.get("upassWd")
    # psd=UserInfo.objects.get(uName=uName).upassWd
    # print(psd)
    # for i in userdata:
    #   print(i.upassWd)
    psd2=make_password('123456',None,'pbkdf2_sha256')
    ifs=check_password(upassWd,psd2)
    if UserInfo.objects.filter(uName=uName) and ifs:        
        request.session['uName']=uName
        uId=UserInfo.objects.get(uName=uName).uId
        request.session['uId']=uId
        userInfo=UserInfo.objects.get(uId=uId)
        headImgInfo=HeadImgInfo.objects.get(uId=uId)
        return render(request,'user/userInfo.html',{"msg":"登录成功",'userInfo':userInfo,'headImgInfo':headImgInfo})
    else:
        return render(request,'login.html',{"msg":"用户名不存在或密码错误"})
# 跳转修改界面
def gotouUpdateUser(request):
    uId=request.session['uId']
    #通过用户id改
    userdata=UserInfo.objects.get(uId=uId)
    return render(request,'user/updateUserInfo.html',{'userdata':userdata})
# 修改个人信息
def UpdateUserInfo(request):
    uId=request.session['uId']
    uName=request.GET.get('uName')
    usex=request.GET.get('usex')
    uage=request.GET.get('uage')
    uhobby=request.GET.get('uhobby')
    usign=request.GET.get('usign')
    utel=request.GET.get('utel')        
    # #通过用户id改
    # userdata=UserInfo.objects.get(uId=1)
    #修改
    if UserInfo(usex=usex,uage=uage,uhobby=uhobby,usign=usign,utel=utel):       
        UserInfo.objects.filter(uId=uId).update(usex=usex,uage=uage,uhobby=uhobby,usign=usign,utel=utel)
    userInfo=UserInfo.objects.get(uId=uId)
    headImgInfo=HeadImgInfo.objects.get(uId=uId)
    return render(request,'user/userInfo.html',{"userInfo":userInfo,"headImgInfo":headImgInfo})
# 跳转查看我发表的内容界面
def gotoShowText(request):
    uId=request.session['uId']
    concentInfo=ConcentInfo.objects.filter(uId=uId)
    pagesize=4
    pages=Paginator(concentInfo,pagesize)
    p=request.GET.get("p")
    try:
        pageDatas=pages.page(p)
    except PageNotAnInteger:
        pageDatas=pages.page(1)
    except EmptyPage:
        pageDatas=pages.page(pages.num_pages)
    return render(request,'user/showText.html',{'concentInfo':pageDatas})


# 搜索标题
def searchTxt(request):
    #获取客户端数据
    uId=request.session['uId']
    concentInfo=ConcentInfo.objects.filter(uId=uId)
    searchTxt=request.GET.get("searchTxt")
    print(searchTxt)
    concentInfo=ConcentInfo.objects.filter(ctitle__contains=searchTxt,uId=uId)
    print(concentInfo)
    pagesize=4
    pages=Paginator(concentInfo,pagesize)
    p=request.GET.get("p")
    try:
        pageDatas=pages.page(p)
    except PageNotAnInteger:
        pageDatas=pages.page(1)
    except EmptyPage:
        pageDatas=pages.page(pages.num_pages)
    return render(request,'user/showText.html',{'concentInfo':pageDatas})
# 删除
def gotoDeleteConcent(request):
    cId=request.GET.get("cId")
    ConcentInfo.objects.filter(cId=cId).delete()
    uId=request.session['uId']
    concentInfo=ConcentInfo.objects.filter(uId=uId)
    return render(request,'user/showText.html',{'concentInfo':concentInfo})
# 批量删除
def deleteAll(request):
    cIds=request.GET.get("cIds")
    ConcentInfo.objects.extra(where=['cId in ('+cIds+')']).delete()
    uId=request.session['uId']
    concentInfo=ConcentInfo.objects.filter(uId=uId)
    return render(request,'user/showText.html',{'concentInfo':concentInfo})

#跳转到发帖页面
def gotoAddText(request):
    uId=request.session['uId']
    return render(request,'user/addText.html')
# 添加帖子内容发帖操作
def addText(request):
    #获取客户端数据
    uId=request.session['uId']
    ctitle=request.GET.get("ctitle")
    concent=request.GET.get("concent")
    ctime=time.strftime('%Y-%m-%d %H:%M:%S',time.localtime())
    userInfo=UserInfo.objects.get(uId=uId)
    headImgInfo=HeadImgInfo.objects.get(uId=uId)
    #保存数据
    if ConcentInfo(uId=uId,ctitle=ctitle,concent=concent,ctime=ctime):
        ConcentInfo(uId=uId,ctitle=ctitle,concent=concent,ctime=ctime).save()
        return render(request,'user/userInfo.html',{"msg":"发布成功","userInfo":userInfo,"headImgInfo":headImgInfo})
    else:
        return render(request,'user/userInfo.html',{"msg":"发布失败","userInfo":userInfo})
# 修改帖子内容
#跳转到修改页面
def gotoUpdateText(request):
    #获取客户端数据
    cId=request.GET.get("cId")
    #获取数据库数据
    concentInfo=ConcentInfo.objects.get(cId=cId)
    return render(request,'user/updateText.html',{'concentInfo':concentInfo})

#进行修改操作：
def updateText(request):
    cId=request.GET.get("cId")
    ctitle=request.GET.get("ctitle")
    concent=request.GET.get("concent")
    ctime=time.strftime('%Y-%m-%d %H:%M:%S',time.localtime())
    ConcentInfo.objects.filter(cId=cId).update(ctitle=ctitle,concent=concent,ctime=ctime)
    uId=request.session['uId']
    concentInfo=ConcentInfo.objects.filter(uId=uId)
    pagesize=4
    pages=Paginator(concentInfo,pagesize)
    p=request.GET.get("p")
    try:
        pageDatas=pages.page(p)
    except PageNotAnInteger:
        pageDatas=pages.page(1)
    except EmptyPage:
        pageDatas=pages.page(pages.num_pages)
    return render(request,'user/showText.html',{'concentInfo':pageDatas})

#点击取消返回个人中心
def backuserInfo(request):
    uId=request.session['uId']
    userInfo=UserInfo.objects.get(uId=uId)
    headImgInfo=HeadImgInfo.objects.get(uId=uId)
    return render(request,'user/userInfo.html',{'userInfo':userInfo,'headImgInfo':headImgInfo})

2、models.py文件：（配置生成数据库）

#创建用户信息表
class UserInfo(models.Model):
    # 用户ID
    uId=models.AutoField('uId',primary_key=True)
    # 用户姓名
    uName=models.CharField('uName',max_length=30)
    # 用户密码
    upassWd=models.CharField('upassWd',max_length=255)
    # 用户性别
    usex=models.CharField('usex',max_length=10)
    # 用户年龄
    uage=models.CharField('uage',max_length=10)
    # 用户兴趣
    uhobby=models.CharField('uhobby',max_length=100)
    # 用户个性签名
    usign=models.CharField('usign',max_length=300)
    # 用户电话
    utel=models.CharField('utel',max_length=20)
    pass
class ConcentInfo(models.Model):
    # 帖子ID
    cId=models.AutoField('cId',primary_key=True)
    # 用户ID
    uId=models.CharField('uId',max_length=30)
    # 帖子标题
    ctitle=models.CharField('ctitle',max_length=50)
    # 帖子内容
    concent=models.CharField('concent',max_length=800)
    # 发表时间
    ctime=models.DateTimeField('ctime',max_length=30)
    pass
# 头像信息表
class HeadImgInfo(models.Model):
    hId=models.AutoField('hId',primary_key=True)
    himg=models.ImageField('himg')
    hname=models.CharField('hnameh',max_length=30)
    uId=models.CharField('uId',max_length=30)

3、settings.py文件：(配置数据库连接，使用mysql数据库)

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'postbar',
        'POST':'3306',
        'HOST':'localhost',
        'USER':'root',
        'PASSWORD':'1',
    }
}

4、urls.py 文件：

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from app1 import views as app1_v

urlpatterns = [
    url('admin/', admin.site.urls),
    url('^$', app1_v.gotoIndex),
    url('gotoIndex', app1_v.gotoIndex),
    url('toregist', app1_v.toregist),
    url('register', app1_v.register),
    url('gotoregister', app1_v.gotoregister),
    url('dologin', app1_v.dologin),
    url('gotologin', app1_v.gotologin),
    # url('gotoUserInfo', app1_v.gotoUserInfo),
    url('gotouUpdateUser', app1_v.gotouUpdateUser),
    url('UpdateUserInfo', app1_v.UpdateUserInfo),
    url('gotoShowText', app1_v.gotoShowText),
    url('searchTxt', app1_v.searchTxt),
    url('gotoDeleteConcent', app1_v.gotoDeleteConcent),
    url('deleteAll', app1_v.deleteAll),
    url('gotoAddText', app1_v.gotoAddText),
    url('addText', app1_v.addText),
    url('gotoUpdateText', app1_v.gotoUpdateText),
    url('updateText', app1_v.updateText),
    url('backuserInfo', app1_v.backuserInfo),
    url('dosousuo', app1_v.dosousuo),


]

5、html 文件：

(1)贴吧首页

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="/static/css/index.css">
</head>
<body>

<div class="all"><h1>{{msg}}</h1>
    <div class="header">
        <div class="logo"></div>
        <p class="title">猎奇贴吧</p>
        <ul class="header_ul">
            <li><a href="#">首页</a></li>
            <li><a href="gotologin">登录</a></li>
            <li><a href="toregist">注册</a></li>
        </ul>
    </div>
    <div class="body">
        <div class="left">
        <p class="concent2">精彩内容</p>
            {% for i in allConcentDatas %}
            <div class="concent1">
                <p class="p1">用户:{{i.uId}}</p>
                <p class="p2">发表时间:{{i.ctime}}</p>
                <p class="p3">标题:<strong>{{i.ctitle}}</strong></p>
                <div class="p4">{{i.concent}}</div>
            </div>
            {% endfor %}
            </div>
        <div class="right">
        <form action="/dosousuo/" method="get">
            <input class="shuru" type="text" name="shuru" placeholder="请输入搜索关键字">
            <input class="sousuo" type="submit" name="" value="搜索">

                <p class="guess">猜你喜欢</p><br>
                <div class="tuijian">

                    <p class="tuijian_title"><a href="">标题:<strong>中国空军“战神”宣传片</strong></a></p>
                <div class="tuijian_concent"><a href="">中国空军4月19热向海内外发布闽南话版和英文版“战神”宣传片...</a></div>
                    <p class="tuijian_title"><a href="">标题:<strong>关晓彤为鹿晗庆生</strong></a></p>
                <div class="tuijian_concent"><a href="">4月20日关晓彤零点为鹿晗准时送上甜蜜祝福，并晒出鹿晗搞怪照片...</a></div>
                    <p class="tuijian_title"><a href="">标题:<strong>北上广不再是首选</strong></a></p>
                <div class="tuijian_concent"><a href="">深圳成为95后人才求职最热门城市，其次是广州和成都，深圳的活力标签得到了新时代年轻人的认同...</a></div><a href=""></a>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>

———————————–css———————————-

*{padding: 0;margin: 0}
.all{width: 100%;height: 700px;border: 1px solid black;float: left;background:url("/static/img/1.jpg");background-size: 100% 100%;}
.header{/*box-shadow: 15px 15px 15px black;*/width: 100%;height: 60px;border: 0px solid blue;float: left;margin-top: 80px;background:rgba(255,255,255,0.6);}
.logo{width: 80px;height: 60px;background:url("/static/img/88.jpg");background-size:100% 100%;margin-left: 100px;float: left;}
.title{font-size: 50px;font-family: "华文行楷";float: left;margin: 10px 0 0 10px;}
.header_ul{float: left;margin-left: 600px;}
.header_ul li{width: 80px;height: 60px;float: left;list-style: none;border: 0px solid #000;text-align:center;line-height: 60px;}
.header_ul li a{display: block;text-decoration: none;font-size: 18px;font-weight: bold;color: black;}
.body{background:rgba(0,0,0,0.2);width: 1150px;height: 480px;border: 1px solid black;float: left;margin: 40px 0 0 100px;}
.left{overflow:scroll; background:rgba(255,255,255,0.3);/*box-shadow: 15px 15px 15px black;*/width: 700px;height: 460px;border:1px solid black;float: left;margin: 9px 0 0 9px;}
.shuru{width: 250px;height: 30px;float: left;margin: 19px 0 0 20px;}
.sousuo{width: 80px;height: 30px;margin: 20px 0 0 20px;float: left;}
.guess{float: left;margin: 80px 0 0 -350px;font-size: 20px;color: orange;}
.tuijian{background:rgba(255,255,255,0.4);float: left;width: 400px;height: 345px;border: 1px solid black;margin:15px 0 0 20px; }
.concent2{color: #0078D7;margin: 10px 0 0 10px;font-size: 20px;}
.concent1{background:rgba(255,255,255,0.8);width: 650px;height: 120px;border:1px solid #ccc;margin: 10px 0 0 20px;float: left;}
.p1{float: left;margin: 10px 0 0 10px;}
.p2{float: right;margin: 10px 10px 0 0;font-size: 12px;color: #1A8BE8;}
.p3{float: left;margin: 4px 0 0 10px;display: block;width: 640px;height: 15px;}
.left .concent1 .p4{background:rgba(227,247,134,0.5);width:620px;height:50px;border:0px solid #ccc;float: left;margin: 13px 0 0 15px;font-size: 14px;}
.tuijian_title{float: left;margin: 10px 0 0 10px;}
.tuijian_concent{float: left;margin: 3px 0 0 10px;font-size: 14px;}

（2）注册

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            span{color: black;}
            #div1{width: 100%;height: 750px; background:url("/static/img/4.jpg") no-repeat;background-size: 100% 100%;margin: -81px 0 0 0px;}
            #div2 #p1{float: left;margin: -95px 0 0 80px ;width: 200px;font-size: 25px;font-family: "华文行楷";}
            #form1{background:rgba(255,255,255,0.3);border:0px solid #357FC4;color: #575454;width: 600px;position: relative;top: 145px;left: 384px;height: 600px;box-shadow: 5px 5px 10px #fff;border-radius: 15px;}
            #div3 #p2{float: left;margin:20px 0 10px 210px;font-size: 35px;font-family: "华文行楷";color: black;}
            table{margin:10px auto;border: 0px solid red;}
            input[type='submit']{background: aqua;color: white;width: 120px;height: 40px;font-size: 15px;font-weight: bold;position: relative;left: 190px;bottom: -8px;}
            #p3{float: left;margin: -90px 0 0 650px;color: red;}
            /*table tr{margin: 15px 0 0 0;}*/
            #uId,#uName,#upassWd,#uage,#uhobby,#usign,#utel,#yzm{width: 270px;height: 25px;border-radius: 9px;}
            input{margin-top: 10px;}
            #btn{margin: 10px 0 0 -20px;border-radius: 10px;}
            #yzm{color: black;}
            #st{font-size: 28px;}
        </style>
    </head>
<body>
    <div id="div1"> 
        <div id="div2">
            <p id="p1">猎奇贴吧用户注册</p>
        </div>
    <div id="div3">
        <form action="/register/" enctype="multipart/form-data" method="post" id="form1">
            {% csrf_token %}

            <p id="p2">注册新账号</p><br>
            <table>
                <tr>
                    <td>头像：</td>
                    <td>
                        <div style="position:relative;width:100px;height:100px;">

                            <p style="width:100px;height:100px;background:url(../../static/img/headimg.png);background-size: 100% 100%; border-radius:15%;">
                            <img id="imgSrc" style=" display: none;  width:100px;height:100px;" src=""> 
                            </p>

                            <input id="up" style="width:100px;height:100px;border-radius:15%;position:absolute;left:0;top:0;opacity:0;" type="file" name="upimg">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><span>姓名:</span></td>
                    <td><input type="text" name="uName" id="uName" required placeholder="请输入用户名"><br></td>
                </tr>
                <tr>
                    <td><span>密码:</span></td>
                    <td><input type="password" id="upassWd" name="upassWd" value="" placeholder="请输入6-16位密码" required /><br></td>
                </tr>
                <tr>
                    <td><span>性别:</span></td>
                    <td><input type="radio" id="usex1" name="usex" value="男" checked="checked"/>
                    <label for="usex1">男</label>
                    <input type="radio" id="usex2" name="usex" value="女"/>
                    <label for="usex2">女</label><br></td>
                </tr>
                <tr>
                    <td><span>年龄:</span></td><td><input type="text" name="uage" id="uage" required> <br></td>
                </tr>
                <tr>
                    <td><span>兴趣:</span></td><td><input type="text" name="uhobby" id="uhobby"><br></td>
                </tr>
                <tr>
                    <td><span>个性签名:</span></td><td><input type="text" id="usign" name="usign" value="" /> <br></td>
                </tr>
                <tr>
                    <td><span>手机:</span></td><td><input type="text" name="utel" id="utel"><br></td>
                </tr>
                <tr>
                    <td>验证码：</td>
                    <td ><input id="yzm" type="text" placeholder="请输入验证码！" name="putyzm"></td>
                    <td id="st">{{str1}}</td>
                </tr>
                <tr>
                    <td><input type="submit" id="btn" value="注册"/></td>
                </tr>

            </table>
        </form>
     </div>         
</div>
<p id="p3">{{msg}}</p> 
</body>
    <script type="text/javascript">
        var upassWd=document.getElementById("upassWd");
        var uId=document.getElementById("uId");
        var utel=document.getElementById("utel");
        var uName=document.getElementById("uName");
        var btn=document.getElementById("btn");
        var flag1=false,
            flag2=false,
            flag3=false;
        // 验证电话号码
        btn.onclick=function(){
            验证账号
        var ema=uId.value;
        var tre=/^((\d){2,16})$/;
        if(tre.test(ema)){
            flag2=true;
        }else{
            alert("uId error");
        }

            var tval=utel.value;
            var treg=/^1[3-8]\d{9}$/;
            if(treg.test(tval)){
                flag1=true;
            }else{
                alert("utel error");
            } 
    //  验证密码
                var ps=upassWd.value;
                var tr=/^[a-z0-9]{6,16}$/;
                if(ps.length>=6&&ps.length<=16)
                {
                    if(tr.test(ps)){
                    flag2=true;
                }
                }else{
                    alert("密码长度有误");
                }
                if(flag1 && flag2)
                {
                    form1.action="/register/";
                }
            }
        var up=document.getElementById("up");
        var imgSrc=document.getElementById("imgSrc");
        var list1={{hname | safe}}
        up.onchange=function(){
            var urlImgArr=this.value.split("\\").length
            var urlImg=this.value.split("\\")[urlImgArr-1]
            for(var i=0;i<list1.length;i++){
                if(urlImg==list1[i]){
                    console.log(urlImg)
                    imgSrc.style.display = "block";
                    imgSrc.src="../static/headPic/"+urlImg;
                }
            }

        }
    </script>

</html>

—————————————注册成功提示界面—————————

<!DOCTYPE html>
<html> 
<head>
<meta charset="utf-8">
    <title></title>
    <style type="text/css">
    *{padding: 0;margin:0;}
        div{margin:100px 550px;float: left;width: 400px;height: 200px;border:0px solid #83D843;}
        div .p1{float: left;margin:0 0 0 0 ;color: green;font-family: "华文行楷";font-size: 25px;text-align: center; }
        div input{float: left;margin:80px 0 0 -135px ;width: 80px;height: 30px;font-size: 15px;}
    </style>    
</head>
<body>
<div>
    <p class="p1">恭喜您，注册成功</p>
<form action="/gotologin/">
    <input type="submit" value="去登录">
</form>

</div>

</body>
</html>

（3）登陆

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        body{margin: 0;padding: 0;}
        .all{width: 100%;height: 670px; background:url("/static/img/4.jpg") no-repeat;background-size: 100% 100%;margin: -50px 0 0 0px;}
            /*h1{font-family: "华文行楷";}*/
            .div1{width: 450px;height: 350px;border: 0px solid red;/*margin:150px 0 0 200px;*/background:rgba(255,255,255,0.4);box-shadow: 5px 5px 10px #fff;border-radius: 15px;position: relative;top: 130px;left: 430px;}
            h1{color: blueviolet;/*margin: 50px 0 0 180px;*/font-family: "华文行楷";font-size: 40px;color: black;position: relative;top: 20px;left: 186px;}
            .div2{width: 450px;height: 80px;margin: 30px 0 0 0;}
            #text1{width: 400px;height: 30px;margin: 0 0 0 0;font-size: 16px;margin: 0 0 0 20px;border-radius: 10px;}
            #text2{width: 400px;height: 30px;margin: 5px 0 0 0;font-size: 16px;margin: 15px 0 0 20px;border-radius: 10px;}
            #btn1{width: 405px;height: 40px;margin: 28px 0 0 18px;background: cornflowerblue;font-size: 16px;color: whitesmoke;border-radius: 10px;}
            p{margin: 30px 0 0 350px;font-size: 14px;}
        </style>
    </head>
    <body>
        <div class="all">
            <div class="div1" id="div1">
                <h1>登录</h1>
                <form action="/dologin/" method="get">
                    <div class="div2" id="div2">
                        <input id="text1" type="text" placeholder="请输入用户名" required name="uName" /><br />
                        <input id="text2" type="password" placeholder="请输入密码" required name="upassWd" />
                    </div>
                    <input type="submit" value="确认登录" id="btn1">
                </form>
                {{msg}}
                <p><a href="#">忘记密码</a></p>

            </div>
        </div>  
    </body>
    <script type="text/javascript">
        var btn1=document.getElementById("btn1")

    </script>
</html>

（4）个人中心

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>个人中心</title>
        {% load staticfiles %}
        <link rel="stylesheet" type="text/css" href="{% static 'css/userInfo.css' %}">
    </head>
    <body>
        <h2>Hello~用户{{userInfo.uName}}</h2>
        <div class="box" id="box">
            <h1>个人中心</h1>
            <div class="userInfoBox" id="userInfoBox">
                <div class="userImg" id="userImg">
                    <img src="../static/headPic/{{headImgInfo.hname}}" />
                </div>
                <div class="userInfo">
                    <h2 class="userName" id="userName">用户名:{{userInfo.uName}}</h2>
                    <p class="userSex" id="userSex">性别:{{userInfo.usex}}</p>
                    <p class="userAge" id="userAge">年龄:{{userInfo.uage}}</p>
                    <p class="userHobby" id="userHobby">兴趣:{{userInfo.uhobby}}</p>
                    <p class="userSign" id="userSign">个人签名:{{userInfo.usign}}</p>
                    <!-- <input class="updateA" id="updateA" onclick="javascript:gotoUpdateUser({{i.uId}})" type="button" value=""> -->
                    <a href="#" class="updateA" id="updateA" onclick="javascript:gotoUpdateUser({{userInfo.uId}})">修改</a>
                </div>              
            </div>
            <div class="menu" id="menu">
                <p><a href="/gotoAddText">发表新帖</a></p>
                <p><a href="/gotoShowText?uId={{userInfo.uId}}">查看我发表的内容</a></p>                
            </div>
        </div>      
    </body>
    <script type="text/javascript" src="{% static 'js/jquery1.7.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/userInfo.js' %}"></script>
</html>

——————————css———————————–

*{margin: 0px;padding: 0;}
body{
    background:url(../../static/img/1.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 800px;
}
h2{font-family: "黑体";color: white;}
.box{
    border: 0px solid red;
    width: 1300px;
    float: left;
    margin: 0px 75px;
    background-color: white;
    background:rgba(255,255,255,0.6);
}
h1{margin: 0px auto;width: 170px;font-family: "楷体";}
.userInfoBox{
    border: 1px solid black;
    width: 1200px;
    height: 200px;
    float: left;
    margin: 0px 50px;
}
.userImg{
    border: 1px solid black;
    width: 150px;
    height: 150px;
    margin: 25px 0px 0px 50px;
    float: left;
}
.userImg img{
    width: 150px;
    height: 150px;
}
.userInfo{
    border: 0px solid blueviolet;
    width: 890px;
    /*height: 150px;*/
    margin: 25px 0px 0px 50px;
    float: left;
}
.userName{color:white;font-family: "楷体";}
.userSex,.userAge,.userHobby{
    color: black;
    font-size:20px;
    float: left;
    width: 100px;
    margin-left: 80px;
    border: 0px solid blueviolet;

}
.userHobby{width: 300px;}
.userSign{
    color: black;
    font-size:15px;
    width: 685px;
    height: 50px;
    float: left;
    margin: 5px 0px 0px 80px;
    border: 0px solid blueviolet;
}
.userInfoBox .userInfo .updateA{float: right;}
a{text-decoration: none; font-size:18px; color: black;}
.menu{
    width: 1200px;
    height: 50px;
    margin: 0px auto;
}
.menu p{
    width: 200px;
    float: left;
    border: 0px solid black;
}

——————————————js——————————————

// 跳转用户个人信息修改
function gotoUpdateUser(uId){
    location="/gotouUpdateUser/?uId="+uId;
}

（5）发表新帖

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>发表新帖</title>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/addText.css' %}">
</head>
<body>
<div id="box">
<h1>发表新帖</h1>
<form action="/addText/" method="get">
    <p>标题：</p><br><input class="Title" type="text" name="ctitle" placeholder="标题" required><br>
    <p>内容：</p><br><textarea required name="concent"></textarea><br>
        <input class="submit" id="submit" onclick="javascript:put()" type="submit" value="发布">  

</form> 
{{msg}}
</div>
</body>
    <script type="text/javascript" src="{% static 'js/addText.js' %}"></script>
</html>

—————————css————————————

*{margin: 0;padding: 0;}
body
{
    background:url(../../static/img/5.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 800px;
}
#box
{
    float: left;
    width: 850px;
    height: 400px;
    margin: 50px 20%;
    border: 0px solid black;
    background:rgba(255,255,255,0.5);
    border-radius: 15px;
    box-shadow: 5px 5px 10px white;
}
#box h1
{
    font-size: 35px;
    font-family: "华文行楷";
    float: left;
    margin: 35px 0 0 42.5%;
}
#box .Title
{
    float: left;
    margin: -54px 0 0 30%;
    width: 400px;
    height: 30px;
}
#box textarea
{
    float: left;
    margin: -50px 0 0 30%;
    width: 400px;
    height: 100px;
    float: left;
}
#box p
{
    float: left;
    margin: 30px 25%;
}
#box .submit
{
    width: 100px;
    height: 30px;
    float: right;
    margin: 30px 230px 0 0;
}

———————————js——————————–

function put()
{
    alert("发布成功");
}

(6)查看发表内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>展示个人贴</title>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/showText.css' %}">
</head>
<body>
<div id="box">
    <h1>展示个人帖</h1>
    <form action="/searchTxt/" method="get">
        <input id="searchTxt" type="text" name="searchTxt" required placeholder="请输入要搜索的帖子标题">
        <input type="submit" id="submit1" value="搜索">
    </form>
    <div class="btn" id="btn">
        <input onclick="javascript:deleteAll()" type="button" id="deleteBtn" value="批量删除">
        <input onclick="javascript:checkedAll()" type="button" id="allBtn" value="全选">
        <input onclick="javascript:reverseCheck()" type="button" id="backBtn" value="反选">
    </div>

    <table id="tab" border="1">
        <tr>
            <td>选择</td>
            <td>序号</td>
            <td width="150px">标题</td>
            <td width="300px">内容</td>
            <td>操作</td>
        </tr>
        {% for i in concentInfo %}
        <tr>

            <td>
                <input type="checkbox" class="check" id="check" value="{{i.cId}}">
            </td>
            <td>{{i.cId}}</td>
            <td>{{i.ctitle}}</td>
            <td>{{i.concent}}</td>
            <td>
                <input onclick="javascript:gotoDeleteConcent({{i.cId}})" type="button" value="删除">
                <input onclick="javascript:gotoUpdateText({{i.cId}})" type="button" value="修改">
            </td>
        </tr>
        {% endfor %}
    </table>
    <!-- 分页 -->
    <div>
        {% if concentInfo.has_previous %}
            <a href="?p={{concentInfo.previous_page_number}}&searTxt={{searTxt}}">上一页</a>
        {% endif %}
        {% for item in concentInfo.paginator.page_range %}
        <a href="?p={{item}}&searTxt={{searTxt}}">{{item}}</a>
        {% endfor %}
        {% if concentInfo.has_next %}
            <a href="?p={{concentInfo.next_page_number}}&searTxt={{searTxt}}">下一页</a>
        {% endif %}
    </div>
</div>
</body>
    <script type="text/javascript" src="{% static 'js/jquery1.7.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/showText.js' %}"></script>
</html>

————————-css———————–

*{margin: 0;padding: 0;}
body{
    background:url(../../static/img/2.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 800px;
}
h1{margin-top: 30px;
    font-size: 40px;
    font-family: "华文行楷";}
#box{
    float: left;
    width: 1100px;
    height: 600px;
    border: 0px solid red;
    text-align: center;
    background-color: lightblue;
    margin: 10px 135px;
    background: rgba(255,255,255,0.4);border-radius: 15px;
    box-shadow: 5px 5px 10px white;
}
/*搜索框*/
#searchTxt{
    width:400px; 
    height: 30px;
    margin-top: 30px;
}
#tab{
    width: 800px;
    margin-left:150px;
}
#btn{
    margin: 10px 0 10px 610px;
}
#submit1{width: 70px;height: 34px;}

———————-js————————-

var check = $(".check")
//全部选中
function checkedAll(){  
    for(var i=0;i<check.length;i++){
        check[i].checked=true;
    }               
}
// 反选
function reverseCheck(){
    for(var i=0;i<check.length;i++){
        if(check[i].checked==true){
            check[i].checked=false
        }
        else{
            check[i].checked=true
        }           
    }
}
// 删除
function gotoDeleteConcent(cId){
    if(confirm('确定删除吗！！')){

        location="/gotoDeleteConcent/?cId="+cId;
    }
}
// 批量删除
function deleteAll(){
    var str1=""
    var count=0
    for(var i=0;i<check.length;i++){
        if(check[i].checked==true){
            count++;
            str1+=check[i].value+',';
        }
    }
    if(count>0){
        str2=str1.substring(0,str1.length-1);   
        location="/deleteAll/?cIds="+str2;
    }else{
        alert('未选中！！！')
    }

}
//跳转编辑界面
function gotoUpdateText(cId)
{
    location='/gotoUpdateText/?cId='+cId;
}

（7）修改帖子内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>修改页面</title>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/updateText.css'%}">
</head>
<body>
<div id="box">
<h1>修改页面</h1>
<form action="/updateText/" method="get">
    <input type="hidden" name="cId" value="{{concentInfo.cId}}">
    <p>标题：</p><input class="Title" type="text" name="ctitle" value="{{concentInfo.ctitle}}" required><br>
    <p>内容：</p><br><textarea name="concent">{{concentInfo.concent}}</textarea><br>
    <input onclick="javascript:updateTxt()" class="submit" type="submit" value="修改">
    </form>     
</div>
</body>
    <script type="text/javascript" src="{% static 'js/jquery1.7.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/updateText.js' %}"></script>
</html>

—————————-css—————————

*{margin: 0;padding: 0;}
body
{
    background:url(../../static/img/4.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 800px;
}
#box
{
    float: left;
    width: 850px;
    height: 400px;
    margin: 50px 20%;
    border: 0px solid black;
    background:rgba(255,255,255,0.5);
    border-radius: 15px;
    box-shadow: 5px 5px 10px white;
}
#box h1
{
    font-size: 40px;
    font-family: "华文行楷";
    float: left;
    margin: 35px 0 0 42.5%;
}
#box .Title
{
    float: left;
    margin: -54px 0 0 30%;
    width: 400px;
    height: 30px;
}
#box textarea
{
    float: left;
    margin: -50px 0 0 30%;
    width: 400px;
    height: 100px;
    float: left;
}
#box p
{
    float: left;
    margin: 30px 25%;
}
#box .submit
{
    width: 100px;
    height: 30px;
    float: right;
    margin: 30px 193px 0 0;
}

————————–js————————-

var submit = $(".submit")
function updateTxt () {
    alert('修改成功！！')
}

（8）修改个人信息

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>修改个人信息</title>
        {% load staticfiles %}
        <link rel="stylesheet" type="text/css" href="{% static 'css/updateUserInfo.css'%}">
    </head>
    <body>
        <div id="all">
            <form action="/UpdateUserInfo/" method="get">
                <h1>修改个人信息</h1>
                <input id='UsersexID' type="hidden" value="{{userdata.usex}}">
                <input  type="hidden" value="{{userdata.uId}}" name="uId">
                    <div id="userNameBox">
                        用户名:{{userdata.uName}}
                    </div>
                    <div id="userSexBox">
                        <span id="spanSex">性别:</span>
                        <input type="radio" id="usex1" name="usex" value="男"  /><label for="usex" >男</label>
                        <input type="radio" id="usex2" name="usex" value="女"  /><label for="usex" >女</label>
                    </div>                  
                        年龄:
                        <input type="text" value="{{userdata.uage}}" name="uage" id="userAge"/><br>
                        兴趣:
                        <input type="text" value="{{userdata.uhobby}}" name="uhobby" id="userHobby"/><br>           
                        签名:<input type="text" id="userSign" name="usign" value="{{userdata.usign}}" /><br>
                        电话:<input type="text" id="utel" name="utel" value="{{userdata.utel}}" /><br>
                        <input type="submit" value="修改" id="updateBtn"/>
                    <!--返回个人中心-->
                <form action="/backuserInfo/" method="get">
                        <input type="submit" value="取消" id="fanhuigeren"  />
                </form>
            </form> 

            </div>
        </div>
    </body>
    <script type="text/javascript" src="{% static 'js/jquery1.7.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/updateuserInfo.js' %}"></script>
</html>

—————————css——————————

*{padding: 0;margin: 0;}
#all{
    width: 100%;
    float: left;
    border: 0px solid black;
}
h1{
    color: black;
    font-family: "华文行楷";
    margin: 30px 0 50px 0;
    font-size: 35px;
}
body{
    background: url("/static/img/3.jpg") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 700px;

}
#all form{padding-top: 20px;
    background: rgba(255,255,255,0.3);
    width: 400px;
    height: 400px;
    border: 0px solid black;
    margin: 30px auto;
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
    box-shadow: 5px 5px 10px white;
}
form input{width: 160px;height: 25px;}
#userNameBox{margin-top: -26px;}
#updateBtn{width: 55px;height: 30px;}
#fanhuigeren{width: 55px;height: 30px;}
#usex1,#usex2{width: 30px;height: 10px;margin: 0 0 0 0 ;}
form span,label{margin-top: -10px;}

————————–js—————————————

//获取男女性别
$(function(){

    var UsersexID=document.getElementById("UsersexID");
    var usex=document.getElementsByName("usex");
    var updateBtn=document.getElementById('updateBtn')
    console.log(updateBtn);
    if (UsersexID.value=="男"){

        usex[0].checked=true;
    }
    else if (UsersexID.value=="女"){

        usex[1].checked=true;
    }
    updateBtn.onclick=function(){
        alert('修改成功！！！');
    }
})

CaiJin1217

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Django---简易贴吧

1、views.py文件： from django.shortcuts import renderfrom app1.models import UserInfo,ConcentInfo,HeadImgInfo# 引入分页from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger# 密码加密fro...
复制链接

扫一扫