django實(shí)現(xiàn)前后臺交互實(shí)例
更新時間：2017年08月07日 11:02:03 作者：zhubaoJay
本篇文章主要介紹了django實(shí)現(xiàn)前后臺交互實(shí)例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了django實(shí)現(xiàn)前后臺交互實(shí)例，分享給大家，希望對大家有所幫助
準(zhǔn)備工作：
前端框架：AngularJS+bootstap
數(shù)據(jù)庫：sqlite3
前端代碼：
index.html
<!DOCTYPE html>
<html>
<head>
<link href="/WebApi/scripts/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/WebApi/scripts/angular/angular.min.js"></script>
<script type="text/javascript" src="/WebApi/controller/controller.js"></script>
<script type="text/javascript" src="/WebApi/service/service.js"></script>
<title>hello</title>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h2>hello world!</h2>
<!-- <form role="form"> -->
<table>
<tr>
<td>
<div class="form-group">
<input type="text" class="form-control" id="name"
placeholder="請輸入用戶名" ng-model="username">
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<input type="passwd" class="form-control" id="name"
placeholder="請輸入密碼" ng-model="password">
</div>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-primary" ng-click="my_submit()">保存</button>
</td>
</tr>
</table>
<!-- </form>
-->
<p class="text-danger">[[ result ]]</p>
</body>
</html>
controller.js
var app = angular.module("myApp", []);
app.config(
function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
})
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);
app.controller("myCtrl", ["$scope", "service", function($scope, service) {
$scope.result = "";
$scope.my_submit = function() {
console.log($scope.username);
console.log($scope.password);
service.do_save_info($scope.username, $scope.password, function(response){
console.log(response);
$scope.result = response.result;
});
};
}]);
service.js
app.service("service", ["$http", function($http) {
this.do_save_info = function(username, password, callback) {
$http({
method: 'POST',
url: '/do_save_info',
data: {
'username': username,
'password': password
},
headers: {'Content-Type': undefined},
}).success(function(response){
callback(response);
});
};
}]);
后端代碼：
urls.py
from django.conf.urls import patterns, include, url
urlpatterns = patterns('app.views',
url(r'^index$', 'index'),
url(r'^/index$', 'index'),
url(r'^$', 'index'),
url(r'^/$', 'index'),
url(r'^do_save_info$', 'do_save_info'),
)
views.py
from django.shortcuts import render_to_response
from django.template import RequestContext
from django.http import HttpResponse
from django.views.decorators.csrf import ensure_csrf_cookie, csrf_exempt
import json
import models
# Create your views here.
@ensure_csrf_cookie
def index(request):
return render_to_response('static/index.html',
context_instance=RequestContext(request))
def do_save_info(request):
result = {'result':'save success'}
try:
data = json.loads(request.body)
username = data.get("username", None)
password = data.get("password", None)
models.do_save_info(username, password)
except Exception, e:
result['result'] = 'save error'
return HttpResponse(json.dumps(result))
models.py
#!/bin/python
# -*- coding: utf-8 -*-
import os
import sys
import sqlite3
def do_save_info(username, password):
db_path = os.path.normpath('/home/zhubao/Code/django_code/hello/db.sqlite3')
try:
conn = sqlite3.connect(db_path)
sql = "insert into t_user(username, password) values('%s', '%s')" % (username, password)
conn.execute(sql)
conn.commit()
conn.close()
print 'save success...'
except Exception, e:
print '------', str(e)
try:
conn.close()
except Exception, e:
pass
t_user表結(jié)構(gòu)：
create table t_user(username varchar(255), password varchar(255));
頁面演示：
剛打開頁面如下：
輸入數(shù)據(jù)，點(diǎn)擊保存：
后臺查看數(shù)據(jù)庫：
可以看到，已經(jīng)保存在數(shù)據(jù)庫里面了。
這只是個小示例，在此不考慮頁面排版和安全性問題。。。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
python如何處理matlab的mat數(shù)據(jù)
這篇文章主要介紹了python如何處理matlab的mat數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
我們此前花了很大功夫?qū)懥艘粋€極其簡單的web框架myWeb,想要給別人用的時候，需要讓別人拷貝源代碼才行，這太low了，所以本篇文章會介紹如何將自己寫的模塊打包上傳至pypi，以便讓需要的人通過pip進(jìn)行安裝，感興趣的同學(xué)可以參考閱讀2023-05-05
pycharm中django框架連接mysql數(shù)據(jù)庫的方法
這篇文章主要介紹了pycharm中django框架連接mysql數(shù)據(jù)庫的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
Python實(shí)現(xiàn)爬取房源信息的示例詳解
站在一個租房人的立場，租房平臺實(shí)在太多了，并且各平臺篩選和排序邏輯都不太一致。這篇文章將教教大家如何利用Python語言實(shí)現(xiàn)爬取房源信息，需要的可以參考一下2022-09-09
最近Python有點(diǎn)火? 給你7個學(xué)習(xí)它的理由!
最近Python有點(diǎn)火？這篇文章主要為大家分享了7個你現(xiàn)在就該學(xué)習(xí)Python的理由，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
python神經(jīng)網(wǎng)絡(luò)Keras實(shí)現(xiàn)LSTM及其參數(shù)量詳解
這篇文章主要為大家介紹了python神經(jīng)網(wǎng)絡(luò)Keras實(shí)現(xiàn)LSTM及其參數(shù)量詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
Python常用base64 md5 aes des crc32加密解密方法匯總
這篇文章主要介紹了Python常用base64 md5 aes des crc32加密解密方法匯總,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
前女友發(fā)來加密的"520快樂.pdf",我用python破解開之后,卻發(fā)現(xiàn)
520收到前女友發(fā)來的加密PDF文件,說打開之后有驚喜,難道是要復(fù)合?我用python破解開之后,卻發(fā)現(xiàn)...python干貨+劇情滿滿收藏收藏2021-08-08
如何基于Python實(shí)現(xiàn)一個慶祝國慶節(jié)的小程序
這篇文章主要介紹了如何基于Python實(shí)現(xiàn)一個慶祝國慶節(jié)的小程序,增加了互動選擇祝福語、查詢信息、播放背景音樂及趣味小測驗(yàn)等功能,使用tkinter增強(qiáng)GUI,提升用戶互動體驗(yàn),需要的朋友可以參考下2024-09-09
PyTorch中的train()、eval()和no_grad()的使用
本文主要介紹了PyTorch中的train()、eval()和no_grad()的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04