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

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

目录

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即可)
<el-table :data="moneyList"    //绑定数据 moneyList
    default-sort = "{prop: 'memberMoneyId', order: 'ascending'}"    //设置默认根据id升序
>
<el-table-column label="会员记录id" align="center" prop="memberMoneyId" sortable /> 
//绑定属性 prop,设置居中 align="center",设置可排序 sortable 或 :sortable="true"
</el-table>

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

 分页插件

<pagination
  v-show="total>0"
  :total="total"
  :page.sync="queryMoneyParams.pageNum"
  :limit.sync="queryMoneyParams.pageSize"
  @pagination="getMoneyList"
/>

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 号的回调函数
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
  <el-col :span="24">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="xx" prop="deptmentRoom">
                <el-input v-model="form.deptmentRoom" placeholder="请输入xxx" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="xx" prop="deptmentDept">
                 <el-input v-model="form.deptmentDept" placeholder="请输入xxx" />
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="xx" prop="post">
               <el-input v-model="form.post" placeholder="请输入xx" />
            </el-form-item>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>

3. 按钮(预授权)

(常见格式,通过type修改样式)

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

  <el-button>默认按钮</el-button>
  <el-button type="primary"  size="mini">主要按钮</el-button>
  <el-button type="su***ess">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>

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

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

//前端按钮 v-hasPermi 预授权
<el-button
    @click="handleDelete"    //绑定按钮点击事件
    label="0"        //数值为 0 
    v-hasPermi="['ubp:member:remove']"
>按钮</el-button>


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

 搜索事件(若依生成代码)

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

<!-- right-toolbar 全局组件,在 main.js 文件中引入,工具类,用于隐藏查询条件和刷新
 :showSearch 容器中控制显示隐藏
 :showSearch.sync 相当于绑定了this.$emit('update:title', newTitle),
实现了父向子的组件传递,至于绑定的值通常为Boolean值,在data中定义,从而控制组件显隐性
queryTable 刷新数据
-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

4. 组件 template

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

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

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

//用途一,获取后端传来数据,并进行处理时,可以通过 scope.row 获取行(一个对象)进而操作
<el-table-column label="变动金额" align="center" prop="money">
    <template slot-scope="scope">
       <span v-if="scope.row.status === 0" :style="{ color: 'red' }">
          +{{ scope.row.money }}</span>
       <span v-if="scope.row.status === 2" :style="{ color: 'blue' }">
          -{{ scope.row.money }}</span>
     </template>
</el-table-column>

//用途二,加载时间(对时间进行格式化处理)
<el-table-column label="操作时间" align="center" prop="updateTime" width="180">
    <template slot-scope="scope">
       <span>{{ parseTime(scope.row.updateTime, "{y}-{m}-{d}") }}</span>
    </template>
</el-table-column>

5. 抽屉 el-drawer

<el-drawer
   title="会员费用记录"
   :visible.sync="memberMoney"    //绑定是否展示,在data中定义变量,设默认值为false
   :direction="direction"         //这里绑定抽屉的方向,在data中设置变量direction: "rtl",表示从右往左的抽屉
   :before-close="handleClose"    //弹出层右上角X号的回调函数
   size="50%"                    //展示页面占总页面大小
>
    <table>xxx</table>
</el-drawer>

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

<span>{{ parseTime(scope.row.probationTime, '{y}-{m}-{d}') }}</span>

6. 动态生成二维码 

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

  1. npm install qrcodejs2 --save         //在终端输入npm命令,安装二维码插件
  2. import QRCode from 'qrcodejs2';        //在vue文件中,引入生成二维码插件
  3. 构建二维码弹框,存放二维码对象qrCodeDiv
<!-- 生成绑定微信二维码界面 -->
    <el-dialog
      title="微信扫码绑定用户"
      :visible.sync="isShowCard"
      width="400px"
      center
      :before-close="jieBangClose"
    >
      <!-- 定义一个展示二维码的div -->
      <div style="display: flex; justify-content: center">
        <!-- 二维码对象可以通过 ref 绑定 -->
        <div id="qrCode" ref="qrCodeDiv"></div>
      </div>
    </el-dialog>

// 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 去指向具体的数据。

<el-form ref="postList" :model="postList" label-width="80px">
  <el-form-item v-for="(item, index) in this.postList"
     :key="index"
     :label="item"
   >
    <el-input v-model="changeMoney.money" placeholder="请输入充值金额" />
   </el-form-item>
</el-form>

二、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" 实现样式设置

 效果图:

 

 代码:

<template>
   <!-- 弹出框 -->
    <view class="modal" v-show="showModal">
     <view class="modal-content">
        <text>{{msg}}</text>
        <button class="close" @click="closeModal">关闭</button>
     </view>
    </view>
</template>
<script>
   export default {
     data() {
		return {
            msg: "提交信息成功",
            showModal: true,
        }
     },
     methods:{
        //关闭弹框
		closeModal() {
		  this.showModal = false;
		}
     } 
   }
</script>
<!-- 设置:外层弹框页面固定居中位置,内层view固定在弹框层中间 -->
<style>
   .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 200px;
    height: 200px;
    line-height: 150px;
    text-align: center;
    margin: auto;
}
</style>

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
<div @contextmenu.prevent.stop="clickRight(value, key)">test</div>

clickRight(value, key){
    console.log(value + " " + key)
    //具体实现
}
  • 左键单击事件        @click
  • 左键双击事件        @dbclick

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

//单击
<div @click="clickRight(value, key)">test</div>
//双击
<div @dbclick="clickRight(value, key)">test</div>

 Disabled 不起效果解决方案

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

<div :disabled="delabel(row)"></div>

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

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

转载请说明出处内容投诉
CSS教程_站长资源网 » Vue-Element UI 组件使用经验,动态二维码生成,node.js 之使用 util 工具类发送请求,uniapp忽略路径中#,前端总结大杂烩,附代码解析(持续更新)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买