当前访客身份:游客 [ 登录  | 注册加入尚学堂]
启用新域名sxt.cn
新闻资讯

backbonejs mvc框架的增删查改实例

我来了! 发表于 2年前  | 评论(0 )| 阅读次数(623 )|   0 人收藏此文章,   我要收藏

一:开发环境

coffeescript和nodejs需要先安装,没装网上自己查安装步骤。

代码编写环境及esp框架下载:

esp框架下载地址:https://github.com/nonocast/esp.git

在下载目录执行安装命令:npm install esp

这样开发环境就已经安装好了。

二:backbonejs 增删查改实例代码

backbonejs的学习可以网上下载电子书“backbonejs的入门教程”,及http://backbonejs.org/官网上学习

1:html部分

结构是由一个编辑模版和一个table行模版组成。

 
body ->
  div 'header', -> 'BACKBONEJS MVC DEMO'
  div 'add-block', ->
    input type:'button',id:'addbtn',value:'添加'
    span id: "showblock", style:'display:none;', ->
      text '姓名:'
      input type:text,id:'a-name'
      text '性别:'
      input type:text,id:'a-gender'
      text '科目:'
      input type:text,id:'a-subject'
      text '成绩:'
      input type:text,id:'a-score'
      input type:'button',id:'savebtn',value:'保存'
  table ->
    caption '学生成绩汇总列表'
    tr ->
      th style:'width:10%;', -> '编号'
      th style:'width:15%;', -> '姓名'
      th style:'width:15%;', -> '性别'
      th style:'width:15%;', -> '科目'
      th style:'width:15%;', -> '成绩'
      th style:'width:20%;', -> '操作'
    script type:'text/template',id:'trtemplate', ->
      tr 'tr<%=id%>', ->
        td 'id<%=id%>', -> '<%=id%>'
        td 'name<%=id%>', -> '<%=name%>'
        td 'gender<%=id%>', -> '<%=gender%>'
        td 'subject<%=id%>', -> '<%=subject%>'
        td 'score<%=id%>', -> '<%=score%>'
        td 'do', ->
          a id:'tredit<%=id%>', href:'#',->'编辑'
          a id:'trdelete<%=id%>', href:'#',->'删除'

    script type:'text/template',id:'edittemplate', ->
      tr 'tr<%=id%>', ->
        td 'id', ->'<%=id%>'
        td 'name', ->
          input 'name<%=id%>',type:'text',value:'<%=name%>'
        td 'gender', ->
          input 'gender<%=id%>',type:'text',value:'<%=gender%>'
        td 'subject', ->
          input 'subject<%=id%>',type:'text',value:'<%=subject%>'
        td 'score', ->
          input 'score<%=id%>',type:'text',value:'<%=score%>'
        td 'do', ->
          a id:'save<%=id%>', href:'#',->'确认'



2:js mvc框架部分

M---model(类结构)

C----collection(数据集合)

V----View(页面级别的,与页面绑定,事件的绑定等)

 

Model的defaults可以是一些默认的类型结构,也可以什么默认结构都没有,自己在使用过程中定义类型结构,在Model模块中主要是为了某个属性发生变化时触发所绑定的事件功能。

在Collection模块中,url主要是与后台交互的接口,所有的数据交互都通过此url,提交的数据带有id的此框架会自动转为PUT协议, 没有id的新增数据为Post协议,挺奇怪的吧

model表明该Collection是上面$model类型结构的集合

View模块中,el:表明该页面级要操作的元素的区域,最大也就为body了。在view中操作的元素都需要包含在此el中,有点象作用域

events:此处元素事件绑定,注:此处绑定的事件需要涉及的dom元素在执行到该处时就已经载入,比如模块中的编辑删除按钮就不能在这里绑定事件,因为这些按钮在view初始化后的构造函数中render才呈现出来,此时绑定会找不到这些元素。

that = @   @为this指针,this指向当前的view,在很多地方用到该句来备份指针,目的是在单击等事件里的指针会发生变化,会指向当前的元素,用that以便能调用view内定义的方法.

新增一条记录时,需要手动加入到collection里面,再提交到后台,可以用collection.create新增记录,也可以通过 model来创建一条记录,然后手动添加到collection,此时需要走model的url来save,而不是collection的url来 save,如下:

 
saveclick: -> that = @   #此处的备份指针,以便能调用view内定义的方法,在单击等事件里的指针会发生变化,指向当前的元素
            #n =new $model 通过model创建的数据保存到后台之后(需要走model里的url到后台),需要在collection手动加入该条记录,而通过collction先创建这条记录(走collection
            #的url到后台),不需要再手动添加
            @collection.create {name:$("#a-name").val(), gender:$("#a-gender").val(),subject:$("#a-subject").val(),score:$("#a-score").val()},
              success:(mod,res) -> e = _.template $("#trtemplate").html()
                $("table").append(e mod.attributes)
                i = mod.get "id" $("#tredit"+i).click -> that.editclick i
                $("#trdelete"+i).click -> that.deleteclick i
                $("#showblock").css("display","none")
              error: -> alert 'error'



 

三:esp后台代码

 
esp = require 'esp' esp.route -> data = []
  data.push {id:1,name:'测试1',gender:'male',subject:'语文',score:'80'}
  data.push {id:2,name:'测试2',gender:'male',subject:'数学',score:'90'}
  data.push {id:3,name:'测试3',gender:'male',subject:'英语',score:'88'}
  data.push {id:4,name:'测试4',gender:'male',subject:'语文',score:'70'}
  data.push {id:5,name:'测试5',gender:'male',subject:'数学',score:'90'}

  @get '/', ->@view 'home' @get '/data', -> @json data

  @post '/data', -> i = data[data.length-1].id+1 model = {}
    d = '' @request.on 'data',(chunk) -> d += chunk
    @request.on 'end', => obj = JSON.parse d
      console.log obj
      model = {id:i,name:obj.name,gender:obj.gender,subject:obj.subject,score:obj.score}
      data.push model
      @json model

  @delete '/data/:id', -> for each, i in data if each.id.toString() is @id
        data.splice i,1 @json id:@id

  @put '/data/:id', -> d = '' @request.on 'data',(chunk) -> d += chunk
    @request.on 'end', => obj = JSON.parse d
      console.log obj.name for each, i in data if each.id == obj.id
          each.name = obj.name
          each.gender = obj.gender
          each.subject = obj.subject
          each.score = obj.score
          @json each 



 

四:实现页面效果

以上实现了一个简单增删改的实例,练习了backbonejs mvc框架的使用。有些描述是自己的理解,有不正确的地方望大伙指正。

分享到:0
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
声明:博客文章版权属于原创作者,受法律保护。如果侵犯了您的权利,请联系管理员,我们将及时删除!
(邮箱:webmaster#sxt.cn(#换为@))
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183