Welcome to Jneth's Blog!

这里记录着我的学习之路

Vue+jszip+file-saver 实现el-table中qrcode生成的二维码图片批量打包成zip下载

2019-06-20

Web

vue.js

1.template
2.script

1.template

利用el-table创建一个表格，其中表格的第三列为二维码组件qrcode-vue

<el-table v-if="tableData" :data="tableData" border id="picture" style="width: 80%;margin:auto">
      <el-table-column prop="originUrl" label="原始链接"></el-table-column>
      <el-table-column prop="linkUrl" label="微连接"></el-table-column>
      <el-table-column prop="linkUrl" label="二维码" min-width=200px>
        <template slot-scope="scope">
          <qrcode-vue :value="scope.row.linkUrl" :size="200" level="H"></qrcode-vue>
        </template>
      </el-table-column>
    </el-table>

基本效果是这样的

2.script

import QrcodeVue from "qrcode.vue";
import FileSaver from 'file-saver'
import JSZip from 'jszip'
//下载二维码
    downloadPicture(){
      const zip = new JSZip()
      const cache = {}
      let myCanvas = document.getElementById('picture').getElementsByTagName('canvas');
      for (let index = 0; index < myCanvas.length; index++) {
          let data = myCanvas[index].toDataURL("image/png");

          let fileName = this.tableData[index].linkUrl;
          zip.file(fileName+'.png',data.substring(22),{base64:true})
          cache[fileName] = data
      }
      zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
          FileSaver.saveAs(content, "二维码.zip") // 利用file-saver保存文件
      })
      
    }

关键是利用DOM，获取里面的元素，可以看到我定义的table id为picture let myCanvas = document.getElementById(‘picture’).getElementsByTagName(‘canvas’); 这样获取到的myCanvas就是一个collection,就可以通过for循环得到里面的每个元素这样下载就是把列表中的所有图片下载了，纯前端操作，就不用从服务器下载了。

result

Read All

微信小程序项目（3D硬币动画），node.js,MongoDB，Koa网络框架,OSS对象存储

2019-04-01

Server

node.js 小程序
一、项目基本效果

二、后台框架搭建

项目后端使用node.js,MongoDB数据库的mongoose框架，Koa网络框架,阿里云服务器OSS对象存储。
koa网络框架,利用了koa框架实现http请求，比较简单可以查看具体代码，或者查询koa相关的使用方法。下边贴出基本的实现。
const app = new Koa(); const router = require('koa-router')(); const bodyParser = require('koa-bodyparser'); // log request URL: app.use(async (ctx, next) => { console.log(`Process ${ctx.request.method} ${ctx.request.url}...${ctx.request.body}`); await next(); }); // add url-route: router.get('/hello/:name', async (ctx, next) => { var name = ctx.params.name; ctx.response.body = `<h1>Hello, ${name}!</h1>`; }); app.use(bodyParser()); app.use(router.routes()); app.listen(3000);
MongoDB非关系型数据库，利用mongoose框架，搭建项目所需的数据库结构。下边贴出基本的实现。 ``` // 引入模块 var mongoose=require(‘mongoose’); // 连接数据库 mongoose.connect(‘mongodb://localhost:27017/coin’) // 得到数据库连接句柄 var db=mongoose.connection; //通过数据库连接句柄，监听mongoose数据库成功的事件
db.once(‘open’ ,() => { console.log( ‘连接数据库成功’ ); }) //定义表数据结构 var coinModel=new mongoose.Schema({ id:Number, wechat_id:String, title:String, front_title:String, back_title:String, front_url:String, back_url:String, isvalid:{type:Boolean,default:true}, }) // 将表的数据结构和表关联起来 var coinModel=mongoose.model(“coin”,coinModel); //导出数据 module.exports={ coinModel:coinModel }
```
### 三、阿里云centos服务端配置
> 首先最基础的是域名购买，域名备案，SSL证书配置，Nginx配置，基本上比较简单，阿里云上都有教程的，下边是我Nginx的配置信息:
proxy_pass:http://localhost:3000;,这条就是设置了反向代理，将域名直接代理到3000端口下，也就是我node服务所指定的端口。443端口就是https默认的访问端口，正确配置下证书的地址就能使用https访问了。
```
server { listen 80 default backlog=2048; listen 443 ssl http2 default_server; listen [::]:443 ssl http2 default_server; server_name www.xiaoyun7.com; root /usr/share/nginx/html; ssl_certificate “/etc/nginx/chain/1945854www.xiaoyun7.com.pem”; ssl_certificate_key “/etc/nginx/chain/1945854www.xiaoyun7.com.key”; ssl_session_cache shared:SSL:1m; ssl_session_timeout 10m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location /{ proxy_pass http://localhost:3000; } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } }
```
>MongoDB按照一般教程设置即可，注意设置为开机启动，oss文件服务器需要绑定下我的域名，这样就能通过我的域名上传和下载文件了，这里也就是在阿里云控制台oss的域名管理中，上传下新的证书也就好了。oss比较简单，建一个唯一的Bucket然后会生成自己专属的域名，并支持https，其实不用绑定域名，可直接添加但小程序域名列表里。

### 四、小程序开发要点
>阿里云OSS文件上传，我这里将key和密钥直接写在了小程序代码里(最好通过服务器获取)，参考代码是来自([微信小程序上传文件到阿里云OSS的代码](https://www.jianshu.com/p/34d6dcbdc2e5))。
因为我的图片是需要裁剪的，所以图片选择的时候增加了图片剪裁页面，参考代码为we-cropper.js这个文件，github上也有相应的开源代码，我也是拿别人的来做的。

>简单的3d效果，我是通过图片堆叠来实现的，就是改变坐标轴的Z轴放置图片，比如我厚度为10px，我就会放10张图片叠在一起，每张相隔1个px，然后最后一张做下翻转，这样就有3D的硬币效果了。
然后是抛掷动画：用的是keyframes这个关键帧动画效果，这里遇到的问题就是keyframes只会在页面第一次加载的时候做动画，那么我的做法就是利用js不断切换样式，这样下次点击抛掷的时候就有新的动画效果。
```
#euro { width: 150px; height: 150px; margin-left: -75px; margin-top: -75px; position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; animation: spin 5s linear; } @keyframes spin { 0% { top: 50%; transform: rotateX(0deg); }

10% { top: 40%; transform: rotateX(1440deg); }

20% { top: 30%; transform: rotateX(2160deg); }

30% { top: 20%; transform: rotateX(2880deg); }

40% { top: 15%; transform: rotateX(2960deg); }

50% { top: 10%; transform: rotateX(3040deg); }/* 60% { top: 15% ;transform: rotateX(3120deg); } 70% { top: 20% ;transform: rotateX(3200deg); } */

100% { top: 50%; transform: rotateX(4320deg); } } ```

总结

这个是我个人从原型设计到UI效果到前端开发到后端开发完全个人完成的一个项目，当然非常的简陋，这里就当是记录下个人的学习记录，希望有看到的大神们多多提意见，帮助小弟进步。github地址https://github.com/JianghongJohn/weapp-luck
Read All

Python一键处理iOS马甲包的文件更改

2018-12-27

python

iOS python

###一、修改文件前缀(JH–>Jneth)

import os

需要修改的类名前缀 （需替换）
pre_str = 'JH'
// 新的类名前缀 （需替换）
pre_to_str = 'Jneth'
// 搜寻以下文件类型 （根据自己需求替换）
suf_set = ('.h', '.m', '.xib', '.storyboard', '.mm')
// 项目路径   （找到自己的项目路径）
project_path = '/Users/hyjt/Desktop/car/car'
// 项目project.pbxproj文件路径 需要更新配置文件中的类名 （找到自己的项目project.pbxproj路径）
pbxpro_path = '/Users/hyjt/Desktop/car/car.xcodeproj/project.pbxproj'

// 文件重命名函数，返回新的文件名
def file_rename(file_path):
    root_path = os.path.split(file_path)[0]     // 文件目录
    root_name = os.path.split(file_path)[1]     // 文件名包含扩展名
    filename = os.path.splitext(root_name)[0];  // 文件名
    filetype = os.path.splitext(root_name)[1];  // 文件扩展名

    new_path = os.path.join(root_path, filename.replace(pre_str, pre_to_str) + filetype)    // 拼接新路径
    os.renames(file_path, new_path)             // 文件重命名
    return filename.replace(pre_str, pre_to_str)

// 定义一个字典 key=旧类名 value=新类名
needModifyDic = {}

// 遍历文件，符合规则的进行重命名
for (root, dirs, files) in os.walk(project_path):
    for file_name in files:
        if file_name.startswith((pre_str,)) and file_name.endswith(suf_set):
            old_name = os.path.splitext(file_name)[0]
            new_name = file_rename(os.path.join(root, file_name))
            needModifyDic[old_name] = new_name

// 遍历文件，在文件中更换新类名的引用
print(needModifyDic)
for (root, dirs, files) in os.walk(project_path):
    for file_name in files:
        if file_name.endswith(suf_set):
            print('-----fileName-------' + file_name)
            with open(os.path.join(root, file_name), 'r+') as f:
                print('========fileName========' + file_name)
                s0 = f.read()
                f.close()
                for key in needModifyDic:
                    if key in s0:
                        with open(os.path.join(root, file_name), 'r+') as f4:
                            s1 = f4.read().replace(key, needModifyDic[key])
                            print(key + ' ------> ' + needModifyDic[key])
                            f4.seek(0)
                            f4.write(s1)
                            f4.truncate()
                            f4.close()
// 替换配置文件中的类名
for key in needModifyDic:
    with open(pbxpro_path, 'r+') as f:
        s0 = f.read()
        f.close()
        if key in s0:
            with open(pbxpro_path, 'r+') as f2:
                s = f2.read().replace(key, needModifyDic[key])
                f2.seek(0)
                f2.write(s)
                f2.truncate()
                f2.close()

###二、修改文件后缀（ViewModel–>VM） ``` import os

// 需要修改的类名前缀（需替换） end_str = ‘ViewModel’ // 不需要修改的类名后缀（需替换） not_end_str = [] // 新的类名后缀（需替换） end_to_str = ‘VM’

Read All

iOS中的设计模式常识（适配器、策略、工厂）

2017-07-02

iOS

iOS 设计模式
一、适配器模式
```
适配器模式简单来说就是让你的代码根据不同的情况发生相对应的变化（适配）
```
🌰：在控制器中关联VIew与Model，当这个视图的Model对象有多个的时候，在View中无法对这些Model进行一一的处理，这时候就需要建立个“适配器”的类

1.建立protocol，protocol中定义接口，用于返回适配后的数据对象

2.建立适配器类，适配器类中实现protocol的接口，可以先类似作为抽象类只返回nil

3.建立适配器子类，子类中实现同适配器类的方法，但这时候根据具体传入的Model对象类型，进行适配，返回对应的处理结果。

4.在View中创建一个加载数据的方法，传入类型为id<适配协议>，在方法中为子视图赋值

5.在controller中创建需要的Model对象数据，利用堕胎的思想创建适配器，然后通过适配器类通用的方法将数据传递给View

二、策略模式
```
定义一系列的算法,把每一个算法封装起来, 并且使它们可相互替换。本模式使得算法可独立于使用它的客户而变化
```
🌰：有两个输入框，一个为输入电话号码，一个为输入邮件，需要在textField代理方法中对输入值进行验证，这时候同样利用多态的方式，建立策略类进行验证

1.创建策略抽象类，类中验证方法的正确性，输入为textField，包含一个属性errorMessage，用于提示。

2.在自定义的textField中，导入抽象类并创建一个该对象和一个自定义的验证方法，方法中获取抽象类中的errorMessage中，若为nil则为输入正确。

3.具体的策略实现，在于创建对应的策略子类，实现抽象类中的验证方法返回errorMessage。

4.在controller中创建textField并，初始化子类策略对象给testField中抽象策略类赋值

5.这样实现的时候只需要利用，调用textField的统一验证方法就行了。

三、工厂模式
```
定义一个创建对象的接口，让其子类自己决定实例化哪一个工厂类，工厂模式使其创建过程延迟到子类进行
```
🌰：有两个工厂苹果工厂和谷歌工厂，生产不同的手机和手表，在用户需要切换手机和手表的时候只需要切换工厂就行了，实际的工厂内部生产流程则不去关心。

1.创建一个工厂管理类，定义一个接口用于返回工厂，传入值为工厂枚举值，并根据枚举值去实现这个接口返回对应的工厂。

2.创建一个抽象工厂类，分别定义生产手机和手表的接口

3.创建两个具体工厂分别为苹果和谷歌，并各自实现生产手机和手表的接口，返回基类的手机和手表的子类创建

4.创建抽象手机基类和手表基类，以及两种手机，两种手表子类。

5.在controller中根据工厂管理类中传入工厂枚举创建工厂，然后工厂调用生产方法即可完成对应产品的生产。
Read All
linux搭建node.js服务，使用pm2启动socket.io服务的过程

2017-07-02

Server

linux node.js
1.安装Linux Git工具

sudo yum install git

2.下载nvm(node版本管理工具)

curl -o- https://raw.[githubusercontent.com/creationix](http://githubusercontent.com/creationix)/nvm/v0.33.1/install.sh | bash

下载完成后可能还是提示没有nvm命令，使用source更新环境变量 source ~/.bashrc或者source ~/.zshrc

3.使用nvm下载

node nvm install node

4.编写package.json文件
```
{
    "name": "node_test",

    "version": "0.0.1",

    "description": "my first socket.io app",

    "dependencies": {

        "express": "^4.15.2",

        "socket.io": "^2.0.4"

    }
}
```
5.编写server.js基础文件
```
// 'use strict'

var app = require('express')();

var http = require('http').Server(app);

var io = require('socket.io')(http);

http.listen(3000, function () {

    console.log('listening on *:3000');

});
```
6.将文件上传到你想要的路径

scp /path/filename username@servername:/path

scp /ddz-server/server.js root@192.168.0.101:/root/ddz/ddz_server

7.node自带npm ,用npm安装node所需的模块

node install

8.让node能够在后台一直运行，下载pm2管理工具

然而这时候只要我们服务端控制台一退出我们的服务就会断了，这时候就需要我们使用pm2这个管理工具了。 npm install pm2 -g

9.利用pm2启动server.js文件

mp2 start server.js

关于pm2的用法具体可以百度谷歌
Read All

1/2

Welcome to Jneth's Blog!

Vue+jszip+file-saver 实现el-table中qrcode生成的二维码图片批量打包成zip下载

1.template

2.script

微信小程序项目（3D硬币动画），node.js,MongoDB，Koa网络框架,OSS对象存储

一、项目基本效果

二、后台框架搭建

总结

Python一键处理iOS马甲包的文件更改

iOS中的设计模式常识（适配器、策略、工厂）

一、适配器模式

二、策略模式

三、工厂模式

linux搭建node.js服务，使用pm2启动socket.io服务的过程

1.安装Linux Git工具

2.下载nvm(node版本管理工具)

3.使用nvm下载

4.编写package.json文件

5.编写server.js基础文件

6.将文件上传到你想要的路径

7.node自带npm ,用npm安装node所需的模块

8.让node能够在后台一直运行，下载pm2管理工具

9.利用pm2启动server.js文件