这或许是你应用 layuiAdmin 时的主要焦点，在开发过程中，你的大部分精力都可能会聚焦在这里。它取代了服务端 MVC 架构中的 view 层，使得应用开发变得更具扩展性。因此如果你采用 layuiAdmin 的 SPA（单页应用）模式，请务必要抛弃服务端渲染视图的思想，让页面的控制权限重新回归到前端吧！ views 目录存放的正是视图文件，你可以在该目录添加任意的新目录和新文件，通过对应的路由即可访问。 注意：如果是单页面模式，视图文件通常是一段 HTML 碎片，而不能是一个完整的 html 代码结构。 ### 视图与路由的关系 每一个视图文件，都对应一个路由。其中 index.html 是默认文件（你也可以通过 config.js 去重新定义）。视图文件的所在目录决定了路由的访问地址，如： |视图路径 | 对应的路由地址 |---|--- |./views/user/index.html | /user/ |./views/user.html |/user |./views/user/set/index.html |/user/set/ |./views/user/set.html |/user/set |./views/user/set/base.html |/user/set/base 通过上述的表格列举的对应关系，可以总结出： - 当视图文件是 index.html，那么路由地址就是它的上级目录（相对 views），以 / 结尾 - 当视图文件不是 index.html，那么路由地址就是它的上级目录+视图文件名，不以 / 结尾 值得注意的是：路由路径并非最多只能三级，它可以无限极。但对应的视图也必须存放在相应的层级目录下 ### 视图中加载 JS 模块 在视图文件中，除了写 HTML，也可以写 JavaScript 代码。如： <div id=“LAY-demo-hello”>Hello layuiAdmin</div> <script> layui.use('admin', function(){ var $ = layui.jquery; admin.popup({ content: $('#LAY-demo-hello').html() }); }); </script> 如果该视图对应的 JS 代码量太大，我们更推荐你在 controller 目录下新增一个业务模块，并在视图中直接 layui.use 去加载该模块。下面以控制台主页 index.html 为例： <div>html区域<div> <script> //加载 controller 目录下的对应模块 /* 小贴士： 这里 console 模块对应 的 console.js 并不会重复加载， 然而该页面的视图可能会重新插入到容器，那如何保证脚本能重新控制视图呢？有两种方式： 1): 借助 layui.factory 方法获取 console 模块的工厂（回调函数）给 layui.use 2): 直接在 layui.use 方法的回调中书写业务代码，即: layui.use('console', function(){ //同 console.js 中的 layui.define 回调中的代码 }); 这里我们采用的是方式1。其它很多视图中采用的其实都是方式2，因为更简单些，也减少了一个请求数。 */ layui.use('console', layui.factory('console')); </script> 当视图被渲染后，layui.factory 返回的函数也会被执行，从而保证在不重复加载 JS 模块文件的前提下，保证脚本能重复执行。