SSM SpringBoot vue解三阶魔方教学网站
SSM 解三阶魔方教学网站 功能介绍
首页 图片轮播 新闻资讯 魔方教程 魔方资料 留言板 登录注册 个人中心 我的收藏
后台管理 登录注册 个人中心 用户管理 魔方教材管理 魔方教程管理 魔方资料管理
试卷列表 考试记录 错题本 试卷管理 试题管理 系统图片管理 新闻资讯管理
使用技术
-
SSM(Spring + SpringMVC + Mybaits)或SpringBoot框架
-
Mybaits
-
Mysql数据库
-
layui前端
-
vue后台管理
功能展示
前端主页index.html
<!DOCTYPE html>
<html>
<head>
<title>解三阶魔方教学网站</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
<!-- Place favicon.ico in the root directory -->
<!-- all css here -->
<!-- bootstrap v3.3.6 css -->
<link rel="stylesheet" href="assets/css/original/bootstrap.min.css">
<!-- animate css -->
<link rel="stylesheet" href="assets/css/original/animate.css">
<!-- jquery-ui.min css -->
<link rel="stylesheet" href="assets/css/original/jquery-ui.min.css">
<!-- meanmenu css -->
<link rel="stylesheet" href="assets/css/original/meanmenu.min.css">
<!-- owl.carousel css -->
<link rel="stylesheet" href="assets/css/original/owl.carousel.css">
<!-- slick slider css -->
<link rel="stylesheet" href="assets/css/original/slick.css">
<!-- font-awesome css -->
<link rel="stylesheet" href="assets/css/original/font-awesome.min.css">
<!-- style css -->
<link rel="stylesheet" href="assets/css/original/style.css">
<!-- responsive css -->
<link rel="stylesheet" href="assets/css/original/responsive.css">
<!-- modernizr js -->
<script src="assets/js/relys/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!-- header start -->
<header id="app">
<!-- header-bottom-area start -->
<div id="sticker" class="header-bottom-area">
<div class="container">
<div class="inner-container">
<div class="row d-flex">
<div class="">
<div class="logo">
<div style="line-height: 3.85rem;">解三阶魔方教学网站</div>
</div>
</div>
<div class="hidden-xs hidden-sm">
<div class="main-menu">
<nav>
<ul v-if="navs">
<li class="nav-item-box" v-for="(item, i) in navs" :key="i">
<a class="nav-item" :href="`javascript:onPageClick('${item.url}')`" v-if="item.yanzheng&&hstoken">{{item.name}}</a>
<a class="nav-item" href="javascript:onPageClick('./pages/login/login.html')" v-if="item.yanzheng&&!hstoken">登录</a>
<a class="nav-item" :href="`javascript:onPageClick('${item.url}')`" v-if="!item.yanzheng&&!item.window">{{item.name}}</a>
<a class="nav-item" :href="`${item.url}`" target="view_window" v-if="!item.yanzheng&&item.window">{{item.name}}</a>
<ul v-if="item.children.length>0">
<li v-for="(ele, idx) in item.children" :key="idx"><a :href="`javascript:onPageClick('${ele.url}')`">{{ele.name}}</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="header-right">
</div>
</div>
</div>
</div>
</div>
<!-- header-bottom-area end -->
<!-- mobile-menu-area start -->
<div class="mobile-menu-area visible-xs visible-sm">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="mobile-menu">
<nav id="dropdown">
<ul>
<li v-for="(item, i) in navs" :key="i">
<a :href="`javascript:onPageClick('${item.url}')`" v-if="item.yanzheng&&hstoken">{{item.name}}</a>
<a href="javascript:onPageClick('./pages/login/login.html')" v-if="item.yanzheng&&!hstoken">登录</a>
<a :href="`javascript:onPageClick('${item.url}')`" v-if="!item.yanzheng&&!item.window">{{item.name}}</a>
<a :href="`${item.url}`" target="view_window" v-if="!item.yanzheng&&item.window">{{item.name}}</a>
<ul v-if="item.children.length>0">
<li v-for="(ele, idx) in item.children" :key="idx"><a :href="`javascript:onPageClick('${ele.url}')`">{{ele.name}}</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- mobile-menu-area end -->
</header>
<!-- header end -->
<iframe src="pages/home/shop-home.html" frameborder="0" scrolling="no" id="main" onload="this.height=0" style="margin-bottom: 90px;"></iframe>
<!-- footer start -->
<footer>
<!-- footer-bottom-area start -->
<div class="footer-bottom-area">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="copyright">
<p>Copyright ? <a href="#">jiulin</a>. All Rights Reserved</p>
</div>
</div>
</div>
</div>
</div>
<!-- footer-bottom-area end -->
</footer>
<!-- footer end -->
<!-- all js here -->
<!-- jquery latest version -->
<script src="assets/js/relys/jquery-1.12.0.min.js"></script>
<!-- bootstrap js -->
<script src="assets/js/relys/bootstrap.min.js"></script>
<!-- owl.carousel js -->
<script src="assets/js/relys/owl.carousel.min.js"></script>
<!-- meanmenu js -->
<script src="assets/js/relys/jquery.meanmenu.js"></script>
<!-- jquery-ui js -->
<script src="assets/js/relys/jquery-ui.min.js"></script>
<!-- wow js -->
<script src="assets/js/relys/wow.min.js"></script>
<!-- plugins js -->
<script src="assets/js/relys/plugins.js"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/js/api/api.js"></script>
<script src="assets/js/api/defaultuser.js"></script>
<script src="assets/js/api/shop-cart.js"></script>
<script src="assets/js/api/tplist.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
hstoken: false,
navs: [
{
name: '首页',
url: './pages/home/shop-home.html',
children: []
},
{
name: '魔方教程模块'.split('模块')[0],
url: './pages/mofangjiaocheng/list.html',
children: []
},
{
name: '魔方资料模块'.split('模块')[0],
url: './pages/mofangziliao/list.html',
children: []
},
{
name: '留言板',
url: "pages/blog/blog-list.html",
children: []
},
{
name: '个人中心',
url: './pages/personal/personal.html',
yanzheng: true,
children: [
{
name: '我的收藏',
url: './pages/storeup/list.html'
},
]
},
{
name: '后台管理',
url: baseurl+"admin/dist/index.html",
window: true,
children: []
},
]
},
created() {
},
methods: {
onPageClick(url) {
$('.search-inside').fadeOut();
$('#main').attr('src', url);
},
}
})
setInterval(function() {
var token = localStorage.getItem("Token")
app.hstoken = token ? true : false
}, 1000)
//获取子页面的高度
function reinitIframe() {
var childPageH = $('#main').contents().find('#app').height();
$('#main').height(childPageH);
}
window.setInterval("reinitIframe()", 200);
function onPageClick(url) {
$('#main').attr('src', url);
}
</script>
<script src="assets/js/relys/main.js"></script>
</body>
</html>
运行
创建数据库, 然后修改数据库连接相关信息。
配置tomcat运行
前台访问地址：http://localhost:8080/ssm/front/index.html
后台访问地址：http://localhost:8080/ssm/admin/dist/index.html
管理员账号：liang 密码：liang