[前端]

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。

[前台使用流程]

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>演示</title>
  5.     <meta name="keywords" content=""/>
  6.     <meta name="description" content="">
  8.     <!--前台模板一定要在 head标签里引入 jquery 和 wind.js 因为插件可能会用到这两个类库-->
  9.     <script type="text/javascript">
  10.         //全局变量，此处是 wind.js使用的变量，不用更改复制即可
  11.         var GV = {
  12.             ROOT: "__ROOT__/",
  13.             WEB_ROOT: "__WEB_ROOT__/",
  14.             JS_ROOT: "static/js/"
  15.         };
  16.     </script>
  17.     <script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script>
  18.      <!--看自己需要引入，jq migrate-->
  19.     <script src="__TMPL__/public/assets/js/jquery-migrate-1.2.1.js"></script>
  20.     <script src="__STATIC__/js/wind.js"></script>
  22. </head>
  23. <body>
  24.     ...此处省略10万行代码
  26.     <!--在此处引入 bootstrap 和 frontend.js-->
  27.     <script src="__TMPL__/public/assets/simpleboot3/bootstrap/js/bootstrap.min.js"></script>
  28.     <script src="__STATIC__/js/frontend.js"></script>
  29.     <script>
  30.         //你可以在这里为所欲为了
  31.     </script>
  32. </body>
  33. </html>

[后台使用流程]

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>演示</title>
  5.     <meta name="keywords" content=""/>
  6.     <meta name="description" content="">
  8.     <!--前台模板一定要在 head标签里引入 jquery 和 wind.js 因为插件可能会用到这两个类库-->
  9.     <script type="text/javascript">
  10.         //全局变量，此处是 wind.js使用的变量，不用更改复制即可
  11.         var GV = {
  12.             ROOT: "__ROOT__/",
  13.             WEB_ROOT: "__WEB_ROOT__/",
  14.             JS_ROOT: "static/js/",
  15.             APP: '{$Request.module}'/*当前应用名*/
  16.         };
  17.     </script>
  18.     <script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script>
  19.      <!--看自己需要引入，jq migrate-->
  20.     <script src="__TMPL__/public/assets/js/jquery-migrate-1.2.1.js"></script>
  21.     <script src="__STATIC__/js/wind.js"></script>
  23. </head>
  24. <body>
  25.     ...此处省略10万行代码
  27.     <!--在此处引入 bootstrap 和 frontend.js-->
  28.     <script src="__TMPL__/public/assets/simpleboot3/bootstrap/js/bootstrap.min.js"></script>
  29.     <script src="__STATIC__/js/admin.js"></script>
  30.     <script>
  31.         //你可以在这里为所欲为了
  32.     </script>
  33. </body>
  34. </html>