不用模板引擎,可以直接使用bootstrap前端html模板么
发布于 6 年前 作者 beng0305 9633 次浏览 来自 问答

初学者,想用bootstrap模板,在网上看到很多很不错的网站前端模板,但是有一个问题是这些网页模板都是现成的html写好了的页面,如果我不用jade这样的模板引擎,怎么使用现成的html?

19 回复

前端基本依靠ajax或者AngularJS来交互数据,后端express通过 res.sendFile() 直接对外输出 HTML 文件?这样可以? https://segmentfault.com/q/1010000006241202/a-1020000006242544

模板引擎的主要作用其实就是将数据渲染到页面,如果不使用模板引擎,就自己获取到数据后将数据组合成html字符串,然后插入到DOM中,这是最原始的方法了。 最近我也在用Vue写一个cnodejs’的PC端SPA,其实Vue也用到了模板引擎,模板引擎说实话很多时候还是很方便的。<br/><br/><a class=“tag” target=“new” href=“https://github.com/BubblyPoker/cnode-vue”>来自 cnode-vue</a>

纯粹AJAX开发Web的讨论 所谓纯AJAX开发Web,其原理非常简单:所有界面(HTML)全部由JavaScript负责,服务器端代码只负责业务逻辑,并生成结构化的数据(json或xml)。 理论上来说,这种架构非常清晰,前后端开发完全分开。但在实际生产环境下,却存在不少的问题。下面是大家经常提到的问题: (1)由于html完全有javascript动态生成,导致前台js代码量迅速增长。由于JS引擎在个浏览器的实现存在差异,所以调试异常困难,即使使用jQuery等第三方库,问题仍然存在。

(2)由于目前搜素引擎不处理js代码,所以会导致无法搜索到网站内容,这对于门户型网站不可容忍;

(3)还是由于前台必须动态生成,导致无法预先生成静态页面,从而加重服务器负担;

(4)对于特色网站,UI也是智慧的结晶,而完全AJAX导致前台代码失去保护,容易被模仿,从而失去竞争力;

(5)大量的js代码,也会导致客户端首次访问速度变慢;

(6)很多移动平台,尚未完全支持ajax;

尽管存在诸多问题,纯AJAX在一些特定领取却非常适合: (1)企业内部应用,通常用来取代传统的桌面软件。由于范围小,所以可以容易控制客户使用的浏览器版本; (2)自动化控制与工控系统,与(1)类似; 看看WebOS等一些模仿桌面OS的Web应用,纯Ajax确实非常强大。

纯Ajax的绝大部分问题,都是Javascript引擎的不规范不统一造成的,一旦这个问题解决了,纯Ajax必将大放异彩。

中国人讲究“中庸之道”,凡事不能太极端,这也适用于纯Ajax网站,Ajax本身很好,但是单纯的使用它而抛弃传统的技术并非上策。

@beng0305 支持。

少量的EJS后端模板 + 主体的前端动态生成 = Perfect!

在我最近的项目里,web app的登录与登出处理还是走“后端EJS模板”技术路线,因为这样比较容易整合Passport.js + OAuth2。然后,当用户进入主体业务界面之后,那就是一个大大的单页应用了。

希望我的技术路线的选择对你有启发。

@BubblyPoker 老哥,源码开源了吗?看起来挺好的

@stuartZhang 你好: 请问,ejs+SPA的模式就是在/login是被后端的路由捕捉,/主体业务是被前端路由捕捉,是吧? 用户的session是靠什么传递的?

@hezhongfeng here, 每个回复都有个(来自 cnode-vue),你可以直接看的<br/><br/><a class=“tag” target=“new” href=“https://github.com/BubblyPoker/cnode-vue”>来自 cnode-vue</a>

@hezhongfeng 用的是饿了么提供的element-ui,在element-ui分支下,master下是以前没用element-ui写的,没写完<br/><br/><a class=“tag” target=“new” href=“https://github.com/BubblyPoker/cnode-vue”>来自 cnode-vue</a>

@BubblyPoker 对了,依赖的模块就别传上去了

@hezhongfeng 没办法,公司网不行,npm i 太慢了,直接这样传上去快很多,以后会去掉的<br/><br/><a class=“tag” target=“new” href=“https://github.com/BubblyPoker/cnode-vue”>来自 cnode-vue</a>

直接用ejs就行了,可以直接用html的

@BubblyPoker 。。。<br/><br/><a class=“tag” target=“new” href=“https://github.com/BubblyPoker/cnode-vue”>来自 cnode-vue</a>

@hezhongfeng 我目前代码实现是:

  1. Passportjs在后端路由捕获/login
  2. 如果用户登录失败,passportjs通过后端路由给浏览器发送一个HTTP 301重定向,送WEB用户回到《login页面》。
  3. 如果用户登录成功。额外说明:这里passportjs使用的是OAuth2的strategy,因为真正的用户资源并不在我们这。这种登录技术,我们佬大说叫什么:“Federal”。再详细的我就不知道了。
  4. 保存用户信息进入Redis
  5. passportjs通过后端路由给浏览器发送一个HTTP 301重定向,送WEB用户去《业务页面》。目前,这个页面的server path是/main
  6. 然后,/main页面发送的Ajax请求。在后端,就可以访问到 当前登录用户的 session信息了。
  7. 这个/main本身就是一个单页应用(但是,没有《登入》与《登出》模块),目前/main是使用的Angular 2实现的。/main页面假设:所有能够打开这个页面的用户都是通过了passportjs身份验证,且在server端有session的。

基本上,就是这个流程。因为复杂的部分都交给 passportjs了。所以,我自己的业务代码反而特别地简单。

建议前端和后端分离,后期好维护 前端负责数据渲染和页面样式,后端只提供数据,有利于团队开发

@stuartZhang 谢谢 特别详细,原来是使用了Redis存储session,感觉是比较好的方案

@QiYan93 我们目前是以前端路由为主,后端路由为辅。太纯粹的解决方案,在处理一些edge case时,代价有点高。比如说,这次话题中的 登入 与 登出 功能。以后端路由的方式 委托给passportjs,开发成本 最低。@beng0305说要 中庸,我绝对支持。当然,我还不够“中”。我的偏向性还是很明确的,我偏好 前端路由。

我用express 设置一下静态目录即可

app.use(express.static(path.join(__dirname, ‘public’)));

回到顶部