vue后台管理系统（个人笔记-总结）每日实时更新_vue每日更新效果实现

最新推荐文章于 2024-06-18 17:21:06 发布

2401_84446963

最新推荐文章于 2024-06-18 17:21:06 发布

阅读量365

点赞数 5

分类专栏：程序员文章标签：前端面试学习

原文链接：https://blog.csdn.net/qq_41646249/article/details/88872604

版权

程序员专栏收录该内容

156 篇文章 0 订阅

订阅专栏

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

②：复杂的情况，新增的时候传过去的是id，保存到数据库里也是id，需要tab 显示name

这个情况下，需要在条件查询的接口做操作，条件选中那的那个列表，加载出来的，在接口里做，

循环遍历，套循环，根据id 把name 查找出来：

问题③. iview 里面接口请求前需要做一下验证：

handleSubmit (name) {

this.$refs[name].validate((valid) => {

if (valid) {

this.$Message.success(‘Success!’);

} else {

this.$Message.error(‘Fail!’);

}

})

handleReset (name) {

this.$refs[name].resetFields();

}

问题④：如果后台接口没做分页的字段这句没用：

问题⑤：如果你的列表显示用的是数组，后台返回给你的是对象，怎么处理？

问题⑥：

解决办法：name：不要起一样就ok

问题⑦：页面首次进来要求按 select 默认的条件加载列表；然后新增后有一个所属线路编号（tccLineId）：赋值给查询里面的变量lineFault

实现方法：

首先在data 里面给lineFault： ‘01’；

其次保存成功后需要子传父时：

this.lineFault = data.tccLineId; //保存后把data.tccLineId 的值赋给lineFault 调查询的接口

然后在调查询的接口：

this.loadListData ();// 查询指定线路

具体代码：

问题8：页面数据传给后台是是自定义的 select 传给后台是id，要求tab 显示name；

方法：

1.在增加的时候，根据id 查name 把name 也带过去存起来，

// 根据opens Id查找对应的 name

this.opens.map(v =>{

if(this.formAddData.openMark === v.openMark){

this.formAddData.openName = v.openName

}

})

2. 在查询的接口时循环遍历一次，根据id 取出name；

tab栏用的变量可以用name变量；

//根据id 查name

this.historyData.map(v=>{

this.opens.map(e=>{

if(v.openMark === e.openMark){

v.openName = e.openName

}

})

具体代码如下：

问题9：iview 表单验证总结：

iview表单验证的步骤：

第一步：给 Form 设置属性 rules :rules
第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“
第三步：注意：Form标签里面是 :model
第四步：注意：在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效
第五步：在操作保存按钮时，添加方法，对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean 表示成功与失败。

//data里面，写验证
ruleValidate: {
contractNo:[
{ required: true, message: ‘合同编号不能为空’, trigger: ‘blur’ },
],
}
//methods里面，写方法
addChange(name){
this.$refs[name].validate(valid => {
if (valid) {
}
});

一般在提交时用：

this.$refs[name].validate(（valid） => {

if (valid) {

}else {

this.$Message.error(‘Fail!’);

}

});

注意事项：

iview进行表单验证select时候验证失败的问题：

用iview自带的表单验证select标签的时候，一直验证不通过，因为iview默认校验数据类型为String，而我的select用的value是number类型的

ruleValidate: {
customer:[
{ required: true, message: ‘客户名称不能为空’, trigger: ‘blur’,type:‘number’},
],
}

iview进行表单验证时间日期验证失败的问题：
和下拉框一样，日期的类型是data
时间控件加上value-format=“yyyy-MM-dd”

ruleValidate: {
advance:[
{ required: true, message: ‘预送达时间不能为空’, trigger: ‘change’ ,type: ‘date’},
],
}

iview进行多重验证的写法：

多重验证包括第一要验不能为空，第二要验证限制的一些长度，写正则表达式等

ruleValidate: {
goodsNum: [
{ required: true, message: ‘数量不能为空’, trigger: ‘blur’ },
{ type: ‘string’,pattern:/^(([1-9]\d{0,3})|0)(.\d{0,2})?$/, message:‘数量应为正浮点数且不超过9999.99’, trigger:‘blur’},
],
}

. 密码验证和身份证号码手机号验证步骤如下：

//判断新增的规则

addRules: {

password: [

{ required: true, validator: validatePass, trigger: ‘change’ },

rpassword: [

{ required: true, validator: validatePassCheck, trigger: ‘change’ }

]，

idCard: [

{ validator: validateIDCard, trigger: ‘change’ }

phone: [

{ validator: validatePhoneNumber, trigger:‘change’}

}

data(){

const validatePass = (rule, value, callback) => {

if (value === ‘’) {

callback(new Error(‘密码不能为空！’));

} else if ( !/^(\w){6,20}$/.test(value)) {

callback(new Error(‘只能输入6-20个字母、数字、下划线！’));

} else {

// if (this.formAddData.rpassword !== ‘’) {

// // 对第二个密码框单独验证

// this.$refs.formAddData.validateField(‘passwdCheck’);

// } else {

// callback();

// }

callback();

}

};

const validatePassCheck = (rule, value, callback) => {

if (value === ‘’) {

callback(new Error(‘请重新输入密码！’));

} else if (value !== this.formAddData.password) {

// console.log(this.formAddData.rpassword );

callback(new Error(‘两次密码不一致！’));

} else {

callback();

}

};

const validateIDCard = (rule, value, callback) => {

if(!/¹\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)) {

callback(new Error(‘请输入18位正确身份号码！’))

} else {

callback();

}

};

const validatePhoneNumber = (rule, value, callback) => {

if (!/^1[34578]\d{9}$/.test(value)) {

callback(new Error(‘请输入正确的手机号！’))

} else {

callback();

}

};

}，

问题10： iview 或者手动将各个属性置空

this.$refs[name].resetFields(

this.formAddData = {

tccStationId: null,

stationSname: null,

stationFname: null,

stationEname: null,

tccLineId: this.formAddData.tccLineId,

paProtocolId: this.formAddData.paProtocolId,

tccLineName: this.formAddData.tccLineName,

subareaNum: this.formAddData.subareaNum,

openMark: this.formAddData.openMark,

changeLineNum: this.formAddData.changeLineNum,

changeLineName: this.formAddData.changeLineName,

});

问题11： VUE截取字符串

let str = ‘abcdef’;
str = str.slice(0);//返回整个字符串 abcdef
str = str.substring(0);//返回整个字符串 abcdef
str = str.substr(0);//返回整个字符串 abcdef
// 使用一个参数
str = str.slice(2);//截取第二个之后所有的字符 cdef
str = str.substring(2);//截取第二个之后所有的字符 cdef
str = str.substr(2);//截取第二个之后所有的字符 cdef
// 使用两个参数
str = str.slice(2,4);//截取第二个到第四个之间的字符 cd
str = str.substring(2,4);//截取第二个到第四个之间的字符 cd
str = str.substr(2,4);//截取从第3个开始往后数4位之间的字符 cdef
// 使用两个负数
str = str.slice(1,-3);//截取第二个到第四个之间的字符 bc
str = str.substring(1,-3);//截取第二个到第四个之间的字符 a #负数转换为0
str = str.substr(1,-3);//不能为负数，若强行传递负数，会被当成0处理 ’ ’ #负数转换为0
console.log(str)

// 截取一个字符串里里面的，第2个，后面的内容； data里面第2个 “ ，” 后面的内容

1.简单实例：

let str = "zheng-shize-zsz";
let one; // 第二个横杠前内容
let two; // 第二个横杠后内容
let first = str.indexOf("-") + 1; // 从第一个横杠算起（+1表示不包括该横杠）
let kong = str.indexOf(" ", first); // 第一个横杠后的第一个空格
let heng = str.indexOf("-", first); // 第一个横杠后的第一个横杠（即第二个横杠）
if (heng == -1) {
  one = str.substring(0, kong);
  two = str.substring(kong).substring(1, str.length);
} else {
  one = str.substring(0, heng);
  two = str.substring(heng).substring(1, str.length);
}
console.log(one);
console.log(two);

2.复杂实例：

console.log( ‘返回2’, message.data);

let message.data = MessageEvent {isTrusted: true, data: “0x01000102,01,{“time”:“20190413101506”,“type”:“故障”,“deviceid”:“99010104”}”,

问题12：根据输入的lineid 后面+00 拼接为4位数与 nodeid 第（5,8）的4位数判断，相等后赋值

相当于2级联动；第一个是输入框，第二个是option 选择框，输入完第一个之后，第二个会自动出来值；

// let str = ‘01010100100000001’;

// str = str.slice(4,8);

//截取第4个到第8个之间的字符 0100

补充一下：如果上面的输入框输入的值清空了，第2想的值没清空，还存在；

处理方法：

问题13： iview 里面的

1. 禁用关闭 #

可以禁用关闭和遮罩层关闭。

只需要做如下操作：

<Modal
:closable=“false”

2. 拖拽移动 #

设置属性 draggable，对话框可以进行拖拽移动。

只需要做如下操作：

<Modal

draggable scrollable

问题14：js数组操作-删除首项、删除尾项、头部添加项、尾部添加项

数组删除第一项,数组删除最后一项,在数组头部添加项,在数组尾部添加项,数组排序等相关操作!

问题15： 登录进来，会判断用户属于哪个节点的类型，用这个节点的类型作为参数去请求接口，

如果是tcc 接口返回既有线路，又有车站。
如果是 occ 接口返回的只有车站
如果是 sc 接口返回什么都没有

下面是模拟的 “ 树” 结构；

代码如下：

<template>
    <!-- 广播区设置 -->
    <div>
        <Row>
            <Col span="4">
                <Tree :data="data1" show-checkbox @on-check-change="checked_change"></Tree>
            </Col>
            <Col span="20">
                <div class="listfile">
                    <Row>
                        <Col span="24">已选节点类型</Col>
                    </Row>
                    <Table border ref="selection" :columns="historyColumns" :data="historyData" @on-select-all='selectTable' @on-select='selectTable' @on-select-cancel='selectTable'></Table>
                    <div style="margin: 10px;overflow: hidden">
                        <div style="float: right;">
                            <Page :total="dataCount" :page-size="pageSize" show-total :current="currentPage"  @on-change="changepage"></Page>
                        </div>
                    </div>
                </div>
            </Col>
        </Row>

    </div>
</template>

<script>
import Cookies from 'js-cookie';
export default {
        data () {
            const  letter = this.$store.state.parameter.deserve; //字典
            return {  
                data1: [
                    {
                        title: '1号线',
                        expand: true,
                        children: [
                            {
                                title: '预留01站'
                            },
                            {
                                title: '预留02站'
                            },
                            {
                                title: '预留03站'
                            },
                            {
                                title: '预留04站'
                            },
                            {
                                title: '预留05站'
                            }
                        ]
                    },
                    {
                        title: '2号线',
                        expand: true,
                        children: [
                            {
                                title: '西直门站'
                            },
                            {
                                title: '车公庄站'
                            },
                            {
                                title: '阜成门站'
                            },
                            {
                                title: '复兴门站'
                            }
                        ]
                    },
                ],
                ajaxHistoryData:[],
                dataCount:1,// 初始化信息总条数
                currentPage:1, //当前页
                pageSize:10,// 每页显示多少条
                below: 0, //下一页或者上一页的第一项索引值 
                historyColumns: [        
                    {type: 'selection',width: 60,align: 'center'},
                    {title: '设备名称',key: 'deviceName',width: 100,align: 'center'},
                    {title: '设备IP',key: 'ip',width: 150,align: 'center'},
                    {title: '设备状态',key: 'status',width: 120,align: 'center'},
                    {title: '时间',key: 'dateTime',align: 'center'},
                    {title: '操做',key: 'action',width: 200,align: 'center',fixed:'right',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary', size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            // console.log(params.row)
                                            // //这里新显示一个模态
                                            // this.$refs.detailDevice1.modal3 = true;
                                            // // 拿到这行的数据，再把它传给子组件
                                            // this.detailDeviceData = params.row;
                                      }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'primary', size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                        //     //这里新显示一个模态
                                        //     // console.log(params.row)
                                        //     // 拿到这行的数据，再把它传给子组件
                                        //    this.edtor(params.row);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error', size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
#### 最后更多分享：**前端字节跳动真题解析**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

- ![](https://img-blog.csdnimg.cn/img_convert/4c6030625763b9409c11c46d5ac6158a.webp?x-oss-process=image/format,png)



    //这里新显示一个模态
                                        //     // console.log(params.row)
                                        //     // 拿到这行的数据，再把它传给子组件
                                        //    this.edtor(params.row);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error', size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
#### 最后更多分享：**前端字节跳动真题解析**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

- [外链图片转存中...(img-doIsctHR-1715835998447)]

1-9 ↩︎

2401_84446963

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue后台管理系统（个人笔记-总结）每日实时更新_vue每日更新效果实现

let message.data = MessageEvent {isTrusted: true, data: “0x01000102,01,{“time”:“20190413101506”,“type”:“故障”,“deviceid”:“99010104”}”,{ type: ‘string’,pattern:/^(([1-9]\d{0,3})|0)(.\d{0,2})?{ required: true, message: ‘数量不能为空’, trigger: ‘blur’ },
复制链接

扫一扫