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之再深点,更懂list
Sep 20 Python
Python操作Word批量生成文章的方法
Jul 28 Python
Python网络编程中urllib2模块的用法总结
Jul 12 Python
python的pdb调试命令的命令整理及实例
Jul 12 Python
python 集合 并集、交集 Series list set 转换的实例
May 29 Python
详解python中的线程与线程池
May 10 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
Aug 30 Python
利用Python的turtle库绘制玫瑰教程
Nov 23 Python
PyTorch实现AlexNet示例
Jan 14 Python
Python 读取WAV音频文件 画频谱的实例
Mar 14 Python
Python学习之路安装pycharm的教程详解
Jun 17 Python
Python基于template实现字符串替换
Nov 27 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 文件上传模型,支持多文件上传
2009/08/13 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
客户端静态页面玩分页
2006/06/26 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
Python 监测文件是否更新的方法
2019/06/10 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
公司中秋节活动方案
2014/02/12 职场文书
学生会部长竞聘书
2014/03/31 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
手机销售员岗位职责
2015/04/11 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python