EasyWeb.zip

# EasyWeb 前端开发文档 ## 1.简介 > 基于jquery、layui的管理系统模板，单页面、响应式、支持mvvm、极易上手！ * 演示地址：[https://whvse.gitee.io/easywebpage/](https://whvse.gitee.io/easywebpage/login.html) * 演示账号：随便输 &emsp;&emsp; 密码：随便输 &emsp;EasyWeb包含前后台， [前台地址](https://gitee.com/whvse/EasyWebPage)， [分离版后台地址](https://gitee.com/whvse/EasyWeb)， [不分离版后台地址](https://gitee.com/whvse/easyweb-shiro)， 后台基于springboot、mybatis、mybatis-plus、Security、OAuth2等，不分离版权限使用shiro。 &emsp;此文档包含分离和不分离版本的前端开发指南，两者的使用是有些区别的， 不同的地方在文档中都着重指明了，参考文档使用即可。 ### 1.1.使用框架 描述 | 框架 :---|:--- 核心框架 | [Layui](http://www.layui.com/)、[jQuery](http://jquery.cuishifeng.cn/) 路由框架 | [Q.js](https://github.com/itorr/q.js) (纯js轻量级路由框架) mvvm框架 | [pandyle.js](https://gitee.com/pandarrr/pandyle) (专为jquery编写的mvvm) 主要特色 | 单页面 / 响应式 / 简约 / 极易上手 ### 1.2.项目结构 ``` |-assets | |-css // 样式 | |-images // 图片 | |-libs // 第三方库 | |-components // html组件 | |-system // 系统管理页面 | |-xxxxxx // 其他业务页面 | |-tpl // 公用组件 | | |-message.html // 消息 | |-console.html // 主页一 | |-header.html // 头部 | |-side.html // 侧导航 | |-module // js模块 (使用layui的模块开发方式) | |-admin.js // admin模块 | |-config.js // config模块 | |-index.js // index模块 | |-index.html // 主界面 |-login.html // 登陆界面 ``` > 不分离版没有components目录，不分离版的页面由后台输出，前端只有assets和module ## 2.快速开始 &emsp;&emsp;快速开始之前请确保你已经接触过[layui](http://www.layui.com/doc/)并了解layui的使用， 尤其是layui模块的使用。否则看本文档会比较吃力。 ### 2.1.导入项目 1. 直接下载项目，或使用git下载； 2. 使用IDEA（WebStorm）或者HBuilder等前端开发工具进行开发； 3. 运行login.html或者index.html启动：  ### 2.2.添加一个业务界面 > 注意：以下操作针对于分离版本，不分离版本菜单维护在数据库，页面由后台渲染，不需要前端有复杂的操作。 比如你要做一个CMS系统，添加一个文章管理界面： - **第一步：<br>** 在components文件夹下面建一个目录cms，然后新建一个页面article.html  article.html完整代码： ```html <div class="layui-card"> <div class="layui-card-header"> <h2 class="header-title">文章管理</h2> <span class="layui-breadcrumb pull-right"> <a href="#!console">首页</a> <a><cite>文章管理</cite></a> </span> </div> <div class="layui-card-body"> <div class="layui-form toolbar"> 搜索：<input id="art-edit-search" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp; <button id="art-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button> </div> <!-- 数据表格 --> <table class="layui-table" id="art-table" lay-filter="art-table"></table> </div> </div> <!-- 表格操作列 --> <script type="text/html" id="art-table-bar"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <script> layui.use(['table', 'util', 'config'], function () { var table = layui.table; var config = layui.config; var util = layui.util; //渲染表格 table.render({ elem: '#art-table', url: config.base_server + 'article.json', where: { access_token: config.getToken().access_token }, page: false, cols: [[ {type: 'numbers'}, {field: 'id', sort: true, title: '文章ID'}, {field: 'label', sort: true, title: '文章标签'}, {field: 'title', sort: true, title: '文章标题'}, {field: 'author', sort: true, title: '作者'}, { field: 'uploadtime', sort: true, templet: function (d) { return util.toDateString(d.createTime); }, title: '发布时间' }, {align: 'center', toolbar: '#art-table-bar', title: '操作'} ]] }); }); </script> ``` - **第二步：<br>** 在module/config.js里面找到menus变量，添加如下所示：  - **第三步：<br>** 运行项目，查看效果  ### 2.3.添加第三方layui扩展模块 > 分离版本和不分离版本添加layui扩展模块都按如下方式来。 请参考项目里面formSelects的添加方法。 - 第一步： 把下载的模块放在module文件夹下面 - 第二步： 打开index.html <br> ```javascript layui.config({ base: 'module/' }).extend({ formSelects: 'formSelects/formSelects-v4' }).use(['config', 'admin', 'formSelects'], function () { var config = layui.config; var admin = layui.admin; var formSelects = layui.formSelects; }); ``` &emsp;&emsp;如果你的模块没有文件夹直接在module里面就不需要写extend了，如果你的模块有独立的文件夹，像formSelects一样， 就需要在extend里面明确指出模块的位置。  --- ## 3.开发指南 ### 3.1.开发规范 阅读开发规范之前请先了解前面“项目结构”的介绍。 1. css、图片、第三方lib（layui扩展模块除外）全部放在“/assets/”下面； 2. layui扩展模块放在“module”下面，例如项目里面“formSelects”模块； 3. 页面html放在“components”下面。 > 注意：不分离版本html不需要放在“components”下面，随便放，因为是后端渲染，前端只需要访问后端的url。 > 比如我这里不分离版本是放在templates目录下面，templates是SpringBoot默认的视图目录。 ### 3.2.入口index.html index.html是项目的主入口，打开index.html你会看到如下代码: ```javascript layui.config({ base: 'module/' }).extend({ formSelects: 'formSelects/formSelects-v4' }).use(['config', 'admin','index'], function () { var config = layui.config; var admin = layui.admin; var index = layui.admin; }); ``` &emsp;&emsp;这段代码首先告诉了lauyui扩展模块都位于“module/”下面，然后扩展模块因为formSelects使用了文件夹 存放，所以需要在“extend”中明确指出formSelects模块js的位置。 &emsp;为什么admin.js、config.js不需要写extend， 因为admin和config是直接放在module里面。 &e