分类 前端 下的文章

js正则表达式的用法


test
test 返回 Boolean,查找对应的字符串中是否存在模式。

exec
exec 查找并返回当前的匹配结果,并以数组的形式返回。

let domain = "http://wwww.52bd.net"
let reg  = new RegExp("^(http(s)?://)");
        let regRsul = reg.exec(domain)
        if(regRsul != null){
            msg("信息",`<p class="text-warning">不能以${regRsul[0]}开头:(</p>`)
            return
        }

match 是 String 对象的一个方法。
var str = "52bd.net";
var reg = new RegExp("52bd.", "");
alert(str.match(reg));


typecho添加图片查看工具


其他程序同理

首先你需要在你的文章页面输出的地方加个id
每个模板都不一致
QQ图片20201008231234.png

修改footer.php文件

<?php if($this->is('post')): ?>
<link rel="stylesheet" href="https://www.jq22.com/demo/jQueryViewer20160329/css/viewer.min.css">
<script src="https://www.jq22.com/demo/jQueryViewer20160329/js/viewer.min.js"></script>
<script>
    $(function () {
        var viewer = new Viewer(document.getElementById('context'), {
            url: 'src',
        });
    })
</script>
<?php endif; ?>

如图所示:
QQ图片20201008231331.png


beego on range loop re-entry: {{range}} branches end in different contexts:


在html模板js中 ``字符串模板中渲染出现的这个错误

template Execute err: html/template:xxxx/xxxx.html:34:36: on range loop re-entry: {{range}} branches end in different contexts: {stateJSRegexp delimNone urlPartNone jsCtxRegexp attrNone elementScript <nil>}, {stateJS delimNone urlPartNone jsCtxRegexp attrNone elementScript <nil>}

最后改成这样写 就没问题了

QQ图片20200912145604.png


bootstrap4 表单验证以ajax的方式提交 非submit表单提交


<div className="row ">
        <div className="col-sm">
          你好:)
        </div>
        <div className="col-sm">
          <div className="shadow p-3 mb-5 bg-white rounded">
          <form id="register_form" method="post" action="/api/register" >
            <div className="form-group">
              <label>Name</label>
              <input type="text" name="name" className="form-control" id="name" required onChange={(event) => SetInputRequestObj(event)}/>
            </div>
            <div className="form-group">
              <label>Email address</label>
              <input type="email" name="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="name@example.com" required onChange={(event) => SetInputRequestObj(event)}/>
              <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div className="form-group">
              <label>Password</label>
              <input type="password" name="passwd" className="form-control" id="exampleInputPassword1" required onChange={(event) => SetInputRequestObj(event)}/>
            </div>
           
            <button type="submit" className="btn btn-primary" onClick={(event) => {subForm() }}>Submit</button>
          </form>
          </div>
        </div>
        
      </div>
function subForm(){
    //阻止默认提交事件
    $("#register_form").submit(function(e){
      e.preventDefault();
    })  

    let valiRes = false; 
    //$('#register_form')是要验证的目标表单
    Array.prototype.filter.call($('#register_form'), function (target) {
      valiRes = target.checkValidity();
    }); 

    //valiRes就是表单验证的结果,返回一个bool值
    if(!valiRes)
      return;//表单验证未通过
    
    // 提交数据
    $.ajax({
      type: "post",
      url: "/api/register",
      data: JSON.stringify(RequestObj),
      contentType: "application/json;charset=utf-8",
      dataType: "json",
      success: function(data){
        
      }
    });
  }

微信小程序wx.navigateTo跳转页面并且传值


官方demo:

跳转
wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})
接收
//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

webSocket 之 readyState属性


webSocket.readyState
readyState属性返回实例对象的当前状态,共有四种。
CONNECTING:值为0,表示正在连接。
OPEN:值为1,表示连接成功,可以通信了。
CLOSING:值为2,表示连接正在关闭。
CLOSED:值为3,表示连接已经关闭,或者打开连接失败。

下面是一个示例。

switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
    break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
}

JavaScript使用Websocket


<script>
  function WebSocketTest() {
    if ("WebSocket" in window) {
      alert("您的浏览器支持 WebSocket!");

      // 打开一个 web socket
      var ws = new WebSocket("ws://localhost:8080/");

      ws.onopen = function () {
        // Web Socket 已连接上,使用 send() 方法发送数据
        ws.send(`{"Data":"sadddddddddd"}`);
      };

      ws.onmessage = function (evt) {
        var received_msg = evt.data;
        console.log(received_msg)
      };

      ws.onclose = function () {
        // 关闭 websocket
        alert("连接已关闭...");
      };
      
    }else {
      // 浏览器不支持 WebSocket
      alert("您的浏览器不支持 WebSocket!");
    }
  }

  WebSocketTest()
</script>

webScoket测试工具

https://www.52bd.net/usr/uploads/2020/04/751993603.html

2020-04-28T07:47:20.png
WebSocketTest.html


微信小程序怎么使用websocket


    let _this = this
    //创建websocket 连接
    let wxWebsocket = wx.connectSocket({
      url: 'ws://127.0.0.1:8080/',
      header:{
        'content-type': 'application/json',
      },
      timeout:5000,//超时时间,单位为毫秒
      success:(e)=>{//接口调用成功的回调函数
        console.log(e)
      },
      fail:(e)=>{//接口调用失败的回调函数
        console.log(e)
      },
      complete:(e)=>{//接口调用结束的回调函数(调用成功、失败都会执行)
        console.log(e)
      }
    })

    //接受消息
    wxWebsocket.onMessage((e) =>{
      console.log(e)
      _this.setData({
        testWebsocket:JSON.parse(e.data).data
      })
    })

    //监听 WebSocket 连接关闭事件
    wxWebsocket.onClose((e) =>{

    })

    //监听 WebSocket 错误事件
    wxWebsocket.onError((e) =>{

    })

    //连接打开事件
    wxWebsocket.onOpen(()=>{
      wxWebsocket.send({
        data:`{"Data":"我发送消息给你"}`,//需要发送的内容
        success:(e)=>{//接口调用成功的回调函数
          console.log(e)
        },
        fail:(e)=>{//接口调用失败的回调函数
          console.log(e)
        },
        complete:(e)=>{//接口调用结束的回调函数(调用成功、失败都会执行)
          console.log(e)
        }
      })
    })

    wxWebsocket.close({
      code:1000,//一个数字值表示关闭连接的状态号,表示连接被关闭的原因。1000(表示正常关闭连接)
      reason:"",//一个可读的字符串,表示连接被关闭的原因。这个字符串必须是不长于 123 字节的 UTF-8 文本(不是字符)。
      success:(e)=>{//接口调用成功的回调函数
        console.log(e)
      },
      fail:(e)=>{//接口调用失败的回调函数
        console.log(e)
      },
      complete:(e)=>{//接口调用结束的回调函数(调用成功、失败都会执行)
        console.log(e)
      }
    })

微信小程序for循环渲染标签


wx:for
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

使用 wx:for-item 可以指定数组当前元素的变量名,

使用 wx:for-index 可以指定数组当前下标的变量名:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>