零碎知识10

搞个锤子哟
93 阅读3分钟

本地开发请求地址

  • loacalhost
    • 本地服务器
    • 不经过网卡传输的，所以，它不受网络防火墙和网卡相关的种种限制
    • 一般设置程序的本地应用时，本地服务用localhost是最好的，它不会解析成IP，也不会占用网卡、网络资源。
  • 127.0.0.1
    • 经过网卡传输数据的，是必须依赖网卡的。
    • 有时候用localhost可以，但用127.0.0.1却不行的情况就在于此。

localhost的意思是本地服务器，127.0.0.1是本机地址，他们的关系是通过操作系统中的hosts文件，将localhost解析为127.0.0.1。

注意，如果测试期间，后端接口也在本机，axios通过127.0.0.1访问的，那么手机上打开network路由器分配的ip地址时，后端接口是不通的，因为手机的本地环境没有后端服务。需要根据当前ip 修改axios的baseURL

答案来源

导入导出对比复习

  • esmodule
    • export导出的是个变量，接收需同名
    • 用import * as zipObj from '...' 此时zipObj是export零碎组成的对象
const title='斗圣'
export default name //不可以写成export default const name=...

const name='药尘',age=13
export  {name,age}

export const name='sd',age=13
-----------------------------------
import titleArbitrary,{name,age} from '....'
  • commonjs
    • 导入时随意命名，接收的是个对象
// a.js
function fn1(){}
function fn2(){}
exports.fn1=fn1
exports.fn2=fn2
// 等价于
module.exports={fn1,fn2}
// 引用
var fns = require('a.js')
fns.fn1()
// module.exports出来的，接收时随意命名 收到的都是对象

测试ajax请求

npm一条指令打多个包

  1. npm install concurrently
  2. "build": "concurrently \"vue-cli-service build\" \"vue-cli-service build --mode pre\" \"vue-cli-service build --mode prod\"",

get请求参数里有网页路径时

  • 微信小程序
        wx.request({
          url: app.globalData.baseUrl + '/visit',
          method: 'GET',
          data: {url: 'https://web-assets.dcloud.net.cn/unidoc/zh/logo.png'},

image.png

实际发送请求里该字符串已经encodeURIComponent了
如果 url: encodeURIComponent('web-assets.dcloud.net.cn/unidoc/zh/l…'),
则 发送出去的请求里 url: https%253A%252F%252Fweb-assets.dcloud.net.cn%252Funidoc%252Fzh%252Flogo.png 相当于encode了两次

  • h5网页axios发送
----参数
url: 'https://www.baidu.com?url=https%3A%2F%2Fwww.zhihu.com',

----get请求
http://192.168.1.3:8080/visit?url=https:%2F%2Fwww.baidu.com%3Furl%3Dhttps%253A%252F%252Fwww.zhihu.com

---参数
url: encodeURIComponent('https://www.baidu.com?url=https%3A%2F%2Fwww.zhihu.com'),
---get请求
http://192.168.1.3:8080/visit?url=https%253A%252F%252Fwww.baidu.com%253Furl%253Dhttps%25253A%25252F%25252Fwww.zhihu.com

发送参数encodeURIComponent处理后，get请求里参数也相当于encodeURIComponent了两次，上面可以看出，若未encodeURIComponent就发，浏览器会把 https:// 处理成 https:%2F%2F。 而小程序处理正常https%3A%2F%2F。

  • 所以给后端发get请求携带网页地址时 一定要 encodeURIComponent后的链接格式作为参数发送

链接越编越长的原因

  • %会在encode时变成%25
encodeURIComponent('https://www.baidu.com')
'https%3A%2F%2Fwww.baidu.com'
encodeURIComponent('https%3A%2F%2Fwww.baidu.com')
'https%253A%252F%252Fwww.baidu.com'

正则前向/后向匹配

  • d(?=r)
    • 只有在后面跟着“r”的时候才匹配“d”，但是“r”并不会成为整个正则表达式匹配的一部分
  • (?<=r)d
    • 只有在前面跟着“r”时才匹配“d”，但是“r”并不会成为整个正则表达式匹配的一部分
  • d(?!r)
    • 只有在后面不跟着“r”的时候才匹配“d”，但是“r”并不会成为整个正则表达式匹配的一部分

使用场景

image.png

  • 配合字符串的replace方法，很方便的把某个参数插在前面
  • 微信公众号code若在链接尾部且前面有其它参数时，会消失--- ?source=xxx.jpg&code=50 这种跳转是有问题的 需要是?code=50&source=xxx.jpg 才会在微信里面跳转时带code
  • 上面的code消失和前面参数带.jpg无关，即使是?name=admin&age=13&code=123跳转时也会失去code，是微信自身浏览器的问题
    let originUrl = decodeURIComponent(localStorage.getItem('originUrl'))
    //把code放到参数最前面
    if (originUrl.includes('?')) {
      let reg = originUrl.includes('&') ? /(?<=\?).*(?=\&)/ : /(?<=\?).*/
      originUrl = originUrl.replace(reg, val => `code=${options.code}&${val}`)//val是匹配到的值
    } else {
      originUrl += `?code=${options.code}`
    }
    window.location.href = originUrl

微信公众号授权认证域名配置

  • 懒得新加页面时都得改授权回调域名，可以这样搞个中间页，开发跳转时跳中间页就行

image.png

正则摘自 blog.csdn.net/weixin_3955…
推荐使用 正则表达式在线测试 | 菜鸟工具 (runoob.com) 写正则

a标签的特别用法

             <!-- 拨打电话 -->
            <li><a href="tel:10086">打电话给10086</a></li>
            <li><a href="sms:10086">给10086发短信</a></li>
            <!-- 发送短信 -->
            <li><a href="sms:10086?body=qxdy">给10086发短信，内容为"qxdy"</a></li>
            <!-- 群发短信 -->
            <li><a href="sms:10086,10000?body=qxdy">给10086和10000发短信，内容为"qxdy"</a></li>
            <!-- 发送邮件 -->
            <li><a href="mailto:10086@qq.com?subject=testSubject">给某人发邮件，内容为"testSubject"</a></li>

摘自

vite没network

---vite.config.js里增加

  server: {
        host: '0.0.0.0'
      }
avatar
文章
阅读
粉丝