SpringMvc + vue前后分离：当前系统跳转时前通过axios获取权限带参数Visible值，跳到第二系统，根据Visible的值给第二系统内的组件设置模糊样式设计

懵魅的程序猿

已于 2024-09-19 10:21:22 修改

阅读量272

点赞数 3

文章标签： java vue.js

于 2024-09-19 10:15:52 首次发布

本文链接：https://blog.csdn.net/weixin_44229734/article/details/142352015

版权

前端：

组件1：index1.vue

  <span v-if="Visible"  class="action">
         <a  target="" :href="computedHref" style="color:#ffffff;font-size: 22px; margin-right:20px">
          <i class="el-icon-data-line" style="margin-right:5px"> </i> <b>进入驾驶舱</b>
         </a>
    </span>

methods: {
      getNikename(){
       
        const realname = this.nickname();

         const axiosInstance = axios.create({
           //baseURL: 'http://192.168.1.56:8080'  // 在这里设置统一的 baseURL
          
         });
        axiosInstance.post('/jeecg-boot/sys/user/getNameRole', {realname})
        .then(response => {
         debugger
                
              this.Visible=response.data.result
           
              console.log(this.Visible);
                  
           
           })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
        
      },

组件二：index.vue

<dv-border-box-12>
             

                <centerLeft1    :config="config"  />
 </dv-border-box-12>



import centerLeft1 from './centerLeft1' 嵌套组件

data() {
    return {
     Visible：null，
     config:{
            Visible:''
          } ,
   }
}


 mounted() {
    this.updateFromUrl()

}，
 methods: {
    updateFromUrl() {
      const params = new URLSearchParams(window.location.search);
      
      this.Visible = params.get('Visible') === 'true'; // 转换为布尔值
      this.config.Visible = true 

      if (this.Visible) {
            const url = new URL(window.location);

            url.searchParams.delete('Visible');

            history.replaceState(null, '', url);

        }

      }
  
    },

组件三，嵌套组件centerLeft1.vue

<div class="d-flex jc-center ">
        <dv-digital-flop :config="config" :class="{ blurred: !config.Visible }"   />
 </div>
export default {
  props: {
    config {
      type: Object,
      required: true
    },
   },




.blurred {
  filter: blur(10px); /* 调整模糊程度 */
  color: transparent; /* 如果希望隐藏文本内容 */
}

后端：

Controller

@RequestMapping("/sys/user")
public class SysUserController {


@RequestMapping(value = "/getNameRole", method = RequestMethod.POST)
    public Result<?> getNameRole(
                                @RequestBody Map<String, String> params) {
        String realname = params.get("realname"); // 从请求体中获取参数
        List<SysUser>  listusers =sysUserService.getNameRole(realname);
        Boolean power =false;
        if(listusers.size()==2){
             power= true;
        }
}

Service

public interface ISysUserService extends IService<SysUser> {
         List<SysUser> getNameRole(String realname);
}

ServiceImpl

@Service
@Slf4j
public class SysUserServiceImpl extends ServiceImpl<SysUserMapper, SysUser> implements ISysUserService {

   @Override
	public List<SysUser> getNameRole(String realname) {
		return userMapper.getNameRole(realname);
	}

}

Mapper

public interface SysUserMapper extends BaseMapper<SysUser> {

         List<SysUser> getNameRole(@Param("realname")String realname);
}

Mapper.xml

<select id="getNameRole" resultType="org.jeecg.modules.system.entity.SysUser">
		select r.role_code as username
		   from sys_user u , sys_user_role ur ,sys_role r
		   where  realname =#{realname} and  ur.user_id=u.id and r.id = ur.role_id and role_code in ('TQ000021','TQ000099')
			GROUP BY r.role_name

	</select>