模块化
- Fastadmin中的js文件是通过RequireJs模块化工具来引入和调用的,每个控制器都对应一个js模块,控制器名称和js中模块名称是一一对应的 。
- 因此要引入JS文件,需要在index.html页面使用script标签引入require.js框架文件,并指定data-main属性为自己的JS的总入口文件。然后浏览器就会加载require.js,而requirejs会帮我们自动加载main.js。
1. <!-- data-main是script标签里的一个属性,用来指定require.js加载的第一个js文件,也就是总入口文件。这个属性可以让require.js知道项目的根路径,也可以在这个文件中定义需要加载的其他模块和回调函数;表示require.js会先加载/public/assets/js/my.js文件,并把/public/assets/js/作为根路径。 --> 2. <script src="/public/assets/js/require.js" data-main="/public/assets/js/backend/auth/admin"></script>
项目的入口js就是require-backend.js
如何使用自定义js或第三方js
- 然后在my.js文件中配置各个模块的路径和依赖关系,并使用require函数加载需要的模块
1. require.config({ //:调用RequireJS的配置方法,用于设置模块加载器的相关参数。 2. baseUrl: "/public/assets/js/", //设置模块的基准路径,用于加载模块的资源文件。 3. paths: { //设置模块的路径别名,用于在模块中引用其他模块的时候使用。 4. 'jquery': 'jquery.min', //将jquery模块设置为jquery.min文件。 5. 'bootstrap': 'bootstrap.min', //将bootstrap模块设置为bootstrap.min文件。 6. 'backend': 'backend' //将backend模块设置为backend文件。 7. }, 8. shim: { //设置非AMD规范的模块和依赖关系之间的转换关系。 9. 'bootstrap': ['jquery'] //将bootstrap模块和jquery模块之间建立依赖关系,表示在加载bootstrap模块之前需要先加载jquery模块。 10. }, 11. charset: 'utf-8' // 文件编码 12. }); 13. require(['jquery', 'bootstrap', 'backend'], function ($, undefined, Backend) { 14. 回调函数 15. function hello() { 16. console.log('一天吃十斤水蜜桃!'); 17. } 18. hello() 19. });
- AMD (Asynchronous Module Definition) 是一种 JavaScript 模块化规范,它要求模块必须按照一定的格式编写,包括使用 define 函数定义模块、使用 require 函数引入模块等。而有些库或插件并不符合 AMD 规范,它们可能是以全局变量的形式暴露出来的,或者是依赖于其他全局变量。在这种情况下,我们需要使用 RequireJS 提供的 shim 配置选项来表示模块之间的依赖关系
- config中paths用来配置支持AMD规范的库和js文件,shim是用来配不支持AMD规范的js。配好之后,假设现在要使用jquery和bootstrap,只要用require方法:
1. require(['jquery', 'bootstrap'], function ($, undefined) { 2. //该function将在引入jquery和bootstrap完成之后执行。 3. });
- 引用自己写的js
- 在fastadmin中,我们并没有使用config配置我们自己写的js,如后台某个类增改查方法所在的js文件,是不是很好奇是怎么被调用到的?
- 前面说了requirejs是模块化工具,要使用我们自己定义的js,首先得用模块化的方式编写我们的js,使用define定义一个模块:
1. //define有三个参数,第一个是模块名(可以不写,默认与模块名与文件名同名),第二个是当前模块依赖的其他模块,第三个是一个function,模块体,要求必须return一个数据 2. define('modelname',['jquery','xxx'], function ($,xxx) { 3. 4. var Controller = { 5. index: function () { 6. 7. }, 8. add: function () { 9. 10. }, 11. edit: function () { 12. 13. } 14. }; 15. return Controller; 16. });
- 那么index,add,edit等页面对应的js代码是如何被执行的?查看require-backend.js文件
- 其中,require() 函数用于加载模块,第一个参数是一个数组,用于指定要加载的模块的名称或路径;第二个参数是一个回调函数,在指定的模块都加载完成后执行,将加载的模块作为参数传递给回调函数。在加载模块的过程中,如果出现错误,则会执行第三个参数指定的回调函数,可以在该回调函数中进行错误处理。
- 初始化这段代码主要是异步加载 fast 模块,将其作为回调函数 Fast 的参数。
- 在 fast 模块加载完成后,异步加载 backend、backend-init 和 addons 模块,将它们作为回调函数 Backend、undefined 和 Addons 的参数。
- 判断 Config.jsname 是否存在,如果存在则异步加载指定模块(Config.jsname)并执行其中的指定函数(Config.actionname),如果模块中存在该函数,则执行该函数,否则执行模块中的 _empty() 函数。如果加载模块出错,则会在控制台输出错误信息。
- 如果 Config.jsname 不存在,则不执行任何操作。
- 通过Ajax无刷新技术与控制器进行数据交互
通过Ajax无刷新技术与控制器进行数据交互
- fastadmin中的js文件可以通过Ajax无刷新技术与控制器进行数据交互,也可以通过Fast.api.open方法打开一个新窗口并传递参数给控制器
1. //在js文件中定义一个Ajax请求 2. $.ajax({ 3. url: "index.php/admin/index/test", //请求的控制器地址 4. type: "post", //请求的方式 5. data: {name: "张三", age: 18}, //请求的参数 6. dataType: "json", //返回的数据类型 7. success: function (data) { //请求成功的回调函数 8. console.log(data); //打印返回的数据 9. }, 10. error: function (xhr) { //请求失败的回调函数 11. console.log(xhr); //打印错误信息 12. } 13. }); 14. //在控制器中接收参数并返回数据 15. public function test() 16. { 17. $name = $this->request->post('name'); //获取name参数 18. $age = $this->request->post('age'); //获取age参数 19. return json(['status' => 'success', 'message' => 'Hello, ' . $name . ', you are ' . $age . ' years old.']); //返回json格式的数据 20. }
- 通过Fast.api.open方法打开一个新窗口并传递参数给控制器
1. //在js文件中定义一个Fast.api.open方法,打开一个新窗口,并传递id参数给控制器 2. Fast.api.open("index.php/admin/index/detail?id=" + row.id, "详情"); 3. //在控制器中接收参数并渲染视图 4. public function detail() 5. { 6. $id = $this->request->get('id'); //获取id参数 7. $row = Db::name('user')->where('id', $id)->find(); //根据id查询用户信息 8. if (!$row) { 9. $this->error(__('No Results were found')); 10. } 11. $this->view->assign("row", $row); //将用户信息分配给视图变量row 12. return $this->view->fetch(); //渲染视图detail.html,并显示用户信息 13. }