SSM SpringBoot vue解三阶魔方教学网站

最新推荐文章于 2024-04-20 09:45:10 发布
最新推荐文章于 2024-04-20 09:45:10 发布
阅读量602 收藏 2
点赞数 1
分类专栏： SSM vue mysql 文章标签： spring boot ssm vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinjl123/article/details/127032093
版权
mysql 同时被 3 个专栏收录
98 篇文章 1 订阅
订阅专栏
vue
67 篇文章 0 订阅
订阅专栏
SSM
53 篇文章 0 订阅
订阅专栏

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

阿亮说技术
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义魔方布局适合照片墙、店铺装修等
04-08
自定义魔方布局适合照片墙、店铺装修等
Vue实战-模版建站
08-10
在现在很多toC的应用中，我们可以一个应用每隔一段时间就会变动一下页面，有些更新频率大的应用可能一天修改一次界面。这个时候如果开发还是采用古老的替换代码的形式肯定是不行的。这个时候我们就需要一个模版建站的功能来替代这种重复性的工作，让运营可以通过我们预先开发好的组件来搭配各种各样的布局，既减少了开发的工作量，又可以降低运营的沟通成本，何乐而不为。课程主要以vue来从0开始实现模版建站的功能。学完本课程大家可以自定义自己的组件并且可以轻松搭建一个网易考拉的h5首页。
探索MeanMenu：一款优雅的响应式导航菜单库
最新发布
gitblog_00080的博客
04-20 350
探索MeanMenu：一款优雅的响应式导航菜单库 项目地址:https://gitcode.com/meanthemes/meanMenu 在现代网页设计中，提供一个易于操作、响应快速且适应各种设备的导航菜单至关重要。今天，我们将深入介绍一个专注于此的开源项目——MeanMenu。 项目简介 MeanMenu是一款基于JavaScript和CSS编写的轻量级插件，它为网站提供了高度可定制的响应式菜...
vue搭配three.js创建3D旋转方块
qq_39594951的博客
05-08 605
1.three.js由三部分组成,scene(场景),camera(相机),渲染器(renderer),有这三样东西，才可以渲染进网页中 <template> <div class="lvse"> </div> </template> <script> export default { name:'lvse', data(){ return{
meanMenu, 响应菜单插件.zip
09-18
meanMenu, 响应菜单插件 MeanMenu v2.0.8查找WordPress版本？PluginHero的朋友刚刚发布了的MeanMenu版本。用于将标准菜单转换为移动/平板响应菜单的菜单系统，媒体查询独立。请注意：这不是菜单系统替换。 它只是一个轻量级的
观赏型动态3D魔方
weixin_42595284的博客
08-30 509
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;魔方&lt;/title&gt; &lt;style&gt; *{ margin: 0;
java项目-第24期基于ssm的springboot+vue排课管理系统.zip
01-28
1、项目简述 功能： 区分为教务管理员、学生、...springboot+Vue等等 3、项目访问 前台： http://localhost:8080/login 教务管理员角色：admin 123456 教师角色： 201711010001 123456 学生角色： 201711010001 123456
SpringBoot+Vue3在线办公系统教学及资料
06-26
SpringBoot+Vue3在线办公系统教学及资料
基于ssm+vue课程教学网站.zip
04-05
基于ssm+vue课程教学网站.zip
SSM+Vue+SpringBoot 航空售票管理系统
06-30
链接：https://pan.baidu.com/s/1xE0T2gSkJJCcdmx7Gk-YzQ 私聊联系
vue仿有赞 魔方插件 源码分享
weixin_49230250的博客
02-01 3159
项目要求封装一个有赞魔方矩阵类型的插件，我当时内心是拒绝的 费尽周折查阅很多资料才找到靠谱的方法，下图为效果，因为没有几行代码就直接在csdn上分享了 解决思路为： 1、一共两层底下层添加自定义属性 y x 确定每一块元素的几行几列； 2、知道点击的是几行几列之后计算出单个单元格的宽，上层通过定位实现； 记得在确定的时候做个判断 当前选中是否和其他冲突 上代码 <template> <div class="rowncolnParam"> <div class="
魔方组件.zip
09-19
仿有赞商城微页面热区和魔方组件，拖拽热区、魔方自定义组件。可用于vue等商城。绝对可以用的，不骗积分。
前端实现3D魔方旋转特效
CreatorRay的博客
08-22 2584
代码自用自取，复制粘贴直接使用，喜欢的话可以查看博主其它文章，贡献一丢丢的浏览量，感激不尽。 先看一下效果 <!DOCTYPE html> <html> <head> <title>魔方</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } body{ width: 10.
2020-11-11
wy_2597168813的博客
11-11 541
Aasdfasdfsadfaasdfasdfsadfsadfsafasfasf asdfasfasfsafasfasf <!Doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <
物流管理系统搭建
lijie0018的博客
05-07 1181
开发语言：Java 框架：springboot JDK版本：JDK1.8 服务器：tomcat7 数据库：mysql 5.7（一定要5.7版本） 数据库工具：Navicat11 开发软件：eclipse/myeclipse/idea Maven包：Maven3.3.9 Java配置环境链接：https://pan.baidu.com/s/1Dzpiqb46mrukQzXOEj3otw 提取码：0000 后台路径地址：localhost:8080/项目名称/admin/dis...
三级网站页面(网站中一级、二级、三级网站页面指的分别是什么)
热门推荐
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
10-11 6万+
一级页面也就是网站的首页，二级页面是链接到首页的，从首页点击进去的就是二级；三级页面链接到二级页面，从二级点击进去的就是三级。三级网站页面也可以叫内容详情页。 频道就是该网站内容的分类，往往在首页会有标题，比如”娱乐“、”音乐“、”新闻“等等。 所谓网站（Website），就是指在网际网路（因特网）上，根据一定的规则，
响应式菜单
Wenny
10-27 1532
因公司近期需用到响应式菜单栏，临时做了一个，PC端左侧菜单栏通过css实现，其中移动端有用到jquery.meanmenu.js插件。可能没那么完美，但是基本也勉强够用了，有些功能或者样式可以自己调整。仅供大家和自己参考，有问题请指出。感谢！
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
HTML网页设计 专注大学生网页设计
09-18 5万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
ssm+springboot+vue喜马拉雅
12-06
SSM（Spring+Spring MVC+MyBatis）和SpringBoot是Java的两个流行框架，而Vue是一种用于构建用户界面的JavaScript框架，而喜马拉雅是一个流行的在线音频平台。 SSM是一套Java的开发框架，它集成了Spring框架、Spring...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值