# EasyWeb 前端开发文档
## 1.简介
> 基于jquery、layui的管理系统模板,单页面、响应式、支持mvvm、极易上手!
* 演示地址:[https://whvse.gitee.io/easywebpage/](https://whvse.gitee.io/easywebpage/login.html)
* 演示账号:随便输    密码:随便输
 EasyWeb包含前后台,
[前台地址](https://gitee.com/whvse/EasyWebPage),
[分离版后台地址](https://gitee.com/whvse/EasyWeb),
[不分离版后台地址](https://gitee.com/whvse/easyweb-shiro),
后台基于springboot、mybatis、mybatis-plus、Security、OAuth2等,不分离版权限使用shiro。
 此文档包含分离和不分离版本的前端开发指南,两者的使用是有些区别的,
不同的地方在文档中都着重指明了,参考文档使用即可。
### 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 // 第三方库
|
|-pages // 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 // 登陆界面
```
> 不分离版没有pages目录,不分离版的页面由后台输出,前端只有assets和module
## 2.快速开始
  快速开始之前请确保你已经接触过[layui](http://www.layui.com/doc/)并了解layui的使用,
尤其是layui模块的使用。否则看本文档会比较吃力。
### 2.1.导入项目
1. 直接下载项目,或使用git下载;
2. 使用IDEA(WebStorm)或者HBuilder等前端开发工具进行开发;
3. 运行login.html或者index.html启动:
![](https://ws1.sinaimg.cn/large/006a7GCKgy1fswshc48i2j30i80d5jt6.jpg)
### 2.2.添加一个业务界面
> 注意:以下操作针对于分离版本,不分离版本菜单维护在数据库,页面由后台渲染,不需要前端有复杂的操作。
比如你要做一个CMS系统,添加一个文章管理界面:
- **第一步:<br>**
在pages文件夹下面建一个目录cms,然后新建一个页面article.html
![添加业务页面示例](https://ws1.sinaimg.cn/large/006a7GCKgy1fswocatj9yj30bm0chglu.jpg)
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="输入关键字"/> 
<button id="art-btn-search" class="layui-btn icon-btn"><i class="layui-icon"></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变量,添加如下所示:
![配置menus示例](https://ws1.sinaimg.cn/large/006a7GCKgy1ftg1etm1ahj30i80b4752.jpg)
- **第三步:<br>**
运行项目,查看效果
![添加业务界面效果](https://ws1.sinaimg.cn/large/006a7GCKgy1fswpb4ieu3j30vo0i475m.jpg)
### 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;
});
```
  如果你的模块没有文件夹直接在module里面就不需要写extend了,如果你的模块有独立的文件夹,像formSelects一样,
就需要在extend里面明确指出模块的位置。
![添加模块示例](https://ws1.sinaimg.cn/large/006a7GCKgy1fswoa7omxej30bh0cgwes.jpg)
---
## 3.开发指南
### 3.1.开发规范
阅读开发规范之前请先了解前面“项目结构”的介绍。
1. css、图片、第三方lib(layui扩展模块除外)全部放在“/assets/”下面;
2. layui扩展模块放在“module”下面,例如项目里面“formSelects”模块;
3. 页面html放在“pages”下面。
> 注意:不分离版本html不需要放在“pages”下面,随便放,因为是后端渲染,前端只需要访问后端的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;
});
```
  这段代码首先告诉了lauyui扩展模块都位于“module/”下面,然后扩展模块因为formSelects使用了文件夹
存放,所以需要在“extend”中明确指出formSelects模块js的位置。  为什么admin.js、config.js不需要写extend,
因为admin和config是直接放在module里面。
  接着index.htm
没有合适的资源?快使用搜索试试~ 我知道了~
简称ocp是基于layui+springcloud的企业级微服务框架
共1887个文件
java:545个
js:309个
png:284个
需积分: 7 1 下载量 94 浏览量
2022-11-19
17:29:41
上传
评论
收藏 19.56MB ZIP 举报
温馨提示
其核心的设计目标是分离前后端,快速开发部署,学习简单,功能强大,提供快速接入核心接口能力,其目标是帮助企业搭建一套类似百度能力开放平台的框架; - 基于layui前后端分离的企业级微服务架构 - 兼容spring cloud netflix & spring cloud alibaba - 优化Spring Security内部实现,实现API调用的统一出口和权限认证授权中心 - 提供完善的企业微服务流量监控,日志监控能力 - 提供完善的压力测试方案 - 提供完善的灰度发布方案 - 提供完善的微服务部署方案 仅可供学习研究
资源推荐
资源详情
资源评论
收起资源包目录
简称ocp是基于layui+springcloud的企业级微服务框架 (1887个子文件)
list.html.bak 5KB
CHANGES 3KB
bootstrap.css 118KB
bootstrap.min.css 118KB
bootstrap.min.css 98KB
bootstrap.min.css 97KB
AdminLTE-local.min.css 88KB
AdminLTE.min.css 88KB
layui.css 68KB
style.css 62KB
loaders.css 55KB
ui-grid.css 52KB
ionicons.min.css 50KB
notice.css 50KB
_all-skins.min.css 40KB
ui-grid.min.css 38KB
style-editor.css 34KB
font-awesome.min.css 27KB
style.css 25KB
handsontable.full.min.css 22KB
formSelects-v4.css 17KB
_all.css 15KB
bootstrap-theme.css 15KB
admin.css 15KB
spectrum.css 14KB
layer.css 14KB
layer.css 14KB
jquery.dataTables_themeroller.css 14KB
vue.css 13KB
jquery.dataTables.min.css 13KB
page_all.css 13KB
bootstrap-theme.min.css 13KB
dropdown.css 10KB
layui.mobile.css 10KB
jquery.qtip.min.css 9KB
dataTables.bootstrap.css 9KB
nvd3.min.css 8KB
codemirror.css 8KB
laydate.css 7KB
local.google.fonts.css 7KB
daterangepicker.css 7KB
metroStyle.css 6KB
zTreeStyle.css 6KB
styles.css 6KB
theme-white.css 5KB
daterangepicker-bs3.css 5KB
layer.css 5KB
pace-theme-bounce.css 5KB
theme-red-white.css 5KB
theme-red.css 5KB
theme-green-dark.css 5KB
theme-red-dark.css 5KB
theme-cyan.css 5KB
theme-green.css 5KB
theme-blue.css 5KB
theme-blue-white.css 5KB
theme-blue-side.css 5KB
qunit.css 5KB
dtreefont.css 4KB
import_main.css 4KB
ol.css 4KB
editor.css 4KB
city-picker.css 3KB
dtree.css 3KB
login.css 2KB
loading-bar.min.css 2KB
theme-blue.css 2KB
pace-theme-flash.css 2KB
theme-black.css 2KB
jasmine.css 2KB
angular-gridster.min.css 2KB
hotkeys.css 2KB
normalize.css 2KB
bootstrap-tour.min.css 2KB
yellow.css 2KB
purple.css 2KB
orange.css 2KB
green.css 2KB
aero.css 2KB
blue.css 2KB
grey.css 2KB
pink.css 2KB
red.css 2KB
square.css 2KB
hotkeys.min.css 1KB
demo.css 1KB
step.css 1KB
default.css 1KB
code.css 1KB
style-retina.css 856B
show-hint.css 662B
console.css 522B
displaymodel.css 484B
displaymodel.css 476B
treetable.css 294B
Dockerfile 218B
Dockerfile 215B
Dockerfile 214B
Dockerfile 214B
Dockerfile 213B
共 1887 条
- 1
- 2
- 3
- 4
- 5
- 6
- 19
资源评论
嗼唸
- 粉丝: 7
- 资源: 444
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功