angular js 添加功能

最新推荐文章于 2025-08-18 20:17:18 发布

原创最新推荐文章于 2025-08-18 20:17:18 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #数据库 #ruby #ViewUI

java script 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个版本更新功能的实现过程，从前端页面设计到后端API的开发，再到数据库操作，实现了版本信息的覆盖更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

首先建立一个简单的页面 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没有输入的话确定按钮将不可以点击！

好了页面我们是使用的 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 写一个路径

后端使用的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

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

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

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

	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

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

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

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

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

接下来在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

啊哦大功告成 ··