Vue-Element UI 组件使用经验，动态二维码生成，node.js 之使用 util 工具类发送请求，uniapp忽略路径中#，前端总结大杂烩，附代码解析（持续更新）

目录

一、Vue - Element UI

1. 表格 el-table

2. 弹框

3. 按钮（预授权）

4. 组件 template

5. 抽屉 el-drawer

6. 动态生成二维码 

二、node.js

1. node.js 引入 util.js 工具类

三、uniapp

1. view 标签

2. onLoad(options)  获取url路径上参数

3. 解决微信开发中 H5 路径中的 "#" 影响跳转

---

一、Vue - Element UI

1. 表格 el-table

• @selection-change="handleSelectionChange"  //绑定多选框选中方法
•  v-loading="loading" //实现加载效果
•  el-table 设置斑马纹表格(间隔行底色），只需要添加 stripe 字段（内置属性，置为true即可）

 
//绑定属性 prop，设置居中 align="center"，设置可排序 sortable 或 :sortable="true"


// 多选框选中数据
handleSelectionChange(selection) {
  this.ids = selection.map(item => item.memberId)
  this.single = selection.length!==1
  this.multiple = !selection.length
}

 分页插件

2. 弹框

（可嵌套iframe，也可以嵌套table表格或form表单）

• el-dialog 弹框， append-to-body 表示将指定 html 元素添加到 body 中。
• el-col :span="24" 将长分为24份，中的 表示将某几个输入框按比例分隔
• ref="form" 绑定表单数据，:model="form" 双向绑定数据， :rules="rules" 绑定校验规则
• slot="footer" class="dialog-footer" 绑定底部内容
• :before-close="handleClose" 右上角 x 号的回调函数

  
    
        
          
            
                
            
          
          
              
                 
              
          
          
            
               
            
          
        
        

    确 定
    取 消
  

3. 按钮（预授权）

（常见格式，通过type修改样式）

        size="mini" 可以将按钮大小设为小型。

  默认按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮

        按钮事件的 预授权操作 v-hasPermi="['ubp:member:remove']"

        //对应的是Java后端的 SpringSecurity 权限校验

//前端按钮 v-hasPermi 预授权
按钮


//后端方法上的校验：（校验权限，防止方法的错误调用或跳过前端直接访问后端方法）
@PreAuthorize("@ss.hasPermi('ubp:member:remove')")
public AjaxResult remove(@PathVariable Long[] memberId

 搜索事件（若依生成代码）

        简单引入若依的概念：若依是当下较为流行的快捷开发框架，如果你的项目是一个springboot+vue，而且主要做管理系统，那么你可以尝试引入若依进行快速开发，若依有完整的代码结构，包括常用工具类，shiro安全校验，代码生成gen，ApachePOI操作Excel都有所集成。

4. 组件 template

 scope.row        //相当于当前行的数据对象

 {{ scope.row.memberName }}    //获取行内具体数据

slot-scope="scope"    //作用域插槽(带有数据的插槽)

//用途一，获取后端传来数据，并进行处理时，可以通过 scope.row 获取行（一个对象）进而操作

    


//用途二，加载时间（对时间进行格式化处理）

    

5. 抽屉 el-drawer

    xxx

        设定日期格式（年-月-日）,具体使用可参考组件template使用代码

{{ parseTime(scope.row.probationTime, '{y}-{m}-{d}') }}

6. 动态生成二维码 

步骤：打开项目所在的终端，如果是HBuilder，可以在视图终端处打开

1. npm install qrcodejs2 --save         //在终端输入npm命令，安装二维码插件
2. import QRCode from 'qrcodejs2';        //在vue文件中，引入生成二维码插件
3. 构建二维码弹框，存放二维码对象qrCodeDiv

    
      
      

        
        

      
    

// 1. 方法调用 
bangding(row){
      let memberId = row.memberId;
      this.isShowCard = true;
      if(this.ids != null){
        memberId = this.ids[0];
      }
      this.createQRCode(memberId);
}
//2. 具体的绑定方法
createQRCode(id){
      this.$nextTick(()=>{
      this.$refs.qrCodeDiv.innerHTML = '';//二维码清除
      alert(id)
      new QRCode(this.$refs.qrCodeDiv, {
          text: "id="+ id,//二维码链接，参数是否添加看需求
          width: 200,//二维码宽度
          height: 200,//二维码高度
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
        });
      })
    }

生成动态二维码详情参考:vue页面动态生成二维码，扫描二维码跳转到微信小程序，同时传递参数_vue生成小程序二维码_coderdwy的博客-CSDN博客

 7. 遍历数组或对象 v-for

在 v-for 这里弄了很多次也没获取到数据，归结起来数组和对象的区别：

        数组，如果数组里面存放的是单纯的值，比如说 [1, 2, 3...], 当前的item就可以指代要查询的值。

        如果数组中存放的是一个个对象，比如说 [{name: zhangsan}{name: lisi}], 当前的item指代的是对象集合，要通过 item.name 去指向具体的数据。

二、node.js

1. node.js 引入 util.js 工具类

//引入 util 对象，可以通过对象.方法名形式调用其中的方法
const util = require("../../config/util.js")

//使用 util发送请求（默认为get请求，参数有三，url, data, methods)
this.userInfo = {
    code: 1,
    memberName: "张三",
    wxCode: this.code
};
util.request(this.baseUrl + api.url,
    this.userInfo, "POST").then(res => {
    if(res.code === 200){
        this.msg = "绑定成功";
    }else{
        this.msg = "绑定失败";
    }
});

三、uniapp

1. view 标签

• view 是 template 组件中的盒子，一个 template 中只能有一个外层 view，内层可以嵌套 view。
• view 本身效果跟 form，table 类似，其中可以包括 image，input，text，button，span等标签。
• 在外层 view 标签上添加 v-show="showModel"，通过 showModel 设置true，false 实现弹框层。 并使用 class="model" 实现样式设置

 效果图：

 

 代码：

2. onLoad(options)  获取url路径上参数

比如：url：http://localhost:8081/test/?code=123456&state=0,0

this.code = options.code //code: 123456

this.state = options.state //state: 0,0

onLoad(options) {
  //设置访问路径端口
  this.baseUrl = 'http://localhost:8080/'
  this.code = options.code;
  this.state = options.state;
}

3. 解决微信开发中 H5 路径中的 "#" 影响跳转

解决一个问题最好的办法就是消掉它，所以这里我们将 "#" 进行忽略 。

        这里是因为路由导致的，所以只需要修改 H5 的路由模式为 history 即可实现忽略。

        在微信开发的博客中有更加详细的介绍，详情参考：微信公众平台开发（测试）实现

2023年 9月 11日更新

Vue 点击事件

• 右键点击事件         @contextmenu.prevent.stop

test

clickRight(value, key){
    console.log(value + " " + key)
    //具体实现
}

• 左键单击事件        @click
• 左键双击事件        @dbclick

 如果双击事件没有效果，可以把 @dbclick 换成 @dblclick

//单击
test
//双击
test

 Disabled 不起效果解决方案

如果你直接使用 disabled 默认值，发现起不到效果，那么试试 绑定 disabled 方法的方式

delabel(row){
        if(row === '0'){
          return false;
        }
        return true;
      }

最近一直在不断学前端内容，持续更新中...