EchoCow

念念不忘,必有回响

念念不忘,必有回响
  menu
93 文章
67 评论
57493 浏览
0 当前访客
ღゝ◡╹)ノ❤️

slplat 前端开发简单说明 有更新!

前提

  1. 你必须保证你的 slplat 是从 GitHub 上 clone 下来的最新版本,并且能够正常运行不报错。
  2. 你必须保证你已按照上一篇笔记 新的前端框架环境搭建 成功搭建了前端环境,并能够与后端环境运行。

如何确定?

后端

如果你不确定是否是最新版本,你可以通过菜单栏 VCS -> Update Project 进行项目更新,具体更新内容请查看 IDEA 的 Event Log。如果你不存在 Update Project 选项,那么代表你当前项目并不是从 GitHub 上 clone 下来的,这时你可能需要重新搭建一次后端环境。然后,你需要保证在原来的 UI 界面能够成功登陆,此时,你就完成了第一个前提。

前端

在后端能够运行在原 UI 界面的前提下,你需要更改 ngix 下的 conf/ngix.conf 的 UI 路径,将原来 UI 的路径 AngularJS 改为现在的 UI 路径 AdminLTE。然后再次启动项目,输入 localhost 能够正常访问新的 UI 界面并且登录成功。

当你完成以上两点,就可以正式开始前端开发。

起步

你需要了解生成完成后的前端目录结构,具体请去查看 SLPlat\SLPlat-UI\SLPlat-UI-AdminLTE\app\documentation\readme.md ,如果你是前端开发人员,务必理解此文档。当我们按照前面的文档操作处理完所有的依赖以后,我们以后的开发只需要启动 gulp 进行自动化构建即可(不能关闭 gulp 命令行),他会监视我们的 master 目录,并为我们自动生成所有的文件以简化我们的操作。 ==所以我们的开发目录只有一个 –> SLPlat\SLPlat-UI\SLPlat-UI-AdminLTE\master 目录==,一切都交给了 gulp 进行构建。

开发

你需要具有一定的前端基础,其中必备的便是前端三剑客 H5+CSS3+JS

页面

你需要了解模板引擎 jade 的使用,所有的模板文件都存放于 master\jade 文件夹下,里面包含了所有模板文件,你需要学习如何使用此模板书写 html 页面。建议的学习方式是,你通过生成之后的页面(app 目录下的 pages 和 views 文件夹下的 html 文件即是生成的页面)与当前 jade 文件进行比较,你将会很快发现此模板引擎的书写方式。不过有一个值得关心的问题,idea 和一些常用的 IDE 是不支持 jade 文件语法高亮的。我们所找到的提供此文件语法高亮的 IDE 可选用 HBuilderX,亦或 者sublime text ,当有语法高亮,你能够避免许多错误。

  • pages:他提供了跳脱于框架之外的页面跳转,如登录页面,404页面
  • views:他提供了所有框架之内的页面,即有侧边栏、导航栏的页面内容

样式

你需要了解 CSS 预处理语言 less 的使用,所有的 less 文件都存放于 master\less 文件夹下,里面包含了所有 less 文件,你需要学习如果使用 less 语法来进行书写 css 文件。这是一种极简单的预处理语言,不论入门还是上手都是极为简单。

控制处理

我们所使用的核心框架是 AngularJS ,所有的 JS 文件都存放于 master\js 目录下,

你必须知道的是,我们添加的自定义代码只能添加于 custom 目录下,其中目录层次结构应该与 Views 的目录层次相对应,例如存在 views/baseInfo/user/user.html 文件,那么在其对应之下应该存在 cuntom/baseInfo/user/user.js 文件与之对应作为其控制器。

而对于 modules 目录,则是提供功能性作用
- controllers :提供了功能性的控制器,例如 sidebar-menu.js 提供了侧边栏的数据加载。
- directives :提供了指令集,我将它理解成对我们是所用的插件的指令进行处理或者初始化以适合我们当前 UI 界面,例如 validate-form.js 初始化了验证插件 Parsley
- service :提供了一些扩展的前端服务功能,例如 browser.js 提供了浏览器特性检验
- config.js : 这是前端的核心,也是 angularJS 的核心,它提供了路由的信息配置,提供了页面的跳转和框架的指定,并为每个页面指定了合适的插件。
- constants.js : 这是初始化的 JS ,他为我们提供了所有的依赖以及对其进行初始化和引用,我已经将其修改部分,短期内请勿改动

所以,你需要了解 angularJS 的基础使用方法,他将作为数据处理来与后端进行交互,主要交互方式 AJAX,然后你需知道如何通过 AngularJS 进行双向数据绑定将数据显示于页面之中,如何在页面中使用 angularJS 的指令系统,这些都是此 UI 框架的基础,也是核心。

其他

我在我的服务器上面保留了可以使用的所有样式,他们都保存在我们的源代码中我并未删除,可以作参考。

另外,在书写前端页面时是与后端隔绝的,所以我建立了 SLPlat\SLPlat-UI\SLPlat-UI-AdminLTE\server 文件夹,里面存放了 json 的数据格式,他能够保证在不跑后端环境的前提下进行临时的数据存储,也就是意味着你可以向后端人员索要 json 格式的数据,例如我添加 left-meno.json 数据,他就来自于我从后端传递到前端的 json 数据。所以你可以在不跑后端的前提下,使用 http 直接请求此文件下的资源。

但是,这就意味着即使不跑后端环境,你也无法通过 file 协议直接访问 index.html ,因为这会造成跨域的问题,这时你需要建立一个本地服务器,使用 http 协议进行访问,不过这一切 gulp 已经为你完成了,我提出来只是提醒你, ==不论什么时候只要你要访问此页面,你都需要运行 gulp== 。

具体

在介绍完以上之后,我们需要做一个简单例子,用户的信息显示。我们按照上面的步骤一步一步来,结果你应该能够在最新版本的项目里面能够看到

==注意:我再提醒一遍,前端开发务必牢记,我们开发的文件夹是 master 目录!!!其他目录修改是无效的或者临时的!!!==

1. 页面

我们需要一个 jade 的模板页面,用户的信息显示需要在框架之内的,所以在 master/views/baseInfo 下面创建文件夹 user ,并创建 user.jade 文件。

h1 用户管理

// START panel
.panel.panel-default
  .panel-heading
    | Demo Table #1
  // START table-responsive
  .table-responsive
    table#table-ext-1.table.table-bordered.table-hover
      thead
        tr
          th UID
          th Picture
          th Username
          th First Name
          th Last Name
          th Email
          th Profile
          th Last Login
      tbody
        tr
          td 1
          td
            .media
              img.img-responsive.img-circle(src="app/img/user/01.jpg", alt="Image")
          td @twitter
          td Larry
          td the Bird
          td mail@example.com
          td.text-center
            .radial-bar.radial-bar-25.radial-bar-xs(data-label="25%")
          td 1 week
        tr
          td 2
          td
            .media
              img.img-responsive.img-circle(src="app/img/user/02.jpg", alt="Image")
          td @mdo
          td Mark
          td Otto
          td mail@example.com
          td.text-center
            .radial-bar.radial-bar-50.radial-bar-xs(data-label="50%")
          td 25 minutes
        tr
          td 3
          td
            .media
              img.img-responsive.img-circle(src="app/img/user/03.jpg", alt="Image")
          td @fat
          td Jacob
          td Thornton
          td mail@example.com
          td.text-center
            .radial-bar.radial-bar-80.radial-bar-xs(data-label="80%")
          td 10 hours
  // END table-responsive

我使用了他本身自带的样式,所以不需要写 less,另外只是演示,所以我也不再花时间去为其写 angularJS 的控制器,如果需要请在 ==js/custom/baseInfo== 下添加 user 文件夹,再添加 user.js

2. 路由配置

我们需要在侧边栏选择用户管理的时候显示我所书写的界面,那么你需要为其配置路由,也就是 SLPlat\SLPlat-UI\SLPlat-UI-AdminLTE\master\js\modules\config.js 文件。

这里,你需要去了解 angularJS 的核心思想之一:模块化,以及他的 URL 的客户端模板方式

同时,为了减小后端人员的难度,我保留了旧的 UI 的路由配置方式。

    //一级模块
    .state('main', {
      abstract: true,
      url: '',
      templateUrl: helper.basepath('app.html'),
      controller: 'AppController',
      resolve: helper.resolveFor('fastclick', 'modernizr', 'icons', 'screenfull', 'animo', 'sparklines', 'slimscroll', 'classyloader', 'toaster', 'whirl')
    })
    //二级模块
    .state('main.sys', {
      url: '/sys',
      title: 'sys',
      template: '<div >' + '<div ui-view=""></div> </div>'
    })
    //三级模块
    .state('main.sys.user', {
      url: '/user',
      title: 'user',
      template: '<div>' + '<div ui-view=""></div> </div>'
    })
    //四级模块
    .state('main.sys.user.list', {
      url: '/list',
      title: "user list",
      templateUrl: helper.basepath('baseInfo/user/user.html')
      //我们使用 helper.basepath,他为我们指定了基础目录 views
      //还有一种方式绝对路径,即 app/views/baseInfo/user/user.html 方式
    })

如此,便可以正常访问到页面,当然你必须保证你的 gulp 正常监听并已经成功生成了新的页面。

结束

这个说明只是一个简单入门,并不太深,因为我也不是专职的前端开发人员,总的来说这个框架在环境搭建好后,重要的也就是 angularJS,通过控制器和后端交互,通过指令系统+双向数据绑定显示在页面,当然他的核心也是 MVC 思想,所以视图模型也是很重要的,

本说明到这里结束了,不过最后还要提一点,请务必去查看 SLPlat\SLPlat-UI\SLPlat-UI-AdminLTE\app\documentation\readme.md 文档,我已经将他汉化并加入自己的理解


念念不忘,必有回响。

如果觉得文章不错或者帮到了您,帮忙点点下面广告呗~谢谢啦~

评论