# 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
没有合适的资源?快使用搜索试试~ 我知道了~
microservices-platform.zip
共944个文件
java:400个
gif:80个
xml:65个
需积分: 5 0 下载量 130 浏览量
2023-08-18
09:44:25
上传
评论
收藏 91.03MB ZIP 举报
温馨提示
microservices-platform
资源推荐
资源详情
资源评论
收起资源包目录
microservices-platform.zip (944个子文件)
changeVersion.bat 859B
package.bat 804B
build.bat 13B
install_node_modules.bat 11B
start.bat 9B
startup.cmd 3KB
shutdown.cmd 954B
CNAME 22B
layui.css 59KB
formSelects-v4.css 17KB
admin.css 15KB
layer.css 14KB
layui.mobile.css 10KB
laydate.css 7KB
metroStyle.css 6KB
zTreeStyle.css 6KB
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
white.css 3KB
common.css 2KB
theme-blue.css 2KB
black.css 2KB
login.css 2KB
reset.css 1KB
code.css 1KB
tpl-theme.css 986B
console.css 522B
treetable.css 294B
Dockerfile 379B
Dockerfile 363B
Dockerfile 190B
.editorconfig 245B
document.ejs 6KB
iconfont.eot 39KB
.eslintignore 56B
application.properties.example 6KB
cluster.conf.example 670B
spring.factories 305B
spring.factories 219B
spring.factories 206B
spring.factories 169B
spring.factories 156B
spring.factories 148B
spring.factories 120B
spring.factories 118B
spring.factories 118B
spring.factories 117B
spring.factories 113B
spring.factories 110B
spring.factories 104B
spring.factories 104B
com.alibaba.dubbo.rpc.Filter 47B
59.gif 10KB
22.gif 10KB
24.gif 8KB
13.gif 7KB
16.gif 7KB
39.gif 6KB
64.gif 6KB
63.gif 6KB
50.gif 6KB
loading-0.gif 6KB
4.gif 6KB
zTreeStandard.gif 5KB
1.gif 5KB
42.gif 5KB
71.gif 5KB
21.gif 5KB
20.gif 5KB
29.gif 5KB
metro.gif 5KB
70.gif 4KB
5.gif 4KB
17.gif 4KB
27.gif 4KB
9.gif 4KB
44.gif 4KB
11.gif 4KB
8.gif 4KB
3.gif 4KB
23.gif 4KB
34.gif 4KB
41.gif 4KB
38.gif 4KB
65.gif 3KB
32.gif 3KB
45.gif 3KB
7.gif 3KB
12.gif 3KB
26.gif 3KB
60.gif 3KB
2.gif 3KB
40.gif 3KB
共 944 条
- 1
- 2
- 3
- 4
- 5
- 6
- 10
资源评论
hello_中年人
- 粉丝: 7
- 资源: 324
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功