Vue 自定义组件 – dialog

<template>
	<transition name="ui-dialog">
		<div class="ui-dialog-mask" v-show="show">
	    	<div class="ui-dialog-wrapper">
	      		<div class="ui-dialog-container">
	        		<div class="ui-dialog-header">
	          			<slot name="header">默认标题</slot>
	        		</div>
		        	<div class="ui-dialog-body">
		          		<slot name="body">默认内容</slot>
		        	</div>
		        	<div class="ui-dialog-footer">
		          		<slot name="footer">
		            		<button class="ui-dialog-button" @click="show = false">确认</button>
		          		</slot>
		        	</div>
	      		</div>
	    	</div>
	  	</div>
	</transition>
</template>

<script>
	export default {
		name: 'ui-dialog',
		props: {
			show: {
				type: Boolean,
				required: true
			}
		}
	}
</script>

<style scoped>
	.ui-dialog-mask {
	    position: fixed;
	    z-index: 1000;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0, 0, 0, .5);
	    display: table;
	    -webkit-transition: opacity .3s ease;
	    transition: opacity .3s ease;
	}
	
	.ui-dialog-wrapper {
	    display: table-cell;
	    vertical-align: middle;
	}
	
	.ui-dialog-container {
	    width: 300px;
	    margin: 0px auto;
	    padding: 20px 30px;
	    background-color: #fff;
	    border-radius: 2px;
	    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
	    -webkit-transition: all .3s ease;
	    transition: all .3s ease;
	    font-family: Helvetica, Arial, sans-serif;
	}
	
	.ui-dialog-header h3 {
	    margin-top: 0;
	    color: #42b983;
	}
	
	.ui-dialog-footer {
	    overflow: hidden;
	}
	
	.ui-dialog-body {
	    margin: 20px 0;
	}
	
	.ui-dialog-button {
	    padding: 8px 15px;
	    border-radius: 3px;
	    border: none;
	    background-color: #09c;
	    color: #fff;
	    cursor: pointer;
	    float: right;
	    outline: none;
	}
	
	.ui-dialog-enter,
	.ui-dialog-leave-active {
	    opacity: 0;
	}
	
	.ui-dialog-enter .ui-dialog-container,
	.ui-dialog-leave-active .ui-dialog-container {
	    -webkit-transform: scale(1.1);
	    transform: scale(1.1);
	}
</style>

 

发表在 前端技术 | 留下评论

Vue 自定义组件 – switch

<template>
	<input type="checkbox" class="ui-switch" v-model="currentValue" />
</template>

<script>
export default {
	name: 'ui-switch',
	props: {
		value: Boolean
	},
	data: function() {
		return {
			currentValue: this.value
		}
	},
	watch: {
		currentValue: function(...args) {
			this.$emit('change', ...args);
		}
	}
}
</script>

<style scoped>
	.ui-switch {
	    -webkit-appearance: none;
	    width: 52px;
	    height: 31px;
	    position: relative;
	    border: 1px solid #dfdfdf;
	    box-shadow: #dfdfdf 0 0 0 0 inset;
	    border-radius: 20px;
	    background-clip: content-box;
	    display: inline-block;
	    user-select: none;
	    outline: none;
	    transition: background-color ease .3s;
	}

	.ui-switch:before {
	    content: '';
	    width: 29px;
	    height: 29px;
	    position: absolute;
	    top: 0;
	    left: 0;
	    border-radius: 20px;
	    background-color: #fff;
	    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	    transition: left ease .3s;
	}

	.ui-switch:checked {
	    border-color: #64bd63;
	    box-shadow: #64bd63 0 0 0 16px inset;
	    background-color: #64bd63;
	}

	.ui-switch:checked:before {
	    left: 21px;
	}
</style>

 

发表在 前端技术 | 留下评论

Vue 自定义组件 – Toast

<template>
	<transition name="ui-toast">
		<div class="ui-toast" v-show="visible">
			<span class="ui-toast-text">{{ message }}</span>
		</div>
	</transition>
</template>

<script>
export default {
	name: 'toast',
	props: {
		message: String
	},
	data() {
		return {
			visible: true
		};
	}
}
</script>

<style scoped>
	.ui-toast {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		max-width: 80%;
		border-radius: 5px;
		background: rgba(0, 0, 0, .7);
		color: #fff;
		box-sizing: border-box;
		text-align: center;
		z-index: 1000;
		transition: opacity .3s linear;
	}
	.ui-toast .ui-toast-text {
		font-size: 14px;
		display: block;
		text-align: center;
		padding: 20px;
	}
	.ui-toast-enter, .ui-toast-leave-active {
		opacity: 0;
	}
</style>

 

发表在 前端技术 | 留下评论

Vue 自定义指令

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="app.css" />
</head>

<body>
    <div id="app">
        <input type="text" v-focus:baz.foo.bar="{foo: 'hello', bar: 'world'}" />
    </div>
    <script src="vue.js"></script>
    <script src="app.js"></script>
</body>

</html>
Vue.directive('focus', {
    inserted: function(el) {
        el.focus();
    },
    bind: function(el, binding, vnode) {
        console.log(binding.value);
    }
});

new Vue({
    el: '#app'
})

 

发表在 Linux | 留下评论

Vue 监听DOM更新

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">{{ message }}</div>
    <script src="app.js"></script>
</body>

</html>
// app.js
var vm = new Vue({
    el: '#app',
    data: {
        message: '123'
    }
});

vm.message = '456';
console.log(vm.$el.textContent); // 123
Vue.nextTick(function() {
    console.log(vm.$el.textContent); // 456
});

 

发表在 Linux | 留下评论

一个进销存数据库设计案例

CREATE TABLE user(  
  User_Id varchar(6),  
  User_Pwd varchar(8) NULL,  
  Again_Pwd varchar(8) NULL,  
  Bel_Group varchar(3) NULL,  
  Div_Type varchar(1) NULL,  
  User_Auth varchar(1) NULL,  
  Auth_Type varchar(1) NULL,  
  User_Status varchar(1) NULL,  
  Create_User varchar(6) NULL,  
  Create_Date varchar(7) NULL,  
  Create_Time varchar(6) NULL,  
  Appr_User varchar(6) NULL,  
  Appr_Date varchar(7) NULL,  
  Appr_Time varchar(6) NULL,  
  Pwd_Date varchar(7) NULL,  
  Err_Count float NULL,  
  Use_eJCIC varchar(1) NULL  
)  
CREATE TABLE Supplier  /*供应商表*/  
(  
  Supplier_ID     int     IDENTITY(1,1)     NOT NULL, /* 供应商编号 ,主键 */  
  Name            varchar(250)              NOT NULL, /* 供应商名称 */  
  Address         varchar(250)              NOT NULL, /* 地址 */  
  Phone           varchar(25)               NULL,     /* 电话 */  
  Fax             varchar(25)               NULL,     /* 传真 */  
  PostalCode      varchar(10)               NULL,     /* 邮编 */  
  ConstactPerson  varchar(20)               NULL      /* 联系人 */  
 )  
  
CREATE TABLE Customer   /* 客户表*/  
(  
  Customer_ID     int    IDENTITY(1,1)      NOT NULL, /* 客户编号,主键*/  
  Name            varchar(250)              NOT NULL, /* 客户名称 */  
  Address         varchar(250)              NOT NULL, /* 地址 */   
  Phone           varchar(25)               NULL,     /* 电话 */  
  Fax             varchar(25)               NULL,     /* 传真 */  
  PostalCode      varchar(10)               NULL,     /* 邮编 */  
  ConstactPerson  varchar(20)               NULL      /* 联系人 */  
 )   
  
CREATE TABLE Dept      /* 部门表 */  
(  
  Dept_ID        int   IDENTITY(1,1)        NOT NULL, /* 部门编号,主键 */  
  Name           varchar(30)                NOT NULL, /* 名称 */  
  Remark           varchar(250)               NOT NULL/* 描述,备注 */   
)  
  
CREATE TABLE Dept_Supplier /* 部门--供应商表*/  
(  
  Dept_ID       int                         NOT NULL,  /* 部门编号,主键 ,  外键( 参照 DEPT 表  )*/  
  Supplier_ID   int                         NOT NULL   /* 供应商编号 ,主键,外键( 参照 SUPPLIER 表) */  
)  
  
CREATE TABLE Dept_Customer /* 部门--客户表*/  
(  
  Dept_ID       int                         NOT NULL, /* 部门编号,主键 ,  外键( 参照 DEPT 表  )*/  
  Customer_ID   int                         NOT NULL  /* 客户编号,主键,  外键( 参照 SUPPLIER 表) */  
)  
  
CREATE TABLE StoreHouse   /* 仓库表 */  
(  
  StoreHouse_ID   int IDENTITY(1,1)         NOT NULL,  /* 仓库编号,主键 */  
  Address         varchar(250)              NOT NULL,  /* 地址 */  
  Phone           varchar(25)               NULL,      /* 电话 */  
  Employee_ID     INT                       NOT NULL,  /* 仓库保管 ,外键 ( 参照 EMPLOYEE 表 ) */  
  CreateDate      datetime                  NULL       /* 仓库成立时间 */  
)  
  
CREATE TABLE ProductClass  /* 商品总分类表 */  
(  
  ProductClass_ID  int IDENTITY(1,1)        NOT NULL,  /* 商品总分类编号, 主键 */   
  Name             varchar(30)              NOT NULL,  /* 商品分类名称 */  
  Employee_ID      INT                      NOT NULL,  /* 建分类人 ,外键 ( 参照 EMPLOYEE 表 )*/  
  CreateDate       datetime                 NULL,      /* 建分类时间 */  
  Remark             varchar(250)             NULL,    /* 描述,备注 */  
)  
  
CREATE TABLE ProductList  /* 商品细分类表 */  
(  
  ProductClass_ID  INT                      NOT NULL, /* 商品总分类编号, 外键 ( 参照PRODUCTCLASS 表 ) */  
  ProductList_ID   int IDENTITY(1,1)        NOT NULL, /* 商品细分类编号,主键 */  
  Name             varchar(30)              NOT NULL, /* 商品名称 */  
  Employee_ID      INT                      NOT NULL, /* 建分类人,外键 ( 参照 EMPLOYEE 表 )*/  
  CreateDate       datetime                 NULL,     /* 建分类时间 */  
  Remark             varchar(250)             NULL,   /* 描述 ,备注 */  
 )  
  
CREATE TABLE ProductSpec  /* 商品规格表 */  
(  
  ProductSpec_ID   INT IDENTITY(1,1)        NOT NULL, /* 商品规格编号,主键 */  
  Name             varchar(30)              NOT NULL, /* 商品规格名称 */  
  Employee_ID      INT                      NOT NULL, /* 操作员 ,外键 ( 参照 EMPLOYEE 表 )*/  
  CreateDate       datetime                 NULL,     /* 创建时间 */  
  Remark             varchar(250)             NULL    /* 描述,备注 */  
)  
CREATE TABLE ProductUnit /* 商品计量单位表 */  
(  
  ProductUnit_ID   INT IDENTITY(1,1)        NOT NULL, /* 计量单位编号 ,主键 */  
  Name             varchar(30)              NOT NULL, /* 计量单位名称 */  
  Employee_ID      INT                      NOT NULL, /* 操作员 ,外键 ( 参照 EMPLOYEE 表 )*/  
  CreateDate       datetime                 NULL,     /* 创建时间 */  
  Remark             varchar(250)             NULL    /* 描述,备注 */  
)  
   
CREATE TABLE Product    /* 商品目录表 */  
(  
  ProductList_ID   int                      NOT NULL,  /* 商品细分类编号, 外键 ( 参照 PRODUCTLIST 表 ) */  
  Product_ID       INT IDENTITY(1,1)        NOT NULL,  /* 商品名称编号, 主键 */  
  Name             varchar(30)              NOT NULL,  /* 商品名称 */  
  ProductSpec_ID   INT                      NOT NULL,  /* 商品规格, 外键 ( 参照 PRODUCTSPEC 表 ) */  
  ProductUnit_ID   INT                      NOT NULL,  /* 计量单位, 外键 ( 参照 PRODUCTUNIT 表 ) */  
  Price            MONEY                    NULL,      /* 参考价格 */  
  Employee_ID      INT                      NOT NULL,  /* 操作员,   外键 ( 参照 EMPLOYEE 表 )*/  
  CreateDate       datetime                 NULL,      /* 创建时间 */  
  Remark             varchar(250)             NULL     /* 描述,备注 */  
)  
  
CREATE TABLE Product_Supplier  /* 商品--供应商表 */  
(   
  Product_ID       INT                      NOT NULL,   /* 商品名称编号,主键 , 外键( 参照 PRODUCT 表  )*/  
  Supplier_ID      INT                      NOT NULL    /* 供应商编号 , 主键,  外键( 参照 SUPPLIER 表) */  
)  
  
CREATE TABLE Employee  /* 员工表 */  
(   
  Employee_ID      INT IDENTITY(1,1)        NOT NULL,  /* 员工编号 */  
  Dept_ID          INT                      NOT NULL,  /* 所属部门编号 */  
  Name             varchar(30)              NOT NULL,  /* 姓名 */  
  Duty             varchar(20)              NOT NULL,  /* 职务 */  
  Gender           varchar(6)               NOT NULL,  /* 性别 */  
  BirthDate        datetime                 NOT NULL,  /* 出生日期 */  
  HireDate         datetime                 NULL,      /* 合同签订 日期 */  
  MatureDate       datetime                 NULL,      /* 合同到期日 */  
  IdentityCard     varchar(20)              NULL,      /* 身份证号 */  
  Address          varchar(250)             NULL,      /* 住址 */  
  Phone            varchar(25)              NULL,      /* 电话 */  
  Email            varchar(30)              NULL       /* E_MAIL */  
)  
   
  
/*-///////////////////////////////////////////////////////////////////////////////////////-*/   
  
CREATE TABLE BuyOrder    /* 进货合同 */  
(  
  BuyOrder_ID     INT IDENTITY(1,1)        NOT NULL, /* 进货合同编号 , 主键 */  
  WriteDate       datetime                 NOT NULL, /* 合同签订日期  */  
  InsureDate      datetime                 NOT NULL, /* 合同生效日期  */  
  EndDate         datetime                 NOT NULL, /* 合同到期日期  */  
  Dept_ID         INT                      NOT NULL, /* 签订部门, 外键 ( 参照 DEPT 表 ) */  
  Supplier_ID     INT                      NOT NULL, /* 供应商,   外键 ( 参照 SUPPLIER 表 ) */  
  Employee_ID     INT                      NOT NULL  /* 合同主要负责人, 外键 ( 参照 EMPLOYEE 表) */  
)  
CREATE TABLE BuyOrder_Detail  /* 进货合同明细表 */  
(  
  BuyOrder_ID     INT                      NOT NULL,  /* 进货合同编号,主键, 外键 ( 参照 BUYORDER 表 ) */  
  Product_ID      INT                      NOT NULL,  /* 所进商品编号,主键, 外键 (参照 PRODUCT 表 ) */   
  Quantity        INT                      NOT NULL,  /* 商品数量 */  
  Price           money                    NOT NULL   /* 商品进价 */  
)  
  
  
CREATE TABLE EnterStock    /* 入库单表 */  
(  
  EnterStock_ID    INT IDENTITY(1,1)       NOT NULL, /* 入库单编号 , 主键 */  
  EnterDate        datetime                NOT NULL, /* 入库时间 */  
  Dept_ID          INT                     NOT NULL, /* 入库部门 ,外键 ( 参照 DEPT 表 )*/  
  StoreHouse_ID    INT                     NOT NULL, /* 所入仓库 ,外键 ( 参照 STOREHOUSE 表)*/  
  Employee_ID      INT                     NOT NULL  /* 入库人 ,  外键 ( 参照 EMPLOYEE 表)*/  
  /*需添加 仓库保管员如何来验证入库单 ?? */  
)  
  
CREATE TABLE EnterStock_Detail /* 入库单明细 */  
(   
  EnterStock_ID    INT                     NOT NULL, /* 入库单编号 , 主键, 外键 (参照 ENTERSTOCK 表 )*/  
  Product_ID       INT                     NOT NULL, /* 此种商品编号,主键, 外键 (参照 PRODUCT 表 ) */   
  Quantity         int                     NOT NULL, /* 此种商品数量 */  
  Price            money                   NULL,     /* 此种商品参考价格  */  
  HaveInvoice      bit                     not null, /* 此种商品有没有开发票 ( 缺省为 0 , 有没有开票 )*/  
  InvoiceNum       varchar(30)             NULL      /* 发票号 */  
)  
  
  
CREATE TABLE BackStock  /* 退库单表 */  
(  
  BackStock_ID     INT IDENTITY(1,1)       NOT NULL, /* 退库单编号 , 主键 */  
  BackDate         datetime                NOT NULL, /* 退库时间 */  
  Dept_ID          INT                     NOT NULL, /* 退库部门 ,  外键 ( 参照 DEPT 表 )*/  
  StoreHouse_ID    INT                     NOT NULL, /* 所退入仓库 ,外键 ( 参照 STOREHOUSE 表)*/  
  Employee_ID      INT                     NOT NULL, /* 退库人 ,    外键 ( 参照 EMPLOYEE 表)*/  
  Remark             varchar(250)            NULL    /* 退库原因 */  
  
)  
CREATE TABLE BackStock_Detail /* 退库单明细表 */  
(   
  BackStock_ID     INT                     NOT NULL, /* 退库单编号 , 主键, 外键 (参照 BACKSTOCK 表 )*/   
  Product_ID       INT                     NOT NULL, /* 所退商品编号,主键, 外键 (参照 PRODUCT 表 ) */   
  Quantity         int                     NOT NULL, /* 退入数量 */  
  Price            money                   NULL      /* 参考价格 */  
    
)  
  
CREATE TABLE LeaveStock  /* 出库单表 */  
(  
  LeaveStock_ID    INT IDENTITY(1,1)       NOT NULL,  /* 出库单编号 , 主键, 外键 (参照 LEAVESTOCK 表 )*/  
  LeaveDate        datetime                NOT NULL,  /* 出库时间 */   
  Dept_ID          INT                     NOT NULL,  /* 出库部门 ,  外键 ( 参照 DEPT 表 )*/  
  StoreHouse_ID    INT                     NOT NULL,  /* 所出仓库 ,外键 ( 参照 STOREHOUSE 表)*/  
  ToStoreHouse_ID  INT                     NOT NULL,  /* 所入仓库 ,外键 ( 参照 STOREHOUSE 表)*/  
  Employee_ID      INT                     NOT NULL   /* 出库人 ,    外键 ( 参照 EMPLOYEE 表)*/  
  /* 仓库保管员如何来验证出库单 ?? */  
)  
  
CREATE TABLE LeaveStock_Detail  /* 出库单明细表 */  
(   
  LeaveStock_ID    INT                     NOT NULL,  /* 出库单编号 , 主键, 外键 (参照 BACKSTOCK 表 )*/   
  Product_ID       INT                     NOT NULL,  /* 所出商品编号,主键, 外键 (参照 PRODUCT 表 ) */   
  Quantity         int                     NOT NULL,  /* 出库数量 */  
  Price            money                   NULL       /* 出库价格 */   
)  
  
CREATE TABLE BackSale  /* 退货单表 */  
(  
  BackSale_ID      INT IDENTITY(1,1)       NOT NULL,  /* 退货单编号 , 主键 */  
  BackDate         datetime                NOT NULL,  /* 退货日期  */   
  Dept_ID          INT                     NOT NULL,  /* 退货部门 ,  外键 ( 参照 DEPT 表 )*/  
  StoreHouse_ID    INT                     NOT NULL,  /* 退入仓库 ,  外键 ( 参照 STOREHOUSE 表)*/  
  Employee_ID      INT                     NOT NULL,  /* 退货人 ,    外键 ( 参照 EMPLOYEE 表)*/  
  Remark             varchar(250)            NULL     /* 退货原因 */  
  
)  
CREATE TABLE BackSale_Detail  /* 退货单明细表 */  
(   
  BackSale_ID      INT                     NOT NULL,  /* 退货单编号 , 主键, 外键 (参照 BACKSTOCK 表 )*/   
  Product_ID       INT                     NOT NULL,  /* 所退商品编号,主键, 外键 (参照 PRODUCT 表 ) */   
  Quantity         int                     NOT NULL,  /* 退货数量 */  
  Price            money                   NULL       /* 价格 */   
    
)  
  
  
CREATE TABLE SaleOrder    /* 销售合同 */  
(  
  SaleOrder_ID     INT IDENTITY(1,1)       NOT NULL,  /* 合同编号 , 主键 */  
  WriteDate        datetime                NOT NULL,  /* 合同签订日期  */  
  InsureDate       datetime                NOT NULL,  /* 合同生效日期  */  
  EndDate          datetime                NOT NULL,  /* 合同到期日期  */  
  Dept_ID          INT                     NOT NULL,  /* 签订部门, 外键 ( 参照 DEPT 表 ) */  
  Customer_ID      INT                     NOT NULL,  /* 客户编号, 外键 ( 参照 CUSTOMER 表 ) */  
  Employee_ID      INT                     NOT NULL   /* 合同主要负责人, 外键 ( 参照 EMPLOYEE 表) */  
)  
CREATE TABLE SaleOrder_Detail  /* 销售合同明细表 */  
(  
  SaleOrder_ID     INT                     NOT NULL,  /* 销售合同编号,主键, 外键 ( 参照 BUYORDER 表 ) */  
  Product_ID       INT                     NOT NULL,  /* 销售商品编号,主键, 外键 (参照 PRODUCT 表 ) */   
  Quantity         int                     not null,  /* 商品数量 */  
  Price            money                   null       /* 商品进价 */  
)  
  
  
CREATE TABLE Buy     /* 进货表 ( 验货表 ) */  
(  
   Buy_ID          INT IDENTITY(1,1)         NOT NULL, /* 进货编号 , 主键 */  
   ComeDate        datetime                  NOT NULL, /* 进货日期 */  
   Dept_ID         INT                       NOT NULL, /* 进货部门, 外键 ( 参照 DEPT 表 ) */   
   Employee_ID     INT                       NOT NULL  /* 验货人,   外键 ( 参照 EMPLOYEE 表)*/  
)  
  
CREATE TABLE Buy_Detail  /* 进货表明细 ( 验货表 ) */    
(  
  Buy_ID           INT                      NOT NULL, /* 进货编号,主键, 外键 ( 参照 BUY 表 ) */  
  Product_ID       INT                      NOT NULL, /* 商品编号,主键, 外键 ( 参照 PRODUCT 表 ) */   
  BuyOrder_ID      INT                      NULL,     /* 采购合同,  外键 ( 参照 BUYORDER 表 ) */  
  Quantity         int                      not null, /* 数量 */  
  Price            money                    null      /* 价格 */  
   
  /* BUYORDER_ID 为 NULL 时, 为现金进货 */    
)  
  
CREATE TABLE Sale   /* 销售 表 */  
(  
  Sale_ID          INT IDENTITY(1,1)        NOT NULL,  /* 销售 编号  */  
  SaleDate         datetime                 not null,  /* 销售 日期 */  
  Dept_ID          INT                      NOT NULL,  /* 销售部门, 外键 ( 参照 DEPT 表 ) */   
  Employee_ID      INT                      NOT NULL   /* 售货人,   外键 ( 参照 EMPLOYEE 表)*/  
)  
  
CREATE TABLE Sale_Detail  /* 销售明细 ( 验货表 ) */    
(  
  Sale_ID          INT                      NOT NULL,  /* 销售编号,主键, 外键 ( 参照 SALE 表 ) */  
  Product_ID       INT                      NOT NULL,  /* 商品编号,主键, 外键 ( 参照 PRODUCT 表 ) */    
  SaleOrder_ID     INT                      NULL,      /* 销售合同, 外键 ( 参照 SALEORDER 表 ) */  
  Quantity         int                      not null,  /* 数量 */  
  Price            money                    not null,  /* 价格 */  
  Discount         int                      null       /* 折扣 */  
    
  /* SALEORDER_ID 为 NULL 时, 为现金销售 */  
)  
  
  
CREATE TABLE StockPile  /* 库存表 */  
(   
  StockPile_ID     INT IDENTITY(1,1)        NOT NULL, /* 库存编号 , 主键 */  
  Dept_ID          INT                      NOT NULL, /* 商品所属部门, 外键 ( 参照 DEPT 表 ) */    
  StoreHouse_ID    INT                      NOT NULL, /* 所在仓库,     外键 ( 参照 SOTREHOUSE 表 ) */     
  Product_ID       INT                      NOT NULL, /* 商品编号,     外键 ( 参照 PRODUCT 表 ) */     
  FirstEnterDate   datetime                 not null, /* 此种商品第一次入库时间 */  
  LastLeaveDate    datetime                 null,     /* 此种商品最后一次出库时间 */  
  Quantity         int                      not null, /* 所存数量 */  
  Price            money                    not null  /* 加权价 */  
  /* LASTLEAVEDATE 为NULL 时,此种商品从来没有 卖过 */   
)

 

发表在 Linux | 留下评论

css3 ui-switch

.ui-switch {
	-webkit-appearance: none;
	width: 52px;
	height: 31px;
	position: relative;
	border: 1px solid #dfdfdf;
	box-shadow: #dfdfdf 0 0 0 0 inset;
	border-radius: 20px;
	background-clip: content-box;
	display: inline-block;
	user-select: none;
	outline: none;
	-webkit-transition: background-color ease .3s;
	transition: background-color ease .3s;

	&:before {
		content: '';
		width: 29px;
		height: 29px;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 20px;
		background-color: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
		-webkit-transition: left ease .3s;
		transition: left ease .3s;
	}

	&:checked {
		border-color: #64bd63;
		box-shadow: #64bd63 0 0 0 16px inset;
		background-color: #64bd63;

		&:before {
			left: 21px;
		}
	}
}

 

发表在 Linux | 留下评论

Understanding JavaScript’s Function.prototype.bind

Function binding is most probably your least concern when beginning with JavaScript, but when you realize that you need a solution to the problem of how to keep the context of this within another function, then you might not realize that what you actually need is Function.prototype.bind().

The first time you hit upon the problem, you might be inclined to set this to a variable that you can reference when you change context. Many people opt for self, _this or sometimes contextas a variable name. They’re all usable and nothing is wrong with doing that, but there is a better, dedicated way.

Jack Archibald tweets about caching this:

It should have been more apparent to me when Sindre Sorhus spelled it out:

I ignored this wise advice for many months.

What Problem Are We Actually Looking To Solve? Link

Here is sample code in which one could be forgiven for caching the context to a variable:

var myObj = {

    specialFunction: function () {

    },

    anotherSpecialFunction: function () {

    },

    getAsyncData: function (cb) {
        cb();
    },

    render: function () {
        var that = this;
        this.getAsyncData(function () {
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};

myObj.render();

If we had left our function calls as this.specialFunction(), then we would have received the following error:

Uncaught TypeError: Object [object global] has no method 'specialFunction'

We need to keep the context of the myObj object referenced for when the callback function is called. Calling that.specialFunction() enables us to maintain that context and correctly execute our function. However, this could be neatened somewhat by using Function.prototype.bind().

Let’s rewrite our example:

render: function () {

    this.getAsyncData(function () {

        this.specialFunction();

        this.anotherSpecialFunction();

    }.bind(this));

}

WHAT DID WE JUST DO? LINK

Well, .bind() simply creates a new function that, when called, has its this keyword set to the provided value. So, we pass our desired context, this (which is myObj), into the .bind()function. Then, when the callback function is executed, thisreferences myObj.

If you’re interested to see what Function.prototype.bind() might look like and what its doing internally, here is a very simple example:

Function.prototype.bind = function (scope) {
    var fn = this;
    return function () {
        return fn.apply(scope);
    };
}

And here is a very simple use case:

var foo = {
    x: 3
}

var bar = function(){
    console.log(this.x);
}

bar(); // undefined

var boundFunc = bar.bind(foo);

boundFunc(); // 3

We’ve created a new function that, when executed, has its thisset to foo — not the global scope, as in the example where we called bar();.

Browser Support Link

Browser Version support
Chrome 7
Firefox (Gecko) 4.0 (2)
Internet Explorer 9
Opera 11.60
Safari 5.1.4

As you can see, unfortunately, Function.prototype.bind isn’t supported in Internet Explorer 8 and below, so you’ll run into problems if you try to use it without a fallback.

Luckily, Mozilla Developer Network, being the wonderful resource it is, provides a rock-solid alternative if the browser hasn’t implemented the native .bind() method:

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

Advertisement

The Sketch HandbookMeet the new Sketch Handbook, our brand new Smashing book that will help you master all the tricky, advanced facets of Sketch. Filled with practical examples and tutorials in 12 chapters, the book will help you become more proficient in your work. Get the book now →

Patterns For Usage Link

When learning something, I find it useful not only to thoroughly learn the concept, but to see it applied to what I’m currently working on (or something close to it). Hopefully, some of the examples below can be applied to your code or to problems you’re facing.

CLICK HANDLERS LINK

One use is to track clicks (or to perform an action after a click) that might require us to store information in an object, like so:

var logger = {
    x: 0,
    updateCount: function(){
        this.x++;
        console.log(this.x);
    }
}

We might assign click handlers like this and subsequently call the updateCount() in our logger object:

document.querySelector('button').addEventListener('click', function(){
    logger.updateCount();
});

But we’ve had to create an unnecessary anonymous function to allow the this keyword to stand correct in the updateCount()function.

This could be neatened up, like so:

document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger));

We’ve used the subtly handy .bind() function to create a new function and then set the scope to be bound to the loggerobject.

SETTIMEOUT LINK

If you’ve ever worked with templating engines (such as Handlebars) or especially with certain MV* frameworks (I can only speak of Backbone.js from experience), then you might be aware of the problem that occurs when you render the template but want to access the new DOM nodes immediately after your render call.

Suppose we try to instantiate a jQuery plugin:

var myView = {

    template: '/* a template string containing our <select /> */',

    $el: $('#content'),

    afterRender: function () {
        this.$el.find('select').myPlugin();
    },

    render: function () {
        this.$el.html(this.template());
        this.afterRender();
    }
}

myView.render();

You might find that it works — but not all the time. Therein lies the problem. It’s a rat race: Whatever happens to get there first wins. Sometimes it’s the render, sometimes it’s the plugin’s instantiation.

Now, unbeknownst to some, we can use a slight hack with setTimeout().

With a slight rewrite, we can safely instantiate our jQuery plugin once the DOM nodes are present:

//

    afterRender: function () {
        this.$el.find('select').myPlugin();
    },

    render: function () {
        this.$el.html(this.template());
        setTimeout(this.afterRender, 0);
    }

//

However, we will receive the trusty message that the function .afterRender() cannot be found.

What we do, then, is throw our .bind() into the mix:

//

    afterRender: function () {
        this.$el.find('select').myPlugin();
    },

    render: function () {
        this.$el.html(this.template());
        setTimeout(this.afterRender.bind(this), 0);
    }

//

Now, our afterRender() function will execute in the correct context.

TIDIER EVENT BINDING WITH QUERYSELECTORALL LINK

The DOM API improved significantly once it included such useful methods as querySelector, querySelectorAll and the classList API, to name a few of the many.

However, there’s not really a way to natively add events to a NodeList as of yet. So, we end up stealing the forEach function from the Array.prototype to loop, like so:

Array.prototype.forEach.call(document.querySelectorAll('.klasses'), function(el){
    el.addEventListener('click', someFunction);
});

We can do better than that, though, with our friend .bind():

var unboundForEach = Array.prototype.forEach,
    forEach = Function.prototype.call.bind(unboundForEach);

forEach(document.querySelectorAll('.klasses'), function (el) {
    el.addEventListener('click', someFunction);
});

We now have a tidy method to loop our DOM nodes.

CONCLUSION LINK

As you can see, the .bind() function can be subtly included for many different purposes, as well as to neaten existing code. Hopefully, this overview has given you what you need to add .bind() to your own code (if necessary!) and to harness the power of transforming the value of this.

发表在 Linux | 留下评论

第一个React Component

import React from 'react';
import ReactDOM from 'react-dom';

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
);

 

发表在 Linux | 留下评论

不到100行代码实现一个简单的推荐系统:以电影为例

原文:http://www.aboutyun.com/thread-12703-1-1.html

问题导读

1.推荐系统的第一步你认为是做什么,本文是如何认为的?
2.相似度在推荐系统中起着什么作用?
3.什么是数据标准化(归一化)处理?
4.找到某观影人可能喜欢的电影,找到对某影片感兴趣的人的思路是什么?

似乎咱的产品七,八年前就想做个推荐系统的,就是类似根据用户的喜好,自动的找到用户喜欢的电影或者节目,给用户做推荐。可是这么多年过去了,不知道是领导忘记了还是怎么了,连个影子还没见到。
而市场上各种产品的都有了推荐系统了。比如常见的各种购物网站京东,亚马逊,淘宝之类的商品推荐,视频网站优酷的的类似影片推荐,豆瓣音乐的音乐推荐……

一个好的推荐系统推荐的精度必然很高,能够真的发现用户的潜在需求或喜好,提高购物网詀的销量,让视频网站发现用户喜欢的收费电影… 可是要实现一个高精度的推荐系统不是那么容易的,netflix曾经悬赏高额奖金寻找能给其推荐系统的精确度提高10%的人,可见各个公司对推荐系统的重视和一个好的推荐系统确实能带来经济效益。
下面咱以电影电视的推荐系统为例,一步一步的来实现一个简单的推荐系统吧, 由于比较简单,整个推荐系统源码不到100行,大概70-80行吧,应该很容易掌握。 为了快速开发原型,咱采用Python代码来演示

1.  推荐系统的第一步,需要想办法收集信息

不同的业务,不同的推荐系统需要收集的信息不一样 针对咱要做的电影推荐,自然是每个用户对自己看过的电影的评价了,如下图所示:

RecommandationSystem_Estimate_Data.png

RecommandationSystem_Estimate_Data

 

Kai Zhou对Friends打分是4分, 对Bedtime Stories打分是3分,没有对RoboCop打分 Shuai Ge没有对Friends打分,对Bedtime Stories打分是3.5分 …… 为简单,咱将此数据存成csv文件,形成一个二维的矩阵,假设存在D:\train.csv, 数据如下:
  1. Name,Friends,Bedtime Stories,Dawn of the Planet of the Apes,RoboCop,Fargo,Cougar Town
  2. Kai Zhou,4,3,5,,1,2
  3. Shuai Ge,,3.5,3,4,2.5,4.5
  4. Mei Nv,3,4,2,3,2,3
  5. xiaoxianrou,2.5,3.5,3,3.5,2.5,3
  6. fengzhi,3,4,,5,3.5,3
  7. meinv,,4.5,,4,1,
  8. mincat,3,3.5,1.5,5,3.5,3
  9. alex,2.5,3,,3.5,,4

复制代码

先从csv文件中加载二维矩阵,代码如下:
def load_matrix():
 matrix = {}
 f = open("d:\\train.csv")
 columns = f.readline().split(',')
 
 for line in f:
 scores = line.split(',')
 for i in range(len(scores))[1:]:
 matrix[(scores[0], columns[i])] = scores[i].strip("\n")
 
 return matrix
 
matrix = load_matrix()
print "matrix:", matrix

 

复制代码

load_matrix()解析csv文件,返回一个dictionary, 该dictionary以(行名,列名)为索引
数据有了,下面咱就正式开始干活了 ,推荐系统要干些什么呢?
咱以电影推荐来说,推荐系统需要解决的几个主要问题:
 
1. 判断两个电影,两个观影人之间的相似度
2. 找到和某影片最相似的影片, 或找到和某观影人有同样兴趣的人
3. 找到某观影人可能喜欢的电影,或找到对某影片感兴趣的人
2. 推荐系统的基础,判断相似度
针对咱的电影推荐来说,就是判断两个电影,两个观影人之间的相似度。 2.1 欧几里德距离计算相似度 最简单的,最容易理解的就是欧几里德距离. 那么,什么是欧几里德距离,怎么用呢? 请对比评价数据,看下图:
EuclideanDistance.png
咱用两个电影Fargo和Cougr Town来取例 图中X轴代表电影Fargo,  Y轴代表电影Cougr Town,  Kai Zhou给电影Fargo 打1分,Cougr Town打2分,画到图上
同理,咱可以将Shuai Ge和Mei Nv的数据点都画到图上 很明显,咱可以看出Kai Zhou与Mei Nv 离得近,与Shuai Ge离得远,所以说Kai Zhou与Mei Nv的兴趣更相近. 用数学式子表达出来就是:
Kai Zhou与Mei Nv的距离的平方:    (2 – 1)^2 + (3 – 2)^2 = 2
Kai Zhou 与Shuai Ge的距离的平方: (2.5 – 1)^2 + (4.5 – 2)^2 = 8.5
2 < 8.5, 所以Kai Zhou与Mei Nv比Shuai Ge兴趣更近. 这就是利用欧几里得距离来判断相似度   两个用户对所有电影的评价相似度的和,就是两用户的相似度
2.2 归一化处理
为了方便比较处理后的数据,一般还需要对计算出来的结果进行归一化处理。
数据标准化(归一化)处理是数据挖掘的一项基础工作,不同评价指标往往具有不同的量纲和量纲单位,这样的情况会影响到数据分析的结果,为了消除指标之间的量纲影响,需要进行数据标准化处理,以解决数据指标之间的可比性。
原始数据经过数据标准化处理后,各指标处于同一数量级,适合进行综合对比评价。
上面的介绍太学术化了吧,不容易懂,我的理解:归一化化就是要把你需要处理的数据经过处理后(通过某种算法)限制在你需要的一 定范围内。
简单的说,我们希望,处理后的数据取值范围在0-1之间. 在数学上有很多归一化处理的方法 常用的有
一、min-max标准化(Min-Max Normalization)
也称为离差标准化,是对原始数据的线性变换,使结果值映射到[0 – 1]之间。
二、Z-score标准化方法
这种方法给予原始数据的均值(mean)和标准差(standard deviation)进行数据的标准化。经过处理的数据符合标准正态分布,即均值为0,
标准差为1
咱可以根据需要选择,不过,针对咱这系统采用的是欧几里德距离,咱可以用下面的更简单的公式:
假设计算出来的欧几里德距离为:n
1 / (1 + n)
当距离为0,归一化后的值为:1
距离越大,归一化后的值越接近0
有了上面的基础知识之后,下面的代码就水到渠成了
def sim_distance(matrix, row1, row2):
    columns = set(map(lambda l: l[1], matrix.keys()))
    si = filter(lambda l: matrix.has_key((row1, l)) and matrix[(row1, l)] != "" and matrix.has_key((row2, l)) and matrix[(row2, l)] != "", columns)
    if len(si) == 0: return 0
    sum_of_distance = sum([pow(float(matrix[(row1, column)]) - float(matrix[(row2, column)]), 2) for column in si])
    return 1 / (1 + sqrt(sum_of_distance))
 
print sim_distance(matrix, "Kai Zhou", "Shuai Ge")

 

复制代码

3. 找到和和某观影人有同样兴趣的人,某影片最相似的影片
a.有了上面的代码,找到和某用户有同样兴趣的人,就非常简单了。只要将某用户和其它所有用户的相似度计算出来,排下序就行了。
def top_matches(matrix, row, similarity=sim_distance):
    rows = set(map(lambda l: l[0], matrix.keys()))
    scores = [(similarity(matrix, row, r), r) for r in rows if r != row]
    scores.sort()
    scores.reverse()
    return scores
 
person = "Kai Zhou"
print "top match for:", person
print top_matches(matrix, person)

 

    b. 找到和某影片相似的影片,这个需要稍微变化下。咱的输入数据是以用户为行数据,影片为列数据, 只要改成以影片为行数据,用户为列数据,一样的调用。 所以需要一个函数,将矩阵转置
def transform(matrix):
    rows = set(map(lambda l: l[0], matrix.keys()))
    columns = set(map(lambda l: l[1], matrix.keys()))
 
    transform_matrix = {}
    for row in rows:
        for column in columns:
            transform_matrix[(column, row)] = matrix[(row, column)]
    return transform_matrix
找到和Friends 相似的影片:
Source code           
trans_matrix = transform(matrix)
print "trans:", trans_matrix
 
film = "Friends"
print "top match for:", film
print top_matches(trans_matrix, film)

 

4. 找到某观影人可能喜欢的电影,找到对某影片感兴趣的人
最理想的是找到两个相似度一样的人,可以认为某个人喜欢的电影,另外那个也喜欢。 但是这样有它的缺点,比较好的办法是把所有人的数据都用上,方法如下:
1. 先计算所有人和Kai Zhou的相似度
2. 对于Kai Zhou没有看过,没有评分,而其它人有评分的的影片,  将其评分与相似度相乘,得到的值再除以相似度之和 3. 排序   咱先以给Kai Zhou推荐影片为例来说明, Dawn of the Planet of the Apes 和 RoboCop 这两部影片Kai Zhou都没有看,我们该推荐他看哪部呢? 假设我们计算出来Kai Zhou与其它人的相似度如下:
[(0.3333333333333333, ‘Mei Nv’),
(0.29429805508554946, ‘xiaoxianrou’),
(0.2857142857142857, ‘alex’),
(0.2553967929896867, ‘mincat’),
(0.252650308587072, ‘Shuai Ge’),
即Kai Zhou与Mei Nv 相似度为0.3333333333333333,  与xiaoxiaorou相似度为0.29429805508554946,  其它类似… 那么计算Dawn of the Planet of the Apes对Kai Zhou的推荐值过程如下:
1. 找到Shuai Ge对Dawn of the Planet of the Apes的评价值  乘以Shuai Ge与Kai Zhou的相似度:   3 *  0.252650308587072
2. 找到Mei Nv对Dawn of the Planet of the Apes的评价值  乘以其与Kai Zhou的相似度: 2 * 0.3333333333333333
3. 找到xiaoxianrou 对Dawn of the Planet of the Apes的评价值  乘以其与Kai Zhou的相似度: 3 * 0.29429805508554946
4. fengzhi 没有对Dawn of the Planet of the Apes评价,不用计算
5. 找到mincat对Dawn of the Planet of the Apes的评价值  乘以其与Kai Zhou的相似度: 1.5 * 0.2553967929896867
6. alex 没有对Dawn of the Planet of the Apes评价,不用计算
7. 将 1, 2, 3, 5 步的计算结果相加 得到: 3 *  0.252650308587072 + 2 * 0.3333333333333333 +  3 * 0.29429805508554946 +  1.5 * 0.2553967929896867 = 2.6906069471690612
8.  将1,2,3,5步的参与计算的人的相似度相加: 0.252650308587072 +  0.3333333333333333 + 0.29429805508554946 +  0.2553967929896867 = 1.1356784899956416
9.  将第7步结果除以第8步的结果,就是Dawn of the Planet对Kai Zhou的推荐值: 2.6906069471690612 / 1.1356784899956416 = 2.369162549851047
同样的方法,计算出来RoboCop 对Kai Zhou的推荐值为:3.9277923180363326 所以RoboCop应该对Kai Zhou的吸引力比Dawn of the Planet of the Apes更大. 代码如下:
def get_recommendations(matrix, row, similarity=sim_distance):
    rows = set(map(lambda l: l[0], matrix.keys()))
    columns = set(map(lambda l: l[1], matrix.keys()))
 
    sum_of_column_sim = {}
    sum_of_column = {}
 
    for r in rows:
        if r == row: continue
        sim = similarity(matrix, row, r)
        if sim <= 0:  continue
 
        for c in columns:
            if matrix[(r, c)] == "": continue
 
            sum_of_column_sim.setdefault(c, 0)
            sum_of_column_sim[c] += sim
            sum_of_column.setdefault(c, 0)
            sum_of_column[c] += float(matrix[(r, c)]) * sim
 
    scores = [(sum_of_column[c] / sum_of_column_sim[c], c) for c in sum_of_column]
    scores.sort()
    scores.reverse()
    return scores
 
print get_recommendations(matrix, person)

 

找到对某影片感兴趣的人和之前类似,需要将矩阵转置就行了,代码如下:
Source code
trans_matrix = transform(matrix)
print get_recommendations(trans_matrix,  “Friends”)
这就是一个简单的推荐系统的雏型,当然,要实现一个可用的推荐系统,还有很多工作要做。比如推荐的精确度,用户喜欢打斗片,咱不可能给他推荐爱情片吧?比如数据量大了之后,性能问题,扩展性?是基于用户推荐还是物品推荐?……
发表在 Linux | 留下评论