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中优化NumPy包使用性能的教程
Apr 23 Python
利用python爬取软考试题之ip自动代理
Mar 28 Python
利用python将xml文件解析成html文件的实现方法
Dec 22 Python
Python+树莓派+YOLO打造一款人工智能照相机
Jan 02 Python
Python 输入一个数字判断成绩分数等级的方法
Nov 15 Python
Python二进制文件读取并转换为浮点数详解
Jun 25 Python
python+tkinter实现学生管理系统
Aug 20 Python
python、PyTorch图像读取与numpy转换实例
Jan 13 Python
python误差棒图errorbar()函数实例解析
Feb 11 Python
python 比较字典value的最大值的几种方法
Apr 17 Python
python接口自动化之ConfigParser配置文件的使用详解
Aug 03 Python
Jupyter notebook 更改文件打开的默认路径操作
May 21 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
理解javascript正则表达式
2016/03/08 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
JavaScript错误处理操作实例详解
2019/01/04 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python集合删除多种方法详解
2020/02/10 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
办公室文员工作职责
2014/01/31 职场文书
公司联欢会策划方案
2014/05/19 职场文书
大学学生会辞职信
2015/05/13 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
个人售房合同协议书
2016/03/21 职场文书
django上传文件的三种方式
2021/04/29 Python
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
MySQL日期时间函数知识汇总
2022/03/17 MySQL
vue动态绑定style样式
2022/04/20 Vue.js