前端 · ThinkCMF5开发手册

ThinkCMF前端使用的是传统的jQuery技术，使用的核心类库有 jQuery,bootstrap,wind.js，这三个类库是ThinkCMF前后台模板所依赖的核心类库，其它第三方类库均使用 wind.js 异步加载，我们封装了一些常用的组件方便大家快速开发，封装的前台模板组件在 `static/js/frontend.js`，后台模板组件在 `static/js/admin.js`, frontend.js 和 admin.js功能基本相同，但考虑到前后台需要稍有不同。无论在使用 frontend.js还是 admin.js 都要提前引入jQuery和 wind.js。 ## 前台使用流程 ``` <!DOCTYPE html> <html> <head> <title>演示</title> <meta name="keywords" content=""/> <meta name="description" content="">  <script type="text/javascript"> //全局变量，此处是 wind.js使用的变量，不用更改复制即可 var GV = { ROOT: "__ROOT__/", WEB_ROOT: "__WEB_ROOT__/", JS_ROOT: "static/js/" }; </script> <script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script>  <script src="__TMPL__/public/assets/js/jquery-migrate-1.2.1.js"></script> <script src="__STATIC__/js/wind.js"></script> </head> <body> ...此处省略10万行代码  <script src="__TMPL__/public/assets/simpleboot3/bootstrap/js/bootstrap.min.js"></script> <script src="__STATIC__/js/frontend.js"></script> <script> //你可以在这里为所欲为了 </script> </body> </html> ``` ## 后台使用流程 ``` <!DOCTYPE html> <html> <head> <title>演示</title> <meta name="keywords" content=""/> <meta name="description" content="">  <script type="text/javascript"> //全局变量，此处是 wind.js使用的变量，不用更改复制即可 var GV = { ROOT: "__ROOT__/", WEB_ROOT: "__WEB_ROOT__/", JS_ROOT: "static/js/", APP: '{$Request.module}'/*当前应用名*/ }; </script> <script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script>  <script src="__TMPL__/public/assets/js/jquery-migrate-1.2.1.js"></script> <script src="__STATIC__/js/wind.js"></script> </head> <body> ...此处省略10万行代码  <script src="__TMPL__/public/assets/simpleboot3/bootstrap/js/bootstrap.min.js"></script> <script src="__STATIC__/js/admin.js"></script> <script> //你可以在这里为所欲为了 </script> </body> </html> ```