醉月思 发布的文章

v-model 介绍

首先明确一点,v-model仅仅是语法糖。

<input type="text" v-model="something">

等价于

  <input
                type="text"
                v-bind:value="something"
                v-on:input="something = $event.target.value">

它将一个较复杂的input双向数据绑定简化了他的书写方式。

微信小程序绑定input

最开始我是使用微信推荐的写法

<input bindtap="input" />

然后在js里面解析event,然后再setData

uni-app下v-model的写法

本文采用uni-app自定义组件模式

wxml

...
<form @submit="formSubmit" @reset="formReset" :model="formItem" class="tm-every-center padding bg-white">
                    <view class="section flex align-center">
                        <view class="section__title">姓名:</view>
                        <input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.name" />
                    </view>
                    <view class="section flex align-center">
                        <view class="section__title">手机:</view>
                        <input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.phone" />
                    </view>
                    <view class="section flex align-center">
                        <view class="section__title">赛点:</view>
                        <input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.competition" />
                    </view>
                    <view class="btn-area margin-top"><button formType="submit" class="cu-btn">提交</button></view>
                </form>
                ...

然后在data里面设置

formItem: {
                name:'',
                phone:'',
                competition: ''
            }

在submit事件回调里面就可以这样写

submit(){
    this.$api.post(formItem).then(res => {
    })
}

完美解决微信小程序input书写过程冗余的情况。

介绍

本文采用uni-app框架开发,使用flyio库封装请求。

安装方式

npm install --save flyio

引入方式

新建api.js文件,编写以下内容

var Fly = require("flyio/dist/npm/wx")
var fly = new Fly;

配置方式

// 配置请求根域名
fly.config.baseURL = "http://whisper.wezoz.com"
// 配置响应拦截器
fly.interceptors.response.use(
    (response) => {
            // 如果请求报错
            if (response.data.code != 10000) {
                uni.showModal({
                    title:'温馨提示',
                    content:response.data.data
                })
            }else{
                //只将请求结果的data字段返回
                return response.data.data
            }
        },
        (err) => {
            //发生网络错误后会走到这里
            return Promise.resolve("网络请求:ERROR!")
        }
)
// 配置请求拦截器
fly.interceptors.request.use((request) => {
    request.headers["token"] = uni.getStorageSync('token');
    return request;
})

同步封装微信登录

async function wxLogin() {
    return await new Promise((resolve, reject) => {
        wx.login({
            success(res) {
                if (res.code) {
                    resolve(res.code)
                }
            }
        })
    })
}

写一个接口如login

// 登录
export const login = async (params) => {
    console.log('开始登录...')
    let code = await wxLogin();
    let res = await fly.get('/user/login', {code: code})
    uni.setStorageSync('token', res.token)
    uni.setStorageSync('openid', res.openid)
}

封装普通请求

export const updateUserInfo = (params) => {
    return fly.get('/user/update', params)
}

引入方式

App.vue 或者main.js添加以下代码

import * as API from './static/utils/api'
Vue.prototype.$api = API

调用方式

test.vue
this.$api.login()

最终效果如下

2019-04-02T02:54:35.png
2019-04-02T02:57:55.png

代码如下

const baseURL = 'http://wxlc.wezoz.com/' // your base url
async function request(api, method, header, params) {
    console.group(api)
    console.log('%c' + method + ' REQUEST:', "color:green")
    console.log({
        'api': api,
        'header': header,
        'params': params
    })
    return await new Promise((resolve, reject) => {
        uni.request({
            url: baseURL + api,
            method: method,
            header: header,
            data: params,
            success: (result) => {
                console.log('%c' + method + ' SUCCESS RETURN DATA:', "color:green")
                console.log(result)
                console.groupEnd(api)
                resolve(result.data);
            },
            fail: (e) => {
                reject(e);
            }
        })
    })
}
async function post(api, params, success) {
    const POST_METHOD = 'POST'
    const POST_HEADER = {
        'content-type': 'application/x-www-form-urlencoded',
        'token': wx.getStorageSync('token')
    }
    return await request(api, POST_METHOD, POST_HEADER, params)
}
async function get(api, params, success) {
    const GET_METHOD = 'GET'
    const GET_HEADER = {
        'content-type': 'application/x-www-form-urlencoded',
        'token': wx.getStorageSync('token')
    }
    return await request(api, GET_METHOD, GET_HEADER, params)
}
module.exports = {
    POST: post,
    GET: get
}

所用到的一些consloe骚操作

console内使用CSS样式

consloe里面使用%c进行css样式格式化输出实例

console.log("%c Hello World", "color:green")

上述语句会输出绿色的Hello world, 效果如下。

2019-04-02T03:25:00.png

然后你就可以根据你的css功底进行创造啦

console内获取程序运行时间

一般大家看到这个题目,第一时间想到的绝对是获取startTime,endTime再求差对不?
其实console提供一个内嵌的console.time()和console.timeEnd(),代码如下
2019-04-02T03:30:19.png

console分组输出

有得时候,大家打开控制台看见一堆输出是不是很头疼?如何在茫茫数据中找到自己想要的数据呢?你可以使用ground分组数据,让console变得清晰明了。
效果如下
2019-04-02T02:57:55.png

结语

我这里只是写了一些我自己常用到的一些功能,其实console对象还有很多函数。想玩一下的可以自己去尝试以下,发挥自己的想象力就会发现一些很有意思的玩法

leetcode(1): two sum

Description

Given an array of integers, return indices of the two numbers such that they add up to a specific target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

Example:

Given nums = [2, 7, 11, 15], target = 9,

Because nums[0] + nums[1] = 2 + 7 = 9,
return [0, 1].

0. My solution(Brute Force)

var twoSum = function(nums, target) {
    for(let i = 0; i < nums.length; i++) {
        for(let j = 0; j < nums.length; j++) {
            if(nums[i] + nums[j] === target && i != j) {
                return [i, j]
            }
        }
    }
};

· Time complexity: O(n^2), For each element, I try to find its complement by looping through the rest of array which takes O(n)*O(n) time. Therefore, the time complexity is O(n^2).

· Space complexity : O(1).

1. Improve

var twoSum = function(nums, target) {
    for(let i = 0; i < nums.length; i++) {
        for(let j = i + 1; j < nums.length; j++) {
            if(nums[i] + nums[j] === target) {
                return [i, j]
            }
        }
    }
};

2. Improve again

var twoSum = function(nums, target) {
    for(var i = 0; i< nums.length; i++){
        var complement = target - nums[i];
        var found = nums.indexOf(complement, i + 1);
        if(found !== -1){
            return [i, found];
        }
    }
    return [0, 0];
};

3. Improve again

var twoSum = function(nums, target) {
    if (nums.length === 2) return [0, 1];
    const len = nums.length;
    let hashTable = {};
    for(let i = 0; i < len; i++){
        // Add a new obj to the hashTable where key = nums[i] and value = i
        hashTable[nums[i]] = i;
    }
    
    for(let i = 0; i < len; i++) {
        let complement = target - nums[i];
        let found = hashTable[complement]; // Determine whether the complement exist in the hashTable
        if(found !== undefined && found != i) return [i, found];
    }
    return [0,0];
}

B站视频地址

前言

为什么要使用wsl来配置呢?因为我个人感觉这个比较方便,不用安装一堆包。直接敲命令就好。

准备工作

安装好Clion后,打开toolchain是这样的。
2019-03-28T01:51:00.png

前提是先装好wsl

选择wsl toolchain

会出现下面这个情况
2019-03-28T01:52:22.png
这是因为wsl没有配置ssh服务

配置wsl的ssh

sudo vi /etc/ssh/sshd_config

把密码认证的no改为yes

PasswordAuthentication yes

restart ssh

sudo service ssh restart 

如果出现以下提示
2019-03-28T02:15:33.png
则需要生成key

sudo dpkg-reconfigure openssh-server

查看ssh运行状态

service ssh status

configure remote credentials

2019-03-28T02:00:48.png
2019-03-28T02:16:37.png

配置编译环境

在wsl里面执行

sudo apt-get install build-essential gcc g++ cmake gdb

2019-03-28T05:16:09.png

安装pip3

sudo apt-get install python3-pip

安装Django

sudo pip3 install django

验证安装

2019-03-26T06:49:38.png

创建项目

django-admin startproject convert

运行

python3 manage.py runserver

2019-03-26T07:53:45.png

大致思路

  1. 注册表新建目录右键项
  2. 填写WSL命令行
如果你觉得添加起来过于麻烦,你可以双击执行下列注册表文件

wsl.reg

一些简介

注册表百科

注册表(Registry,繁体中文版Windows操作系统称之为登录档)是Microsoft Windows中的一个重要的数据库,用于存储系统和应用程序的设置信息。早在Windows 3.0推出OLE技术的时候,注册表就已经出现。随后推出的Windows NT是第一个从系统级别广泛使用注册表的操作系统。但是,从Microsoft Windows 95操作系统开始,注册表才真正成为Windows用户经常接触的内容,并在其后的操作系统中继续沿用至今。

打开方式

  1. Win + R键入regedit

操作流程

  1. 目录导航输入HKEY_CLASSES_ROOT\Directory\shell
  2. 新建项ubuntu
  3. 选择ubuntu项,新建字符串值:名称为默认,值为WSL

如图:2019-03-25T02:28:02.png

  1. 在ubuntu项内添加command项
  2. 字符串名称为默认,值为wsl.exe --cd "%V"

如图:2019-03-25T02:30:30.png

截至目前,存在的问题

就是只有在选择一个目录时才会出现这个东西,右键空白处啥都不会发生

解决方法

HKEY_CLASSES_ROOT\Directory\Background\shell也同样操作一波

效果预览

我去,我不知道怎么截右键这个状态。

引言

我在很久之前就想研究这个项目,然后再进行些自定义的修改了。就以本文作为笔记开始吧。

项目目录树

.
├── Action.php
├── Plugin.php
├── Users.php
├── res //一些图片资源
│   ├── cvbg.jpeg
│   ├── cvborder.jpeg
│   ├── resend.png
│   └── test.bin
├── sql // 创建了两个数据库
│   ├── wetypecho.sql
│   └── wetypecholike.sql
└── tree.txt

查看数据库结构

wetypecho.sql
CREATE TABLE `typecho_wetypecho` (
  `id`                int(10) unsigned NOT NULL auto_increment,
  `openid`            varchar(255)     default ''  ,
  `createtime`        int(10)          default 0   ,
  `lastlogin`         int(10)          default 0   ,
  `nickname`          varchar(255)     default ''  ,
  `avatarUrl`         varchar(255)      default ''  ,
  `city`              varchar(255)      default ''  ,
  `country`           varchar(255)      default ''  ,
  `gender`            varchar(255)      default ''  ,
  `province`          varchar(255)     default ''  ,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

看内容可以推测,这是微信用户数据表。

wetypecholike.sql
CREATE TABLE `typecho_wetypecholike` (
  `id`                int(10) unsigned NOT NULL auto_increment,
  `openid`            varchar(255)     default ''  ,
  `cid`               int(10)          default 0   ,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

这应该是个微信点赞表

php代码分析

激活进行的初始化操作代码

Helper::addRoute('jsonp', '/api/[type]', 'WeTypecho_Action');
        Helper::addAction('json', 'WeTypecho_Action');
        Helper::removePanel(1, 'WeTypecho/users.php');
        Helper::addPanel(1, 'WeTypecho/Users.php', 'WeTypecho', '我的用户', 'administrator');
        $db = Typecho_Db::get();
        $prefix = $db->getPrefix();
        Typecho_Plugin::factory('Widget_Archive')->beforeRender = array('WeTypecho_Plugin','view_count');
        //创建用户数据库
        $scripts = file_get_contents('usr/plugins/WeTypecho/sql/wetypecho.sql');
        $scripts = str_replace('typecho_', $prefix, $scripts);
        $scripts = explode(';', $scripts);
        try {
            if (!$db->fetchRow($db->query("SHOW TABLES LIKE '{$prefix}wetypecho';", Typecho_Db::READ))) {
                foreach ($scripts as $script) {
                    $script = trim($script);
                    if ($script) {
                        $db->query($script, Typecho_Db::WRITE);
                    }
                }
            }
        } catch (Typecho_Db_Exception $e) {
            throw new Typecho_Plugin_Exception(_t('数据表建立失败,插件启用失败,错误信息:%s。', $e->getMessage()));
        } catch (Exception $e) {
            throw new Typecho_Plugin_Exception($e->getMessage());
        }
        //创建赞数据库
        $scriptslike = file_get_contents('usr/plugins/WeTypecho/sql/wetypecholike.sql');
        $scriptslike = str_replace('typecho_', $prefix, $scriptslike);
        $scriptslike = explode(';', $scriptslike);
        try {
            if (!$db->fetchRow($db->query("SHOW TABLES LIKE '{$prefix}wetypecholike';", Typecho_Db::READ))) {
                foreach ($scriptslike as $script) {
                    $script = trim($script);
                    if ($script) {
                        $db->query($script, Typecho_Db::WRITE);
                    }
                }
            }
        } catch (Typecho_Db_Exception $e) {
            throw new Typecho_Plugin_Exception(_t('数据表建立失败,插件启用失败,错误信息:%s。', $e->getMessage()));
        } catch (Exception $e) {
            throw new Typecho_Plugin_Exception($e->getMessage());
        }
        //创建赞数据库
        try {
            //增加点赞和阅读量
            if (!array_key_exists('views', $db->fetchRow($db->select()->from('table.contents'))))
            {
                $db->query(
                    'ALTER TABLE `' . $prefix
                    . 'contents` ADD `views` INT DEFAULT 0;'
                );
            }
            if (!array_key_exists('likes', $db->fetchRow($db->select()->from('table.contents'))))
            {
                $db->query(
                    'ALTER TABLE `' . $prefix
                    . 'contents` ADD `likes` INT DEFAULT 0;'
                );
            }
            if (!array_key_exists('authorImg', $db->fetchRow($db->select()->from('table.comments'))))
            {
                $db->query(
                    'ALTER TABLE `' . $prefix
                    . 'comments` ADD `authorImg` varchar(500) DEFAULT NULL;'
                );
            }
        } catch (Exception $e) {
            echo($e->getMessage());
        }

js类似于printf那样的格式化字符串

安装包
npm install sprintf-js
调用包
var sprintf = require('sprintf-js').sprintf,
操作实例:时间前补零操作
for (let i = 46; i >= 0; i--) {
        console.log(sprintf('%2d:%02d', i / 2, (i % 2 ? 0 : 30)))
      }