个人简历

Posted on 2018-03-09

您好，我是李珊珊，
现任职于：北京飞猪星球文化有限公司。
很荣幸有机会让您阅览我的简历，
接下来请允许我做一个自我介绍

李珊珊（Colisy）

前端小白一枚，一入前端深似海，从此沉迷不自拔。
性别：女
年龄： 24

技能

前端基础开发（html、css、js、jquery）
前端框架使用（vue、react做项目ok，看源码部分能看懂。）
Node.js 开发（不太精通，仅限于express+mongodb+nodejs数据库实现增删改查、并返回给前台所需数据、其他类似爬虫方面不精通）
前端开发方面（pc端、m站、公众号、小程序，没开发过app）

工作经历

北京飞猪星球文化有限公司（音乐类型的项目开发）
长行时代科技有限公司（商城方面的项目开发）
居然之家投资控股集团总部（实习）（商城方面的项目开发）

联系方式

邮箱：347996377@qq.com
电话号： 18401466210
微信： l347996377 或 15313145474

链接

问题总结

Posted on 2018-03-09

nodejs对mongodb基本操作

Posted on 2018-03-09

nodejs对mongodb基本操作

1、连接数据库

### 安装mongodb
npm install -g mongodb --save
### 引入mongodb
var MongoClient=require('mongodb').MongoClient;
### local是你数据库的名称 27017是mongodb默认端口
var DB_CONN_STR='mongodb://localhost:27017/local'
### 连接mongodb 要配合发送请求app.get(url,(req,res)=>{})使用
MongoClient.collect(DB_CONN_STR,(err,db)=>{
  inDataBase(db,(result)=>{
    res.send(result); ### res.json({});将数据返回前端
    db.close();
  })
})

2、创建数据表

1 2	### database数据表 const collection=db.collection(database)

3、实现对数据表的增删改查

### callback对返回数据经行处理。

### 增加一条数据 obj{}插入的数据
collection.insert(obj,(err,data)=>{
  if(err) console.error(err)
  callback(data)
})

###删除一条数据
collection.remove(obj,(err,data)=>{
  if(err) console.error(err)
  callback(data)
})

### 修改一条数据
var updateObj={
  $set:{
    ### 所要修改的内容
  }
}

collection.update(obj,updateObj,(err,data)=>{
  if(err) console.error(err)
  callback(data)
})

###查找一条数据
collection.find(obj).toArray((err,data)=>{
  if(err) console.error(err)
  callback(data)
})

mongodb的安装下载使用步骤

Posted on 2018-03-08

初学mongodb

1、查看电脑操作系统

Markdown

2、在mongodb官网下载相应电脑操作系统的mongodb。

Markdown

3、按照下图方式进行安装

Markdown

安装完成的样子

Markdown

4、安装完对文件进行修改配置

1）、在Mongo文件夹新增：data文件夹、logs文件夹、mongo.conf 文件。（logs里面新增mongo.log文件）

Markdown

2）、mongo.conf文件里面的内容配置

Markdown

3）、配置完成在浏览器里面打开应该是这个样子

Markdown

如果每次都如上操作，岂不是相当麻烦，按照如下命令来创建并启动MongoDB服务，就可以通过windows服务来管理MongoDB的启动和关闭了

mongod –config “D:\Mongo\mongo.conf” –install –serviceName “MongoDB”
net start MongoDB

5、安装mongoVue用来配合mongodb一起使用

Markdown

mongodb
1、db.collection is not a function
解决方案切换版本”mongodb”: “^2.2.33”

移动端页面开发总结

Posted on 2018-03-02

移动端页面开发资源总结及技巧

工作中常用到的移动端问题记录下来，以便后用。内容不完善，以后遇到问题会一直更新的。

一、meta标签

1、移动端页面设置视口宽度等于设备宽度，并禁止缩放（viewport视窗）

1	<meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' />

2、移动端页面设置视口宽度等于定宽（如640px）,并禁止缩放，常用于微信浏览器页面(通常移动端设置为640*1136是最为稳妥的方式)

1	<meta name='viewport' content='width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' />

3、禁止将页面中的数字识别为电话号码（format-detection格式检测）

1	<meta name='format-detection' content='telephont=no' />

4、忽略android平台中对邮箱地址的识别

1	<meta name='format-detection' content='email=no' />

5、当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

1 2	<meta name='apple-mobile-web-app-capable' content='yes' /> <!-- ios7.0版本以后，safari已看不到效果 -->

6、将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

1 2	<meta name='apple-mobile-web-app-status-bar-style' content='black' /> <!-- 可选default、black、black-translucent -->

viewport 模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>title</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
  content...
</body>

</html>

二、CSS样式技巧（CSS层叠样式表，描述HTML/XML文档的呈现，元素被渲染的问题。）

1、禁止ios和android用户选中文字

1	.css{-webkit-user-select:none}

2、禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片(callout调出)

1	.css{-webkit-touch-callout:none}

3、webkit去除表单的默认样式(appearance外观)

1	.css{-webkit-appearance:none;}

4、去除表单输入框placeholder的样式

1 2	input::-webkit-input-placeholder{color:#000} input:focus::-webkit-input-placeholder:{color:#fff}

5、去除android、button、input标签被点击时产生的边框&去除ios a标签被点击时产生的半透明灰色背景

1	a,button,input{-webkit-tap-highlight-color:rgba(0,0,0,0)}

6、iOS使用-webkit-text-size-adjust禁止调整字体大小

1	body{-webkit-text-size-adjust:100% !important;}

7、android上去掉语音输入按钮(speech语音演讲)

1	input::-webkit-input-speech-button{display:none;}

8、移动端定义字体（移动端没有微软雅黑字体）

1	body{font-family:Helvetica;}

9、webkit内核浏览器的文字大小调整功能（webkit内核最小字体12px）

1 2	-webkit-text-size-adjust:none; -webkit-transform:scale(0.9);

10、去掉 input[type=search] 搜索框默认的×号

input[type='search']{
  -webkit-appearance:none;
  input::-webkit-search-cancel-button{
    display:none;
  }
}

三、其他技巧

1、手机拍照和上传图片

选择照片：
<input type='file' accept='image/*' />
选择视频：
<input type='file' accept='video/*' />

2、取消input在ios下，输入的时候英文首字母的默认大写(autocorrect自动更正capitalize以大写字母写)

1	<input type='text' autocapitalize='off' autocorrect='off' />

3、打电话发短信

1 2	<a href='tel:10086'>打电话给：10086</a> <a href='sms:10086'>发短信给：10086</a>

四、CSS reset

/* Colisy  */
@charset "utf-8";
/* reset */
html{
    -webkit-text-size-adjust:none;
    -webkit-user-select:none;
    -webkit-touch-callout: none
    font-family: Helvetica;
}
body{font-size:12px;}
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0; font-weight: normal;text-indent: 0;}
a,button,input,textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline:none; -webkit-appearance:none;}
em{font-style:normal}
li{list-style:none}
a{text-decoration:none;}
img{border:none; vertical-align:top;}
table{border-collapse:collapse;}
textarea{ resize:none; overflow:auto;}
/* end reset */

五、常用的公共CSS style

@charset "UTF-8";
/* public */

/* 清除浮动 */
.clear{zoom:1}
.clear:after{content:"";display:block;clear:both;}

/* 定义盒模型为怪异盒模型 */
.boxSiz{
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
}

/* 强制换行 */
.toWrap{
  word-break: break-all; /* 只对英文起作用，以字母作为换行依据 */
  word-wrap: break-word; /* 只对英文起作用，以单词作为换行依据 */
  white-space: pre-wrap; /* 只对中文起作用，强制换行*/
}

/* 禁止换行 */
.noWrap{
  white-space: nowrap;
}

/* 文字超出部分显示省略号 */
.noWrapEllipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多行显示省略号，@line是行数(https://www.html5rocks.com/zh/tutorials/flexbox/quick/)*/
.ellipsisLn{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* line-clamp是一个不规范属性，必须与-webkit-结合。限制一个块元素文本显示的行数。与 display:-webkit-box;-webkit-box-orient必须结合*/
  -webkit-line-clamp:@line;
}

/* 1px 边框解决方案，示例中设置上边框，可以调整 top、right、bottom、left 的值分别设置上下左右边框 */
#box2:after{
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #000;
    color: #C7C7C7;
    transform-origin: 0 0;
    transform: scaleY(0.5);
}

/* 文字两端对齐，text-justify对齐行文本进行对齐和分隔，只有IE中起作用（）*/
.text-justify{
  text-align: justify;
  text-justify:inter-ideograph;
}

/* 定义盒模型为 flex 布局兼容写法并让内容水平垂直居中*/
.flex-center{
  display: box;
  display: -webkit-box;
  display: -ms-box;
  display: -o-box;
  display: -moz-box;

  box-pack:center;
  -webkit-box-pack:center;
  -o-box-pack:center;
  -ms-box-pack:center;
  -moz-box-pack:center;

  box-align:center;
  -webkit-box-align:center;
  -ms-box-align:center;
  -moz-box-align:center;
  -o-box-align:center;
}

/* End public */

六、flex布局（2009年盒模型，只兼容老式的手机，目前使用2012年的flex）

1、定义弹性盒模型兼容写法

/*
  box
  inline-box
*/
display: box;
display: -webkit-box;
display: -ms-box;
display: -o-box;
display: -moz-box;

2、box-orient 定义盒模型内伸缩项目的布局方向

/*
  vertical column
  horizontal row
*/
box-orient: horizontal;
-webkit-box-orient: horizontal;
-ms-box-orient: horizontal;
-o-box-orient: horizontal;
-moz-box-orient: horizontal;

3、box-direction 定义盒模型内伸缩项目的正序（normal默认值）、倒叙（reverse）

/* firefox */
-moz-box-direction:reverse;
/* chrome、safari、opera */
-webkit-box-direction:reverse;

4、box-pack 对盒子水平富裕空间的管理

/*
  start
  end
  center
  justify
*/
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-o-box-pack: center;
box-pack: center;

5、box-align 对盒子垂直富裕空间的管理

/*
  start
  end
  center
*/
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-o-box-align: center;
box-align: center;

6、box-ordinal-group定义伸缩项目的具体位置（ordinal序数）

.box div:nth-of-type(1){
  /* Safari 和 Chrome */
   -webkit-box-ordinal-group:1;
   /* Firefox */
   -moz-box-ordinal-group:1;
}

7、box-flex定义伸缩项目占空间的份数

.box div:nth-of-type(1){
  /* Safari 和 Chrome */
   -webkit-box-flex:1;
   /* Firefox */
   -moz-box-flex:1;
}

正则表达式

Posted on 2017-12-29

正则表达式（Regular Expression）：字符串匹配的模式（pattern），可以用来检查一个字符串是否含有某种子串。简单说就是一种规则。

\：将一个字符标记为特殊字符。例：‘\n’匹配一个换行符

^：字符串的开始位置。例：/^a/  匹配a字符开始的字符串

$：字符串的结束位置。例：/^ab$/ 匹配只包含"ab"的字符串。

*：匹配前面的子表达式0/n次。等价于{0, }（可有可无）

+：匹配前面的子表达式1/n次。等价于{1, }（至少一次）

?：匹配前面的子表达式0/1次。等价于{0,1}（可有可无）

       当跟在其他限制符后面时，匹配模式是非贪婪模式。例：对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。

{n}：匹配n次，n是非负整数。例：/o{2}/  匹配连续o两次 food-true fold-false

{n,}：匹配最少n次，n是非负整数。

{n,m}：匹配n<次数<m，n是非负整数。

. ：匹配除'\n'以外的所有字符。

x|y：匹配x或y。

[xyz]：字符集合，匹配所包含的任意一个字符。

[^xyz]：负值字符集合，匹配不包含的任意一个字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'

[a-z]：字符范围。匹配指定范围内的任意一个字符。

[^a-z]：负值字符范围。匹配非指定范围内的任意一个字符。

\b：匹配一个单词边界（单词和空格间的位置）。例：‘er\b’可以匹配“never”中的”er“不能匹配”verb“中的“er”。

\B：匹配一个非单词边界（非单词和空格间的位置）。

\d：匹配一个数字字符。等价于[0-9]。

\D：匹配一个非数字字符。等价于[^0-9]。

\f：匹配一个换页符。等价于\x0c和\cL。

\n：匹配一个换行符。等价于 \x0a 和 \cJ。

\r：匹配一个回车符。等价于\x0d和\cM。

\s：匹配任何空白字符（空格、制表符、换页符...）。等价于[\f\n\r\t\v]。

\S：匹配任何非空白字符。等价于[^\f\n\r\t\v]。

\t：匹配一个制表符。

\v：匹配一个垂直制表符。

\w：匹配包含下划线的任何单词字符。等价于[a-z0-9_]

\W：匹配非单词字符。等价于[^a-z0-9_]

\xn：匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，'\x41' 匹配 "A"。'\x041' 则等价于 '\x04' & "1"。正则表达式中可以使用 ASCII 编码。.

\num：匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)\1' 匹配两个连续的相同字符。

\n：标识一个八进制转义值或一个向后引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为向后引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。

\nm：标识一个八进制转义值或一个向后引用。如果 \nm 之前至少有 nm 个获得子表达式，则 nm 为向后引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的向后引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。

\nml：如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。

\un：匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， \u00A9 匹配版权符号 (?)。