vue.js学习笔记(一)

简介Vue.js 是一个用于创建 web 交互界面的库。 从技术角度讲,Vue.js专注于MVVM模型的ViewModel层。它通过双向数据绑定把View层和 Model 层连接了起来。实际的DOM封装和输出格式都被抽象为了Directives和Filters。 从哲学角度讲,Vue 希望通过一个尽量简单的 API 来提供响应式的数据绑定和可组合、复用的视图组件。它不是一个大而全的框架——它只是一个简单灵活的视图层。您可以独立使用它快速开发原型、也可以混合别的库做更多的事情。它同时和诸如 Firebase 这一类的 BaaS 服务有着天然的契合度。 Vue.js 的 API 设计深受AngularJS、KnockoutJS、Ractive.js 和 Rivets.js 的影响。尽管有不少相似之处,但我们相信 Vue.js 能够在简约和功能之间的微妙平衡中体现出其独有的价值。 ViewModelViewModel在vue.js中同步Model和View的对象,在vue.js中,每个vue.js实例都是一个ViewModel它们是通过构造函数 Vue或者其子类被创建出来的 1var vm =new Vue({}); 视图(View)View是被Vue实例管理的DOM节点 1vm.$el Vue.js 使用基于 DOM 的模板。每个 Vue 实例都关联着一个相应的 DOM 元素。当一个 Vue 实例被创建时,它会递归遍历根元素的所有子结点,同时完成必要的数据绑定。当这个视图被编译之后,它就会自动响应数据的变化。 当数据发生变化时,视图将会自动触发更新。这些更新的粒度精确到一个文字节点。同时为了更好的性能,这些更新是批量异步执行的。

技术随笔

Java中使用DES对称加解密

DESDES(Data Encryption Standard),即数据加密算法。是IBM公司于1975年研究成功并公开发表的。DES算法的入口参数有三个:Key、Data、Mode。其中Key为8个字节共64位,是DES算法的工作密钥;Data也为8个字节64位,是要被加密或被解密的数据;Mode为DES的工作方式,有两种:加密或解密。 安卓端对请求Web服务器请求字符串进行加密加密公共方法: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112package com.sz.kcygl.common.DESUtil;import java.security.Key;import java.security.SecureRandom;import java.security.spec.AlgorithmParameterSpec;import javax.crypto.Cipher;import javax.crypto.SecretKeyFactory;import javax.crypto.spec.DESKeySpec;import javax.crypto.spec.IvParameterSpec;import com.sun.org.apache.xml.internal.security.utils.Base64;public class DESUtil { public static final String ALGORITHM_DES = "DES/CBC/PKCS5Padding"; /** * DES算法,加密 * * @param data * 待加密字符串 * @param key * 加密私钥,长度不能够小于8位 * @return 加密后的字节数组,一般结合Base64编码使用 * @throws CryptException * 异常 */ public static String encode(String key, String data) throws Exception { return encode(key, data.getBytes()); } /** * DES算法,加密 * * @param data * 待加密字符串 * @param key * 加密私钥,长度不能够小于8位 * @return 加密后的字节数组,一般结合Base64编码使用 * @throws CryptException * 异常 */ public static String encode(String key, byte[] data) throws Exception { try { DESKeySpec dks = new DESKeySpec(key.getBytes()); SecretKeyFactory keyFactory = SecretKeyFactory.getInstance("DES"); // key的长度不能够小于8位字节 Key secretKey = keyFactory.generateSecret(dks); Cipher cipher = Cipher.getInstance(ALGORITHM_DES); IvParameterSpec iv = new IvParameterSpec("12345678".getBytes()); AlgorithmParameterSpec paramSpec = iv; cipher.init(Cipher.ENCRYPT_MODE, secretKey, paramSpec); byte[] bytes = cipher.doFinal(data); return Base64.encode(bytes); } catch (Exception e) { throw new Exception(e); } } /** * DES算法,解密 * * @param data * 待解密字符串 * @param key * 解密私钥,长度不能够小于8位 * @return 解密后的字节数组 * @throws Exception * 异常 */ public static byte[] decode(String key, byte[] data) throws Exception { try { SecureRandom sr = new SecureRandom(); DESKeySpec dks = new DESKeySpec(key.getBytes()); SecretKeyFactory keyFactory = SecretKeyFactory.getInstance("DES"); // key的长度不能够小于8位字节 Key secretKey = keyFactory.generateSecret(dks); Cipher cipher = Cipher.getInstance(ALGORITHM_DES); IvParameterSpec iv = new IvParameterSpec("12345678".getBytes()); AlgorithmParameterSpec paramSpec = iv; cipher.init(Cipher.DECRYPT_MODE, secretKey, paramSpec); return cipher.doFinal(data); } catch (Exception e) { // e.printStackTrace(); throw new Exception(e); } } /** * 获取编码后的值 * * @param key * @param data * @return * @throws Exception * @throws Exception */ public static String decodeValue(String key, String data) throws Exception { byte[] datas; String value = null; datas = decode(key, Base64.decode(data)); value = new String(datas); if (value.equals("")) { throw new Exception(); } return value; }}

java

根据WebMagic写的一个爬取煎蛋网的小爬虫

之前研究jsoup,想用jsoup写一个小爬虫,爬煎蛋网的无聊图,我也是够无聊的 =.=,挖了个坑过了半个月还没填上,昨天上知乎的时候,发现有更加好用的爬虫框架WebMagic(知乎,果然让人发现更大的世界),先用WebMagic实现一下我的小爬虫,好啦,填坑开始… 这里用到webmagic,就把webmagic介绍,使用方法都放出来,没用过的先熟悉一下。 这里是WebMagic中文使用文档,一点即达 @.@ 介绍文档已经很详细了,下面开始,生产爬虫

java

Xpath语法学习

最近写爬虫时,需要解析html,有好多种选择xml文档节点的方法,先熟悉一下使用xpath来选取节点、解析节点 下面是学习需要的XML文档 1234567891011<?xml version="1.0" encoding="UTF-8"?><bookstore><book> <title lang="eng">Harry Potter</title> <price>29.99</price></book><book> <title lang="eng">Learning XML</title> <price>39.95</price></book></bookstore> 选取节点XPath使用路径表达式在XML文档中选取节点。节点是通过沿着路径或者step来选取的。 最有用的路径表达式如下: nodename 选取此节点的所有子节点。/ 从根节点选取。// 从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置。. 选取当前节点。.. 选取当前节点的父节点。@ 选取属性。####实例 bookstore 选取 bookstore 元素的所有子节点。 /bookstore 选取根元素 bookstore。 注意:假如路径起始于正斜杠( / ),则此路径始终代表到某元素的绝对路径! bookstore/book 选取属于 bookstore 的子元素的所有 book 元素。 //book 选取所有 book 子元素,而不管它们在文档中的位置。 bookstore//book 选择属于 bookstore 元素的后代的所有 book 元素,而不管它们位于 bookstore 之下的什么位置。 //@lang 选取名为 lang 的所有属性。

技术随笔

微信OAuth2.0鉴权获取用户信息

在微信开发中经常需要在网页中获取用户的基本信息,和UnionID机制获取用户信息的方式不同,这种方式可以得到未关注本微信号的人的基本信息。 首先第一步要在微信公众平台上配置回调域名,注意域名不是URL,不要包涵http://等协议头 开发步骤1.用户同意授权,获取code在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面: https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect redirect_uri是授权后重定向的回调链接地址,请使用urlencode对链接进行处理response_type是返回类型,请填写codescope是应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息)state否重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节wechat_redirect无论直接打开还是做页面302重定向时候,必须带此参数 用户同意授权后如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。若用户禁止授权,则重定向后不会带上code参数,仅会带上state参数redirect_uri?state=STATE code说明 : code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,`5分钟`未被使用自动过期。 拼接授权连接Java代码 1234public static String getMenuOauthUrl(String appId,String url,String state){ String authUrl="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appId+"&redirect_uri="+url+"&response_type=code&scope=snsapi_base&state="+state+"#wechat_redirect"; return authUrl;} snsapi_base可以改为snsapi_userinfo可以得到用户所有的信息,否则只能获得openId

技术随笔

Spring MVC 数据类型绑定

今天遇到一个问题,使用Spring MVC 从页面传递一个用户List到Controller,然后再后台解析List得到多个用户对象,在网上搜了很多答案感觉都不行,后来调试代码发现,最关键在于:List需要绑定在对象(ActionForm),直接写在request-mapping函数的参数是不行的,更重要的一点是要创建对象(ArrayList)。 之前的Jsp代码是这么写的 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162<form action="insertInsureUser.do" method="post"> <div class="form_left">开始时间:</div> <div class="form_right"> <input name="insureObject.startTime"/> </div> <div class="form_left">产品代码:</div> <div class="form_right"> <input name="insureObject.productCode"/> <h2>投保人信息</h2> </div> <div class="form_left">姓名:</div> <div class="form_right"> <input name="insureObject.insureUser[0].startTime"/> </div> <div class="form_left">身份证号:</div> <div class="form_right"> <input name="insureObject.insureUser[0].idCard"/> </div> <div class="form_left">性别:</div> <div class="form_right"> <input name="insureObject.insureUser[0].sex"/> </div> <div class="form_left">地址:</div> <div class="form_right"> <input name="insureObject.insureUser[0].address"/> </div> <div class="form_left">邮箱:</div> <div class="form_right"> <input name="insureObject.insureUser[0].email"/> </div> <div class="form_left">电话号码:</div> <div class="form_right"> <input name="insureObject.insureUser[0].phone"/> </div> <h2>被保人信息</h2> </div> <div class="form_left">姓名:</div> <div class="form_right"> <input name="insureObject.insureUser[1].startTime"/> </div> <div class="form_left">身份证号:</div> <div class="form_right"> <input name="insureObject.insureUser[1].idCard"/> </div> <div class="form_left">性别:</div> <div class="form_right"> <input name="insureObject.insureUser[1].sex"/> </div> <div class="form_left">地址:</div> <div class="form_right"> <input name="insureObject.insureUser[1].address"/> </div> <div class="form_left">邮箱:</div> <div class="form_right"> <input name="insureObject.insureUser[1].email"/> </div> <div class="form_left">电话号码:</div> <div class="form_right"> <input name="insureObject.insureUser[1].phone"/> </div></form>

spring框架

Git常见命令!

Git基本操作命令创建Git版本仓库在本地的任何一个空目录,通过git init把目录变成一个Git仓库 git init 添加文件到Git仓库git add <file_name> 提交文件到Git仓库git commit -m "<commit_message>" 显示提交日志git log [--pretty=oneline] 可以加上--pretty=oneline参数来减少输出的信息, git log --graph命令可以看到分支合并图。 回退上一个版本git reset --hard HEAD 上一个版本就是HEAD^,上上一个版本就是HEAD^^,如果版本号较多,可以写成HEAD~100。 查看命令日志git reflog 查看Git仓库状态git status 添加文件到暂存区git add 将暂存区文件提交到当前分支git commit 撤销修改git checkout --<file_name> 删除文件git rm <file_name>

技术随笔

【微信接口学习】基础接口

获取access_tokenaccess_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token。 1. access_token的存储至少要保留512个字符空间。 2. access_token的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效。 3. 需要中控服务器定时获取和刷新access_token,而且还需要被动刷新access_token 接口调用请求说明 http请求方式: GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 正常情况下,微信会返回下述JSON数据包给公众号: {"access_token":"ACCESS_TOKEN","expires_in":7200}

技术随笔

欢迎来到zhaohongxuan的代码空间!

每一天都是崭新的,在阳光下用力呼吸 世界好大,知识无涯,愿我能够在有生之年,能在知识的海洋多撷几枚贝壳 黑夜纵会漫长,过后便是黎明

散文随笔
1789

本站由 Hank Zhao 使用 Stellar 主题创建。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
本站总访问量