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('修改成功!!!');
}
})