luka
/
sa-plus


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
							<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>Sa-plus快速开发平台</title>
		<link rel="stylesheet" href="in/animate.min.css">
		<script src="https://unpkg.com/marked@0.8.0/marked.min.js"></script>
		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
		<style type="text/css">
			/* 代码样式 */
			body{padding: 0; margin: 0;}
			body{background-color: #FFF;}
			.s-width{width: 1000px; margin: auto;}
			li{line-height: 28px;}
			pre{overflow: auto;}
		</style>
	</head>
	<body>
		<!-- ------------ 头部 ------------- -->
		<div>
			<style type="text/css">
				.s-header *{transition: all 0.2s;}
				.s-header-content{height: 100%; margin: auto;}
				/* 头部 */
				.s-header{height: 80px; box-shadow: 0 1px 3px rgba(26,26,26,.1); background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0.2);}
				.s-header{position: fixed; width: 100%; z-index: 10001; border-bottom: 0px rgba(200,200,200,0.1) solid;}
				/* .s-header-xia{background-color: rgba(0,0,0,0.8); } */
				.s-header-xia{background-color: #FFF; color: #000;}
				.s-header-xia .logo-box, .s-header-xia .nav-box a{color: #000;}
				.s-header-seat{height: 50px;}
				.logo-box{height: 100%; float: left; font-size: 22px; line-height: 80px; color: #FFF; font-weight: 700;}
				.logo-box img{height: 100%;}
				
				.nav-box{float: right; padding-left: 1em; line-height: 80px; }
				.nav-box a{margin: 0 1em; color: #FFF; height: 48px; display: inline-block; text-decoration: none;}
				.nav-box a:hover,.nav-box a.native{/* color: #9C1CEB; */font-weight: 700; text-decoration: underline; /* border-color: #9C1CEB; */}
			</style>
			
			<div class="s-header">
				<div class="s-header-content s-width">
					<a href="index.html">
						<div class="logo-box">
							Sa-plus 快速开发框架
							
						</div>
					</a>
					<div class="nav-box">
						<!-- <a href="#mao-header" class="mao-href">首页</a> -->
						<!-- <a href="index.html">优势</a> -->
						<a href="#mao-header" class="mao-href">首页</a>
						<!-- <a href="#mao-doc" class="mao-href">介绍</a> -->
						<a href="./doc/index.html" target="_blank">在线文档</a>
						<!-- <a href="http://demo.dev33.cn/sp-admin/index.html" target="_blank">在线演示</a> -->
						<a href="http://demo-jj.dev33.cn/spdj-admin/index.html" target="_blank">在线演示</a>
						<a href="http://sa-app.dev33.cn/wall.html?name=sa-plus" target="_blank">需求墙</a>
						<a href="#foot" class="mao-href">关于</a>
					</div>
					<!-- <a href="#foot" style="float: right; line-height: 50px; color: #FFF;">QQ群</a> -->
				</div>
			</div>
			<script type="text/javascript">
				// 监听滚动
				$(function() {
					function f5_class() {
						if($(document).scrollTop() > 200) {
							$('.s-header').addClass('s-header-xia');
						} else {
							$('.s-header').removeClass('s-header-xia');
						}
					}
					f5_class();
					$(document).scroll(f5_class);
				})
			</script>
		</div>
		
		
		<!-- ------------ 背景 ------------- -->
		<div>
			<style type="text/css">
				/* 背景图片样式 */
				.top-box{width: 100wh; height: 75vh; border: 0px #000 solid; position: relative;}
				.bg-box{width: 100%; height: 100%; overflow: hidden; border: 0px; background-color: #000;}
				.bg-box img{width: 100%; height:100%; object-fit:cover; object-position: 10% 20%; animation: changes 8s 0.2s linear infinite alternate;}
				@keyframes changes {
					from {object-position: 10% 30%;}
					to {object-position: 10% 0%;}
				}
				
				.s-poster{position: absolute; top: 0px; /* pointer-events: none; */}
				.s-poster{border: 0px #000 solid; width: 100%; height: 100%; display: flex; align-items: center; }
				/* .s-poster{background-image: url(img/poster-bg.png); background-size: 100% 100%;} */
				.s-poster{color: #FFF; /* font-family: "华文新魏"; */ text-align: center;}
				.s-poster-content{flex: 1;}
				.s-poster-content-2{margin: auto; padding: 1em; overflow: hidden;}
				.s-p-y{pointer-events: auto;}
				/* 按钮 */
				.ws-btn-box{margin-right: 8px; text-align: center; display: inline-block;}
				.ws-btn-box a{margin: 0 10px; text-decoration: none;display: inline-block; transition: all 0.2s;}
				.ws-btn-box a:hover{transform: scale(1.1, 1.1); }
				.ws-btn{font-size: 1.4em; padding: 0 1.2em; height: 58px; line-height: 58px; background-color: rgba(0,0,0,0); border: 1px #FFF solid; color: #FFF; cursor: pointer;}
				.ws-btn{border-radius: 3px; box-shadow: 0 0 10px rgba(200,200,200,0.3); background-color: rgba(0,0,0,0.3);}
				.ws-btn:hover{color: #FFF; border: 1px #FFF solid; background-color: rgba(0,0,0,0.6);}
				
			</style>
			<div class="top-box" id="mao-header">
				<!-- <iframe class="bg-box" src="./bg.html"></iframe> -->
				<div class="bg-box">
					<img src="in/bg.jpg" alt="背景图片">
				</div>
				<div class="s-poster">
					<div class="s-poster-content">
						<div class="s-poster-content-2 s-width" style="text-align: center;">
							<br><br><br><br>
							<div class="s-p-y animated fadeInUp" style="font-size: 38px;">Sa-plus 快速开发框架, 内置代码生成器</div>
							<br>
							<div class="s-p-y animated fadeInUp" style="font-size: 16px;">只需写上简单的表注释，即可直接生成增删改查</div>
							<br><br><br>
							<div>
								<div class="ws-btn-box">
									<a href="https://github.com/click33/sa-plus" target="_blank">
										<button class="ws-btn s-p-y animated bounceIn" h-an="rubberBand">GitHub</button>
									</a>
									<a href="https://gitee.com/click33/sa-plus" target="_blank">
										<button class="ws-btn s-p-y animated bounceIn">Gitee</button>
									</a>
									<a href="http://sa-app.dev33.cn/wall.html?name=sa-plus" target="_blank">
										<button class="ws-btn s-p-y animated bounceIn">需求墙</button>
									</a>
									<a href="./doc/index.html" target="_blank">
										<button class="ws-btn s-p-y animated bounceIn">在线文档</button>
									</a>
								</div>
							</div> 
							<br><br>
							<div class="animated fadeInUp"><span style="font-size: 0.9em; font-weight: 400;"> 当前版本 v1.27.0 &emsp;更新于 2022-2-26</span></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<!-- ------------ 介绍 ------------- -->
		<div>
			<meta charset="UTF-8">
			<style type="text/css">
				.jieshao-box{padding: 3em 1em; padding-bottom: 4em; text-align: center;}
				.jieshao-box h2{font-size: 30px; font-weight: 400;}
				.jieshao-text{color: rgb(128, 128, 128); text-align: center; box-sizing: border-box; line-height: 24px; font-size: 16px; padding-top: 10px;}
			</style>
			<div class="jieshao-box s-width">
				<h2>Sa-plus 框架介绍</h2>
				<div class="jieshao-text">
					<p>Sa-plus 开源于2020年4月，是一个基于springboot的快速开发框架, 内置代码生成器</p>
					<p>框架集成JavaWeb开发常见功能，如：文件上传、角色授权、全局异常处理、redis控制台、API日志统计、全局配置、跨域处理、
					统一的弹窗封装 等等，让你不再为项目的基础设施劳神费心！</p>
					<p>高自动化代码生成：普通input、多行文本域、富文本、枚举按钮、日期控件、图片上传、音频上传、视频上传、
					多图上传、树形表格、连接外键、聚合外键等等，你只需写上简单的表注释，即可直接生成完善的增删改查！</p>
					<p>极致的开发体验是框架的宗旨，消灭重复，我们是专业的！</p>
				</div>
			</div>
		</div>
		
		
		<!-- ------------ 技术栈预览 ------------- -->
		<div style=" background-color: #eee; background-image: url(http://yun94.cn/static/images/comment_bg.jpg);">
			<meta charset="UTF-8">
			<style type="text/css">
				.jsz-box{padding: 4em 1em; padding-bottom: 0px; text-align: center;}
				.jsz-box h2{font-size: 30px; font-weight: 400;}
				.jsz-fox{padding-top: 20px;}
				.jsz-img-box{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 50px;}
				.jsz-img-box a{display: inline-block; width: 20%; margin: 5px; flex: 1; border: 1px #ddd solid; cursor: pointer;}
				.jsz-img-box a img{transition: all 0.2s; width: 100%; height: 90%; display: block;}
				.jsz-fox .jsz-img-box a span{margin-top: 10px; display: block; text-decoration: none !important;}
				.jsz-img-box a img:hover{transform: scale(1.1, 1.1);}
			</style>
			<div class="jsz-box s-width">
				<h2>Sa-plus 技术栈</h2>
				<p style="color: #666;">项目主要技术选型预览 (包括但不限于以下)</p>
				<div class="jsz-fox">
					<div class="jsz-img-box">
						<a href="http://sa-admin.dev33.cn/" target="_blank">
							<img src="http://oss.dev33.cn/sa-plus/jsz-sa-admin.png">
							<span>sa-admin 后台UI</span>
						</a>
						<a href="http://sa-token.dev33.cn/" target="_blank">
							<img src="http://oss.dev33.cn/sa-plus/jsz-sa-token.png">
							<span>sa-token 权限认证</span>
						</a>
						<a href="http://sa-doc.dev33.cn/" target="_blank">
							<img src="http://oss.dev33.cn/sa-plus/jsz-sa-doc.png">
							<span>sa-doc 接口文档</span>
						</a>
						<a href="https://baomidou.com/" target="_blank">
							<img src="http://oss.dev33.cn/sa-plus/jsz-mybatis-plus.png">
							<span>MyBatis-Plus</span>
						</a>
					</div>
					<div class="jsz-img-box">
						<a href="https://pagehelper.github.io/" target="_blank">
							<img src="http://oss.dev33.cn/sa-plus/jsz-pagehelper.png">
							<span>PageHelper</span>
						</a>
						<a href="https://github.com/alibaba/druid/" target="_blank">
							<img src="http://oss.dev33.cn/sa-plus/jsz-druid.png">
							<span>Druid</span>
						</a>
						<a href="https://github.com/alibaba/fastjson" target="_blank">
							<img src="http://oss.dev33.cn/sa-plus/jsz-fastjson.png">
							<span>fastjson</span>
						</a>
						<a href="https://hutool.cn/docs/#/" target="_blank">
							<img src="http://oss.dev33.cn/sa-plus/jsz-hutool.png">
							<span>Hutool</span>
						</a>
					</div>
					<div class="jsz-img-box">
						<a href="http://okhttps.ejlchina.com/" target="_blank">
							<img src="http://oss.dev33.cn/sa-plus/jsz-okhttps.png">
							<span>OkHttps</span>
						</a>
						<a href="https://cn.vuejs.org/" target="_blank">
							<img src="http://oss.dev33.cn/sa-plus/jsz-vue.png">
							<span>Vue</span>
						</a>
						<a href="https://element.eleme.cn/#/zh-CN" target="_blank">
							<img src="http://oss.dev33.cn/sa-plus/jsz-element-ui.png">
							<span>element-ui</span>
						</a>
						<a href="https://layer.layui.com/" target="_blank">
							<img src="http://oss.dev33.cn/sa-plus/jsz-layer.png">
							<span>layer</span>
						</a>
					</div>
				</div>
				<div style="height: 50px; clear: both;"></div>
				<p style="color: #666;">(如果项目使用了您的框架却没有出现在此列表中，您可以编辑github页面进行提交)</p>
			</div>
			<div style="height: 60px;"></div>
			<!-- img点击放大 -->
			<script type="text/javascript">
				$('.yulan-box').on('click', 'img', function(){
					open(this.src);
					return false;
				});
			</script>
		</div>
		
		
		<!-- ------------ 预览 ------------- -->
		<div style=" background-color: #FFF;">
			<meta charset="UTF-8">
			<style type="text/css">
				.yulan-box{padding: 2em 1em; text-align: center;}
				.yulan-box h2{font-size: 30px; font-weight: 400;}
				.yulan-fox{padding-top: 20px;}
				.yulan-img-box{display: flex; flex-wrap: wrap; justify-content: space-between;}
				.yulan-img-box img{width: 20%; margin: 5px; flex: 1; border: 1px #ddd solid; cursor: pointer;transition: all 0.2s; }
				.yulan-img-box img:hover{transform: scale(1.1, 1.1);}
			</style>
			<div class="yulan-box s-width">
				<h2>Sa-plus 框架预览</h2>
				<p style="color: #666;">以下图片可能存在版本滞后，具体请以最新版本为准</p>
				<div class="yulan-fox">
					<div class="yulan-img-box">
						<img src="https://color-test.oss-cn-qingdao.aliyuncs.com/sa-plus/pre-1.png">
						<img src="https://color-test.oss-cn-qingdao.aliyuncs.com/sa-plus/pre-2.png">
					</div>
					<div class="yulan-img-box">
						<img src="https://color-test.oss-cn-qingdao.aliyuncs.com/sa-plus/pre-3.png">
						<img src="https://color-test.oss-cn-qingdao.aliyuncs.com/sa-plus/pre-4.png">
					</div>
					<div class="yulan-img-box">
						<img src="https://color-test.oss-cn-qingdao.aliyuncs.com/sa-plus/pre-5.png">
						<img src="https://color-test.oss-cn-qingdao.aliyuncs.com/sa-plus/pre-6.png">
					</div>
					<div class="yulan-img-box">
						<img src="https://color-test.oss-cn-qingdao.aliyuncs.com/sa-plus/pre-7.png">
						<img src="https://color-test.oss-cn-qingdao.aliyuncs.com/sa-plus/pre-8.png">
					</div>
				</div>
			</div>
			<div style="height: 40px;"></div>
			<!-- img点击放大 -->
			<script type="text/javascript">
				$('.yulan-box').on('click', 'img', function(){
					open(this.src);
					return false;
				});
			</script>
		</div>
		
		
		<!-- ------------ 底部 连接 ------------- -->
		<style type="text/css">
			#footer{background-color: #252525;}
			#footer h3{font-weight: 400; font-size: 16px; color: #ccc;}
			#footer{border-top: 1px #666 solid;}
			.footer-r-b{display: flex; padding: 40px 0;}
			.ss-box{display: inline-block; flex: 1; color: #595959; margin: 0 50px; font-size: 14px;}
			.ss-box a{color: #595959; text-decoration: none;}
			.ss-box a:hover{color: #EEE; text-decoration: underline;}
			.ss-box ul{margin: 0; padding: 0;}
			.ss-box li{list-style: none;}
		</style>
		<footer id="footer">
			<div id="s-footer" class="mao-link"></div>
			<div class="footer-r-b s-width">
				<div class="ss-box">
					<h3>友情链接</h3>
					<ul class="list-unstyle">
						<li><a href="https://www.aliyun.com/" target="_blank">阿里云</a></li>
						<li><a href="https://cloud.tencent.com/" target="_blank">腾讯云</a></li>
						<li><a href="https://segmentfault.com/" target="_blank">SegmentFault 思否</a></li>
					</ul>
				</div>
				<div class="ss-box">
					<h3>友情链接</h3>
					<ul class="list-unstyle">
						<li><a href="http://okhttps.ejlchina.com/" target="_blank">okhttps</a></li>
						<li><a href="https://docsify.js.org/#/zh-cn/" target="_blank">docsify</a></li>
						<li><a href="http://yanzhi21.com" target="_blank">颜值排行榜</a></li>
					</ul>
				</div>
				<div class="ss-box">
					<h3>联系我们</h3>
					<ul class="list-unstyle">
						<!-- <li>电话：<a href="tel:123;">123</a></li> -->
						<li>QQ群 ：<a href="https://jq.qq.com/?_wv=1027&k=NNBSOkeA" target="_blank">310293485</a></li>
						<li>邮箱：<a href="">暂无</a></li>
						<li>联系：<a href="">暂无</a></li>
					</ul>
				</div>
				<div class="ss-box">
					<h3 class="last" style="text-align: left; float: none; padding-left: 0px;">扫码加群</h3>
					<div class="media-img padding-small-top" style="text-align: left;">
						<a href="http://dev33-yxzj.oss-cn-beijing.aliyuncs.com/dyc/img/2020/01/17/157924554064970545739.png" target="_blank">
							<img src="http://dev33-yxzj.oss-cn-beijing.aliyuncs.com/dyc/img/2020/01/17/157924554064970545739.png" width="100" height="100" />
						</a>
					</div>
				</div>
			</div>
		</footer>
		
		<!-- -------------- 底部 版权 -------------- -->
		<div>
			<meta charset="UTF-8">
			<style type="text/css">
				.foot-box{background-color: #181818; color: #ddd; padding: 2em 0px; line-height: 28px; overflow: hidden; position: relative; z-index: 100;}
				.foot-box{border-top: 0px #666 solid;}
				.foot-box p{text-indent: 1em;}
				.foot-box b{font-size: 1.1em;}
				.foot-box a{color: #ddd; font-size: 0.9em;}
				.foot-box a:hover{text-decoration: underline;}
			</style>
			<div class="foot-box" id="foot">
				<div class="s-width" style="text-align: center;">
					Copyright ©2020 Sa-plus 快速开发 | sa-plus.dev33.cn | <a href="http://www.miitbeian.gov.cn/" target="_blank">鲁ICP备18046274号-2</a>
				</div>
			</div>
		</div>
		
		
		<!-- 点击锚链接事件 -->
		<script type="text/javascript">
			$('.mao-href').click(function() {
				$('html, body').animate({
					scrollTop: $($.attr(this, 'href')).offset().top
				}, 500);
				return false;
			});
		</script>
		<div style="height: 0px; overflow: hidden;">
			<script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1279021391&web_id=1279021391"></script>
		</div>
		
		
	</body>
</html>