打开全栈工匠技能包-1小时轻松掌握SSR
两小时精通jq+bs插件开发
生产环境下如歌部署Node.js
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
网易内部VUE自定义插件库NPM集成
谁说前端不用懂安全,XSS跨站脚本的危害
webpack的loader到底是什么样的?两小时带你写一个自己loader
:rules="rules"
label-width="150px">
定义相对应的数据字段 defaultMerchant (这里同理,与此次问题无关的字段不写入),同时初始化 Vue 实例的数据对象
<script>
const defaultMerchant = {
id: null,
storeName: '', // 门店名称
province: '', // 所属省(直辖市)
city: '', // 所属市
};
export default {
data(){
return{
merchant: Object.assign({}, defaultMerchant),
modal1: false,
isEdit: false,
rules:{ // 用于表单验证的规则
storeName:[{ required: true, message: '请输入商家的门店名称', trigger: 'blur' }],
province:[{ required: true, message: '请输入所属省份(或者直辖市)', trigger: 'blur' }],
},
provinceListAll: [], // 全国34个省份(包括直辖市)列表
cityListAll: [], // 全国各个城市列表
citySelectAble: false, // 城市是否可选
}
},
watch: {},
created() {},
methods: {}
}
</script>
然后要做一个省份列表和城市列表,我看很多小伙伴是把这部分相关数据以 JSON 形式写在页面里或者存在数据库里,这样个人感觉有两点不足吧?**一是数据量很大,占用文件很多行数,降低性能和代码的可读性。二是数据不能进行实时更新(假如哪天新多出个城市或者城市改名什么的要去更改内容也麻烦)。这里我的做法是直接调用高德地图的 API 获取省份和城市列表,**开发文档可以参考:概述-Web服务 API | 高德地图API
或者参考我的另一篇文章的类似实例 —— vue-resource 的入门学习笔记:vue-resource 的入门学习笔记_无解的菜鸟晖 的博客-CSDN博客
当然开放的平台也有不足,就是需要发送请求,这个每个开发者的 Key 每天有限制请求次数,具体限制查看:流量限制说明-实用工具-开发指南-Web服务 API | 高德地图API
但是,这样请求到的数据比较实时、全面、准确,相比上面的做法会好很多,我们要做的就是减少对 API 的请求,所以可以用数组过滤器来减少请求(提升性能的同时又保证数据的准确性)
methods: {
getAllProvinceAndCityList() { // 获取全国所有省份和城市的列表
var that = this;
this.$http.get('https://restapi.amap.com/v3/config/district',{ // 高德地图的API
params:{
key: this.mapApiKey, // 这个是申请的 Key,读者自行写入
keywords: '中国',
subdistrict: 3,
extensions: 'base'
}
}).then((response) => {
that.provinceListAll = response.data.districts[0].districts;
for (let i = 0; i < response.data.districts[0].districts.length; i++) {
for (let j = 0; j < response.data.districts[0].districts[i].districts.length; j++) {
that.cityListAll.push(response.data.districts[0].districts[i].districts[j]);
}
}
console.log('省份',that.provinceListAll);
console.log('城市',that.cityListAll);
});
},
renderCity() { // 根据选择的省份,展示该省份相对应的城市列表,未选择省份时,不能选择城市
if(this.merchant.province.length > 0) {
this.cityListAll = this.provinceListAll.filter(item => item.name == this.merchant.province)[0].districts;
this.citySelectAble = true;
} else if(!this.merchant.province) {
this.citySelectAble = false;
this.merchant.city = ''; // 清空省份选择时,清空之前选择的城市能进行重新选择城市
}
},
}
这里建议用 console.log() 在控制台输出检查下获取的数据是否正确,然后**选择省份组件的值改变时触发 renderCity 函数。当有省份的值时,城市列表用 filter 过滤器选取该省份对应的城市列表,**且让城市选择框出现,否则城市选择框不出现。
在页面加载时就要调用请求高德地图 API 的函数,写在 created() 里。同时 watch 监听省份选择,当城市选择后,再次换省份时,能清空已选择的城市。
watch: { // watch 监听 merchant.province,当城市选择后,再次换省份时,能清空已选择的城市
'merchant.province': function (newValue, oldValue) {
this.merchant.city = '';
}
},
created() { // 页面加载时调用的函数
this.getAllProvinceAndCityList();
},
最后,在每次编辑和添加表单数据时,**触发的函数都得调用 renderCity 函数来进行判断,**这些函数写在 methods: {} 里:
handleAdd() { // 添加
this.modal1 = true;
this.isEdit = false;
this.merchant = Object.assign({}, defaultMerchant);
### 总结
**前端资料汇总**
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)
* 框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。
* 算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯
* 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
* 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!