設計一個微博網頁，包括前端後臺，用戶能夠註冊登陸，同時發微博，查看別人的微博，看自己的名片，退出等功能。效果如下：
（1）註冊登陸界面
（2） 進去之後查看微博（包括評論發表日期等）
（3）自己發微博
（3）自己的名片，個人信息
（4）退出之後返回主頁面
步驟：
1. 安裝django ，驗證在命令行 cmd: import django; django.get_version();
2. django-admin startproject <Project Name>
目錄中會出現manage.py文件
3. python manage.py startapp <APP Name>
4. python manage.py runserver 80
5. 在你的<APP>目錄下建立文件夾/static/ 用於存放靜態文件，建立/templates/用於存放js，bootstrap，img等。
6. 我們在<Project>目錄，或者根目錄下，找到setting.py文件，在INSTALLED_APP 中添加APP，（注意逗號）。在TEMPLATES的DIRS添加模板路徑，'DIR':['/templates/']. 其他地方不變。
在html文件可以直接調用'/static/xx.img'或者'/static/js/jquery-1.11.2.min.js'，效果如下：
7. 在<APP>目錄下views.py添加函數，比如
def home(request):
return render(request,"homepage.html")
來進行網頁與後臺交互（渲染）
8. 最後在<Project>目錄下找到url.py。在utlpattern中添加 from <APP> import views.home
path('',home) (注意是函數名，不加括號)
如何完成html與views.py的交互。在views.py的函數中添加字典user，並且在render函數中添加參數{"ref":user}。在html中用{{user.XX}}來引用，比如：
def show_user(request):
customer1 = { 'Name': 'Bruce Lee',
'motto': "HuHuHaHi",
'email': '[email protected]',
'region': 'Kyoto, Japan',
'avatar': 'Po2.jpg'
}
return render(request,"user.html",{"user":customer1})
<h1 style="font-size:70px">{{user.name}}</h1>
9. 編寫models orm數據存儲模塊，比如我們建立一個1對1的表Wechatuser,再建立一個1對N的表Status，它們都必須繼承models.Model. CASCADE表示相關聯的表會被一起刪除。
from django.contrib.auth.models import User
class Wechatuser(models.Model):
user = models.OneToOneField(User,models.CASCADE)#del
motto = models.CharField(max_length = 100, null=True, blank = True)
image = models.CharField(max_length=50, null=True, blank=True)#最大字符長度50，允許爲空
region = models.CharField(max_length=60, null=True, blank=True)
def __str__(self):
return self.user.username #以用戶名字爲唯一標識符
class Status(models.Model):
user = models.ForeignKey(Wechatuser,models.CASCADE)
webot = models.CharField(max_length = 280)
pics = models.CharField(max_length=100, null=True, blank=True)
time = models.DateTimeField(auto_now_add = True)
def __str__(self):
return self.webot
class Meta:
ordering = ["id"]
如果改爲-id就是逆序,接着python manage.py makemigrations進行代碼移植
Migrations for 'moments':
moments\migrations\0001_initial.py
- Create model Wechatuser
- Create model Status
這個0001_initial.py就是python版sql語言。
接着python manage.py migrate
10. ok 接下來我們需要管理數據庫 <DB>爲數據庫名
在<APP>下有個admin.py，我們將自己的表進行“註冊”
admin.site.register(<DB>)
11. 創建超級管理員進行管理
python manage.py createsuperuser 按照提示操作
12. 在views.py文件
status = <DB>.objects.all()訪問所有數據庫對象
python斷點調試
import pdb
pdb.set_trace() 在作用域內訪問各種變量
在html中對某個block，想讓它一個接一個展示(假設傳入的字典名字爲status)：
{%for s in status%}
{%endfor%}
{%if status.pics%}
登錄模塊
from django.contrib.auth.views import LoginView, LogoutView
path('',LoginView.as_view(template_name="homepage.html")),
path('exit',LogoutView.as_view(next_page="/")),
對於登錄模塊，<form>加入method=“post”
爲了防止跨域攻擊，在下面加入一句話 {%csrf_token%}
爲了避免退出登錄後還能進入原來界面，from django.contrib.auth.decorators import login_required
在views.py相關函數前加入一句@login_required
def submit_post(request):
user= Wechatuser.objects.get(user=request.user)
text= request.POST.get("text")
upload_file = request.FILES.get("pics")
# import pdb; pdb.set_trace()
if upload_file:
name = upload_file.name
with open("./moments/static/image/{}".format(name),'wb') as handler:
for chunk in upload_file.chunks():
handler.write(chunk)
else:
name = ""
if text:
status = Status(user=user,webot=text,pics=name)
status.save()
return redirect("/status")
return render(request,"my_post.html")
上述代碼能夠獲取用戶在頁面POST的信息，並加入到status網頁中。
實現用戶註冊功能
1. 創建用戶 user = User(name="",email="")
user.set_password("")
user.save()
User.objects.create(user="",email="")
json.dump()
json.load()
2. 在views.py寫register函數
注意拋出錯誤，返回是以JSON的形式 Javascript Object Notation專門針對JS對象。類似字典
def register(request):
username,email,password = [request.POST.get(k) for k in ("username","email","password")]
try:
user = User(username=username, email=email)
user.set_password(password)
user.save()
Wechatuser.objects.create(user=user)
except Exception as err:
message = str(err)
result = False
else:
message = "Register OK"
result = True
return JsonResponse({"message":message,"result":result})
3.自己寫post測試
import requests
data = {
"username":"Hacker",
"password":"YOUAREHACKED",
"email":"[email protected]",
"csrfmiddlewaretoken":"vnb6x6Py5aq0gqbfJKf3GG1qLafpQ6rgiRYHA5cYP192jNFADXPwft0QLCUccMgw",
}
cookies= {"csrftoken":"p0WgAJyd9B5EbKkLlPu56cSPp8P1ZU0NcuJRDIVDTsOGe7O6f24yFZRfpAuOlAP3",
}
r = requests.post("http://localhost/register",data=data,cookies = cookies)
print(r.text)
4.jQuery:
$("#register_name")獲取用戶輸入 其中#表示一個選擇器，id="register_name"，不帶#, 如果要選擇一個類class就是$(".register_name")
表示標籤，如input。 如果我們想獲取標籤input中的name屬性
#("input[name]").val()即可
使用ajax異步請求獲得客戶的註冊信息：
<script>
function register(){
$.ajax({
url:"/register",
type:"post",
data:{
"username":$("#register_name").val(),
"email":$("#register_email").val(),
"password":$("#register_password").val(),
"csrfmiddlewaretoken":$("input[name='csrfmiddlewaretoken']").val(),
},
success: function(response){
alert(response["message"])};
location.reload();
})
}
$("#register_submit").click(function(){
register()
})
</script>
注意的是，爲了安全性，需要進行csrf校驗，在表單下如果有{% csrf_token%} 則會自動轉換爲input標籤，我們通過$("input[name=csrfmiddlewaretoken]")就可以查到它。可以F12去在網頁上找到。 一般地，自己寫個py，還需要cookies，在Chrome的application標籤可以找到。 這裏的location.reload()保證客戶刷新網頁之後，之前填寫表單會刷新。若註冊成功則會彈出對話框。
button標籤改爲a標籤，移去type="submit"屬性
接下來實現用戶可以更改自己的名片功能.
1.首先要做的就是利用jQuery實現我們想要的功能： 調用replaceWith方法$("#name").replaceWith("<input>")還需要添加style屬性，我們可以利用attr("style")來獲取原來的樣式，把字體改成灰色即可。同時 id , placeholder, value均可以更改。可以用.html(）獲取value，注意，標籤<>內的賦值是用單引號，而單引號內必須爲字符串，所以如果用了jQuery函數，必須加雙引號來變爲字符串。同python可以用“+”實現字符串拼接。有一些使用split來實現分割，trim去除前後空格。
實現簡易評論功能