构建一个全栈web应用的骨架

为什么要去做这种尝试?

前端的开发模式已经在这几年发生了翻天覆地的变化了。现在借助于node和行业著名的几个前端框架可以轻松通吃前后端。当然也有不适用的场景,这里就略过。

全栈

于是乎,随着自己技术的成长,必然会去玩儿,一个人搞定一个web应用,也是很酷的事儿,以前后端开发工程师经常干这事儿,而前端人员大多数人技术面较窄,不过这也不是一成不变的,前端人员也开始往其他方向延伸,技术能力也在不断提升,以后的前端工程师,必会出现越来越多懂后端技术的人。

主要技术栈

  • vue
  • webpack
  • element-UI
  • nodeJS
  • mongoDB

项目结构

项目结构

开发思路梳理

虽然是一个人开发,但是也有一个基本的逻辑,就是还是需要大致分为两个部分来做。一个是前端逻辑,一个是后端逻辑。有点废话了,咳咳…

前端部分,这个对于我来说就相当熟悉了,vue-cli工具,基本可以把项目架构起来。而且可以通过node下的express框架可以轻松的做mock数据,开发效率大大增加。不过也感觉是废话,因为在完全的前后端分离的项目,前端肯定会用mock

后端部分,使用express + moongoDB。在后端开发的时候,单独于项目开发,也可以直接在项目中开发。由于是一个人开发,我觉得没必要独立于该项目,新建一个项目。

统筹部署,假设前端部分和后端逻辑,api接口及数据库操作都已实现,如何部署呢?我们知道,前端部分是会在完成开发的时候,打包成一个静态资源的,我们只需要在后端处理时,设置好静态资源所在的目录,同时被请求是返回index.html即可。在项目中,本地查看,可通过node命令,运行后端入口文件,即可启动整个web应用。

(完)

SQL语言学习笔记

我对SQL的初步认识

  • sql不区分大小写,但是一般约定,对于sql命令使用大写,便于阅读理解。
  • sql是用来对数据库进行操作的语言
  • sql是一种ANSI的标准计算机语言
  • sql使我们有能力对数据库进行访问和处理
  • RDBMS数据库程序(比如 MS Access, SQL Server, MySQL)是sql的基础,没有RDBMS,sql就没玩儿的对象了(通俗理解)
  • sql是比较基础的标准语言,一般服务器端语言都有对sql的封装,而不是直接使用sql语言来做数据库的处理
  • RDBMS的数据存储在被称为表的数据库对象中,sql语言主要的任务是描述要进行处理的位置,以及怎么处理(CURD即增删改查)。

前端知识体系梳理

非常完善的前端知识体系是什么样的?

废话不多说,咱上图! 这是一张相对来说,非常完善的一张关于前端开发知识结构的图,这种图,一般给人的感觉就是,怎么有这么多东西要学啊!!!前端,从入门到放弃 🙁

的确,一个大神级别的前端开发,的确这是必须掌握的知识结构,不仅要求广度,还要求精。作为一个向大神看齐的我,又有超级有能量的好奇心驱使,我已入坑,注定会在coding的世界,越走越远,希望玩得快乐,享受痛苦,不断进步。

我的梳理

首先,我的梳理很个性化,完全是面向自己的,不是面向对象哟,所以,不求严禁,不求完善,只求过得去自己就行。

前端,从代码组成方面来看,主要涉及三种语言HTML,CSS和JavaScript。他们各自的功能为,HTML负责结构化,CSS是表现,JS是行为。随着互联网的发展,为了适应这种发展,前端作为web应用的一个重要组成部分,开始变得越来越重要,因为前端是最贴近用户的,它的性能和表现,直接影响用户的感受。所以,前端的终极目的就是用户的最佳的体验,服务好用户。

  • JavaScript是解释类语言,解析就有效率问题,于是经过竞争,googleV8引擎胜出;
  • JS很灵活,但是对于大型应用,灵活不是一种好事,走在前面的高级JSer们,遇水搭桥,逢山开路,出现了借鉴静态强类型的语言,如C#Java而获得了利器TypeScriptCoffeeScript
  • 随着日益复杂的网页出现,功能要求开始增多,JS操作dom的繁琐,导致开发效率低下,JQuery出现了;
  • web2.0到来,互联网越来越庞大,信息、服务越要越多,技术知道自己需要提前做好准备,于是在这之前,HTML5, css3, ES6到来了;
  • JQuery很锋利,可是随着交互需求升级,JQuery操作dom越来越频繁,导致网页或应用的性能下降,开发效率也开始下降,到了这个口子,优化的需求迫切,于是为了解决这个问题,前端框架实践开始,诞生了很多框架,最后到今天,经过竞争,脱颖而出了Angular, React, Vue三大框架;
  • 开发效率问题,网页或应用性能问题,代码扩展性和维护性问题,问题层出不穷,前辈们理清问题,打造工具,于是grunt, gulp, webpack等工具就问世了;
  • 某位工程师想要开发一款高性能web服务器,经过考虑,比对优缺点,由于JS的特性,V8引擎的性能,node.js诞生;node.js它不仅在web服务器端表现良好,更对前端的开发,起到了很好地辅助作用;
  • 未来的故事,还将继续…

(完)

学习升级,博客来袭

为什么要写博客?

其实,想明白并开始写作,是一个不易的过程。为什么要写博客?这会是首先浮现在你的眼前的问题。写作的目的性很多,不想分析,求同存异来看,大家应该会有一个目的是一致的,就是想通过这种方式来让学习更有效率,更思路清晰,留下一字半句给自己的思考留下足迹。当然,能够帮到他人,是个更好的收获。

为什么要通过github来玩儿博客?

gh-pages是一个有freestyle的地方。相比于其他成熟的博客网站,github-pages没有那么多的条条框框,很自由,适合各种用户,无论你是菜鸟还是大神,都能玩出花样,玩法也很多。菜鸟可以轻松通过这种方式,玩转博客,当然,前提是你拥有一定的web技术知识。So, let’s try.

(完)

php入门笔记1

php印象

昨天晚上花了一点时间,看了一点php的入门知识,由于自己是前端,擅长js,由于php也是弱类型脚本语言所以用来做入门服务器端语言很合适。下面是想到什么写什么,一个初步印象的笔记。

  • Echo跟print的区别是前者可以同时打印多个用逗号隔开的字符串,而后者只能打印一个。另外print_r可以打印数组和对象,r是readable 的意思。

  • Php中除了和js中能用的单行和多行块注释,也可用#号注释。

  • Php中不能使用对象或数组字面量,数组可用array函数来构建,对象则需要通过类来实例化。

  • Php中类的属性方法有私有,公共,受保护的区别。也可在类中声明静态属性和方法。

  • Php是弱类型,所以没有接口的概念。

  • 符号->为对象操作符,可以通过$this加该符号去过去对象的属性和方法。

  • 符号=>是数组里面的,表示键值的对应关系。

  • 变量声明使用$开头加第一个字母为字母或下划线命名,变量有全局,局部之分。php中还有几个超全局变量可用。同时常量使用define 函数来声明。

  • 函数声明方式和js相似,使用function 关键字。内置数组的遍历可使用for循环,也可以用内置的foreach 函数。

  • 数组的操作也提供了很多排序的内置函数。

  • ::符号用于调用类的静态属性和方法

  • 构造函数名为__construct,一般其他语言叫constructor

使用ruby的前期准备工作

ruby号称是程序员的好朋友,由于缺乏了解,对于它的优势,我是不太清楚的,之所以需要这个工具,是因为想要在github上玩一下gh-pages博客,然后就接触到了这个以前只在人们的口中,百度上看到的语言。下面就来说说开箱经过(看了太多手机评测导致的后遗症,哈哈)。

安装ruby

安装方法官方文档提供了多种,非常全面,服务器端、mac系统、windows系统,一应俱全,想要了解全面的可以看官方文档。对于个人系统来说,windows推荐使用rubyInstaller来安装。os x推荐使用homebrew。

mac上安装

brew install ruby
(HomeBrew包管理工具的安装:粘贴命令/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”到终端enter即可)

windows安装

下载rubyInstaller然后执行安装即可

bundler是什么

如果你熟悉node的npm的话,那bundler就是ruby的包管理工具。bundler管理的包,这些包也被取了一个名字叫做gems。注意bundler使用的时候,命令是bundle。

如何安装bundler

使用ruby内置的gem命令来安装:gem install bundler

现在ruby的基本工具已基本准备完毕。

微信小程序编写经验分享

  1. 微信开发者工具:小程序的开发,需要使用微信开发者工具,小程序需要编译才能执行。注意不要文件保存时自动编译。编译是一个比较耗时的过程。这样非常影响开发效率和体验,还是手动编译好;

  2. 数据绑定:小程序是没有数据双向绑定的概念,是单向绑定。要实现双向绑定,可以利用事件;

  3. 阻止事件冒泡。小程序中有冒泡事件和非冒泡事件的概念。bind开头的事件是冒泡事件,catch开头的事件是非冒泡事件;

  4. 事件绑定:a.事件绑定如何往事件处理函数中传值?小程序在事件处理中会传入一个event对象,可通过event对象找到target(或currentTarget)下面的dataset。dataset对应标签上属性data-*里指向的值;b.event对象下的target和currentTarget的区别。target简单的说是触发事件的源组件;currentTarge是指事件绑定的当前组件。

  5. 跳转:navigateTo跳转是跳转到一个新页面,页面栈的情况是push一个页面入栈,但对上一个页面不做处理。redirectTo跳转到一个新页面,页面栈的情况是push一个页面入栈,但会干掉上一个页面。navigateBack跳转是从当前这个页面在页面栈的位置中回退到上一个页面。reLaunch跳转是把所有页面栈清掉,在push一个新页面入栈。

  6. 组件化(小程序中叫模板):关键字是template标签和引入标签import。

  7. 可以使用parseInt等api吗? 可以使用setTimeout等api吗? 都可以

  8. 如何获取url中的参数?onLoad函数中自带有个options参数,这个options就是处理好的url参数对象。

  9. es6支持度,暂时不支持for of的object.entries方法。

  10. 对于富文本的解析,可以使用wxParse这个开源工具。其原理是将富文本转化为一个json数据格式,再通过模板template进行渲染。

  11. 改变checkbox的大小,需要使用transform来做缩放。

markdown语法

什么是markdown语法

markdown是一种标记语言,他之所以出现,是因为在互联网时代,我们需要一种简单易用且能够将普通文本转化为具有一定样式和格式的内容。

好处

  • 语法简洁明了,易学习
  • 功能比纯文本强,更美观

用途

  • 写博客
  • 编写说明文档
  • 编辑器内置工具,可转化为ppt,word等文档
  • 编辑你所想内容(越来越多的编辑器支持markdown,学会它让你更好的表达自己)

常用语法

// #可用于表达`h1-h6`文字的样式
# 我是h1标题
###### 我是h6标题

我是h1标题

###### 我是h6标题

**强调**

强调


*斜体*

斜体


// 用```将需要块级展示的内容包围起来即可
块级内容


`行级内容`

行级内容


> 引用内容

引用内容


[链接](www.baidu.com)

链接


![图片](https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=3202431518,1170075295&fm=85&s=7A80E10954A446BECEAC79D40100D0A0)

图片

* 无序列表
* 无序列表
* 无序列表
  • 无序列表
  • 无序列表
  • 无序列表

1. 有序列表
2. 有序列表
3. 有序列表
  1. 有序列表
  2. 有序列表
  3. 有序列表

git常用命令集

git拉取提交(一般开发流程)

1. 克隆版本,切换到分支,切换创建本地分支

git clone .......
git checkout develop
git checkout -b dev

2.提交

git add .(较高版本 git add -A) // 添加改动文件
git commit -m '备注' // 提交到目前分支(自己建的本地分支)
git checkout develop // 切换到develop分支
git merge dev // 将dev本地分支的内容merge到develop分支
git push origin develop:develop // push到远程develop分支

3. 拉取

git checkout develop  // 切换到develop分支
git pull origin develop // 拉取更新 低版本git pull就可以
git checkout dev // 切换回dev分支
git rebase develop // 将develop分支的内容同步到dev分支

4.版本穿梭

git reflog // 版本历史查看
git reset --hard // 加上版本号,就可以切换版本了

5. 查看当前分支状态

git status 查看当前状态 
6.拉取其他分支的某个点
git cherry-pick // 加上版本号,就行 有冲突就手动解决冲突

7. 删除分支

git branch -D ..