devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【计算机毕业设计】在线商城系统_java在线商城系统

作者：繁依Fanyi0 | 2024-04-10 01:23:53

赞

踩

java在线商城系统

Java SpringBoot在线商城系统

项目运行

环境配置：

Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。

项目技术：

Springboot + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。

环境需要

1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。

2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;

3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可

4.硬件环境：windows 7/8/10 1G内存以上；或者 Mac OS；

5.是否Maven项目: 否；查看源码目录中是否包含pom.xml；若包含，则为maven项目，否则为非maven项目

6.数据库：MySql 5.7/8.0等版本均可；

技术栈

后端：Springboot mybatis

前端：vue+css+javascript+jQuery+easyUI+highcharts

使用说明

使用Navicat或者其它工具，在mysql中创建对应名称的数据库，并导入项目的sql文件；

使用IDEA/Eclipse/MyEclipse导入项目，修改配置，运行项目；

3.管理员账号：abo 密码：abo

4.开发环境为Eclipse/idea，数据库为mysql 使用java语言开发。

5.运行SpringbootSchemaApplication.java 即可打开首页

6.数据库连接src\main\resources\application.yml中修改

7.maven包版本apache-maven-3.3.9.

8.后台路径地址：localhost:8080/项目名称/admin
Java SpringBoot在线商城系统，基于SpringBoot框架进行开发，前端页面效果通过使用Vue进行编码实现，实现了用户跟管理员这两类用户角色，实现了商品评价管理、系统管理等功能。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

# Tomcat
server:
    tomcat:
        uri-encoding: UTF-8
    port: 8080
    servlet:
        context-path: /ONLYzaixianshangcheng

spring:
    datasource:
        driverClassName: com.mysql.jdbc.Driver
        url: jdbc:mysql://127.0.0.1:3306/ONLYzaixianshangcheng?useUnicode=true&characterEncoding=utf-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
        username: root
        password: root
    servlet:
      multipart:
        max-file-size: 10MB
        max-request-size: 10MB
    resources:
      static-locations: classpath:static/,file:static/

#mybatis
mybatis-plus:
  mapper-locations: classpath*:mapper/*.xml
  #实体扫描，多个package用逗号或者分号分隔
  typeAliasesPackage: com.entity
  global-config:
    #主键类型  0:"数据库ID自增", 1:"用户输入ID",2:"全局唯一ID (数字类型唯一ID)", 3:"全局唯一ID UUID";
    id-type: 1
    #字段策略 0:"忽略判断",1:"非 NULL 判断"),2:"非空判断"
    field-strategy: 2
    #驼峰下划线转换
    db-column-underline: true
    #刷新mapper 调试神器
    refresh-mapper: true
    #逻辑删除配置
    logic-delete-value: -1
    logic-not-delete-value: 0
    #自定义SQL注入器
    sql-injector: com.baomidou.mybatisplus.mapper.LogicSqlInjector
  configuration:
    map-underscore-to-camel-case: true
    cache-enabled: false
    call-setters-on-nulls: true
    #springboot 项目mybatis plus 设置 jdbcTypeForNull (oracle数据库需配置JdbcType.NULL, 默认是Other)
    jdbc-type-for-null: 'null' 


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
<!-- 首页 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>首页</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./xznstatic/css/common.css"/>
		<link rel="stylesheet" href="./xznstatic/css/style.css"/>
	</head>
	<style type="text/css">
		html, body {
			height: 100%;
		}
		#iframe {
			width: 100%;
			margin-top: 00px;
			padding-top: 70px;
		}
		#header {
			height: auto;
			background: #fff;
			border-bottom: 0;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
		}

		#header .nav-top {
			display: flex;
			align-items: center;
			padding: 0 20px;
			font-size: 16px;
			color: #2a8a15;
			box-sizing: border-box;
			height: 00px;
			background-color: rgba(46, 78, 126, 1);
			box-shadow: 0 10px 8px #fff143;
			justify-content: space-between;
			position: relative;
		}

		#header .nav-top-img {
			width: 124px;
			height: 40px;
			padding: 0;
			margin: 0;
			border-radius: 6px;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			box-shadow: 0 0 6px rgba(0,0,0,.3);
		}

		#header .nav-top-title {
			line-height: 40px;
			font-size: 30px;
			color: rgba(255, 251, 240, 1);
			padding: 0 10px;
			margin: 0 10px;
			border-radius: 6px;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			box-shadow: 0 0 0px ;
		}

		#header .nav-top-tel {
			line-height: 40px;
			font-size: 18px;
			color: rgba(240, 252, 255, 1);
			padding: 0 10px;
			margin: 0;
			border-radius: 6px;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			box-shadow: 0 0 0px ;
		}

		#header .navs {
			display: flex;
			padding: 0 20px;
			align-items: center;
			box-sizing: border-box;
			height: 70px;
			background-color: rgba(0, 85, 119, 1);
			box-shadow: 0 0px 0px rgba(0,0,0,0);
			justify-content: flex-start;
		}
		#header .navs .title {
			width: auto;
			line-height: 40px;
			font-size: 30px;
			color: rgba(255, 255, 255, 1);
			padding: 10px 10px 10px;
			margin: 50px;
			border-radius: 6px;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			box-shadow: 0 0 6px rgba(0,0,0,0);
		}
		#header .navs li {
			display: inline-block;
			width: auto;
			line-height: 66px;
			padding: 0 10px ;
			margin: 10px ;
			color: rgba(255, 255, 255, 1);
			font-size: 22px;
			border-radius: 4px;
			border-width: 0;
			border-style: solid;
			border-color: rgba(6, 82, 121, 1);
			background-color: rgba(0, 85, 119, 1);
			box-shadow: 1px 0 3px rgba(0, 85, 119, 1);
      text-align: center;
		}
		#header .navs li a{
			color: inherit;
		}
		#header .navs li.current a{
			color: inherit;
		}
		#header .navs li a:hover{
			color: inherit;
		}
		#header .navs li.current {
			color: rgba(255, 255, 255, 1);
			font-size: 22px;
			border-radius: 0px;
			border-width: 0px;
			border-style: solid;
			border-color: rgba(255, 255, 255, 1);
			background-color: rgba(0, 85, 119, 1);
			box-shadow:  0px 3px  0px #ffffff;
		}
		#header .navs li:hover {
			color: #fff;
			font-size: 22px;
			border-radius: 0px;
			border-width: 0;
			border-style: solid;
			border-color: rgba(255, 255, 255, 1);
			background-color: rgba(0, 85, 119, 1);
			box-shadow:  0px 3px  0px #ffffff;
		}
	</style>
	<body>
		<!-- start 顶部导航栏 -->
		<div id="header">
			<div v-if='true' class="nav-top">
			  <img v-if='false' class="nav-top-img" src='https://www.baidu.com/img/flexible/logo/pc/result@2.png'>
			  <div v-if="false" class="nav-top-title">{{projectName}}</div>
			  <div class="nav-top-tel"></div>
			</div>
		    <div class="navs">
		    	<!-- <div class="logo" style="font-size: 20px;top: 32px;color: #fff;font-weight: bold;margin-left: -200px;width: 240px;" v-text="projectName"></div> -->
				<div class="title" v-if="true" v-text="projectName"></div>
				<div class="list">
					<ul>
						<li class='current'><a href="javascript:navPage('./pages/home/home.html')" class="menumain"><i v-if="false" class="layui-icon layui-icon-home"></i>首页</a></li>
						<li v-for="(item,index) in indexNav" v-bind:key="index"><a :href="'javascript:navPage(\''+item.url+'\')'" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon" :class="iconArr[index]"></i>{{item.name}}</a></li>
						<li><a href="javascript:centerPage();" class="menumain"><i v-if="false" class="layui-icon layui-icon-username"></i>个人中心</a></li>
						<li><a :href="adminurl" target="_blank" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon layui-icon-link"></i>后台管理</a></li>
						<li v-if="cartFlag"><a href="javascript:navPage('./pages/shop-cart/list.html')" class="menumain"><i v-if="false" class="layui-icon">&#xe657;</i>购物车</a></li>
						<li v-if="chatFlag"><a href="javascript:chatTap()" class="menumain"><i v-if="false" class="layui-icon">&#xe677;</i>客服</a></li>
					</ul>
				</div>
		    </div>
		</div>
		<!-- end 顶部导航栏 -->

		<iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" onload="changeFrameHeight"></iframe>

    <div id="tabbar" v-if="true" class="tabbar" :style='{"padding":"30px 0","boxShadow":"0 0 6px ","margin":"30px 0 0 0","borderColor":"rgba(255, 255, 255, 0.3)","backgroundColor":"rgba(6, 82, 121, 1)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}' style="position: relative;z-index: 999;">
      <img v-if='false' :style='{"boxShadow":"0 0 6px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"100%","borderWidth":"1px","width":"44px","borderStyle":"solid","height":"44px"}' style='display: block;' src='http://codegen.caihongy.cn/20201024/ed5e326ca66f403aa3197b5fbb4ec733.jpg' />
      <div :style='{"padding":"0 10px","boxShadow":"0 0 0px 0","margin":"10px auto","borderColor":"rgba(6, 82, 121, 1)","backgroundColor":"rgba(6, 82, 121, 1)","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="company">欢迎来到XX网站</div>
      <div :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"10px auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#000","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="record"></div>
      <div :style='{"padding":"0 10px","boxShadow":"0 0 0px ","margin":"10px auto 30px auto","borderColor":"rgba(6, 82, 121, 1)","backgroundColor":"rgba(6, 82, 121, 1)","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"1px 0","width":"40%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="desc">电话：4008000000 | 邮箱：support@21epub.com</div>
    </div>

		<script src="./xznstatic/js/jquery-1.11.3.min.js"></script>
		<script src="./layui/layui.js"></script>
		<script src="./js/vue.js"></script>
		<script src="./js/config.js"></script>

		<script>
      var vue1 = new Vue({el: '#tabbar'})

			var vue = new Vue({
				el: '#header',
				data: {
					iconArr: ['layui-icon-gift','layui-icon-email','layui-icon-logout','layui-icon-transfer','layui-icon-slider','layui-icon-print','layui-icon-cols','layui-icon-snowflake','layui-icon-note','layui-icon-flag','layui-icon-theme','layui-icon-website','layui-icon-console','layui-icon-face-surprised','layui-icon-template-1','layui-icon-app','layui-icon-read','layui-icon-component','layui-icon-file-b','layui-icon-unlink','layui-icon-tabs','layui-icon-form','layui-icon-chat'],
					indexNav: indexNav,
					cartFlag: cartFlag,
					adminurl: adminurl,
					chatFlag: chatFlag,
					projectName: projectName,
				},
				mounted: function() {
					this.bindClickOnLi();
				},
				created() {
					this.iconArr.sort(()=>{
					  return (0.5-Math.random())
					})
				},
				methods: {
					jump(url) {
						jump(url)
					},
					bindClickOnLi() {
						let list = document.getElementsByTagName("li");
						for(var i = 0;i<list.length;i++){
							list[i].onclick = function(){
								$(this).addClass("current").siblings().removeClass("current");
							}
						}
					}
				}
			});

			layui.use(['element','layer'], function() {
				var element = layui.element;
				var layer = layui.layer;
			});

			function chatTap(){
				var userTable = localStorage.getItem('userTable');
				if (userTable) {
					layui.layer.open({
						type: 2,
						title: '客服',
						area: ['600px', '600px'],
						content: './pages/chat/chat.html'
					});
				} else {
					window.location.href = './pages/login/login.html'
				}
			}

			// 导航栏跳转
			function navPage(url) {
				localStorage.setItem('iframeUrl', url);
				document.getElementById('iframe').src = url;
			}

			// 跳转到个人中心也
			function centerPage() {
				var userTable = localStorage.getItem('userTable');
				if (userTable) {
					localStorage.setItem('iframeUrl', './pages/' + userTable + '/center.html');
					document.getElementById('iframe').src = './pages/' + userTable + '/center.html';
				} else {
					window.location.href = './pages/login/login.html'
				}
			}

			var iframeUrl = localStorage.getItem('iframeUrl');
			document.getElementById('iframe').src = iframeUrl  || './pages/home/home.html';

      // var i = 0;
      setInterval(function(){
        // i++;
        // if(i<50) changeFrameHeight();
        changeFrameHeight();
      },200)

      function changeFrameHeight() {
        var iframe = document.getElementById('iframe');
        // iframe.height = 'auto';
          if (iframe) {
              var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
              if (iframeWin.document.body) {
                  iframe.height = iframeWin.document.body.scrollHeight;
              }
          }
      };

			//  窗口变化时候iframe自适应
			// function changeFrameHeight() {
				// var header = document.getElementById('header').scrollHeight;
    //     let isshow = true
    //     var tabbar = 0
    //     if(isshow) {
    //       tabbar = document.getElementById('tabbar').scrollHeight
    //     }
				// var ifm = document.getElementById("iframe");
				// ifm.height = document.documentElement.clientHeight - header - tabbar;
				// ifm.width = document.documentElement.clientWidth;
			// }

			// reasize 事件 窗口大小变化后执行的方法
			window.onresize = function() {
				changeFrameHeight();
			}
		</script>
	</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../xznstatic/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="../../xznstatic/css/login.css"/>
    <style type="text/css">
    	.login {
    		display: flex;
    		justify-content: center;
    		align-items: center;
    	    width: 100%;
    	    height: 100%;
    		background-attachment: fixed;
    		background-size: cover;
    		background-position: center;
    		    		background-image: url(http://localhost:8080/ONLYzaixianshangcheng/front/js/0.jpg);
    		    	}
    	.login form {
    		box-sizing: border-box;
    		min-height: 400px;
    		display: flex;
    		flex-direction: column;
    		justify-content: center !important;
			position: inherit;
    	}
    	.login .logo, .login .title {
    		box-sizing: border-box;
    	}
    	.login .logo img {
    		display: block;
    	}
    	.login .title {
    		text-align: center;
    	}
    	.login .form-item {
    		display: flex;
    		align-items: center;
    		flex-wrap: wrap;
    		box-sizing: border-box;
    	}
    	.login .form-item input, .login .form-label {
    		box-sizing: border-box;
    	}
    	.login .btn-submit {
    		display: block;
    		box-sizing: border-box;
    	}
    	.login form p.txt {
    		width: 100%;
    		margin: 0;
    		box-sizing: border-box;
    	}
		.l-redio .layui-form-radio {
			margin: 0;
		}
		.l-redio .layui-form-radio>i {
			font-size: 16px;
			color: rgba(255, 255, 255, 1);
		}
		.l-redio .layui-form-radio>div {
			font-size: 17px;
			color: rgba(14, 14, 14, 1);
		}
		.l-redio .layui-form-radioed>i {
			font-size: 17px;
			color: rgba(255, 71, 119, 1);
		}
		.l-redio .layui-form-radioed>div {
			font-size: 18px;
			color: rgba(0, 51, 113, 1);
		}
    </style>
</head>
<body>
    <div id="app" class="login">
        <form class="layui-form login-form" :style='{"padding":"20px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(6, 82, 121, 1)","backgroundColor":"rgba(255, 255, 255, 0.5)","borderRadius":"20px","borderWidth":"0","width":"450px","borderStyle":"solid","justifyContent":"center","height":"auto"}'>
            <h1 class="logo" v-if="false" :style='{"padding":"5px 0","boxShadow":"0 0 6px rgba(255,0,0,.8)","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"6px","borderWidth":"0","borderStyle":"solid"}'><img :style='{"boxShadow":"0 0 6px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"100%","borderWidth":"1px","width":"44px","borderStyle":"solid","height":"44px"}' src="http://codegen.caihongy.cn/20201024/ed5e326ca66f403aa3197b5fbb4ec733.jpg"></h1>
            
            <div class="msg-warn hide title" v-if="true" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(247, 247, 247, 0.05)","color":"rgba(23, 124, 176, 1)","isshow":true,"borderRadius":"8px","borderWidth":"0","width":"auto","lineHeight":"32px","fontSize":"15px","borderStyle":"solid"}'>公共场所不建议自动登录，以防账号丢失</div>
            <div :style='{"padding":"0","boxShadow":"0 0 0px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(255, 255, 255, 0.1)","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"70px"}' class="form-item">
                <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"84px","fontSize":"16px","borderStyle":"solid"}' class="form-label">账号</label>
				<input :style='{"padding":"0 10px","boxShadow":"3px 4px 6px #425066","borderColor":"rgba(6, 82, 121, 1)","backgroundColor":"rgba(255, 255, 255, 0.33)","color":"rgba(149, 85, 57, 1)","borderRadius":"6px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"16px","borderStyle":"solid","height":"50px"}' type="text" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
            <div :style='{"padding":"0","boxShadow":"0 0 0px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(255, 255, 255, 0.1)","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"70px"}' class="form-item">
                <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"84px","fontSize":"16px","borderStyle":"solid"}' class="form-label">密码</label>
				<input :style='{"padding":"0 10px","boxShadow":"3px 4px 6px #425066","borderColor":"rgba(6, 82, 121, 1)","backgroundColor":"rgba(255, 255, 255, 0.33)","color":"rgba(149, 85, 57, 1)","borderRadius":"6px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"16px","borderStyle":"solid","height":"50px"}' type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div :style='{"padding":"0","boxShadow":"0 0 0px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(255, 254, 254, 0.07)","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0 0","width":"80%","borderStyle":"solid","height":"44px"}' class="form-item l-redio">
				<input v-if="item.hasFrontLogin=='是'" v-for="(item,index) in menu" v-bind:key="index" type="radio" name="role" id="role" :value="item.tableName" :title="item.roleName">
            </div>
			<button :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,.5)","margin":"10px auto","borderColor":"#ccc","backgroundColor":"red","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"60%","fontSize":"14px","borderStyle":"solid","height":"44px"}' class="layui-btn layui-btn-fluid layui-btn-danger btn-submit" lay-submit lay-filter="login">登录</button>
            <p :style='{"color":"rgba(147, 115, 19, 1)","textAlign":"left","fontSize":"14px"}' class="txt"><a style="color: inherit;font-size: inherit;" v-if="item.hasFrontRegister=='是'" v-for="(item,index) in menu" v-bind:key="index" :href="'javascript:registerClick(\''+item.tableName+'\')'">注册{{item.roleName.replace('注册','')}}</a></p>
        </form>
    </div>

    <script src="../../layui/layui.js"></script>
    <script src="../../js/vue.js"></script>
    <!-- 组件配置信息 -->
    <script src="../../js/config.js"></script>
    <!-- 扩展插件配置信息 -->
    <script src="../../modules/config.js"></script>
    <!-- 工具方法 -->
    <script src="../../js/utils.js"></script>
    <script type="text/javascript">
        var vue = new Vue({
            el: '#app',
            data: {
                menu: menu
            },
            methods: {
                jump(url) {
                    jump(url)
                }
            }
        })

        layui.use(['layer', 'element', 'carousel', 'form', 'http', 'jquery'], function() {
            var layer = layui.layer;
            var element = layui.element;
            var carousel = layui.carousel;
            var form = layui.form;
            var http = layui.http;
            var jquery = layui.jquery;

            // 登录
            form.on('submit(login)', function(data) {
                data = data.field;
                if (!data.role) {
                    layer.msg('请选择登录用户类型', {
                        time: 2000,
                        icon: 5
                    });
                    return false;
                }
                http.request(data.role + '/login', 'get', data, function(res) {
                    layer.msg('登录成功', {
                        time: 2000,
                        icon: 6
                    });
                    // 登录凭证
                    localStorage.setItem('Token', res.token);
                    localStorage.setItem('role', jquery('#role:checked').attr('title'));
                    // 当前登录用户角色
                    localStorage.setItem('userTable', data.role);
                    localStorage.setItem('sessionTable', data.role);
                    // 用户名称
                    localStorage.setItem('adminName', data.username);
                    http.request(data.role + '/session', 'get', {}, function(res) {
                        // 用户id
                        localStorage.setItem('userid', res.data.id);
                        // 路径访问设置
                        window.location.href = '../../index.html';
                    })
                    
                });
                return false
            });

        });

        /**
         * 跳转登录
         * @param {Object} tablename
         */
        function registerClick(tablename) {
            window.location.href = '../' + tablename + '/register.html?tablename=' + tablename;
        }
    </script>
</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
package com.interceptor;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import com.alibaba.fastjson.JSONObject;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.method.HandlerMethod;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.http.HttpStatus;

import com.annotation.IgnoreAuth;
import com.entity.EIException;
import com.entity.TokenEntity;
import com.service.TokenService;
import com.utils.R;

/**
 * 权限(Token)验证
 */
@Component
public class AuthorizationInterceptor implements HandlerInterceptor {

    public static final String LOGIN_TOKEN_KEY = "Token";

    @Autowired
    private TokenService tokenService;
    
	@Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

		//支持跨域请求
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,request-source,Token, Origin,imgType, Content-Type, cache-control,postman-token,Cookie, Accept,authorization");
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
	// 跨域时会首先发送一个OPTIONS请求，这里我们给OPTIONS请求直接返回正常状态
	if (request.getMethod().equals(RequestMethod.OPTIONS.name())) {
        	response.setStatus(HttpStatus.OK.value());
            return false;
        }
        
        IgnoreAuth annotation;
        if (handler instanceof HandlerMethod) {
            annotation = ((HandlerMethod) handler).getMethodAnnotation(IgnoreAuth.class);
        } else {
            return true;
        }

        //从header中获取token
        String token = request.getHeader(LOGIN_TOKEN_KEY);
        
        /**
         * 不需要验证权限的方法直接放过
         */
        if(annotation!=null) {
        	return true;
        }
        
        TokenEntity tokenEntity = null;
        if(StringUtils.isNotBlank(token)) {
        	tokenEntity = tokenService.getTokenEntity(token);
        }
        
        if(tokenEntity != null) {
        	request.getSession().setAttribute("userId", tokenEntity.getUserid());
        	request.getSession().setAttribute("role", tokenEntity.getRole());
        	request.getSession().setAttribute("tableName", tokenEntity.getTablename());
        	request.getSession().setAttribute("username", tokenEntity.getUsername());
        	return true;
        }
        
		PrintWriter writer = null;
		response.setCharacterEncoding("UTF-8");
		response.setContentType("application/json; charset=utf-8");
		try {
		    writer = response.getWriter();
		    writer.print(JSONObject.toJSONString(R.error(401, "请先登录")));
		} finally {
		    if(writer != null){
		        writer.close();
		    }
		}
//				throw new EIException("请先登录", 401);
		return false;
    }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
package com.utils;

import java.util.HashMap;
import java.util.Map;

/**
 * 返回数据
 */
public class R extends HashMap<String, Object> {
	private static final long serialVersionUID = 1L;
	
	public R() {
		put("code", 0);
	}
	
	public static R error() {
		return error(500, "未知异常，请联系管理员");
	}
	
	public static R error(String msg) {
		return error(500, msg);
	}
	
	public static R error(int code, String msg) {
		R r = new R();
		r.put("code", code);
		r.put("msg", msg);
		return r;
	}

	public static R ok(String msg) {
		R r = new R();
		r.put("msg", msg);
		return r;
	}
	
	public static R ok(Map<String, Object> map) {
		R r = new R();
		r.putAll(map);
		return r;
	}
	
	public static R ok() {
		return new R();
	}

	public R put(String key, Object value) {
		super.put(key, value);
		return this;
	}
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/395882
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号