zoukankan      html  css  js  c++  java
  • vue使用笔记

    1. 模拟form表单

    封装请求模拟form表单 IE完全不支持
    请求头类型 ‘application/x-www-form-urlencoded;charset=UTF-8’
    参考:Api介绍

    let params = new URLSearchParams()
    params.append('name', this.ruleForm.username)
    params.append('password', this.ruleForm.username)
    console.log(params)
    

    在这里插入图片描述
    在这里插入图片描述

    2. vue的mixins(融合)

    mixins是vue的方法:官方介绍

    export const mixin = {
        methods: {
            // this.$notify({message: '提示消息', type: 'error'})
            //提示信息  封装一下上边的方法防止调用麻烦
            notify(title, type) {
                this.$notify({
                    title: title,
                    type: type
                })
            }
        }
    }
    

    在这里插入图片描述

    在这里插入图片描述

    结果:
    在这里插入图片描述

    3. 日期格式问题

    方法1:

    参考饿了么ui在这里插入图片描述

         <el-date-picker type="date" placeholder="选择日期" v-model="registerForm.birth"
                                        value-format="yyyy-MM-dd"
                                        style=" 100%"></el-date-picker>
    

    方式2:时间戳转换

       let d = this.registerForm.birth
                    let datetime = d.getFullYear() + '--' + d.getMonth() + '--' + d.getDate()
                    console.log(datetime)
    

    在这里插入图片描述

    4. 垂直滚动条的隐藏和使用

     <p class="introduction">  {{scope.row.introduction}}</p>
    
        .introduction {
            height: 100px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
         /*隐藏垂直滚动条*/
        .introduction::-webkit-scrollbar {
            display: none;
        }
    

    在这里插入图片描述

    5. 头像上传

    html代码

     <el-upload :action="uploadUrl(scope.row.id)"
                                       :before-upload="handleAvatarUpload"
                                       :on-success="handleAvatarSuccess">
                                <el-button size="mini">更新图片</el-button>
                            </el-upload>
    

    js代码

     uploadUrl(id) {
                    //从Vuex中获取图片上传的服务器ip
                    return `${this.$store.state.HOST}/singer/updateSingerPic?id=${id}`
                },
                handleAvatarSuccess(res, file) {
                    if (res.code === 0) {
                        this.getList()
                        this.$message.success('上传成功')
                    } else {
                        this.$message.error('上传失败')
                    }
                },
                handleAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
                    if (!isJPG) {
                        this.$message.error('上次头像图片只能是jpg或png格式')
                        return false
                    }
                    const isLt2M = file.size / 1024 / 1024 < 2
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!')
                        return false
                    }
                    return isJPG && isLt2M
                }
    

    6. 复选框值提交到后台

    ids=[1,2]
    {ids}传递后的格式是[1,2] 后台可以用Long][]数组直接接收
    {“ids”:ids} 格式为 {ids:[1,2]} 后台需要有ids对象来接受

    /**
     * 封装post方法
     * @param url 请求地址
     * @param data
     * @returns {Promise<unknown>}  异步对象
     */
    export function post(url, data = {}) {
        return new Promise((resolve, reject) => {
            axios.post(url, data).then(response => {
                resolve(response)
            }).catch(err => {
                reject(err)
            })
        })
    }
    //调用封装好的方法进行发送
    async deleteHandle(id) {
                    console.log(id)
                    let ids = id ? [id] : this.dataListSelections.map(item => {
                        return item.id
                    })
                    const {data: res} = await deleteSinger(ids) 
                    //传递后的格式是[1,2] 后台可以用Long][]数组直接接收
    				//{"ids":ids} 格式为 {ids:[1,2]} 后台需要有ids对象来接受
                     if (res.code === 0) {
                        this.$message.success('删除成功')
                    } else {
                        return this.$message.error('删除失败')
                    }
                },
                // 多选
                selectionChangeHandle(val) {
                    this.dataListSelections = val
                },
    
    	@PostMapping("/delete")
    	public R delete(@RequestBody Long[] userIds){
    		sysUserService.deleteBatch(userIds);
    		return R.ok();
    	}
    

    7. 正则表达式匹配歌词前面的时间

    [ 代表[
    d 代表数字
    {}代表几个字符
    . 任意单字符
    ()子正则表达式

           let lines = text.split('
    ')
                 
                    let pattern = /[d{2}:d{2}.(d{3}|d{2})]/g
                    let result = []
                    for (let item of lines) {
                        let value = item.replace(pattern, '')
                        result.push(value)
                    }
                    return result
    
    1. 关于flex布局
            <el-row :gutter="20" class="mgb20">
                <el-col :span="6">
                    <el-card>
                        <div class="grid-content">
                            <div class="grid-cont-center">
                                <div class="grid-num">{{songListCount}}</div>
                                <div>歌单数量</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
    
    gutter	栅格间隔	  类型number	默认值 0
    

    在这里插入图片描述

    .grid-content {
            display: flex;
            align-items: center;
            height: 50px;
        }
    
        .grid-cont-center {
            flex-grow: 1;
            text-align: center;
            font-size: 14px;
            color: darkgray;
        }
    
        .grid-num {
            font-size: 30px;
            font-weight: bold;
        }
    

    flex: 1 属性参考 flex属性-flex:1到底是什么
    在这里插入图片描述

    7. 利用padding-top/padding-bottom百分比,进行占位和高度自适应

    在css里面,padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候,参照的是父元素的宽度。
    比如:父元素宽度是100px, 子元素padding-top:50%,那么padding-top的实际值就是100*50%=50px
    这个小小的知识点,其实有很大的用处,应用也很广泛,就是进行提前占位,避免资源加载时候的闪烁,还可以让高度自适应。
    参考文章:高度自适应

    .mask {
      width: 100%;
      padding-bottom: 100%;
      height: 0;  //注意把高度设置为0 这样子元素如何变化  该元素不受影响
      overflow: hidden; //超出高度隐藏
    }
    

    8. vue的store取不到值问题

    在这里插入图片描述
    在这里插入图片描述

    参考图 没有写getters的方法是不可以用maoGetters获取值的

    在这里插入图片描述

    如果使用this.$store.state 形式 需要写全路径

    布局相关

    位置

    1. 脱离文档流
      position: absolute; //绝对定位
      float: left; //浮动
    2. 不会脱离文档流
      position: relative; //相对定位

    json传递空值

    前台传递空值

    1. 如果后台接受类型Interger 则为null
    2. 如果后台类型为String 则为""

    参数效验

    @NotEmpty注解支持字符串类型字段,不支持Integer,对Integer类型的校验要用@NotNull
    在这里插入图片描述

  • 相关阅读:
    How to Create a site at the specified URL and new database (CommandLine Operation)
    Using Wppackager to Package and Deploy Web Parts for Microsoft SharePoint Products and Technologies
    SQL Server Monitor v0.5 [Free tool]
    How to build Web Part
    Deploy web part in a virtual server by developing a Web Part Package file(.cab)
    How to recreate "sites" link if you delete it accidentally
    SharePoint Portal Server管理匿名访问设置
    Monitor sql connection from .Net SqlClient Data Provider
    Brief installation instruction of Sharepoint Portal Server
    How to Use SharePoint Alternate URL Access
  • 原文地址:https://www.cnblogs.com/idcode/p/14551363.html
Copyright © 2011-2022 走看看