angular js 添加功能 博客分类： java script

这次我们要添加一个版本更新功能在页面上输入版本号和连接点击按钮将版本信息提交到数据库中

要求每次提交都会覆盖之前的提交

 

<!--StartFragment--> <!--EndFragment-->

首先建立一个简单的页面 version_uodate.html.slim

 

.modal-header.pts.pbs
  .modal-title
    strong.mrh
      |  版本更新	 - (用于 iOS 端自动升级)



.modal-body 
	input.form-control[
		ng-model="versions" 
		placeholder="请输入版本"
		required
	]
	
	p

	input.form-control[
		ng-model="link" 
		placeholder="请输入连接"
		required
	]
	
    
.modal-footer
  	a.btn.btn-primary.btn-wide.pull-left ng-click='updateVersion()' ng-disabled='!versions || !link'
    	| 确定

 ng-disabled='!versions || !link'这一句是实现了上面text没有输入的话确定按钮将不可以点击！

 

 

<!--StartFragment-->

 

 

 

 

 

 好了 页面 我们是 使用的 slim  下面

 

 

 

在settings.js.coffee.erb 中写入这些内容

 

app = window.app

app.config ($stateProvider, $urlRouterProvider) ->

  $stateProvider.state("versionUpdate",
    url: '/version_update'
    controller: "SettingsCtrl"
    templateUrl: "<%= asset_path("settings/version_update.html.slim") %>"
  )
  return

 这里给versionUpdate 写一个路径

 

 

<!--StartFragment-->

 

 后端使用的ruby 这里写下api

 

更新的动作在api/v1这里settings.rb 输入如下内容

 

class API::V1::Settings < Grape::API
  include API::V1::Helpers

  doorkeeper_for :all

  before do
    # authenticate!
  end

  helpers do
    # def permitted_params
    #   ActionController::Parameters.new(params[:settlement]).permit(
    #     :amount, :customer_id, :user_id, :order_id, order_ids: [], pay_records: []
    #   ).tap do |hash|
    #     hash[:pay_records] = params[:settlement][:pay_records]
    #   end
    # end
  end

  resource :settings do


    desc "Update a version."
    put '/update' do 
      # 删除全部
      

      # 创建记录
      Setting.create!(
        version_number:params[:setting][:version_name],
        link:params[:setting][:link]
      )
      
    end
  end

end

忽略我注释的部分  忘记删掉了  这不是个好习惯

 

 

<!--StartFragment-->

 

文件位于controller下的settings.coffee 文件中

 

首先先判断上面页面的值是否传入过来

 

<!--EndFragment-->

 

	app = window.app
	app.controller 'SettingsCtrl', (
	  $scope,
	  $upload,
	   dialogs,
	   $state
	) ->
	  $scope.link
	  $scope.versions
	  #1.test invork
	  #2.parameter
	  #3.methed
	  $scope.versionUpdate= ->
	   alert($scope.link)
	   alert($scope.versions) 

 在这里我们选择打印参数 link，versions

<!--StartFragment-->

刷新页面在输入框输入字符点击提交会显示弹窗内容和我们打印的一模一样

ok  第一步宣告成功(⊙o⊙)… 

接下来我们要让传递过来的参数存入js 中以备后续存入数据库中

在这里数据库表我事先已经建好了 versions 字段 version_number = string , link = strin

<!--StartFragment--> <!--EndFragment-->

接下来在controllers目录下setting.coffee 里改为这些内容

//= require_tree ./settings

app = window.app

app.controller 'SettingsCtrl', ($scope,$upload,dialogs,$state,Version,$window) ->
  $scope.link
  $scope.versions

  $scope.updateVersion = ->
    Version.$put(
        "/api/v1/versions/update", {version_name: $scope.versions, link: $scope.link,}
      ).then ((result) ->
      	$scope.alertWith("保存成功")
      	$window.location.reload()
      ), (error) ->
        console.log(error)

 然后在version.rb中写入这些内容

class API::V1::Versions < Grape::API
  include API::V1::Helpers

  doorkeeper_for :all

  before do
    # authenticate!
  end

  helpers do
    # def permitted_params
    #   ActionController::Parameters.new(params[:settlement]).permit(
    #     :amount, :customer_id, :user_id, :order_id, order_ids: [], pay_records: []
    #   ).tap do |hash|
    #     hash[:pay_records] = params[:settlement][:pay_records]
    #   end
    # end
  end

  resource :versions do

    #
    #功能
    # => 更新数据库
    #
    #逻辑
    #  
    # => 1.先删除库总所有文件
    #    2.添加新的版本
    #
    desc "Update version"
    put '/update' do  
      # 删除全部
      Version.delete_all()

      # 创建版本
      Version.create!(
        version_number:params[:version][:version_name],
        link:params[:version][:link]
      )        
    end




 #
    #功能
    # => 获取版本号
    #
    #逻辑
    # => 查询 verions 表第一条数据
    # 
    #注意
    # => /get 和 返回结果集名字要一致
    #
    desc "get version"
    get '/get'  do 
      @get = Version.last
      return @get
    end


  end

end

 啊哦   大功告成 ··

<!--StartFragment-->

<!--EndFragment-->

<!--EndFragment-->

 

<!--EndFragment-->

 

<!--EndFragment-->