django 前后台交互实例

最新推荐文章于 2024-07-17 11:47:37 发布

zhubaoJay

最新推荐文章于 2024-07-17 11:47:37 发布

阅读量1w

点赞数 1

分类专栏： django 文章标签： django

本文链接：https://blog.csdn.net/zhubaoJay/article/details/64128769

版权

django 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

准备工作：

前端框架：angularJS+bootstap

数据库：sqlite3

前端代码：

index.html

<!DOCTYPE html>
<html>
    <head>
        <link href="/WebApi/scripts/bootstrap/dist/css/bootstrap.min.css" 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));

页面演示：

刚打开页面如下：

输入数据，点击保存：

后台查看数据库：

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

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

zhubaoJay

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
django 前后台交互实例

准备工作：前端框架：angularJS+bootstap数据库：sqlite3前端代码：index.html hello hello world! -->
复制链接

扫一扫

专栏目录