zoukankan      html  css  js  c++  java
  • FastAdmin 学习笔记

    官网

    链接

    fastAdmin 前端首页页面的链接
    fastAdmin 后台管理页面的链接

    安装配置

    搭建环境Apache+MySQL+PHP+PERL

    这里集成环境安装我是用集成工具xampp

    xampp

    下载的话,直接从官网下载就可以

    修改apache的服务器根目录地址:

    在httpd.conf文件中找到DocumentRoot "D:/xxxxxx"<Directory "D:/xxxxx"> 把引号里的地址改成你项目地址即可

    数据库可视化管理工具,不喜欢phpmyadmin的风格,可以下载Navicat

    官网都可以下载到,Navicat12 需要破解, 这里我把破解文件放到链接里供大家学习使用 提取码: hzmr

    前端部分

    这玩意前后端不分离!!!!! 要混合开发...

    基础介绍

    FastAdmin的前端部分使用或涉及到主要是RequireJS,jQuery,AdminLTE,Bower,Less,CSS,其中:
    RequireJS主要是用于JS的模块化加载
    Bower主要用于管理第三方插件
    Less主要是用于我们编写LESS和编译成CSS代码

    在阅读接下来的文档之前最好先简单的了解下RequireJS和Bower,而jQuery是我们必须要掌握的工具库

    FastAdmin中前端的最常用的第三方插件有Layer,Toastr,Layer用于弹窗,Toastr用于提示。

    目录结构

    public
    ├── assets
    │   ├── addons
    │   ├── css
    │   ├── fonts
    │   ├── img
    │   ├── js
    │   │   ├── backend
    │   │   ├── frontend
    │   ├── less
    │   └── libs
    
    assets主要存在我们框架所需要使用到的静态资源
    
    assets/js/backend主要存在后台控制器所对应的JS模块
    
    assets/libs主要存在第三方的插件
    
    assets/less主要存在Less文件
    
    assets/img主要存在图片相关文件
    
    assets/css主要存在CSS样式相关文件
    
    assets/addons主要存放插件的相关静态资源
    
    

    组件

    fastAdmin 默认集成了多个第三方组合,所有组件必须使用Form.api.bindevent("form[role=form]") 来进行初始化,如果不进行初始化是无法对相应组件进行渲染和事件绑定。

    requireJs

    优点:

    1. 防止js加载阻塞页面渲染
    2. 使用程序调用的方式加载js,防出现如下丑陋的场景
      丑陋.png

    使用方法

    定义a.js

    define(function(){
        function fun1(){
          alert("it works");
        }
    
        fun1();
    })
    
    

    引用a.js

     <script type="text/javascript" src="require.js"></script>
     <script type="text/javascript">
       require(["js/a"]);//引用a.js文件这样子写可以
     </script>
    
    

    基本API

    require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短

    • define 从名字就可以看出这个api是用来定义一个模块
    • require 加载依赖模块,并执行加载完后的回调函数

    require API 有两个参数:

    1. 依赖["js/a"]是一个数组,即使只有一个依赖,也必须是数组来定义
    2. callBack,是一个function,用来处理加载完毕后的逻辑如:
          require(["js/a"],function(){
             alert("load finished");
          })
      
      

    加载文件

    当加载的模块来自于本地服务器或其它网站CDN,这样就不能通过这种方式加载了,下面以加载一个jquery库为例:

        require.config({
            paths : {
                "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
            }
        })
        require(["jquery","js/a"],function($){
            $(function(){
                alert("load finished");  
            })
        })
    
    

    require.config 是用来配置模块加载位置,简单说就是给模块起一个更短更好记的名字,这样子在require时只需要写["jquire]就可以加载该js,本地的js我们也可以这样配置:

        require.config({
            paths : {
                "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
                "a" : "js/a"   
            }
        })
        require(["jquery","a"],function($){
            $(function(){
                alert("load finished");  
            })
        })
    
    

    通过paths的配置会使我们的模块名字更精炼,paths还可以配置多个路径,如果远程cdn库没有加载成功,可以加载本地的库,如:

        paths : {
            "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery","js/jquery"]
        }
    
    

    这样配置后,当百度的jquery没有加载成功后,会加载后面备选的资源

    全局配置require.config

    requirejs提供了一种叫"主数据"的功能,我们首先创建一个main.js

    main.js

        require.config({
            paths : {
                "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
                "a" : "js/a"   
            }
        })
    
    

    然后在页面中使用下面的方式来使用requirejs:

    <script data-main="js/main" src="js/require.js"></script>
    
    

    解释一下,加载 requirejs 脚本的 script 标签加入了data-main属性,这个属性指定的 js 将在加载完 require.js 后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名

    data-main还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径,是什么意思呢?如上面的data-main="js/main"设定后,我们在使用require(['jquery'])后(不配置jquery的paths),require会自动加载js/jquery.js这个文件,而不是jquery.js,相当于默认配置了:

        require.config({
            baseUrl : "js"
        })
    
    
    加载第三方模块

    通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim,shim解释起来也比较难理解,shim直接翻译为"垫",其实也是有这层意思的,目前我主要用在两个地方

    1. 非AMD模块输出,将非标准的AMD模块"垫"成可用的模块,例如:在老版本的jquery中,是没有继承AMD规范的,所以不能直接require["jquery"],这时候就需要shim,比如我要是用underscore类库,但是他并没有实现AMD规范,那我们可以这样配置
        require.config({
            shim: {
                "underscore" : {
                    exports : "_";
                }
            }
        })
    
    

    这样配置后,我们就可以在其他模块中引用underscore模块:

        require(["underscore"], function(_){
            _.each([1,2,3], alert);
        })
    
    
    插件形式的非AMD模块,我们经常会用到jquery插件,而且这些插件基本都不符合AMD规范,比如jquery.form插件,这时候就需要将form插件"垫"到jquery中:
    
        require.config({
            shim: {
                "underscore" : {
                    exports : "_";
                },
                "jquery.form" : {
                    deps : ["jquery"]
                }
            }
        })
    
    

    也可以简写为:

        require.config({
            shim: {
                "underscore" : {
                    exports : "_";
                },
                "jquery.form" : ["jquery"]
            }
        })
    
    

    这样配置之后我们就可以使用加载插件后的jquery了

        require.config(["jquery", "jquery.form"], function($){
            $(function(){
                $("#form").ajaxSubmit({...});
            })
        })
    

    Bower

    Bower 和 Npm

    Npm

    Npm(支持嵌套依赖)是伴随Node.js出现的一个包管理器,最开始只能支持Node.js的模块管理,但是后来,Npm官网经过一次改版,Npm是JavaScript的包管理器,所以不局限于Node.js的模块管理了,已经通用到了所有js的包管理工具了,可以说是,前后通吃了

    Bower

    Bower(仅支持扁平的依赖,嵌套的依赖,由程序猿自己解决)是从一开始就专门为前端表现设计的包管理器,一切全部为前端考虑的。

    Npm与Bower的区别:

    Npm安装的模块位于项目根目录下的node_modules内,而Bower安装的模块可以自定义位置

    Css预处理器

    sass与less的区别?Stylus又是啥?

    SASS2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受LESS影响,已经进化到了全面兼容CSS的SCSS。

    LESS2009年出现,受SASS的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手,在ruby社区之外支持者远超过SASS,其缺点是比起SASS来,可编程功能不够,不过优点是简单和兼容CSS,反过来也影响了SASS演变到了SCSS的时代,著名的Twitter Bootstrap就是采用LESS做底层语言的。

    Stylus,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如SASS和LESS。

    有什么不同见解可以在评论区共同讨论
  • 相关阅读:
    Excel技巧--按内容分列与合并
    Excel技巧--分类求和与空白批量填充
    Excel技巧--空白处补零
    Excel技巧--批量生成指定名称的文件夹
    Excel技巧--漏斗图让转化率直观明了
    Excel技巧--时尚的圆环比例图
    Excel技巧--让折线图带面积更直观生动
    Excel技巧--图表添加平均线为指标
    Excel技巧--使用温度计图让目标与实际对比更明显
    Linux之facl----设置文件访问控制列表(详解)
  • 原文地址:https://www.cnblogs.com/lambertlt/p/14898249.html
Copyright © 2011-2022 走看看