centos 7 安装及启动 Mongodb

Mongodb 征战之旅 下载 mongodb 访问如下地址: https://www.mongodb.com/download-center#community 点击 Linux 版本进行下载,下拉框中选中 RHEL 7 Linux 64-bit x64 复制 Download 按钮旁边的下载地址。在 putty 中输入如下命令行进行下载。 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.0.0.tgz 解压文件 tar -zxvf mongodb-linux-x86_64-rhel70-4.0.0.tgz 解...

2018
07-08

putty 终端连接 centos 7 虚拟机

在一切(网络)都正常的情况下,你只需要像连接云服务器那样连接就好了。 第一步,通过 ifconfig 命令 或者 ip addr 命令查看 centos 虚拟机的 ip 地址。 第二步:在宿主机打开 putth 输入这个 ip 地址(192.168.108.129),就可以连接了。 首次会看到如下提示:直接点是就行。 同样的输入账号和密码就可以进到熟悉的页面了。 我的虚拟机使用的是 NAT (系统默认的模式),但安装完系统后还是不能访问外...

2018
07-06

centos 7 安装 Node.js

最近用 vue2、koa2 做一个网站,然后部署到服务器中。第一步就是得安装一个 Node.js 的环境。在 Window 中安装非常简单,直接官网中下载双击安装包进行安装就可以了。而到了 centos 7 中就不一样了,不过依然还是简单的几步。 本例中我用的是 centos 7 虚拟机进行演示。跟真实环境应该没什么差别。 第一步:从官方中下载需要的版本。 第二步:在centos 中 执行如下命令,下载 Node.js wget https://nodej...

2018
07-05

VMware Workstation Pro 安装完 centos 7 虚拟机后无法 ping 外网

在 vmware 中安装完 centos 7 后无法访问或者 ping 通过外网是常有的事。并且有时候解决问题的方法也很简单,只要你知道原因,而当你不知道原因时,单凭试一试很有可能会把原本简单的问题复杂化。比如这篇文章即将要分享的就是这样。所以本文并有什么技术含量,只是用于记录此时此刻踩过的坑。 安装完 vmware 以及 centos7 后默认是 NAT 模式,默认为这种模式本身没什么问题,问题是当我们安装完 centos 7 ...

2018
07-05

JavaScript 技巧大全

前言 这篇文章不会分享很高深的问题,只是把平时在前端开发中很常用到的东西整理出来,让经历过的东西有个家。 类型判断 console.log(Object.prototype.toString.call([1,2])); // [object Array] console.log(Object.prototype.toString.call({})); // [object Object] console.log(Object.prototype.toString.call("Hellow")); // [object String] console.log(Object.prototype...

2018
07-02

AngularJS 指令实现自定义下拉框

前言 AngularJS 的时代已经接近尾,但依然使用它的项目还是不计其数,下面就来做一个自定义的下拉框。 效果走一波: 这个下拉框可以实现: 禁用下拉框 禁用指定下拉项 选中高亮 是否默认选中第一个 是否要显示“全部”一项 自定义下拉框 样式代码 ul{ padding: 0; margin:0; list-style:none; } .dj-select-box{ position: relative; width: 200px; cursor: pointe...

2018
06-30

前端面页性能优化

表单性能优化 HTML 代码 <form id="my-form" action=""> <input type="text" name="name"> <input type="password" name="password"> </form> <input id="btn" type="button" value="获取表单数据"/> JavaScript 代码 var myForm = document.getElementById("my-form"); var name,password; btn.onclick = function(){ name = myForm["name"].va...

2018
06-16

div+css 技巧大全

121212 css 计数 css 代码 .choose{ counter-reset:fruit; } .choose input:checked{ counter-increment: fruit; } .count:before{ content:counter(fruit); } HTML 代码 <div class="choose"> <label><input type="checkbox">1</label> <label><input type="checkbox">2</label> </div> <p><span class="count...

2018
06-16

vue2+koa2 图片上传功能实现

前言 对于一个博客网站来说附件上传功能可以说是不可或缺,特别是图片上传功能,谁都不愿意看到一个文字满天飞,图片一张都没的博客。这样会让别人的阅读欲望大打折扣。本文主要是分享一下 前端 vue2 加后端 koa2 实现的图片上传功能,没有太多多余的代码,直接把实战中的主要代码呈上,希望你喜欢。 准备工作 需要了解 formDate 需要了解 axios(网络通信库,简单的理解就是请求) 需要了解 koa-multer...

2018
06-10

判断对象是否含有某个属性

前言 这其实没什么好说的,本文章只作记录。各位看官可以作选择性阅读。 hasOwnProperty() 方法 const obj = { name:"前端技术", age:"3年2月20日" } console.log(obj.hasOwnProperty("name")); // true 不管对象的属性是否可枚举,hasOwnProperty() 方法都能检测到。 注意: 如果我们使用的话,有一种情况是不可用的,就是当我们像下面通过 Object.create(null,{……}) 这...

2018
06-06

JavaScript 中的可枚举属性与继承的可枚举属性解密

前言 这篇文章主要是分享一下什么是可枚举属性和继承属性,可枚举属性和继承属性这两个词估计你已经在网上看到无数次了,但网上对于这两个东西的解释很多都不是很详细,一笔带过的居多,特别是继承属性的介绍。基本都是只见【继承属性】这四个字眼,却极少看到有关这个名词的相关介绍,所以才有了这篇文章。 可枚举属性 什么才算是可枚举属性?我们不妨回想一下,在平时的开发中我们是如何定义一个对象...

2018
06-05

原生 JavaScript 做一个接地气的富文本编辑器

前言 这里不分享富文本编辑器都有哪些,哪些富文本编辑好用,而是简单地分享一下如何做一个比较接地气的而已很简单但很实用的富文本编辑器。当然这里也不是把这个富文本编辑器做很多强大,因为也没必要,并且也不是一天两天可以做得完的,为此是这里只是想通过一个简单的例子来说明如何做一个更加贴心的富文本编辑器。 在开始之前我们先来看一看效果图: 富文本编辑器之旅 这里我先把代码贴出来,是好...

2018
05-30

字符串和数组方法整理

前言 字符串和数组两个所涉及的方法也不是很多,但不知道为什么,需要用某些方法的时候脑子里竟然不知道对应的方法叫什么,或者知道这个方法怎么写,但里面的参数,以及返回值,还是是很清楚。所在对于我自己来说,有必要整理出来。 字符串方法 startsWith() endsWith() includes() 这三个方法用法简单: const str = "hello yunkus.com!" const res = str.startsWith("hello"); // true con...

2018
05-25

window name.bat 批量处理文件/文件夹

前言 .bat 后缀 ,双击后就可执行 .bat 里面的命令行,做成 .bat 文件批处理有时候可以大大的节省我们的宝贵时间,减少重复工作。 现在我们先来了解下 window 里的批量文件处理 *.bat 文件的基本结构: @echo off 不显示执行过程中的命令行,如果前面不带 @ 那么就会把自己(echo off)显示出来,其它的命令行不显示。这样就可以保证命令行执行窗口的整洁 pause 暂停,也就是我们双击 .bat 文件后命令执...

2018
05-21

Vue2 插件开发 Toast

前言 Vue 插件开发第一篇,这篇来做个简单的例子,Toast 弹窗提示,如果不知道如何制作 Vue 插件,可以看这里《Vue 插件编写的完整套路》。 基本文件结构 src ├── components │ ├── DetailPost.vue │ ├── EditPost.vue │ └── Home.vue ├── assets │ └── plugins │ └── toast.css ├── plugins │ └── Toast.js ├── router │ └── index.js ├── ...

2018
05-09

pasition.js 一个很炫酷的 path 过渡动画类库

前言 动画过渡给我们带来的视觉冲击不用我多说,最近无意中发现了一个 path 过渡动画的类库 pasition.js ,pasition.js 由腾讯AlloyTeam正式发布,在学习这个类库过程中发现网上的文章绝大多数都是一个样,只是官方的一个拷贝,为此,我觉得有必会把一些东西说明白。 在这里就不把官方的介绍文章拷贝一份了,毕竟时间宝贵,不过你可以通过这个网址https://github.com/AlloyTeam/pasition#usage欣赏一下,...

2018
05-08

moment.js 一个近乎完美的日期类库

前言 其实这篇文章没什么可分享的,不是写给前端大牛,当然本博客也没有这种魅力能引来前端大牛。所以这篇文章是写给前端小白的。 怎么定义小白,其实像这种也不好说,我们不能拿在前端的工作年限来划分,因为很多人虽然在前端打拼了好多年,但水平依旧一般般,比如:我。 差点又跑题了,还是回到 momentjs 的介绍上来吧! 官方网址:http://momentjs.com/ 为了让这篇文章看起来不那么寒酸,在这里截个图...

2018
05-07

Vue $nextTick 解密

前言 Vue $nextTick 的用法在网上可以搜索出一大堆,基本都是大同小异,把官方的话搬过来改改,或者把 Vue $nextTick 的源码实现分析一遍,然后,然后你就很容易被带走了,在不归路上起走起远。在这里没有针对谁,也不是说分析源码没有,或者没必要。我觉得源码分析分析到了点上就 OK,点到为止,不然很容易让初学者找不到北,越想越多,还没开始学他就已经想跑路了。 关于 $nextTick 比如官方这么一句话...

2018
05-06

JavaScript 事件循环运行机制解密

前言 JavaScript 是单线程,这个地球人都知道,但 JavaScript 却可以做到类似多线程的感觉,这是怎么实现的呢,比如:你的程序中通过 ajax 发起了一个请求,此时你会发现,即使请求还没有返回结果,程序竟然继续往下执行了,JavaScript 的魅力就在于此,虽然我是单线程,但我可以让你有“多线程”的感觉。 上面说到的“多线程”的感觉其实就是通过 JavaScript 的事件循环机制实现的。这也就是事件循环在 Java...

2018
05-03

Vue 里的十万个为什么

前言 正如标题所说的,本文主要是分享一些关于 Vue 中的为为什么,但标题中的十万个有点夸张了,不过这也不重要,重要的是本文会持续更新,把 Vue 中的一些容易产生疑问的知识点收录进来。 vue-cli 创建的项目为什么会有两个 id=”app”? index.html是html文件的模板,将来启动项目后要把动态生成的模板都会放在id为app这个div中。 在App.vue中也有一个id为app的div,这并不冲突,可以看下m...

2018
04-30

Github 仓库入门:代码上传与管理

前言 上传一些项目到 Github 已经成为了程序员的一份副业了,上传代码到 Github 仓库不仅仅只是为了分享,更重要的是让自己的代码有一个归宿,也大大地方便了自己管理代码。这篇文章不分享什么有用的技术,只想默默地分享下怎么我们的代码上传到 Github 仓库,有用收藏,无用勿喷。 首先要想有一个仓库,你先得有个 Github 帐号,如果还没有,那就偷偷打开 https://github.com/,我不会笑你的,因为虽然...

2018
04-25

koa 2 开始

前言 koa 2 是一个基于 Node.js 开发的 web 框架,跟 Express 作用差不多,也是同一个团队打造的,只不过 koa 使用了更加新的语法(ES6),去掉了重复繁琐的回调函数嵌套,你可以使用,async 配合 await 来实现异步调用的同步写法,并且还极大地提升常用错误处理效率。这就让我们可以使用新语法来完成我们的工作。 官方网址:http://koajs.com/ koa 2 安装 koa 2 的安装有两种方法,一种是按照官方给出...

2018
04-22

VMware Workstation Pro 安装虚拟机全程记录

前言 首先,为什么会有这篇文章?原因是我想学学 Linux ,所以就用起了虚拟机来练手。而 虚拟机的使用又基本离不开 VMware Workstation ,所以本文就诞生了。不篇文章没有什么技术含量,都是一些只是用来说明过程的截图。本文文字很少,图片居多,因为想让你看得更明白。好下面我们开始吧! VMware Workstation Pro 安装 说明到安装,肯定得先下载, 官方下载地址:https://www.centos.org/ 官方下载页...

2018
04-17

Vue2 实现代码高亮功能

前言 本来这是一个很简单的问题,直接引入第三方插件,然后安装第三方插件的教程写几行代码就可以了,但这是理想的状态,在实际开发中,肯定会遇到各种情况,导致代码没有亮度。 基于 highlight.js 实现 安装 highlinght.js npm install highlight.js 下面我们先来基本按照 highlight.js 官方教程来实践一下。 引入 js 库 highlight.js 和样式表 github.css,官方提供了很多种主题,所有的主题样式文...

2018
04-15

Vue2+Express 项目开发环境搭建

前言 之前分享过一篇《Vue+Express+MongoDB 搭建极简版个人博客(增删改查)》,但没有怎么细说如何搭建 Vue+Express 开发环境。所以在这里就分享下。也算是一个记录吧! Vue+Express 项目开发环境搭建之旅 首先我们依次执行如下命令行, 安装 vue 环境 // 安装 vue-cli 脚手架 npm install -g vue-cli // 创建并初始化一个项目目录 vue init webpack myapp // 切换到项目目录 cd myapp // 安...

2018
04-12

ejs+Egg.js+MongoDB 搭建极简版个人博客(增删改查)

前言 上一篇博文中分享了Vue+Express+MongoDB 搭建极简版个人博客(增删改查),从中接触到了 Egg.js 所以也顺便把 Egg.js 也先简单地玩一下,同样的,接下来要展示的示例也是数据的增删改查,非常地简单,只是想通过这些简单的过程来粗略地认识下 Egg.js。 个人博客搭建之旅 这个也没什么好说的,直接进入主题。 涉及到的技术栈: Egg.js MongoDB mongoose ejs 文件结构 ├── app │ ├── controll...

2018
04-10

Vue2+Express+MongoDB 搭建极简版个人博客(增删改查)

前言 这个示例没有过多的修饰,没有好看的界面,只是从功能实现出发,不保证好看,但保证能用,这个示例通过 vue+express+ mongodb 搭建极简版个人博客,实现博客文章管理中简单的增删改查。 个人博客搭建之旅 简单的文件结构 ├── server │ ├── modules │ │ └── index.js // mongooes 模型 │ ├── api.js // 后台的所有接器都放在这里 │ ├── db.js // 数据库连接信息...

2018
04-08

Vue2 vuex 状态管理详解

前言 在 Vue 中有一个统一管理状态的地方,没错它就是将要出场的 vuex ,vuex 是用来管理状态的,状态是什么?说得接地气点就是一些变量,这些变量可以通过特定的方式在全局中调用,让不同组件之间的数据通信变得如鱼得水。 vuex 状态管理之旅 vuex 是什么 官方有这么一小段话: 官方定义 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...

2018
04-01

Vue2 父子组件通信的奥秘

前言 组件通信,在 Vue 中非常地常见,我们必需得会,不仅仅如,我们还得会父子组件间通信的各种套路,所以本文要分享的就是这个,一步一步来解开父子组件通信的奥秘。 父子组件通信之旅 说起父子组件之间的数据父互,我想你脑中已经有了不二仁选,比如在父组件中添加属性来跟子组件进行单向数据传递,并在子组件中通过props 来接收。这种方式接收到的数据你不能直接修改,不然会毫不客气地给你报错 ...

2018
03-28

link 和 @import 引入样式表你真的了解吗?

前言 样式表的引入相信你已经不陌生,link 姿势引入你早已用得炉火纯青,虽然这样,但关于 link 和 import 之间的关系或者说区别你又知道多少?这篇文章就是要把它们之间的细微差别给挑出来,让你过目的。 link 是 html 中的语法,而 import 是样式表中的语法,两者虽然作用一样,但使用的场景有所不同。 还有一个就是加载时机的不同,如果 import 是写在样式表中的,那么 impot 命令就会等到父样式表加...

2018
03-26