Django中如何完成easyUI 表格資料的增刪改?
阿新 • • 發佈:2019-02-15
摘要:Django是Python中很流行的web框架,本文介紹django 中如何利用easyUI實現資料表格的增刪改
系統介面:
1. 建立django應用(省略)
2. django與MySQL聯接
2.1設定資料庫
在setting中設定資料庫連線
我用的MySQL
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME':'mydjango',
'USER':'root',
'PASSWORD': 'xxxxx' ,
'HOST':'127.0.0.1',
'PORT':'3306',
}
}
再在專案的根目錄中的
import pymysql
pymysql.install_as_MySQLdb()
2.2建立資料表
在models中
class News(models.Model):
title = models.CharField(max_length=100)
date = models.CharField(max_length=20)
detail_time = models.CharField(max_length=20)
content = models.TextField()
url = models.URLField()
source = models.CharField(max_length=50)
web = models.CharField(max_length=50)
logtime = models.CharField(max_length=30)
cmd中完成資料表格建立
#第一步
python manage.py makemigrations [appname]
#第二步
python manage.py migrate [appname]
3. 主要應用程式碼
3.1 前端頁面程式碼 info.html
注:請忽略截圖中的地圖,這部分程式碼沒有在html中,但不影響應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>線上災情監測</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<!--各種樣式-->
<style>
.my-map{float:left; width: 50%; height: 600px;}
.amap-container{height: 100%;}
.text_title{margin: auto auto 10px 0; background: #2fa8ec; text-align:center}
</style>
</head>
<body >
<h1 class="text_title">網際網路新聞</h1>
<div class=" my-map">
<table id="dg" title="新聞列表" class="easyui-datagrid" style="width:100%;height:600px;"
url="/read/"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="news_title" width="50">新聞標題</th>
<th field="news_date" width="50">日期</th>
<th field="news_detail_time" width="50">時間</th>
<th field="news_content" width="50">新聞內容</th>
<th field="news_url" width="50">url地址</th>
<th field="news_source" width="50">釋出者</th>
<th field="news_web" width="50">來源網站</th>
<th field="news_logtime" width="50">獲取時間</th>
</tr>
</thead>
</table>
</div>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newNews()">新增新聞</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editNews()">編輯新聞</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyNews()">移除新聞</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
<div style="margin-bottom:20px;font-size:20px;border-bottom:1px solid #ccc">新聞詳情</div>
<div style="margin-bottom:10px">
<input name="news_title" class="easyui-textbox" required="true" label="新聞標題:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="news_date" class="easyui-textbox" required="true" label="日期:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="news_detail_time" class="easyui-textbox" required="true" label="時間:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="news_content" class="easyui-textbox" required="true" label="新聞內容:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="news_url" class="easyui-textbox" required="true" label="url地址:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="news_source" class="easyui-textbox" required="true" label="釋出者:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="news_web" class="easyui-textbox" required="true" label="來源網站:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="news_logtime" class="easyui-textbox" required="true" label="獲取時間:" style="width:100%">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveNews()" style="width:90px ">儲存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px" >取消</a>
</div>
<!--引入表格-->
<!--<script src="../static/js/table.js"></script>-->
<script type="text/javascript">
var url;
//顯示編輯框
function newNews(){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','新增新聞');
$('#fm').form('clear');
url = '/start/';
}
//編輯新聞
function editNews(){
var row = $('#dg').datagrid('getSelected');
console.log(row);
if (row){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit News');
$('#fm').form('load',row);
// ajax 編輯News 並且 通過ajax 儲存到後端 SQL
url = '/edit/'+row.news_id;
}
}
// 儲存新聞
function saveNews(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
if (result=="save"){
$('#dlg').dialog('close');
$('#dg').datagrid('reload');
}else
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the News data
}
}
});
}
//刪除新聞
function destroyNews(){
var row = $('#dg').datagrid('getSelected');
console.log(row);
if (row){
$.messager.confirm('再次確認','你確定要刪除這條新聞?',function(r){
if (r){
$.ajax({
url: '/remove/',
type: 'POST',
data: {'id':row.news_id},
success: function(data) {
if (data=="REMOVE"){
$('#dg').datagrid('reload');
}
},
error: function(data) {alert("error")}
});
}
});
}
}
</body>
</html>
3.2 後臺url.py中程式碼
from django.conf.urls import url
from django.contrib import admin
from blog import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^start/', views.app_start),
url(r'^read/', views.Read_all_SQL),
url(r'^edit/(?P<id>\d+)', views.Edit_NewsName),
url(r'^remove/', views.Remove_News_ID),
]
3.3 後臺views.py程式碼
from django.shortcuts import render, HttpResponse, HttpResponseRedirect
from blog import models
import json
import importlib, sys
importlib.reload(sys)
# Create your views here.
# indexl &
def index(request):
return HttpResponseRedirect("http://127.0.0.1:8000/start/")
# 查詢資料庫中的資料,並構造成json
def Read_all_SQL(request):
# 查詢資料
obj_all = models.News.objects.all()
eaList = []
for li in obj_all:
eaList.append({
"news_title": li.title,
"news_date": li.date,
"news_detail_time": li.detail_time,
"news_content": li.content,
"news_url": li.url,
"news_source": li.source,
"news_web": li.web,
"news_logtime": li.logtime,
"news_id": li.id})
# 將int型別使用dumps()方法轉為str型別
eaList_len = json.dumps(len(eaList))
# 構造一個字典
json_data_list = {'rows': eaList, 'total': eaList_len}
# dumps()將字典轉變為json形式,
easyList = json.dumps(json_data_list)
# 將json返回去,json的鍵值對中的鍵需要與前臺的表格field=“X”中的X名稱保持一致)
return HttpResponse(easyList)
# 編輯資料並post方法提交到資料庫
def Edit_NewsName(request, id):
print("這是編輯的:"+id)
print(request.method)
# 從前端獲取到輸入的資料
# POST.get('xxx')這個中的欄位是前端表格的<th field="news_title" width="50">新聞標題</th>中的field一致
if request.method == 'POST':
title = request.POST.get('news_title')
date = request.POST.get('news_date')
detail_time = request.POST.get('news_detail_time')
content = request.POST.get('news_content')
url = request.POST.get('news_url')
source = request.POST.get('news_source')
web = request.POST.get('news_web')
logtime = request.POST.get('news_logtime')
# 構造字典並轉成json,這裡的鍵需要與資料庫的欄位一致
dic = {
"title": title,
"date": date,
"detail_time": detail_time,
"content": content,
"url": url,
"source": source,
"web": web,
"logtime": logtime,
};
print(dic)
models.News.objects.filter(id=id).update(**dic)
return HttpResponse("Edit_OK")
# 增加資料與start_app
def app_start(request):
# add_save_News
if request.method == "POST":
print("POST")
print(request.POST)
title = request.POST.get('news_title')
date = request.POST.get('news_date')
detail_time = request.POST.get('news_detail_time')
content = request.POST.get('news_content')
url = request.POST.get('news_url')
source = request.POST.get('news_source')
web = request.POST.get('news_web')
logtime = request.POST.get('news_logtime')
# 構造字典並轉成json,這裡的鍵需要與資料庫的欄位一致
dic = {
"title": title,
"date": date,
"detail_time": detail_time,
"content": content,
"url": url,
"source": source,
"web": web,
"logtime": logtime,
};
models.News.objects.create(**dic)
return HttpResponse("save")
else:
print(" is null_!")
return render(request, 'info.html')
# 移除資料
def Remove_News_ID(request):
if request.method == "POST":
print("REMOVE POST")
id = request.POST.get('id')
print(id)
models.News.objects.filter(id=id).delete()
return HttpResponse("REMOVE")
注意:ajax在互動資料時候涉及到CSRF安全防護的問題,可以在setting.py中禁用相關的模組 # ‘django.middleware.csrf.CsrfViewMiddleware’,
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]