用户登录

先打开一个文章内容的编辑页面 ... 提交一下这个表单 .. 页面上会显示一个提示 ..

回到项目 .. 找到文章内容编辑页面的视图 .. post .. edit ...

在这个 post.edit 视图里,用了 main 这个布局 .. 设置了一下它的 content 这个区域里的内容 .. 里面用了一个 .container 类的元素 ... 它又包装了一个 alert 这个自定义的组件 ..

很多其它的视图都会是这样的组织结构,所以我们可以把这个 .container 还有这个 alert 组件,放在布局里 ..

把这个 alert 组件 ... 还有这个 .container 元素从这个视图里面删除掉 ..

找到视图用的布局 .. layouts 下面的 main ...

然后在这个布局的 content 区域的周围 .. 添加一个 .container 元素 .. 用它包装一下这个 content 区域 ... 可以再添加一个 my-5 ,上下添加点外边距 ..

再把 alert 组件放到这里 .. 使用这个组件的代码可以放在一个 partial 里面 .. 包含进来一个 partial ... 位置是 layouts .. partials .. alert ...

在这个目录下面,新建一个 alert ... 把使用 alert 组件的代码粘贴到这个 partial 里面 ..

然后找到这个 alert 组件 ... 在这个组件的包装元素上,再给它加上一个 mb-5 ,在元素的下面添加点外边距 ...

预览

回到浏览器 .. 再预览一下 .. 刷新一下这个页面 ... 跟之前的显示是一样的 ... 再更新一下 ... 同样会显示一个提示信息 ..

现在我们可以去修改所有使用了 layouts.main 布局的视图 ... 去掉它里面的 content 区域里的 .container 元素 .. 还有 alert 组件 ...

把视图中的 .container 与 alert 组件放在布局里《 Node.js 应用:重构与改进 #2 》

统计

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

社会化网络

关于

微信订阅号

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