用户登录

先在文件页面上添加一个编辑按钮 .. 回到项目,打开 file.show 这个视图 .. 在这个视图里添加一个编辑按钮 .. 放在 container 的下面 .. 一个 ul, nav justify-content-end .. fixed-bottom pb-4 ..

每个项目是个 li ,加上 nav-item .. 项目里面是个编辑链接.. 元素上添加一个 nav-link .. btn btn-link ..

链接的地址用一个 route 方法 .. 路由的名字是 files.edit .. 需要一个 id 参数 .. 值是 file.id ... 链接上的文字是 Edit .. 回到浏览器,预览一下 .. 文件页面上现在会显示一个编辑链接 ..

edit

再回到项目 .. 打开 FileController 控制器 .. 找到它里面的 edit 方法 ... 在这个方法里可以找到要编辑的文件数据,再渲染一个编辑视图 .. 需要用到 params ... 还有 view ..

里面添加一个 file .. 用一下 File.find .. 资源 id 是 params.id ..

下面渲染一个视图 .. 视图是 file.edit ... 把要编辑的文件数据交给视图用一下 .. 名字是 file ..

视图

再去创建这个视图 .. 放在 resources .. views .. file 的下面, 名字是 edit.edge ..

视图用一下 main 这个布局 ..

设置一下布局里的 content 里的内容 ... 一个 div container my-5 ..

里面可以分成两栏显示 .. 左边显示文件资源,右边显示一个编辑表单 .. 一个 div .. row,添加一排内容 .. 左边这栏的包装上添加一个 col-md-8 ..

右边栏的包装上,添加一个 col-md-4 ...

要显示的资源,可以复制一下 file.show 里的东西 .. 这里会根据文件的不同的类型来显示文件内容 ..

粘贴过来 ..

右边是个表单 .. 一组 form ... 表单提交到的位置是 route .. files.update .. 需要 id 参数 .. 值是 file 里的 id .. 这个提交地址里面再加上一个 _method 参数,值是 PUT ..

再把表单的提交方法设置成 POST ..

表单里有两个主要的元素,一个显示文件的原名,还有一个显示文件名 .. 使用我们定义好的 input 组件 .. 组件是 components .. form .. input ..

元素的 name 是 client_name ... 元素的 label 标签是 Original file name .. 元素的默认的值是 file 里的 client_name ..

复制一份 .. 再添加一个元素,这个元素的名字是 file_name ... label 是 File name .. 默认的值是 file 里的 file_name ..

再添加一个隐藏的 csrfToken 字段 ... 用一下 csrfField() ..

最后再添加一个提交表单用的按钮 .. 一个 button .. 加上 btn btn-primary my-3 .. 按钮的类型是 submit .. 按钮上的文字是 Submit ...

预览

回到浏览器,可以预览一下文件编辑页面 .. 按一下页面上的这个编辑链接 .. 打开的就是这个文件内容的编辑界面 ..

左边是上传的文件,右边是个编辑表单 .. 上面显示的是文件的原始名,还有文件名 ..

更新文件数据与移动文件位置:准备数据与视图《 Node.js 应用:文件系统 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点