你会看到这个提示,那是因为你的系统无法识别某栏目的模型信息,或者你新建模型后,没为这个模型设计单独的模板。不同模型的文档浏览页的模板为:article_模型名字标识.htm
如“article_article.htm”,更多的信息你可以在频道模型管理的地方查看。
题型:1单选,2多选,3填空,4问答,5排序 内容:
模板调用标记:
|
4 |
答案 内容:
模板调用标记:
|
其基本实现原理
-
app.js 作为客户端与服务端的公用入口,导出 Vue 根实例,供客户端 entry 与服务端 entry 使用。客户端 entry 主要作用挂载到 DOM 上,服务端 entry 除了创建和返回实例,还进行路由匹配与数据预获取。
-
webpack 为客服端打包一个 Client Bundle ,为服务端打包一个 Server Bundle 。
-
服务器接收请求时,会根据
url ,加载相应组件,获取和解析异步数据,创建一个读取 Server Bundle 的 BundleRenderer ,然后生成 html 发送给客户端。
-
客户端混合,客户端收到从服务端传来的
DOM 与自己的生成的 DOM 进行对比,把不相同的 DOM 激活,使其可以能够响应后续变化,这个过程称为客户端激活 。为确保混合成功,客户端与服务器端需要共享同一套数据。在服务端,可以在渲染之前获取数据,填充到 stroe 里,这样,在客户端挂载到 DOM 之前,可以直接从 store 里取数据。首屏的动态数据通过 window.__INITIAL_STATE__ 发送到客户端
Vue SSR 的实现,主要就是把 Vue 的组件输出成一个完整 HTML , vue-server-renderer 就是干这事的
-
Vue SSR 需要做的事多点(输出完整 HTML),除了 complier -> vnode ,还需如数据获取填充至 HTML 、客户端混合(hydration )、缓存等等。 相比于其他模板引擎(ejs , jade 等),最终要实现的目的是一样的,性能上可能要差点
|
难度:1入门级,2初级,3中级,4高级 内容:
模板调用标记:
|
3 |
(责任编辑:zengmumu) |