# 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
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
open-capacity-platform-master.zip (2000个子文件)
.babelrc 358B
package.bat 458B
run.bat 93B
main.css 434KB
editor.main.css 168KB
editor.main.css 168KB
console1412.css 153KB
console1412.css 153KB
bootstrap.css 120KB
bootstrap.css 120KB
bootstrap.min.css 119KB
AdminLTE.min.css 104KB
bootstrap.min.css 97KB
layui.css 68KB
loaders.css 55KB
ionicons.min.css 50KB
notice.css 50KB
app.css 45KB
_all-skins.min.css 41KB
main.css 36KB
font-awesome.css 33KB
font-awesome.css 33KB
font-awesome.min.css 30KB
font-awesome.min.css 30KB
formSelects-v4.css 17KB
admin.css 15KB
layer.css 14KB
layer.css 14KB
page_all.css 13KB
dropdown.css 10KB
layui.mobile.css 10KB
codemirror.css 9KB
codemirror.css 9KB
codemirror.css 8KB
daterangepicker.css 8KB
laydate.css 8KB
laydate.css 7KB
viewer.min.css 7KB
metroStyle.css 6KB
page.css 6KB
zTreeStyle.css 6KB
styles.css 6KB
theme-white.css 5KB
icon.css 5KB
icon.css 5KB
theme-red-white.css 5KB
theme-red.css 5KB
theme-red-dark.css 5KB
theme-green-dark.css 5KB
theme-green.css 5KB
theme-cyan.css 5KB
theme-blue.css 5KB
theme-blue-white.css 5KB
theme-blue-side.css 5KB
dtreefont.css 4KB
red-white.css 4KB
red.css 4KB
red-dark.css 4KB
green-dark.css 4KB
green.css 4KB
cyan.css 4KB
blue.css 4KB
blue-white.css 4KB
blue-side.css 4KB
dataTables.bootstrap.min.css 4KB
index.css 4KB
import_main.css 4KB
merge.css 4KB
merge.css 4KB
demo.css 4KB
ol.css 4KB
timeline.css 3KB
white.css 3KB
city-picker.css 3KB
dtree.css 3KB
login.css 2KB
theme-blue.css 2KB
black.css 2KB
loading.css 2KB
theme-black.css 2KB
pace-theme-flash.css 2KB
normalize.css 2KB
blue.css 2KB
demo.css 1KB
step.css 1KB
default.css 1KB
code.css 1KB
tpl-theme.css 986B
show-hint.css 623B
webuploader.css 541B
console.css 522B
treetable.css 294B
license-stat.csv 856B
Dockerfile 217B
Dockerfile 215B
Dockerfile 215B
Dockerfile 214B
Dockerfile 214B
Dockerfile 213B
Dockerfile 212B
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
m0_72731342
- 粉丝: 2
- 资源: 1832
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功