SSM SpringBoot vue解三阶魔方教学网站
SSM 解三阶魔方教学网站 功能介绍
首页 图片轮播 新闻资讯 魔方教程 魔方资料 留言板 登录注册 个人中心 我的收藏
后台管理 登录注册 个人中心 用户管理 魔方教材管理 魔方教程管理 魔方资料管理
试卷列表 考试记录 错题本 试卷管理 试题管理 系统图片管理 新闻资讯管理
使用技术
SSM(Spring + SpringMVC + Mybaits)或SpringBoot框架
Mybaits
Mysql数据库
layui前端
vue后台管理
功能展示
首页.jpg
魔方教程.jpg
登录.jpg
人个中心.jpg
后台登录.jpg
魔方教程管理.jpg
试卷管理.jpg
考试记录管理.jpg
用户管理.jpg
前端主页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
