Django implements front-end and back-end interaction instances

Django implements front-end and back-end interaction instances

This article introduces django's front-end and back-end interactive instances and shares them with you, hoping to help you.

Preparations:

Front-end framework: AngularJS + bootstap

Database: sqlite3

Front-end code:
Index.html

<! DOCTYPE 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);     });   }; }]); 
Backend code:

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 table structure:

create table t_user(username varchar(255), password varchar(255)); 
Page Demonstration:

The page is as follows:


Enter data and click Save:


View the database in the background:

As you can see, it is saved in the database.

This is just a small example. The page layout and security issues are not considered here...

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.