django实现前后台交互实例

更新时间：2017年08月07日 11:02:03 作者：zhubaoJay

本篇文章主要介绍了django实现前后台交互实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了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));

页面演示：

刚打开页面如下：

输入数据，点击保存：

后台查看数据库：

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

python如何处理matlab的mat数据
这篇文章主要介绍了python如何处理matlab的mat数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
一文详解python如何将编写的模块打包上传至pypi
我们此前花了很大功夫写了一个极其简单的web框架myWeb,想要给别人用的时候，需要让别人拷贝源代码才行，这太low了，所以本篇文章会介绍如何将自己写的模块打包上传至pypi，以便让需要的人通过pip进行安装，感兴趣的同学可以参考阅读
2023-05-05
pycharm中django框架连接mysql数据库的方法
这篇文章主要介绍了pycharm中django框架连接mysql数据库的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
Python实现爬取房源信息的示例详解
站在一个租房人的立场，租房平台实在太多了，并且各平台筛选和排序逻辑都不太一致。这篇文章将教教大家如何利用Python语言实现爬取房源信息，需要的可以参考一下
2022-09-09
最近Python有点火? 给你7个学习它的理由!
最近Python有点火？这篇文章主要为大家分享了7个你现在就该学习Python的理由，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
python神经网络Keras实现LSTM及其参数量详解
这篇文章主要为大家介绍了python神经网络Keras实现LSTM及其参数量详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-05-05
Python常用base64 md5 aes des crc32加密解密方法汇总
这篇文章主要介绍了Python常用base64 md5 aes des crc32加密解密方法汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
前女友发来加密的"520快乐.pdf",我用python破解开之后,却发现
520收到前女友发来的加密PDF文件,说打开之后有惊喜,难道是要复合?我用python破解开之后,却发现...python干货+剧情满满收藏收藏
2021-08-08
如何基于Python实现一个庆祝国庆节的小程序
这篇文章主要介绍了如何基于Python实现一个庆祝国庆节的小程序,增加了互动选择祝福语、查询信息、播放背景音乐及趣味小测验等功能,使用tkinter增强GUI,提升用户互动体验,需要的朋友可以参考下
2024-09-09
PyTorch中的train()、eval()和no_grad()的使用
本文主要介绍了PyTorch中的train()、eval()和no_grad()的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04

django实现前后台交互实例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具