这次我们要添加一个版本更新功能在页面上输入版本号和连接点击按钮将版本信息提交到数据库中
要求每次提交都会覆盖之前的提交
<!--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-->
相关推荐
angular-snapscroll, 在 Angular 中,垂直滚动和捕捉功能 角 snapscroll angular-snapscroll向 Angular 添加垂直scroll-and-snap功能。js仅实现只需要 Angular 内核6.2kB 缩小时,压缩时 2.3 kB
Angular动态添加、删除输入框并计算值实例代码 摘要: 在学习群中交流时,有人分享了一个动态添加输入框的方法,我在其基础上进行了一些改进 这个功能本身并不复杂,但还是要注意,每个ng-model的对象必须是不同的,...
Angular是使用Typescript/javascript(JS)和其他语言构建移动和桌面Web应用程序的开发平台。Angular 6.1.7 更新日志:2018-09-06Bug修复bazel:量角器规则应包括*.e2e-spec.js;核心:使用闭包编译器进行大小回归;docs...
Angular 应用通过新的组件路由(Component Router)模块实现快速加载,提供了自动拆分代码的功能,为用户单独加载它们请求的视图中需要的那部分代码。 生产率 模板 通过简单而强大的...
在Angular应用程序中轻松添加对Windows 10功能的支持。 笔记 这是一项尚在进行中的工作,我还没有解决分发库的问题。 您可能应该暂时避免在生产中使用它。 尽管这应该适用于Windows 10 JavaScript应用程序,但到...
一个Keycloak服务,它包装了要在Angular中使用的keycloak-js方法,为原始函数提供了额外的功能,并添加了新方法以使其更易于被Angular应用程序使用。 通用AuthGuard实现,因此您可以自定义自己的AuthGuard逻辑,以...
script type =" text/javascript " src =" js/parse-1.3.2.min.js " > </ script > < script src =" pathToBowerComponents/rjdataService/dist/dataService.min.js " > </ script > 初始化 ...
小编在上篇文章给大家介绍了AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息),今天给大家介绍Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法,具体...
AngularUISortableBundle Symfony 2 包,它提供了 Angular JS 指令来添加可排序功能。安装使用 composer 安装: $ composer require "innova/angular-ui-sortable-bundle" "1.*"作者Donovan Tengblad(紫鱼32) ...
#Angular-SignalR ...这就是开始使用Angular-SignalR功能所需的全部。 // Add SignalRService as a dependency to your app angular . module ( 'your-app' , [ 'SignalR' ] ) ; // Inject SignalRSer
Angular 7的新功能[视频] 这是发布的的代码存储库。 它包含从头到尾完成视频课程所需的所有支持项目文件。...您将学到什么从头开始构建angular 7应用使用Angular Material向您的应用程序添加样式升级angular 6应用程序t
角树成分 新闻 我们很高兴地宣布,从今天开始, 正在接管此存储库。 我们怀着坚定的信念继续这一旅程,社区不应错过这个组成...将CSS添加到styles.scss或包含在angular.json : @import '~@circlon/angular-tree-comp
角度逻辑用于logmatic-js的Angular模块,使用Javascript将您的日志发送到logmatic.io。安装经典安装< script type =" text/javascript " src =" vendors_dir/angular-logmatic-js/dist/angular-logmatic.min.js ...
角度选择文本 Angular.js指令,用于在单击时选择文本内容。为什么? 仅将javascript复制到剪贴板是不可能的。 有些人不希望将Flash添加到他们的站点中以启用复制到剪贴板的功能。 下一个最好的事情是使您只需单击...
然后,在为Angular首先添加依赖项之后,将源添加到代码中(根据需要调整路径): < script src =" angular/angular.min.js " > </ script > < script src =" dist/Angular-SelectPicker.js " > ...
网上找了很久都没有找到用角度实现的可拖拽式的流程图组件,于是就基于jsplumb自己写了一个,实现了一些基本的功能,后续可能会再添加点。 演示 实现的功能: 拖拽式添加例程 拖拽式连线 删除摘要 双击连接线删除...
#####Angular 指令,用于向列表和表格添加无限滚动功能 这个 repo 包含一个使用 AngularJS 构建的无限滚动列表的代码示例。 该指令有两个部分,事件监听器和 AJAX 调用。 ###事件监听器使用 Angular 指令的链接...
它的核心功能基于众所周知的库。 可以将其视为Angular生态系统的“端口”(经过一些更改)。 两者涵盖了相同的必需品。 特征 没有依赖关系 可拖动项 可调整大小的项目 REDUX友好(akita,ngrx,ngxs ...) 可...
angular.js(用angular.min.js会导致分页控件不显示) ui-bootstrap-tpls.min.js angular-animate.js 需要用到的css bootstrap.min.css 由于本项目使用了路由,所以讲js以及css文件的应用都放在一个主html,请同学们...
渲染为JSON 克隆对象发送到前面的对象发送回对象删除物件取消选择对象向对象添加ID 物体不透明度颜色到对象对象的字体功能文字对齐对象样式到对象字体大小到对象的线高字符到对象的间距在您的项目中安装库npm i ...