AireadFan's

   Fragments of memories

Airead-manager-outline-step6

| Comments

前端与后端交互

修改 world.coffee

world.coffee 增加增删改查函数,如下

(world.coffee) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
define ['./base', 'jQuery'], (indexCtlModule, $) ->
  # 模块名称应该与本文件名相同,用来保证controller不会相同
  # [controller 名称], [url 前端路由], [模版文件名称] 都与 moduleName 相关

  # 模块名称 world
  #   controller 名称: worldCtl
  #   注册的路由为: world
  #   模版为 static/templates/world.html
  moduleName = 'world'
  console.log "#{moduleName} init"
  indexCtlModule.controller "#{moduleName}Ctl",
    [
      '$scope',
      '$http'  # 注入 $http 服务
      ($scope, $http) ->  # 使用 $http
        $scope.pageTitle = 'World Title'  # 子页面 title
        $scope.content = 'hello world'
        $scope.serverData = ''  # 定义 serverData
        $scope.persons = []  # 当前存在的 persons,未查找前初始化为0

        $http.get '/hello/'  # http get /hello/
        .success (data) ->  # 如果请求成功
            console.log 'receive data: ', data
            $scope.serverData = data  # 赋值

        # 获取 persons 函数
        $scope.query = () ->
          url = '/persons/'
          $http.get url
          .success (data) ->
              console.log 'receive data: ', data
              $scope.persons = data
          .error (err) ->
              console.log "get #{url} failed: ", err

        # 添加 person 函数
        $scope.add = (name) ->
          url = '/persons/'
          data = name: name
          console.log "post #{url} with ", data
          $http.post url, $.param(data)
          .success (data) ->
              console.log 'receive data: ', data
          .error (err) ->
              console.log "post #{url} faield:", err
          .finally () ->  # 添加后,再次查询
              $scope.query()

        # 删除 person 函数
        $scope.delete = (person) ->
          url = "/persons/#{person.id}?at=delete"
          console.log url
          $http.post url, {}
          .success (data) ->
              console.log 'receive data: ', data
          .error (err) ->
              console.log "post #{url} failed: ", err
          .finally () ->
              $scope.query()

        # 修改 person 函数
        $scope.modify = (person) ->
          url = "/persons/#{person.id}?at=put"
          data = name: person.name
          console.log "post #{url} with ", data
          $http.post url, $.param(data)
          .success (data) ->
              console.log 'receive data: ', data
          .error (err) ->
              console.log "post #{url} failed: ", err
          .finally () ->
              $scope.query()
    ]

  ret =  # static/coffee/routes 跟据这个返回值注册前端路由
    group: '学习'  # 定义这个模块包含于哪个大组
    item: 'item Hello'  # item 名称
    url: moduleName  # 注册的 url

  return ret

修改模版

让模版使用 world.coffee 中新加的函数,修改如下:

(world.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div class="item-main">
    <div class="row item-bar">
        <div class="col-md-2">
            <h4>{{ pageTitle }}</h4>
        </div>
        <div class="col-md-10">
            <button ng-click="query()" class="btn btn-primary">查询</button>
        </div>
    </div>
    <div class="row">
        <div class="item-sub-main">
            <h1 style="color: red">这里显示模版</h1>

            <p>内容 {{ content }}</p>

            <p>/hello/ 返回: {{ serverData }}</p>

            <div>
                添加人
                <label>人名</label>
                <input ng-model="person.name" type="text">
                <button ng-click="add(person.name)" class="btn btn-primary">添加</button>
            </div>

            <div>
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <td>ID</td>
                        <td>姓名</td>
                        <td>修改</td>
                        <td>删除</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="person in persons">
                        <td>{{ person.id }}</td>
                        <td><input ng-model="person.name" type="text"></td>
                        <td>
                            <button ng-click="modify(person)" class="btn btn-warning">修改</button>
                        </td>
                        <td>
                            <button ng-click="delete(person)" class="btn btn-danger">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

操作验证

  • 点击查询,可以查找数据库中已经存在的记录,在添加记录之前是没有记录的
  • 输入人名点击添加,可以添加一个人的记录
  • 在表中输入人名,就可以修改该人的名字

git checkout step6 查看源代码

airead-manager

« airead-manager-outline-step5 airead-manager-outline-step7 »

Comments