简单说一下功能：
1. 用户可以在页面上查看、新建用户列表；
2. 用户信息包括：用户名、编号；
3. 编辑和删除后续再做。
直接上代码：
index.html
<!DOCTYPE html><html><head><script type="text/javascript" src="/WebApi/scripts/jquery/dist/jquery.min.js"></script><link href="/WebApi/scripts/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="/WebApi/scripts/bootstrap/dist/js/bootstrap.min.js"></script><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><script>$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body ng-app="myApp" ng-controller="myCtrl"><div style="postion: auto"><h2>hello world!</h2><p>hello</p><p>hello world</p><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#saveModal" ng-click="showContent()">新建</button><div class="modal fade" id="saveModal" tabindex="-1" role="dialog" aria-labelledby="saveModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="saveModalLabel">新建用户</h4></div><div class="modal-body"><table><tr><td><div class="form-group"><input type="text" class="form-control" id="name" placeholder="请输入编号" ng-model="number"></div></td></tr><tr><td><div class="form-group"><input type="text" class="form-control" id="name" placeholder="请输入用户名" ng-model="username"></div></td></tr></table></div><div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="saveInfo()">保存</button><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></div></div><!-- /.modal-content --></div><!-- /.modal --></div><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" ng-click="showContent()">查看</button><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">用户列表</h4></div><div class="modal-body"><table class="table"><tr><th>用户名</td><th>地址</td></tr><tr ng-repeat="item in contentList"><td>[[ item.username ]]</td><td>[[ item.number ]]</td></tr></table></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></div></div><!-- /.modal-content --></div><!-- /.modal --></div></div></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.contentList = "";$scope.saveInfo = function() {console.log($scope.username);console.log($scope.number);service.saveInfo($scope.username, $scope.number, function(response){console.log(response);$scope.result = response.result;});$scope.username = "";$scope.number = "";};$scope.showContent = function(){service.getContent(function(response){$scope.contentList = response;console.log($scope.contentList);});}}]);
service.js
app.service("service", ["$http", function($http) {this.saveInfo = function(username, number, callback) {$http({method: 'POST',url: '/saveInfo',data: {'username': username,'number': number},headers: {'Content-Type': undefined},}).success(function(response){callback(response);});};this.getContent = function(callback){$http({method: 'GET',url: '/getContent',headers: {'Content-Type': undefined},}).success(function(response){callback(response);});}}]);
urls.py
from django.conf.urls import patterns, include, urlurlpatterns = patterns('app.views',url(r'^index$', 'index'),url(r'^index$', 'index'),url(r'^$', 'index'),url(r'^/$', 'index'),url(r'^saveInfo$', 'do_save_info'),url(r'^getContent$', 'get_content'),)
views.py
from django.shortcuts import render_to_responsefrom django.template import RequestContextfrom django.http import HttpResponsefrom django.views.decorators.csrf import ensure_csrf_cookie, csrf_exemptimport jsonimport models# Create your views here.@ensure_csrf_cookiedef index(request):#return HttpResponse('<h1>zhubaoxiang</h1>')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)number = data.get("number", None)models.do_save_info(username, number)except Exception, e:result['result'] = 'save error'return HttpResponse(json.dumps(result))def get_content(request):result = {'errCode': 0, 'errMsg': ''}result = models.get_content()return HttpResponse(json.dumps(result))
models.py
#!/bin/python# -*- coding: utf-8 -*-import osimport sysimport sqlite3def do_save_info(username, number):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, number) values('%s', '%s')" % (username, number)conn.execute(sql)mit()conn.close()print 'save success...'except Exception, e:print '------', str(e)try:conn.close()except Exception, e:passdef get_content():db_path = os.path.normpath('/home/zhubao/Code/django_code/hello/db.sqlite3')content_list = []try:conn = sqlite3.connect(db_path)cur = conn.cursor()sql = "select id, username, number from t_user order by id desc"cur.execute(sql)rows = cur.fetchall()print rowscur.close()conn.close()for row in rows:content_list.append({'id': row[0], 'username': row[1], 'number': row[2]})return content_listexcept Exception, e:print '------', str(e)try:conn.close()except Exception, e:pass
利用上班闲暇时间写的一个小例子，代码惨不忍睹，有时间优化一下，包括：
1. 前端布局；
2. 前端参数校验；
3. 查看分页处理；
4. 后端参数校验；
5. 操作数据库接口优化；
6. 异常处理；
7. 编辑，删除功能。
