前端 · ThinkCMF5.1開發手冊

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> ```