IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> Java知识库 -> SSM SpringBoot vue解三阶魔方教学网站 -> 正文阅读

[Java知识库]SSM SpringBoot vue解三阶魔方教学网站

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

  Java知识库 最新文章
计算距离春节还有多长时间
系统开发系列 之WebService(spring框架+ma
springBoot+Cache(自定义有效时间配置)
SpringBoot整合mybatis实现增删改查、分页查
spring教程
SpringBoot+Vue实现美食交流网站的设计与实
虚拟机内存结构以及虚拟机中销毁和新建对象
SpringMVC---原理
小李同学: Java如何按多个字段分组
打印票据--java
上一篇文章      下一篇文章      查看所有文章
加:2022-09-25 23:07:17  更:2022-09-25 23:08:45 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 1:25:31-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码