视图:Views

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

打开项目下面的 start 里的 app.js .. 在这个文件里注册了应用需要的所有的 Provider .. 你会发现,这里注册了一个 ViewProvider ..

这样我们在控制器类的方法里面,就可以得到 view 实例了 .. 找到我们之前创建的这个控制器 .. 在 render 方法里面的参数里面,把 view 也解构出来 ..

下面再去创建一个视图文件 ..

adonis 用的是 edge 模板引擎 .. 回到命令行 .. 在项目的下面执行一下 .. adonis make 一个 view,名字是 hello

提示创建了一个文件 .. hello.edge .. 文件会放在 resources, views 这个目录的下面 ..

回到项目 .. 在 resources .. views 的下面,打开刚才我们创建的 hello.edge .. 现在它是一个空白的文件 ..

先添加一个基本的 html 文档的结构 .. 先修改下文档的格式 .. 现在显示的是 plain text .. 这里把它设置成 html .

编辑器里安装了 Emmet 插件以后,可以输入一个 ! 号,按下 tab ..

另外在编辑器上,你可以安装一个 Edge 这个 Package .. 打开编辑器的配置 .. install ..

搜索一下 edge ... 找到一个安装一下这个 package .. 这样编辑器就会认识 Edge 模板引擎的文件了 ..

回到 HelloController .. 现在我们把显示交给一个视图 .. 先在 render 方法里面,定义一个 name .. 它的值就是 request.input 得到的 name 这个查询符的值 ..

然后方法 return 的就是 view,用一下它的 render 方法 .. 视图的名字是 hello ,就是我们在这节课的一开始创建的那个 hello.edge ..

再给它一个对象 .. 把 name 放进去 .. 这样在 hello 这个视图文件里,我们就可以使用 name 里的值 ..

回到 hello.edge ... 可以先修改一下 title 标签里的内容 .. hello ~ .. 两组大括号 .. 绑定一个 name ..

然后在 body 里,再添加一组大标题.. 里面的文字是 hello ~ 。再绑定一个 name 的值 .. 这个 name 的值就是从 HelloController 这个控制器的 render 方法里传过来的 .. 具体的值就是请求地址上的 name 这个查询符的值 ..

回到浏览器 .. 访问一下 /hello .. 页面上会显示一个 hello .. 跟之前不同的是 .. 这次显示的是个标准的 html 文档 .. 文档的结构是 hello 视图里面定义的 ..

在访问的地址里面,再添加一个 name 查询符 .. name=ninghao ... 页面上会显示一个 hello ~ ninghao .. 标题文字会用一组 h1 标签包装一下 ...

视图:Views《 Node.js:MVC 框架 - Adonis 》

统计

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

社会化网络

关于

微信订阅号

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