springboot+shiro+swagger+redis+vue+element完成权限系统

1. 回顾

1. Vue通过脚手架创建Vue工程。
1.组件【网页】--->组件【父组件】可以引用另一个组件[子组件].

父组件怎么传参给子组件
2.路由:
[1]路由跳转
() this.$router.push("/路由路径")
路由配置: {path:"",component:""}
路由渲染: 理解:</p> </blockquote> <p></p> 2. 权限系统 <blockquote> <p> 权限系统:<br /> 1.前端使用: vue + elementui + axios + css + html<br /> 2.后端使用: springboot+mybatis-plus +mybatis+druid+shiro+swagger2+redis</p> </blockquote> 3. 完成登录 3.1. 前端布局 <p></p> <p> </p> <p>（1）Login.vue组件</p> <pre class="brush:java;toolbar:false"><template>  <el-form :model="ruleForm" :rules="rules" status-icon width="200px" ref="ruleForm" > <el-avatar :size="100" :src="circleUrl"></el-avatar> <p >用户登录</p> <hr /> <p >User  login</p> <el-form-item label="" prop="username"> <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="请输入账号" ></el-input> </el-form-item> <el-form-item label="" prop="password"> <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleSubmit" ></el-input> </el-form-item> <el-form-item > <el-button type="primary" @click="handleSubmit" :loading="logining">登录</el-button> </el-form-item> </el-form> </template> <script> export default { name: "Login", data(){ return{ logining: false, //绑定表单数据 ruleForm: { username:'', }, //表单验证规则 rules: { username: [ {required: true, message: '请输入账号,账号不能为空', trigger: 'blur'}, //{ type: 'number', message: '账号必须为数字值'}, ], password: [ {required: true, message: '请输入密码,密码不能为空', trigger: 'blur'}, {min: 6, max: 12, message: "密码的长度必须{6~12}", trigger: "blur"}, ] }, checked: false, //头像绑定 circleUrl:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png', } }, methods:{ handleSubmit(){ //表单校验 this.$refs['ruleForm'].validate((valid) => { if (valid) { this.$router.push("/home") } }) } } } </script> <style> body{ padding:0px; margin:0px; } .denglu { color: white; font-size: 20px; } .login-container { width: 450px; height: 200px; margin:auto auto; } .login-page { background-size: 100% 100%; margin-top: 10rem; border-radius: 12px; padding: 20px; text-align: center; } label.el-checkbox.rememberme { margin: 0px 0px 25px; text-align: left; } #building { background: url("../assets/login.jpg"); width: 100%; height: 100%; position: fixed; background-size: 100% 100%; } </style></pre> <p>（2）配置路由</p> <pre class="brush:java;toolbar:false">import Vue from 'vue' import VueRouter from 'vue-router' import HomeView from '../views/HomeView.vue' import Login from '../views/Login' Vue.use(VueRouter) const routes = [ { path: '/', redirect: '/login' }, { path: '/login', name: 'Login', component: Login //component: ()=>import("../views/Login.vue") }, ] const router = new VueRouter({ //删除地址栏的# mode: 'history', routes }) export default router </pre> <p ></p> <p>（3）登录按钮事件</p> <blockquote> <p>如果想在vue工程中使用axios进行异步请求，则需要在main.js中导入axios<br /> [1]//导入axios</p> <pre class="brush:java;toolbar:false">import axios from "axios";</pre> <p>[2]//把axios挂载到vue对象中,以后在vue中如果使用axios直接可以用$http名称,可以随意起名<br /> </p> <pre class="brush:java;toolbar:false">Vue.prototype.$http=axios</pre> <p></p> </blockquote> <pre class="brush:java;toolbar:false">methods:{ handleSubmit(){ //表单校验 this.$refs['ruleForm'].validate((valid) => { if (valid) { //this.$http就是自己刚刚定义的axios //url:后端登录接口的路径 //es=>函数 this.$http.post("http://localhost:8081/system/login",this.ruleForm).then(result=>{ }) } }) } }</pre> 3.2. 完成后端登录接口 <p>(1) 创建springboot项目</p> <p></p> <p> pox.xml文件依赖</p> <pre class="brush:java;toolbar:false"><?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> spring-boot-starter-parent</artifactId> <version>2.3.12.RELEASE</version> <relativePath/>  </parent> <groupId>com.wzh</groupId> springboot-vue0808</artifactId> <version>0.0.1-SNAPSHOT</version> <name>springboot-vue0808</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>com.baomidou</groupId> mybatis-plus-generator</artifactId> <version>3.5.2</version> </dependency> <dependency> <groupId>org.freemarker</groupId> freemarker</artifactId> <version>2.3.31</version> </dependency> <dependency> <groupId>com.baomidou</groupId> mybatis-plus-boot-starter</artifactId> <version>3.5.2</version> </dependency> <dependency> <groupId>com.alibaba</groupId> druid-spring-boot-starter</artifactId> <version>1.2.8</version> </dependency> <dependency> <groupId>com.spring4all</groupId> swagger-spring-boot-starter</artifactId> <version>1.9.1.RELEASE</version> </dependency> <dependency> <groupId>com.github.xiaoymin</groupId> swagger-bootstrap-ui</artifactId> <version>1.9.6</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> mybatis-spring-boot-starter</artifactId> <version>2.2.2</version> </dependency> <dependency> <groupId>mysql</groupId> mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.projectlombok</groupId> lombok</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> spring-boot-maven-plugin</artifactId> <configuration> <excludes> <exclude> <groupId>org.projectlombok</groupId> lombok</artifactId> </exclude> </excludes> </configuration> </plugin> </plugins> </build> </project> </pre> <p> (2) 使用mybatis-plus的代码生成器</p> <pre class="brush:java;toolbar:false">package com.wzh; import com.baomidou.mybatisplus.generator.FastAutoGenerator; import com.baomidou.mybatisplus.generator.config.OutputFile; import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine; import java.util.Collections; public class Generator { public static void main(String[] args) { FastAutoGenerator.create("jdbc:mysql://localhost:3306/shiro_permission?serverTimezone=Asia/Shanghai", "root", "123456") .globalConfig(builder -> { builder.author("王振华") // 设置作者 .enableSwagger() // 开启 swagger 模式 .fileOverride() // 覆盖已生成文件 .outputDir(".\src\main\java\"); // 指定输出目录 }) .packageConfig(builder -> { builder.parent("com.wzh") // 设置父包名 .moduleName("system") // 设置父包模块名 .pathInfo(Collections.singletonMap(OutputFile.xml, "src\main\resources\mapper\")); // 设置mapperXml生成路径 }) .strategyConfig(builder -> { builder.addInclude("acl_user","acl_role","acl_permission")// 设置需要生成的表名 .addTablePrefix("acl_"); // 设置过滤表前缀 }) .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker引擎模板，默认的是Velocity引擎模板 .execute(); } } </pre> <p>（3）配置application文件</p> <pre class="brush:java;toolbar:false">#端口号 server.port=8081 #druid数据源 spring.datasource.druid.url=jdbc:mysql://localhost:3306/shiro_permission?serverTimezone=Asia/Shanghai spring.datasource.druid.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.druid.username=root spring.datasource.druid.password=123456 #初始化的个数 spring.datasource.druid.initial-size=5 # 最大活跃数 spring.datasource.druid.max-active=10 # 最大等待时间 spring.datasource.druid.max-wait=3000 # 最小的闲置个数 spring.datasource.druid.min-idle=5 #mybatis-plus日志 mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl</pre> <p>（4）登录接口</p> <pre class="brush:java;toolbar:false">package com.wzh.system.controller; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.wzh.system.entity.User; import com.wzh.system.service.IUserService; import com.wzh.system.vo.CommonResult; import com.wzh.system.vo.LoginVo; import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperation; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; @RestController @RequestMapping("system") @Api(tags = "登录的接口类") //@CrossOrigin //解决跨域问题 public class LoginController { @Autowired private IUserService userService; @PostMapping("/login") @ApiOperation(value = "登录接口") public CommonResult login(@RequestBody LoginVo loginVo){ QueryWrapper<User> wrapper = new QueryWrapper<>(); wrapper.eq("username",loginVo.getUsername()); wrapper.eq("password",loginVo.getPassword()); wrapper.eq("is_deleted",0); User user = userService.getOne(wrapper); if(user!=null){ return new CommonResult(2000,"登录成功",null); }else{ return CommonResult.LOGIN_ERROR; } } } </pre> <p>vo包:它也是实体类的一种; view obeject 视图对象。作用:接受和响应网页的对象,</p> <p>如果用map接收的话，无法使用swagger注解</p> <p></p> <p> 前端调用后端登录接口时出现如下的错误</p> <p> </p> <blockquote> <p> 当使用异步请求从一个网址访问另一个网址时可能会出现跨域问题。<br /> 前提:<br /> 1. 必须为异步请求<br /> 2. 当端口号或协议或ip不同时则会出现跨域</p> </blockquote> <p></p> <p>出现两个请求: 有一个请求的方式为: OPTIONS 和真实的请求方式</p> <blockquote> <p>理解: OPTIONS先头部队。---探视后台有没有解决跨域。</p> </blockquote> <p>如何解决跨域:</p> <blockquote> <p>1.前端解决<br /> 2.后端解决---->这里也有几种方式：<br /> 【1】可以借助nginx.<br /> 【2】在代码中解决 (重点)</p> </blockquote> <p>在控制层接口上添加@CrossOrigin</p> <p></p> <pre class="brush:java;toolbar:false">@CrossOrigin(origins = {"192.168.1.14:8081","192.168.2.34:8080"},allowedHeaders="运行哪些请求头跨域",methods={RequestMethod.GET,RequestMethod.POST})</pre> <blockquote> <p>(origins = {"192.168.0.111:8080","192.168.0.120:8081"},allowedHeaders="运行哪些请求头跨域",methods={"GET","POST"})</p> <p>origins: 允许哪些域可以跨域访问我这个接口<br /> allowedHeaders:允许哪些请求头信息跨域<br /> methods: 允许哪些请求方式跨域</p> </blockquote> <p>上面在控制层接口处加上注解的方式解决跨域，麻烦的地方就需要对每个控制类都加该注解。设置一个全局跨域配置类。</p> <pre class="brush:java;toolbar:false">package com.wzh.system.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; @Configuration public class CorsConfig { // 当前跨域请求最大有效时长。这里默认1天 private static final long MAX_AGE = 24 * 60 * 60; @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址 corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头 corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法 corsConfiguration.setMaxAge(MAX_AGE); source.registerCorsConfiguration(" @Configuration public class SwaggerConfig { //获取swagger2的实例对象docket @Bean public Docket getDocket() { Docket docket = new Docket(DocumentationType.SWAGGER_2) .groupName("QY151") .apiInfo(apiInfo()) .select()//设置哪些包下的类生产api接口文档 .apis(RequestHandlerSelectors.basePackage("com.wzh.system.controller")) //设置哪些请求路径生产接口文档 .paths(PathSelectors.any()) .build(); return docket; } private ApiInfo apiInfo() { Contact DEFAULT_CONTACT = new Contact("王振华", "http://www.bing.com", "1430930278@qq.com"); ApiInfo apiInfo = new ApiInfo("员工管理系统API接口文档", "员工管理系统API接口文档", "1.0", "http://www.bing.com", DEFAULT_CONTACT, "Apache 2.0", "http://www.apache.org/licenses/LICENSE-2.0", new ArrayList<VendorExtension>()); return apiInfo; } } </pre> <p></p> <p>（6）登录成功后前端路由跳转</p> <p></p> <p> </p> 4. 登录的bug <p> 上面咱们写的登录，后端没有保存数据前端也没有拿到数据进行保存</p> <p></p> <p>要用redis的原因是因为如果高并发访问数据库数据库会崩溃，造成系统瘫痪 </p> <pre class="brush:java;toolbar:false"> <dependency> <groupId>org.springframework.boot</groupId> spring-boot-starter-data-redis</artifactId> </dependency></pre> <p>application配置文件</p> <pre class="brush:java;toolbar:false">#redis的配置 spring.redis.host=localhost spring.redis.port=6379 spring.redis.jedis.pool.max-active=20 spring.redis.jedis.pool.max-wait=20000 spring.redis.jedis.pool.max-idle=10 spring.redis.jedis.pool.min-idle=5</pre> <p>（1）修改登录的接口</p> <pre class="brush:java;toolbar:false">package com.wzh.system.controller; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.wzh.system.entity.User; import com.wzh.system.service.IUserService; import com.wzh.system.vo.CommonResult; import com.wzh.system.vo.LoginVo; import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperation; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.data.redis.core.ValueOperations; import org.springframework.web.bind.annotation.*; import java.util.UUID; import java.util.concurrent.TimeUnit; @RestController @RequestMapping("system") @Api(tags = "登录的接口类") //@CrossOrigin(origins = {"192.168.1.14:8081","192.168.2.34:8080"},allowedHeaders="运行哪些请求头跨域",methods={RequestMethod.GET,RequestMethod.POST}) //解决跨域问题 public class LoginController { @Autowired private IUserService userService; @Autowired private RedisTemplate redisTemplate; @PostMapping("/login") @ApiOperation(value = "登录接口") public CommonResult login(@RequestBody LoginVo loginVo){ QueryWrapper<User> wrapper = new QueryWrapper<>(); wrapper.eq("username",loginVo.getUsername()); wrapper.eq("password",loginVo.getPassword()); wrapper.eq("is_deleted",0); User user = userService.getOne(wrapper); if(user!=null){ //随机生成一个唯一字符串。 String token = UUID.randomUUID().toString(); //把该token作为redis的key value为当前登录用户信息 ValueOperations forValue = redisTemplate.opsForValue(); forValue.set(token,user,24, TimeUnit.HOURS); return new CommonResult(2000,"登录成功",token); }else{ return CommonResult.LOGIN_ERROR; } } } </pre> <p>RedisTemplate类需要序列化，加入一个配置类</p> <pre class="brush:java;toolbar:false">package com.wzh.system.config; import com.fasterxml.jackson.annotation.JsonAutoDetect; import com.fasterxml.jackson.annotation.PropertyAccessor; import com.fasterxml.jackson.databind.ObjectMapper; import org.springframework.cache.CacheManager; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.data.redis.cache.RedisCacheConfiguration; import org.springframework.data.redis.cache.RedisCacheManager; import org.springframework.data.redis.connection.RedisConnectionFactory; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer; import org.springframework.data.redis.serializer.RedisSerializationContext; import org.springframework.data.redis.serializer.RedisSerializer; import org.springframework.data.redis.serializer.StringRedisSerializer; import java.time.Duration; @Configuration public class RedisConfig { //这个是用来自己创建的RedisTemplate @Bean public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) { RedisTemplate<String, Object> template = new RedisTemplate<>(); RedisSerializer<String> redisSerializer = new StringRedisSerializer(); Jackson2JsonRedisSerializer jackson2JsonRedisSerializer = new Jackson2JsonRedisSerializer(Object.class); ObjectMapper om = new ObjectMapper(); om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY); om.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL); jackson2JsonRedisSerializer.setObjectMapper(om); template.setConnectionFactory(factory); //key序列化方式 template.setKeySerializer(redisSerializer); //value序列化 template.setValueSerializer(jackson2JsonRedisSerializer); //value hashmap序列化 filed value template.setHashValueSerializer(jackson2JsonRedisSerializer); template.setHashKeySerializer(redisSerializer); return template; } } </pre> <p>（2）修改前端登录方法</p> <p></p> <p> 后面每次请求都可以携带该token,</p> <p></p> <p> 每次请求都得要人为添加参数token. 我们可以使用axios的请求拦截器。</p> <p></p> <p> 验证token有没有被使用</p> <pre class="brush:java;toolbar:false"><template> <el-button type="primary" @click="getInfo">获取用户信息</el-button> </template> <script> export default { name: "User", methods:{ getInfo(){ this.$http.get("http://localhost:8081/system/user/getInfo").then(result=>{ console.log(result) }) } } } </script> <style scoped> </style></pre> <p>接口：</p> <pre class="brush:java;toolbar:false">package com.wzh.system.controller; import com.wzh.system.entity.User; import com.wzh.system.vo.CommonResult; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.data.redis.core.ValueOperations; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletRequest; @RestController @RequestMapping("/system/user") public class UserController { @Autowired private RedisTemplate redisTemplate; @GetMapping("getInfo") public CommonResult getInfo(HttpServletRequest request) { String token = request.getHeader("token"); //获取请求头 System.out.println(token); //根据token从redis中获取用户信息 ValueOperations forValue = redisTemplate.opsForValue(); User o = (User) forValue.get(token); return new CommonResult(2000, "获取用户信息成功", o); } } </pre> <p> 这时发现报500 原因我们的实体类有两个时间类型</p> <p></p> <p> </p> <p> 解决办法:</p> <pre class="brush:java;toolbar:false">  <dependency> <groupId>com.fasterxml.jackson.datatype</groupId> jackson-datatype-jsr310</artifactId> <version>2.9.3</version> </dependency></pre> <p>类属性上加入注解</p> <pre class="brush:java;toolbar:false"> @JsonDeserialize(using = LocalDateTimeDeserializer.class) @JsonSerialize(using = LocalDateTimeSerializer.class)</pre> <p></p> <p></p> <p>运行程序成功</p> <p></p> <p></p> 5.前置路由守卫 <p>前置路由守卫:就是在路由跳转前加上自己得一些业务代码，在main.js中配置。类似于拦截器</p> <pre class="brush:java;toolbar:false">//设置前置路由守卫 to:到哪个路由 from:从哪个路由来 next():放行到指定路由 router.beforeEach((to,from,next)=>{ //获取跳转得路径 var path = to.path; //判断是否为登录路由路径 if(path==="/login"){ console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~") //放行 return next(); } //其他路由路径判断是否登录过 var token = sessionStorage.getItem("token"); if(token){ return next(); } //跳转登录 return next("/login"); })</pre> 6.整合shiro <p>（1）添加依赖</p> <pre class="brush:java;toolbar:false"> <dependency> <groupId>org.apache.shiro</groupId> shiro-spring-boot-starter</artifactId> <version>1.7.0</version> </dependency></pre> <p>（2）shiro的配置类</p> <pre class="brush:java;toolbar:false">package com.wzh.system.config; import com.wzh.system.filter.LoginFilter; import com.wzh.system.realm.MyRealm; import org.apache.shiro.authc.credential.CredentialsMatcher; import org.apache.shiro.authc.credential.HashedCredentialsMatcher; import org.apache.shiro.realm.Realm; import org.apache.shiro.spring.security.interceptor.AuthorizationAttributeSourceAdvisor; import org.apache.shiro.spring.web.ShiroFilterFactoryBean; import org.apache.shiro.web.mgt.DefaultWebSecurityManager; import org.springframework.aop.framework.autoproxy.DefaultAdvisorAutoProxyCreator; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.web.servlet.FilterRegistrationBean; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.web.filter.CharacterEncodingFilter; import org.springframework.web.filter.DelegatingFilterProxy; import javax.servlet.Filter; import java.util.HashMap; @Configuration public class ShiroConfig { @Bean public DefaultWebSecurityManager securityManager() { DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager(); securityManager.setRealm(realm()); return securityManager; } @Bean public Realm realm() { MyRealm myRealm = new MyRealm(); myRealm.setCredentialsMatcher(credentialsMatcher()); return myRealm; } @Bean public CredentialsMatcher credentialsMatcher() { HashedCredentialsMatcher credentialsMatcher = new HashedCredentialsMatcher(); credentialsMatcher.setHashAlgorithmName("MD5"); credentialsMatcher.setHashIterations(1024); return credentialsMatcher; } @Autowired private RedisTemplate redisTemplate; @Bean(value = "shiroFilter") public ShiroFilterFactoryBean filterFactoryBean() { ShiroFilterFactoryBean filterFactoryBean = new ShiroFilterFactoryBean(); filterFactoryBean.setSecurityManager(securityManager()); //设置拦截规则 HashMap<String, String> map = new HashMap<>(); //放行路径 map.put("/system/login", "anon"); map.put("/doc.html", "anon"); map.put("/swagger-ui.html", "anon"); map.put("/swagger public class MyRealm extends AuthorizingRealm { @Autowired private IUserService userService; @Autowired private IPermissionService permissionService; @Autowired private IRoleService roleService; //当你进行权限校验时会执行该方法 @Override protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principals) { return null; } //该方法用于完成认证的功能 @Override protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException { //1.根据token获取账号 String username = (String) token.getPrincipal(); //2.根据账号查询用户信息 QueryWrapper<User> wrapper = new QueryWrapper<>(); wrapper.eq("username",username); wrapper.eq("is_deleted",0); User user = userService.getOne(wrapper); //表示该用户名在数据库中存在 if(user!=null){ ByteSource credentialsSalt = ByteSource.Util.bytes(user.getSalt()); SimpleAuthenticationInfo info = new SimpleAuthenticationInfo(user,user.getPassword(),credentialsSalt,this.getName()); return info; } return null; } } </pre> <p>（4）修改controller代码 </p> <pre class="brush:java;toolbar:false">package com.wzh.system.controller; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.wzh.system.entity.User; import com.wzh.system.service.IUserService; import com.wzh.system.vo.CommonResult; import com.wzh.system.vo.LoginVo; import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperation; import org.apache.shiro.SecurityUtils; import org.apache.shiro.authc.UsernamePasswordToken; import org.apache.shiro.subject.Subject; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.data.redis.core.ValueOperations; import org.springframework.web.bind.annotation.*; import javax.servlet.http.HttpServletRequest; import java.util.UUID; import java.util.concurrent.TimeUnit; @RestController @RequestMapping("system") @Api(tags = "登录的接口类") //@CrossOrigin(origins = {"192.168.1.14:8081","192.168.2.34:8080"},allowedHeaders="运行哪些请求头跨域",methods={RequestMethod.GET,RequestMethod.POST}) //解决跨域问题 public class LoginController { @Autowired private IUserService userService; @Autowired private RedisTemplate redisTemplate; @PostMapping("/login") @ApiOperation(value = "登录接口") public CommonResult login(@RequestBody LoginVo loginVo){ try{ Subject subject = SecurityUtils.getSubject(); UsernamePasswordToken usernamePasswordToken = new UsernamePasswordToken(loginVo.getUsername() ,loginVo.getPassword()); subject.login(usernamePasswordToken); Object user = subject.getPrincipal(); //随机生成一个唯一字符串。 String token = UUID.randomUUID().toString(); //把该token作为redis的key value为当前登录用户信息 ValueOperations forValue = redisTemplate.opsForValue(); forValue.set(token,user,24, TimeUnit.HOURS); return new CommonResult(2000,"登录成功",token); }catch (Exception e){ e.printStackTrace(); return CommonResult.LOGIN_ERROR; } } } </pre> <p></p> <p> 测试登录</p> <p>登录成功后获取用户信息时出现如下得错误</p> <p></p> <p> 被shiro的拦截器给拦截了。</p> <pre class="brush:java;toolbar:false">package com.wzh.system.filter; import com.fasterxml.jackson.databind.ObjectMapper; import com.wzh.system.vo.CommonResult; import org.apache.shiro.web.filter.authc.FormAuthenticationFilter; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.stereotype.Component; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.http.HttpServletRequest; import java.io.PrintWriter; //如果类没有交于spring容器来管理那么该类中得属性也不能让spring帮你注入 public class LoginFilter extends FormAuthenticationFilter { private RedisTemplate redisTemplate; //LoginFilter必须交于spring容器来管理。 public LoginFilter(RedisTemplate redisTemplate) { this.redisTemplate = redisTemplate; } //当登录成功后执行得方法，如果该方法返回false，则执行onAccessDenied @Override protected boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) { HttpServletRequest req = (HttpServletRequest) request; //1.请求方式是否为OPTIONS String options = req.getMethod(); if(options!=null && options.equals("OPTIONS")){ return true; } String token = req.getHeader("token"); //token可以伪造，所以也要查询redis里有没有该记录 if(token!=null && redisTemplate.hasKey(token)){ return true; } return false; } //未登录时调用该方法? 为什么进入没有登录方法: // --->第一个请求是OPTIONS,没有携带token 第二个因为前端和后端不是用得同一个session.默认shiro以sessionId为是否登录得标准 @Override protected boolean onAccessDenied(ServletRequest request, ServletResponse response) throws Exception { response.setContentType("application/json;charset=utf-8"); PrintWriter writer = response.getWriter(); CommonResult commonResult = CommonResult.UNLOGIN; ObjectMapper objectMapper = new ObjectMapper(); String json = objectMapper.writeValueAsString(commonResult); writer.print(json); writer.flush(); writer.close(); return false; } } </pre> <p></p> 7.主页的布局 <pre class="brush:java;toolbar:false"><template> <el-container> <el-header> <el-dropdown @command="handleCommand"> <el-avatar ></el-avatar> <el-dropdown-menu slot="dropdown" > <el-dropdown-item command="info">个人信息</el-dropdown-item> <el-dropdown-item command="logout">退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-container> <el-aside width="200px"> </el-aside> <el-main> </el-main> </el-container> <el-footer>Footer</el-footer> </el-container> </template> <script> export default { name: "Home", methods:{ getInfo(){ this.$http.get("/system/user/getInfo").then(result=>{ console.log(result) }) }, } } </script>  <style> html,body,#app{ height: 100%; } body,#app{ padding: 0px; margin:0px; } .el-container{ height: 100%; } .el-header, .el-footer { background-color: #1F272F; color: #333; line-height: 60px; } .el-aside { background-color: #545c64; color: #333; line-height: 560px; } .el-aside>.el-menu{ border: none; } .el-main { background-color: #E9EEF3; color: #333; line-height: 560px; } body > .el-container { margin-bottom: 40px; } .el-container:nth-child(5) .el-aside, .el-container:nth-child(6) .el-aside { line-height: 260px; } .el-container:nth-child(7) .el-aside { line-height: 320px; } </style></pre> <p></p> 7.1. 退出 <p>前端:</p> <p>由于每个跳转都需要写ip和端口，我们可以在main.js中设置axios的基础路径</p> <blockquote> <pre class="brush:java;toolbar:false">//设置axios基础路径 axios.defaults.baseURL="http://localhost:8082"</pre> <p></p> </blockquote> <p></p> <p> 后端:</p> <pre class="brush:java;toolbar:false"> @GetMapping("/logout") public CommonResult logout(HttpServletRequest request){ String token = request.getHeader("token"); if(redisTemplate.hasKey(token)){ redisTemplate.delete(token); return new CommonResult(2000,"退出成功",null); } return new CommonResult(5000,"请先登录",null); }</pre> 7.2. 查询左侧菜单 <p>(1)前端</p> <pre class="brush:java;toolbar:false"><template> <el-container> <el-header> <el-dropdown @command="handleCommand"> <el-avatar ></el-avatar> <el-dropdown-menu slot="dropdown" > <el-dropdown-item command="info">个人信息</el-dropdown-item> <el-dropdown-item command="logout">退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-container> <el-aside width="200px"> <el-menu default-active="2" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-submenu :index="menu.id+''" v-for="menu in leftMenus"> <template slot="title"> <i :></i> {{menu.name}} </template> <el-menu-item :index="second.id+''" v-for="second in menu.children"> <i :></i> {{second.name}} </el-menu-item> </el-submenu> </el-menu> </el-aside> <el-main> </el-main> </el-container> <el-footer>Footer</el-footer> </el-container> </template> <script> export default { name: "Home", data(){ return{ leftMenus:[] } }, methods:{ initLeftMenu(){ this.$http.get("/system/permission/leftMenu").then(result=>{ if(result.data.code===2000){ this.leftMenus=result.data.data; } }) }, getInfo(){ this.$http.get("/system/user/getInfo").then(result=>{ console.log(result) }) }, //下拉的触发事件 handleCommand(command) { if (command === 'logout') { this.$http.get("/system/logout").then(result => { if (result.data.code === 2000) { console.log("11111") sessionStorage.clear(); //sessionStorage.removeItem("token"); this.$router.push("/login") } }) } } } } </script>  <style> html,body,#app{ height: 100%; } body,#app{ padding: 0px; margin:0px; } .el-container{ height: 100%; } .el-header, .el-footer { background-color: #1F272F; color: #333; line-height: 60px; } .el-aside { background-color: #545c64; color: #333; line-height: 560px; } .el-aside>.el-menu{ border: none; } .el-main { background-color: #E9EEF3; color: #333; line-height: 560px; } body > .el-container { margin-bottom: 40px; } .el-container:nth-child(5) .el-aside, .el-container:nth-child(6) .el-aside { line-height: 260px; } .el-container:nth-child(7) .el-aside { line-height: 320px; } </style></pre> <p>(2)后端:</p> <pre class="brush:java;toolbar:false">@RestController @RequestMapping("/system/permission") public class PermissionController { @Autowired private IPermissionService permissionService; @GetMapping("leftMenu") public CommonResult leftMenu(HttpServletRequest request){ String token = request.getHeader("token"); return permissionService.findPermissionByUserId(token); } }</pre> <p>service</p> <pre class="brush:java;toolbar:false">package com.wzh.system.service.impl; import com.wzh.system.entity.Permission; import com.wzh.system.entity.User; import com.wzh.system.mapper.PermissionMapper; import com.wzh.system.service.IPermissionService; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.wzh.system.vo.CommonResult; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.data.redis.core.ValueOperations; import org.springframework.stereotype.Service; import java.util.ArrayList; import java.util.List; @Service public class PermissionServiceImpl extends ServiceImpl<PermissionMapper, Permission> implements IPermissionService { @Autowired private PermissionMapper permissionMapper; @Autowired private RedisTemplate redisTemplate; @Override public CommonResult findPermissionByUserId(String token) { //根据token获取用户信息 ValueOperations forValue = redisTemplate.opsForValue(); User user = (User) forValue.get(token); //根据用户id查询该用户具有的权限。 List<Permission> permissionList = permissionMapper.selectByUserId(user.getId()); //设置层级关系 List<Permission> firstMenus = new ArrayList<>(); for (Permission firstMenu : permissionList){ if(firstMenu.getPid().equals("1")){ firstMenus.add(firstMenu); } } //为一级菜单设置二级菜单 for (Permission first : firstMenus){ //根据一级菜单id 查询该菜单得二级菜单。如果出现不确定有几级菜单那么我们可以使用方法得递归调用 first.setChildren(findChildren(permissionList, first.getId())); } return new CommonResult(2000,"查询成功",firstMenus); } //方法递归 private List<Permission> findChildren(List<Permission> permissionList, String pid) { List<Permission> children = new ArrayList<>(); for (Permission p : permissionList){ if(p.getPid().equals(pid)){ children.add(p); } } for(Permission child : children){ child.setChildren(findChildren(permissionList,child.getId())); } return children; } } </pre> <p>实体类添加列</p> <p></p> <p></p> <p></p></div> </div> <div style="clear: both;"></div> <div class="author-info fl"> <div><span class="gray">转载请注明：</span>文章转载自 <a href="https://www.mshxw.com/" class="blue">www.mshxw.com</a></div> <div><span class="gray">本文地址：</span><a href="https://www.mshxw.com/it/1039446.html" class="blue">https://www.mshxw.com/it/1039446.html</a></div> </div> <div class="prev fl"> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/1039444.html">上一篇 IDEA如何设置为中文语言</a> </p> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/1038262.html">下一篇 python实现剑指算法</a> </p> </div> <div class="new_tag fl"> </div> </div> <div class="new_r fr" style="border-radius:10px;"> <div class="tui fl"> <h3>Java相关栏目本月热门文章</h3> <ul> <li><span>1</span><a href="https://www.mshxw.com/it/1041277.html" title="【Linux驱动开发】设备树详解（二）设备树语法详解">【Linux驱动开发】设备树详解（二）设备树语法详解</a></li> <li><span>2</span><a href="https://www.mshxw.com/it/1041273.html" title="别跟客户扯细节">别跟客户扯细节</a></li> <li><span>3</span><a href="https://www.mshxw.com/it/1041266.html" title="Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区">Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区</a></li> <li><span>4</span><a href="https://www.mshxw.com/it/1041261.html" title="【Java】对象处理流（ObjectOutputStream和ObjectInputStream）">【Java】对象处理流（ObjectOutputStream和ObjectInputStream）</a></li> <li><span>5</span><a href="https://www.mshxw.com/it/1041256.html" title="【分页】常见两种SpringBoot项目中分页技巧">【分页】常见两种SpringBoot项目中分页技巧</a></li> <li><span>6</span><a href="https://www.mshxw.com/it/1041299.html" title="一文带你搞懂OAuth2.0">一文带你搞懂OAuth2.0</a></li> <li><span>7</span><a href="https://www.mshxw.com/it/1041297.html" title="我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍">我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍</a></li> <li><span>8</span><a href="https://www.mshxw.com/it/1041296.html" title="【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成">【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成</a></li> <li><span>9</span><a href="https://www.mshxw.com/it/1041294.html" title="JavaSE - 封装、static成员和内部类">JavaSE - 封装、static成员和内部类</a></li> <li><span>10</span><a href="https://www.mshxw.com/it/1041291.html" title="树莓派mjpg-streamer实现监控及拍照功能调试">树莓派mjpg-streamer实现监控及拍照功能调试</a></li> <li><span>11</span><a href="https://www.mshxw.com/it/1041289.html" title="用c++写一个蓝屏代码">用c++写一个蓝屏代码</a></li> <li><span>12</span><a href="https://www.mshxw.com/it/1041285.html" title="从JDK8源码中看ArrayList和LinkedList的区别">从JDK8源码中看ArrayList和LinkedList的区别</a></li> <li><span>13</span><a href="https://www.mshxw.com/it/1041281.html" title="idea 1、报错java: 找不到符号符号: 变量 log 2、转换成Maven项目">idea 1、报错java: 找不到符号符号: 变量 log 2、转换成Maven项目</a></li> <li><span>14</span><a href="https://www.mshxw.com/it/1041282.html" title="在openwrt使用C语言增加ubus接口（包含C uci操作）">在openwrt使用C语言增加ubus接口（包含C uci操作）</a></li> <li><span>15</span><a href="https://www.mshxw.com/it/1041278.html" title="Spring 解决循环依赖">Spring 解决循环依赖</a></li> <li><span>16</span><a href="https://www.mshxw.com/it/1041275.html" title="SpringMVC——基于MVC架构的Spring框架">SpringMVC——基于MVC架构的Spring框架</a></li> <li><span>17</span><a href="https://www.mshxw.com/it/1041272.html" title="Andy‘s First Dictionary C++ STL set应用">Andy‘s First Dictionary C++ STL set应用</a></li> <li><span>18</span><a href="https://www.mshxw.com/it/1041271.html" title="动态内存管理">动态内存管理</a></li> <li><span>19</span><a href="https://www.mshxw.com/it/1041270.html" title="我的创作纪念日">我的创作纪念日</a></li> <li><span>20</span><a href="https://www.mshxw.com/it/1041269.html" title="Docker自定义镜像-Dockerfile">Docker自定义镜像-Dockerfile</a></li> </ul> </div> </div> </div>  <div class="link main"> <div class="link_tit"> <span class="on">热门相关搜索</span> </div> <div class="link_tab"> <div class="link_con"> <a href="http://www.mshxw.com/TAG_1/luyouqishezhi.html">路由器设置</a> <a href="http://www.mshxw.com/TAG_1/mutuopan.html">木托盘</a> <a href="http://www.mshxw.com/TAG_1/baotamianban.html">宝塔面板</a> <a href="http://www.mshxw.com/TAG_1/shaoerpython.html">儿童python教程</a> <a href="http://www.mshxw.com/TAG_1/xinqingdiluo.html">心情低落</a> <a href="http://www.mshxw.com/TAG_1/pengyouquan.html">朋友圈</a> <a href="http://www.mshxw.com/TAG_1/vim.html">vim</a> <a href="http://www.mshxw.com/TAG_1/shuangyiliuxueke.html">双一流学科</a> <a href="http://www.mshxw.com/TAG_1/zhuanshengben.html">专升本</a> <a href="http://www.mshxw.com/TAG_1/wodexuexiao.html">我的学校</a> <a href="http://www.mshxw.com/TAG_1/rijixuexiao.html">日记学校</a> <a href="http://www.mshxw.com/TAG_1/xidianpeixunxuexiao.html">西点培训学校</a> <a href="http://www.mshxw.com/TAG_1/qixiuxuexiao.html">汽修学校</a> <a href="http://www.mshxw.com/TAG_1/qingshu.html">情书</a> <a href="http://www.mshxw.com/TAG_1/huazhuangxuexiao.html">化妆学校</a> <a href="http://www.mshxw.com/TAG_1/tagouwuxiao.html">塔沟武校</a> <a href="http://www.mshxw.com/TAG_1/yixingmuban.html">异形模板</a> <a href="http://www.mshxw.com/TAG_1/xinandaxuepaiming.html">西南大学排名</a> <a href="http://www.mshxw.com/TAG_1/zuijingpirenshengduanju.html">最精辟人生短句</a> <a href="http://www.mshxw.com/TAG_1/6bujiaonizhuihuibeipian.html">6步教你追回被骗的钱</a> <a href="http://www.mshxw.com/TAG_1/nanchangdaxue985.html">南昌大学排名</a> <a href="http://www.mshxw.com/TAG_1/qingchaoshierdi.html">清朝十二帝</a> <a href="http://www.mshxw.com/TAG_1/beijingyinshuaxueyuanpaiming.html">北京印刷学院排名</a> <a href="http://www.mshxw.com/TAG_1/beifanggongyedaxuepaiming.html">北方工业大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijinghangkonghangtiandaxuepaiming.html">北京航空航天大学排名</a> <a href="http://www.mshxw.com/TAG_1/shoudoujingjimaoyidaxuepaiming.html">首都经济贸易大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguochuanmeidaxuepaiming.html">中国传媒大学排名</a> <a href="http://www.mshxw.com/TAG_1/shoudoushifandaxuepaiming.html">首都师范大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguodezhidaxue(beijing)paiming.html">中国地质大学(北京)排名</a> <a href="http://www.mshxw.com/TAG_1/beijingxinxikejidaxuepaiming.html">北京信息科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongyangminzudaxuepaiming.html">中央民族大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijingwudaoxueyuanpaiming.html">北京舞蹈学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingdianyingxueyuanpaiming.html">北京电影学院排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguohuquxueyuanpaiming.html">中国戏曲学院排名</a> <a href="http://www.mshxw.com/TAG_1/hebeizhengfazhiyexueyuanpaiming.html">河北政法职业学院排名</a> <a href="http://www.mshxw.com/TAG_1/hebeijingmaodaxuepaiming.html">河北经贸大学排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinzhongdeyingyongjishudaxuepaiming.html">天津中德应用技术大学排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinyixuegaodengzhuankexuejiaopaiming.html">天津医学高等专科学校排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinmeishuxueyuanpaiming.html">天津美术学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinyinlexueyuanpaiming.html">天津音乐学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjingongyedaxuepaiming.html">天津工业大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijinggongyedaxuegengdanxueyuanpaiming.html">北京工业大学耿丹学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingjingchaxueyuanpaiming.html">北京警察学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinkejidaxuepaiming.html">天津科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijingyoudiandaxue(hongfujiaoou)paiming.html">北京邮电大学(宏福校区)排名</a> <a href="http://www.mshxw.com/TAG_1/beijingwanglaozhiyexueyuanpaiming.html">北京网络职业学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingdaxueyixuebupaiming.html">北京大学医学部排名</a> <a href="http://www.mshxw.com/TAG_1/hebeikejidaxuepaiming.html">河北科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/hebeidezhidaxuepaiming.html">河北地质大学排名</a> <a href="http://www.mshxw.com/TAG_1/hebeitiyoxueyuanpaiming.html">河北体育学院排名</a> </div> </div> </div> <div class="footer"> <div class="dl_con"> <div class="width1200"> <dl> <dt>学习工具</dt> <dd><a href="https://www.mshxw.com/tools/algebra/" title="代数计算器">代数计算器</a></dd> <dd><a href="https://www.mshxw.com/tools/trigonometry/" title="三角函数计算器">三角函数</a></dd> <dd><a href="https://www.mshxw.com/tools/analytical/" title="解析几何">解析几何</a></dd> <dd><a href="https://www.mshxw.com/tools/solidgeometry/" title="立体几何">立体几何</a></dd> </dl> <dl> <dt>知识解答</dt> <dd><a href="https://www.mshxw.com/ask/1033/" title="教育知识">教育知识</a></dd> <dd><a href="https://www.mshxw.com/ask/1180/" title="百科知识">百科知识</a></dd> <dd><a href="https://www.mshxw.com/ask/1155/" title="生活知识">生活知识</a></dd> <dd><a class="https://www.mshxw.com/ask/1199/" title="常识知识">常识知识</a></dd> </dl> <dl> <dt>写作必备</dt> <dd><a href="https://www.mshxw.com/zuowen/1128/" title="作文大全">作文大全</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1130/" title="作文素材">作文素材</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1132/" title="句子大全">句子大全</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1154/" title="实用范文">实用范文</a></dd> </dl> <dl class="mr0"> <dt>关于我们</dt> <dd><a href="https://www.mshxw.com/about/index.html" title="关于我们" rel="nofollow">关于我们</a></dd> <dd><a href="https://www.mshxw.com/about/contact.html" title="联系我们" rel="nofollow">联系我们</a></dd> <dd><a href="https://www.mshxw.com/sitemap/" title="网站地图">网站地图</a></dd> </dl> <div class="dl_ewm"> <div class="wx"> <img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/gzh.jpg" alt="交流群"> <p>名师互学网交流群</p> </div> <div class="wx"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/weixin.jpg" alt="名师互学网客服"> <p>名师互学网客服</p> </div> </div> </div> </div> <div class="copyright"> <p>名师互学网版权所有 (c)2021-2022 ICP备案号：<a href="https://beian.miit.gov.cn" rel="nofollow">晋ICP备2021003244-6号</a> </p> </div> </div>  <div class="m_foot_top"> <img src="https://www.mshxw.com/foot.gif" width="192" height="27" alt="我们一直用心在做"><br/> <a href="https://www.mshxw.com/about/index.html">关于我们</a> <a href="https://www.mshxw.com/archiver/">文章归档</a> <a href="https://www.mshxw.com/sitemap">网站地图</a> <a href="https://www.mshxw.com/about/contact.html">联系我们</a> <p>版权所有 (c)2021-2022 MSHXW.COM</p> <p>ICP备案号：<a href="https://beian.miit.gov.cn/" rel="nofollow">晋ICP备2021003244-6号</a></p> </div> <div class="to_top" style="display:none;"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/to_top.png"></div>  <script type="text/javascript" src="https://www.mshxw.com/skin/sinaskin//kaotop/js/top.js"></script> <script src="https://www.mshxw.com/skin/sinaskin//kaotop/js/fixed.js" type="text/javascript"></script>  <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?018f42187355ee18d1bfcee0487fc91a76ac6319beb05b7dc943033ed22c446d3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e05fec1c87ee5ca07f1ce57d093866c4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </div> <script type="text/javascript"> $(".alert_kf").click(function() { mantis.requestChat(); }); </script> <script type="text/javascript"> var mySwiper_weixin = new Swiper('.pc_swiper_weixin', { autoplay: 3000, //可选选项，自动滑动 loop: true, speed: 1000, pagination: '.swiper-pagination', paginationClickable: true, }) </script> <script type="text/javascript"> $(function() { $(window).scroll(function() { if ($(window).scrollTop() > 100) { $(".to_top").fadeIn(1000); } else { $(".to_top").fadeOut(1000); } }); $(".to_top").click(function() { if ($('html').scrollTop()) { $('html').animate({ scrollTop: 0 }, 300); return false; } $('body').animate({ scrollTop: 0 }, 300); return false; }); }); </script> </body> </html>