前言
目前已经实现了用户数据的构造和渲染, 实际上这里就突然冒出来了两个想法, 第一个是这个随机数据, 前端可以不可以像我的zdppy_random一样,也有自己的一个随机数据生成器呢? 第二个想法是表格的样式, 能不能抽离成一个单独的css文件, 里面存放了各种各样的表格样式呢?
有想法就要去实践, 实践是检验真理的唯一标准.
所以我决定先封装一个random.js文件,里面能够生成随机的用户数据.至于更多的内容,则后面再继续封装.
随机的用户数据
我简单的封装了一下, 代码如下:
function generateRandomUsers(count) {
const surnames = ['张', '李', '王', '赵', '孙', '周', '吴', '郑', '钱'];
const names = ['三', '四', '五', '六', '七', '八', '九', '十'];
const users = [];
for (let i = 0; i < count; i++) {
const surname = surnames[Math.floor(Math.random() * surnames.length)];
const name = names[Math.floor(Math.random() * names.length)];
const age = Math.floor(Math.random() * (100 - 10 + 1)) + 10;
users.push({name: surname + name, age: age});
}
return users;
}
console.log(generateRandomUsers(10));
执行效果如下:
在这里插入图片描述
不过我感觉还可以扩展到百家姓, 单独封装一个生成名字的方法.
根据百家姓生成随机姓名
首先是姓名, 没有包含所有的姓氏, 这里让ai给我列出了100个, 如果大家有自己的姓氏想要加进来可以留言给我说.
const xing = [
'张', '李', '王', '赵', '孙', '周', '吴', '郑', '钱', '冯',
'陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤',
'许', '何', '吕', '施', '孔', '曹', '严', '华', '金', '魏',
'陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章',
'云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '毛', '尹',
'邓', '邢', '缪', '赫', '池', '俞', '祁', '鲁', '范', '赖',
'荣', '董', '梁', '谭', '薛', '潘', '赖', '蔡', '廖', '涂',
'麦', '宗', '贾', '殷', '熊', '彭', '翟', '阎', '乐', '仇',
'荆', '江', '袁', '雷', '郭', '邵', '朴', '龚', '魏', '冯',
'余', '高', '汪', '傅', '于', '包', '伍', '曹', '沈', '韩'
];
然后我收集了一些常用的名字:
const ming = [
'明', '国', '华', '建', '文', '平', '志', '伟', '东', '海', '强', '晓', '生', '光', '林', '小', '民', '永', '杰', '军',
'波', '成', '荣', '新', '峰', '刚', '家', '龙', '德', '庆', '斌', '辉', '良', '玉', '俊', '立', '浩', '天', '宏', '子',
'金', '健', '一', '忠', '洪', '江', '福', '祥', '中', '正', '振', '勇', '耀', '春', '大', '宁', '亮', '宇', '兴', '宝',
'少', '剑', '云', '学', '仁', '涛', '瑞', '飞', '鹏', '安', '亚', '泽', '世', '汉', '达', '卫', '利', '胜', '敏', '群',
'松', '克', '清', '长', '嘉', '红', '山', '贤', '阳', '乐', '锋', '智', '青', '跃', '元', '南', '武', '广', '思', '雄',
'锦', '威', '启', '昌', '铭', '维', '义', '宗', '英', '凯', '鸿', '森', '超', '坚', '旭', '政', '传', '康', '继', '翔',
'远', '力', '进', '泉', '茂', '毅', '富', '博', '霖', '顺', '信', '凡', '豪', '树', '和', '恩', '向', '道', '川', '彬',
'柏', '磊', '敬', '书', '鸣', '芳', '培', '全', '炳', '基', '冠', '晖', '京', '欣', '廷', '哲', '保', '秋', '君', '劲',
'栋', '仲', '权', '奇', '礼', '楠', '炜', '友', '年', '震', '鑫', '雷', '兵', '万', '星', '骏', '伦', '绍', '麟', '雨',
'行', '才', '希', '彦', '兆', '贵', '源', '有', '景', '升', '惠', '臣', '慧', '开', '章', '润', '高', '佳', '虎', '根',
'诚', '夫', '声', '冬', '奎', '扬', '双', '坤', '镇', '楚', '水', '铁', '喜', '之', '迪', '泰', '方', '同', '滨', '邦',
'先', '聪', '朝', '善', '非', '恒', '晋', '汝', '丹', '为', '晨', '乃', '秀', '岩', '辰', '洋', '然', '厚', '灿', '卓',
'轩', '帆', '若', '连', '勋', '祖', '锡', '吉', '崇', '钧', '田', '石', '奕', '发', '洲', '彪', '钢', '运', '伯', '满',
'庭', '申', '湘', '皓', '承', '梓', '雪', '孟', '其', '潮', '冰', '怀', '鲁', '裕', '翰', '征', '谦', '航', '士', '尧',
'标', '洁', '城', '寿', '枫', '革', '纯', '风', '化', '逸', '腾', '岳', '银', '鹤', '琳', '显', '焕', '来', '心', '凤',
'睿', '勤', '延', '凌', '昊', '西', '羽', '百', '捷', '定', '琦', '圣', '佩', '麒', '虹', '如', '靖', '日', '咏', '会',
'久', '昕', '黎', '桂', '玮', '燕', '可', '越', '彤', '雁', '孝', '宪', '萌', '颖', '艺', '夏', '桐', '月', '瑜', '沛',
'杨', '钰', '兰', '怡', '灵', '淇', '美', '琪', '亦', '晶', '舒', '菁', '真', '涵', '爽', '雅', '爱', '依', '静', '棋',
'宜', '男', '蔚', '芝', '菲', '露', '娜', '珊', '雯', '淑', '曼', '萍', '珠', '诗', '璇', '琴', '素', '梅', '玲', '蕾',
'艳', '紫', '珍', '丽', '仪', '梦', '倩', '伊', '茜', '妍', '碧', '芬', '儿', '岚', '婷', '菊', '妮', '媛', '莲', '娟'
];
然后, 封装了一个生成姓名的方法:
export default {
getName: () => xing[Math.floor(Math.random() * xing.length)] + ming[Math.floor(Math.random() * ming.length)],
}
在App.vue中使用:
在这里插入图片描述
测试结果如下:
在这里插入图片描述
随机的年龄
接着我又封装了生成随机年龄的方法:
export default {
name: () => xing[Math.floor(Math.random() * xing.length)] + ming[Math.floor(Math.random() * ming.length)],
int: (a, b) => Math.floor(Math.random() * (b - a + 1)) + a,
age: () => Math.floor(Math.random() * (60 - 10 + 1)) + 10,
}
此时测试结果如下:
在这里插入图片描述
随机用户
最后, 就是再封装一下随机的用户数据了.
const name = () => xing[Math.floor(Math.random() * xing.length)] + ming[Math.floor(Math.random() * ming.length)]
const int = (a, b) => Math.floor(Math.random() * (b - a + 1)) + a
const age = () => int(18, 60)
const user = () => ({
name: name(),
age: age(),
})
const users = (length = 100) => {
let arr = []
for (let i = 0; i < length; i++) {
arr.push({
id: i + 1,
...user(),
})
}
return arr
}
export default {
name,
int,
age,
user,
users,
}
封装了以后, 我在App.vue里面测试了一下:
<h1>{{random.name()}} {{random.age()}}</h1>
<h1>{{random.user()}}</h1>
<h1>{{random.users(3)}}</h1>
此时页面效果如下:
在这里插入图片描述
说明我们封装得很成功, 已经能够生成随机的姓名, 随机的年龄, 以及随机的用户信息了.
而且, 随机的用户信息可以生成指定个数.
总结
我们现在等于是实现了封装生成随机用户信息的功能, 但是还没有替换, 而且关于封装表格样式模块的想法也还没有实现.
任重而道远啊...
继续加油....
