从0到1—Vue项目失物平台的搭建（第四天）

最新推荐文章于 2024-01-12 18:55:16 发布

MyKyle18

最新推荐文章于 2024-01-12 18:55:16 发布

阅读量233

点赞数

分类专栏： Vue 邑丢丢平台文章标签： js vue 字符串

本文链接：https://blog.csdn.net/qq_18547381/article/details/105885460

版权

Vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

邑丢丢平台

9 篇文章 1 订阅

订阅专栏

本博客主要用于记录开发的过程以及开发问题处理方式，不粘贴开发代码。问题的解决原理我会单独做文章。

失物平台（邑丢丢）的开发代码的码云地址是https://gitee.com/MyKyle/yidd

1.今日完成进度

1.实现Vue项目对高德地图API功能函数的引用

2.为了防止利用工具多次答题强行破解回答问题等情况，启用了两套保护机制。第一套是IP定位限制答题次数，另外一套是当日答题次数后台统计。此外安全方面例如XSS、CSRF攻击就不具体介绍了，后期介绍后端工作时会一起讲解前后端如何实现这些攻击的防御。

3.对拾物信息上传模块开始设计方案图，目前已完成分类选择部分。

2.今日问题以及处理

2.1 实现对定位测距函数的封装

由于定位测距功能在以后可能存在复用情况，同时为了代码整洁。我单独抽取到src\functionJS\rangeFinding.js文件下作为一个JS模块处理。

模块中暴露：export function rangeFinding () { 功能代码 ..... }

所需文件中引入：import { rangeFinding } from '../../functionJS/rangeFinding'

所需文件中使用：在需要使用的位置使用 rangeFinding()，函数会返回一个测距值或者别的报错提醒。

2.2 git pull 代码不更新

查看错误，可能是由于本地代码进行了调整。所以存在冲突情况。

如果本地只是Github代码的一个备份存在，可以使用强制git pull。

如果代码是与他人共同合作，则需要自己进行判断。可利用VScode工具。

2.3 if与switch谁效率更高

前文提到了我使用高德地图API进行定位等功能，但有个美中不足是，API的保存是英文的，导致我需要进行转换。所以筛选转换少不了就是 if 与 switch。

参考了网上的说法：switch在常量选择分支时比 if - else - 效率高，但是 if - else -能应用于更多的场合， if - else -比较灵活。所以我的五个常量最终选择了 switch

原因在于：

1.switch是随机访问的，就是确定了选择值之后直接跳转到那个特定的分支，但是if。。else是遍历所以得可能值，知道找到符合条件的分支。

2.如果条件是连续的并且很多，则编译器会在内存生成一个跳表来存放switch的各个对应条件和结果。有点以空间换时间的意思。

2.4 判断字符串中是否含有字符串

方法一: indexOf() (推荐)

var str = "123"; console.log(str.indexOf("3") != -1 ); // true

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。

方法二: search()

var str = "123"; console.log(str.search("3") != -1 ); // true

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。不等于-1就表示有这个字符串

方法三:match()

var str = "123"; var reg = RegExp(/3/); if(str.match(reg)){ // 包含 }

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

2.5 CSS字体间隔怎么设置

letter-spacing:4px; // 设置 h1 和 h2 元素的字母间距：
word-spacing:25px; // 规定段落中的字间距是 25 像素：

这两者的区别：网上有很多一模一样的说法，在这也见怪不怪了。自己调试下才是最好的。

使用CSS3的letter-spacing属性可以定义字距，使用CSS3的word- spacing属性可以定义词距。这两个属性的取值都是长度值，由浮点数字和单位标识符组成，默认值为normal,表示默认间隔。

概念：定义词距时，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词:如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing 属性此时有效。看下面代码演示图可以明白，字距就是定义字母之间的间距，而词距是定义西文单词的距离。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.laspacing{letter-spacing: 1em;}
			.wspacing{word-spacing: 1em;}
		</style>
	</head>
	<body>
		<p class="laspacing">letter spacing word spacing (字间距)</p>
		<p class="wspacing">letter spacing word spacing (词间距)</p>
	</body>
</html>

本次操作，主要是因为Vant的分组标题的字体间距过窄，所以我才利于了 letter-spacing 调节。具体开发中也要考虑用户的阅读体验以及感受后调节。对中文用户而言 letter-spacing 用的更多。

2.6 按钮选中变色效果

做这个效果我花费了很多时间，主要时间用于参考了很多我身边同学的按钮变色体验效果。想了解大家希望原始颜色，选中后颜色。全套开发师的艰难。。。。

最终确认：按钮原始背景颜色#FFF，字体 #000 。选中后按钮背景颜色 #FFF2EC ，字体 #FA4B11。效果如下：

基本实现逻辑：按钮绑定事件传该按钮的ref值，事件中可以通过ref值对原选中按钮的进行颜色恢复以及新选中按钮颜色更改。

<van-button text="饭卡" round  @click="pickUpClass('foodcard')" ref="foodcard"></van-button>

  data () {
    return {
      selectPickUpClass: ''
    }
  },
  methods: {
    pickUpClass (selectValue) {
      if (this.selectPickUpClass !== '') {
        const oldselect = this.selectPickUpClass
        this.$refs[oldselect].style.backgroundColor = '#FFF'
        this.$refs[oldselect].style.color = '#000'
      }
      this.selectPickUpClass = selectValue
      this.$refs[selectValue].style.backgroundColor = '#FFF2EC'
      this.$refs[selectValue].style.color = '#FA4B11'
    }

上面代码中 $refs[oldselect] 是利用了ES6的对象属性名知识，不了解的小伙伴可以搜下。

一：属性名加引号作为字符串，外加中括号；food['hot drink'] = 'tea';

二：属性名用变量表示；let drink='hot drink'; food[drink] = 'tea';

2.7 Vant 的按钮高度调整

原按钮高度太高，在本页面中不美观，我想弄得窄平一点。

.van-button {
  height: 30px;
  .van-button__text {
    display: block;
    line-height: 30px;
  }
}

其中注意的是，要在字体中添加diaplay:block，使其变成块元素。这儿用到了部分less的功能，小伙伴们可以了解下。

MyKyle18

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
从0到1—Vue项目失物平台的搭建（第四天）

本博客主要用于记录开发的过程以及开发问题处理方式，不粘贴开发代码。问题的解决原理我会单独做文章。失物平台（邑丢丢）的开发代码的码云地址是https://gitee.com/MyKyle/yidd1.今日完成进度1.实现Vue项目对高德地图API功能函数的引用2.为了防止利用工具多次答题强行破解回答问题等情况，启用了两套保护机制。第一套是IP定位限制答题次数，另外一套是当日...
复制链接

扫一扫