reduxRedux就是给JavaScript应用程序一个可以预测state的容器。
使用Redux的时候一定要记得以下三大原则：
single source of truth：应用程序的state，皆存储在唯一一个树状结构的store中；
state is read-only：唯一改变state的方式，发送一个描述如何改变的action；
changes are made with pure functions：为了描述action如何改变state，reducer必须改成pure function。
具体运行
当我们要改state时，必须**通过dispatch发送一个action对象到store**，这个action对象是用来描述发生了什么事。
store基本上也不知道收到这个用来做什么，因为它是用来存储state tree的地方，所以store会把「自己目前的state」及「action」交给给Reducer处理。
reducer是一个pure function，它会**根据我们action的要求去做state的更改，并将新的state回传给store**。
我们可以 ...
本文重点记录使用React Native构建双平台App的过程，同时进一步掌握构建过程中运用的技术。
搭建开发环境**安装react-native-cli**：npm i -g react-native-cli
Android SDK安装Android SDK并启动进行配置：
配置环境变量
123export ANDROID_HOME=~/Library/Android/sdkexport PATH=${PATH}:${ANDROID_HOME}/toolsexport PATH=${PATH}:${ANDROID_HOME}/platform-tools
Android 虚拟机设定Genymotion的Android SDK 位置（Android SDK 的路径可以在 SDK Manager 上找到）。
模拟器有多款模拟器可供选择，Android Studio自带，Genymotion和夜神模拟器，推荐选择夜 ...
React项目指导使用webpack需要安装的依赖
webpack，webpack-cli，react，react-dom
babel-loader，@babel/core，@babel/preset-env，@babel/preset-react
设置.babelrc，{"presets": ["@babel/preset-env","@babel/preset-react"]}
设置scripts：
12"dev": "webpack --mode development","build": "webpack --mode production"
设置webpack-dev-server：
1234567devServer: { compress: true, port: 9000， hot: true},"start": "webpack ...
此系列为网页设计中经常使用到的垂直居中解决方法，通过本文进行详细地总结。
使用line-height做垂直居中
See the Pen
使用line-height做垂直居中 by whjin (@whjin)
on CodePen.
使用line-height + inline-block做多行文字的垂直居中
See the Pen
使用CSS line-height + inline-block 做多行文字的垂直置中 by whjin (@whjin)
on CodePen.
使用:before + inline-block做垂直居中
See the Pen
使用line-height+inline-block做多行文字的垂直居中 by whjin (@whjin)
on CodePen.
使用padding做垂直居中
See the Pen
使用padding做垂直居中 by whjin (@whjin)
on CodePen.
使用absolute + margin负值做垂直居中
See ...
自动分配宽高123justify-content: space-between;display: grid;grid-template-columns: repeat(auto-fill, 96px);
CSS-编程技巧
使用百分比而不是固定的宽度。或者使用相对的宽度：vw, vh, vmin, vmax
在大屏幕上要有一个固定宽度的元素时，使用 max-width，让其不用media query就能自适应小屏幕
在 img, object, video, iframe 加上 max-width: 100%
当需要填充元素的背景图片时，使用 background-size: cover 让图片能保持原始比例。在移动设备上使用高解析图片不是明智的做法
制作 grid 页面时让 viewport width 来决定每一列的数量。Flexbox 或者 display: inline-block 就可以做到
当制作多栏的的文字区块时，设定 column-width 而不是 column-count，让你在小屏幕上会得到一个栏位
减少重复代码原则：
半透明的边界
See the Pe ...
QuasarQuasar是一款基于Vue.js开发的UI框架，可以让你轻松构建网站简洁明快的界面，更重要的是它还能让你轻松做好RWD（响应式网站设计），除此之外还能帮助你加上PWA，使你的网页变成手机上的App。
以下内容来自官网Quasar Framework，概括了Quasar的主要特点。
Quasar是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：
响应式网站
PWA
通过Apache Cordova构建移动App
多平台桌面应用程序（使用Electron）
选择Quasar的5个理由
内建了Material及IOS两种主题
组件均内建RWD快速响应
多样的基础UI组件库
自带了Vuex、VueRouter、Vuei18n（多国语系）
强大的部署工具
安装指南首先安装Node.js和vue-cli，具体安装方法查看官网资料。
然后安装Quasar，npm install -g quasar-cli。
最后搭建项目：quasar init <folder name>
取代main.js的quasar.config.js设置文件：
引用Quas ...
这是一个系列笔记，来自《Web前端黑客技术揭秘》这本书，属于进阶内容，可以进一步提高Web开发的能力。
Web安全的关键点数据和指令
SQL注入攻击
selct username,email,desc from users where id=1
攻击者提交：
union select password,1,1 from users
最终SQL查询语句：
selct username,email,desc from users where id=1 union select password,1,1 from users
组成的SQL语句合法，通过一个经典的union查询，此时注入的指令内容就会被当做合法指令执行。这样的攻击会导致users表中的password泄露。
XSS跨站脚本攻击
eval函数能够动态执行url返回的特定信息，比如eval(location.hash.substr(1))即是截取#后的callback内容，提供给eval进行动态执行。
如果攻击者对#后的url中的#后的内容进行改造，就可以截取到访问者的cookies会话信息，其中可能包含访问者的账号、密 ...
主要功能介绍：
支持微信、支付宝、浏览器多种扫码工具扫码点餐。
支持多人扫码点餐，点餐信息通过WebSocket同步。
下单无线打印小票，后厨、服务员同时收到订单信息。
微信、支付宝在线支付，自动收银。
基础知识Vue中v-bind是一个非常重要的绑定属性的指令，这里要讲解一下绑定class样式设置的方法。
12345<ul> <li v-for="(item,key) in dinner" :key="item" :class="{'red':key==0,'blue':key==1}">{{item}}</li></ul>
v-model双向绑定，多用于表单控制的交互操作。
ref用于获取DOM节点元素。
绑定事件对象：
1<button @click="eventFn($event)">事件对象< ...
开发工具准备：
根据个人喜欢选择IDE，我使用的是WebStorm，推荐使用Atom和VSCode；
安装git base和node.js；
安装vue-cli，命令npm i -g @vue/cli；
新建vue-cli项目：
方法一：通过图形界面进行安装vue ui；
方法二：通过命令行安装vue create project-name
运行项目npm run serve，端口8080。
双向绑定v-model双向绑定大多用于表单事件，通过监听使用者输入的事件来更新内容。
现阶段大部分工作在App.vue上，template与普通写法一致，js写法：
123456789export default { name: 'app', data() { return { title: 'vue.js', myname: '请输入名字' } }}
去掉空白符.trim直接 ...
开发工具准备：
根据个人喜欢选择IDE，我使用的是WebStorm，推荐使用Atom和VSCode；
安装git base和node.js；
安装vue-cli，命令npm i -g @vue/cli；
新建vue-cli项目：
方法一：通过图形界面进行安装vue ui；
方法二：通过命令行安装vue create project-name
运行项目npm run serve，端口8080。
双向绑定v-model双向绑定大多用于表单事件，通过监听使用者输入的事件来更新内容。
现阶段大部分工作在App.vue上，template与普通写法一致，js写法：
123456789export default { name: 'app', data() { return { title: 'vue.js', myname: '请输入名字' } }}
去掉空白符.trim直接 ...
