django实现前后台交互实例


Posted in Python onAugust 07, 2017

本文介绍了django实现前后台交互实例,分享给大家,希望对大家有所帮助

准备工作:

前端框架:AngularJS+bootstap

数据库: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表结构:

create table t_user(username varchar(255), password varchar(255));

页面演示:

刚打开页面如下:

django实现前后台交互实例

输入数据,点击保存:

django实现前后台交互实例

后台查看数据库:

django实现前后台交互实例

可以看到,已经保存在数据库里面了。

这只是个小示例,在此不考虑页面排版和安全性问题。。。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python两种遍历字典(dict)的方法比较
May 29 Python
Python基于回溯法子集树模板解决数字组合问题实例
Sep 02 Python
Python实现求数列和的方法示例
Jan 12 Python
Python-while 计算100以内奇数和的方法
Jun 11 Python
Python实现基于SVM的分类器的方法
Jul 19 Python
Python将列表中的元素转化为数字并排序的示例
Dec 25 Python
Python request使用方法及问题总结
Apr 26 Python
TensorFlow固化模型的实现操作
May 26 Python
基于python纯函数实现井字棋游戏
May 27 Python
如何使用Django Admin管理后台导入CSV
Nov 06 Python
Python的logging模块基本用法
Dec 24 Python
pandas 实现将NaN转换为None
May 14 Python
python扫描proxy并获取可用代理ip的实例
Aug 07 #Python
python的多重继承的理解
Aug 06 #Python
python中 chr unichr ord函数的实例详解
Aug 06 #Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
Aug 05 #Python
Python实现将Excel转换为json的方法示例
Aug 05 #Python
Python实现抓取网页生成Excel文件的方法示例
Aug 05 #Python
Python基于Socket实现的简单聊天程序示例
Aug 05 #Python
You might like
十天学会php(1)
2006/10/09 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
医药专业推荐信
2013/11/15 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
社区中秋节活动方案
2014/01/29 职场文书
专项法律服务方案
2014/06/11 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python