基本理念

cnode.js 的公开 api 的列表,以及详情页面,实现一个超小型的项目实战,尽可能的掌握 vue 的项目入门的各项关键配置。 
本系列博文不涉及 vuex 的内容。因为这部分内容属于比较高阶的内容,并且在大多数中小型项目中是没有多大用处的。所以情况是,大多数情况下,你并不需要 vuex。当你需要的时候,你应该有看懂官方文档的水平。如果你没有看懂官方文档的水平,我说再多都是没有什么用的。并且在 vue 的入门文档中涉及这部分内容的话,会给新手徒增烦恼,所以本系列博文不涉及 vuex

基础概念论述

前后端分离开发模式

WEB

  1. 设计师设计页面设计稿
  2. 前端工程师切成 

html+css+js

  1. 后端工程师拿到前端工程师的做好的页面,利用模板引擎或其他技术嵌套进后端代码中,实现项目开发。

这种开发模式的缺点是,哪怕页面出现一点点小的改变,也需要前端人员和后端人员同时协调开发,并且后端人员不能把全部精力放在业务流程以及数据逻辑等方面,还必须和前端人员一起来处理各种兼容问题。开发效率不高,沟通繁琐。

所以,我们推崇前后端分离的开发模式。

  1. 设计师设计页面设计稿
  2. 前端工程师和后端工程师以及其他技术人员约定项目开发接口规范
  3. 后端工程师按照约定接口规范开发相应接口
  4. 前端工程师开发页面,并对接后端接口(可能先期采用假接口)开发页面

与不分离的开发模式相比,对前端技术人员的技术要求高了很多,原先只需要会写静态页面即可,但是现在必须了解如何对接接口,以及其他很多内容。很多十年以上的前端开发人员在学习这些新内容的过程中,崩溃了。

我艹,现在前端开发都这个样子了JS

SPA

single page web application 的缩写。中文翻译为 单页应用程序 或 单页Web应用。更多解释清参看 百度百科:SPAurl

http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace
  • 1

urlhttp://www.fengcms.comindex.html?name=fungleo&old=32

  1.  给页面通过 

GET#mylove/is/world/peaceurl 中的锚点,并不会出现这种行为,因此,几乎所有的 spa 应用都是利用锚点的这个特性来实现路由的转换。以我们的 vue 项目为例,它的本地 url

http://localhost:8080/#/setting/task
  • 1

#

以上理解是我的个人描述,不代表百分百符合标准答案,但这样理解是没有问题的。

RESTful 风格接口

RESTfulgithub 也在主推 GraphQL 这种新的接口风格,但目前国内来说还是 RESTfulRESTful 接口风格之后,会深入的理解这种接口的优缺点,到时候,你自然会去想解决方案,并且在项目中实行新的更好的理念,所以,我这系列的博文,依然采用 http://cnodejs.org/ 网站提供的 RESTful

了解程序开发的都应该知道,我们所做的大多数操作都是对数据库的四格操作 “增删改查” 对应到我们的接口操作分别是:

postdeleteputget

get外的其他方法,没有什么区别,都是一样的。从深层来说包括 get

/api/v1/love 这样的接口,采用 RESTful


get 操作 /api/v1/love/api/v1/lovepost 操作 /api/v1/love/api/v1/love 插入一条新的数据,我们插入的数据,将是JOSN利用对象传输的。get 操作 /api/v1/love/1

我们获取到一个 ID 为 1 的的数据,数据一般为一个对象,里面包含了 1 的各项字段信息。

put 操作 /api/v1/love/1

我们向接口提交了一个新的信息,来修改 ID 为 1 的这条信息

delete 操作 /api/v1/love/1

我们向接口请求,删除 ID 为 1 的这一条数据


/api/v1/love 和 /api/v1/love/1

以上内容均为本人的认知与理解,与标准教科书肯定不一样。但有助于新人简洁明了的理解内容。更多内容,请查看:RESTful API 设计指南 
另外,RESTful 风格也不仅仅只有这几种操作,还有更多的操作。但我们常见的操作,就是这些。就好比我们不需要掌握了男女的全部卫生知识再去做爱一样,我一般崇尚的是,脱掉裤子,just do it now! 我们在不断的实践中,不断的提高我们的技术以及技巧,临渊羡鱼不如退而结网就是这个道理。

vue 是什么,以及我们为什么选择 vue

angular 正在新旧交替,江山未稳,因此我们当时尝试在两个项目中引用不同的技术路线 react 和 vuevue 的学习成本明显比 reactvue

所以,选择的理由特别的简单——只是因为它更简单!

vue

我不管官方的解释是什么,我的解释如下:

为了实现前后端分离的开发理念,开发前端 SPA 项目,实现数据绑定,路由配置,项目编译打包等一系列工作的技术框架

vue 不仅仅是 vue.js 这一个文件,而是围绕 vue.js 配套的一系列的工具。就好比我们说的 linux 不仅仅是 linux

具体如下:

vue.jsVueRouter2webpacknodejsnpmaxiossass-loader

  1.  和 

node-sasselementiviewvue-cli

其他还有很多,我们用到哪边,说哪边。

命令行的重要性

GUI 的图形界面中无法自拔,对于 CLIiview 的 iView Cli

并且,命令行

更好

更快

更强

更装逼

所以,无论如何,你都不应该排斥命令行,还要积极的拥抱它,学习它,掌握它。

shell

我对你的建议如下:

  1. 抛弃 

windows

  1.  操作系统,不管它是什么版本的 

windows

  1. 购买一台 

macbook pro

  1.  没钱购买可以选择 黑苹果 ,可以参考我的系列博文 打造前端MAC工作站以及相关文章索引
  2. 如果不是 

photoshop

  1.  的重度用户,并且想要更深层次的掌握更多内容,请使用 

linux

  1.  系统。

ubuntu

  1.  操作系统还是比较简单上手的。有一定 

linux

  1.  使用经验的同学,建议使用 

arch linux

  1. 除了使用 

atom

  1.  或 

vscode

  1.  这样的现代编辑器,更推荐掌握 

vim

  1.  这样基于

cli

  1. 的编辑器的基本使用。能用到什么样的层次,取决于你自己的需求,相关内容可以参考:世界上最牛的编辑器: Vim系列博文。

最后强调,别问我有关 windows 的问题,我很久没用过 windows 系统,并且关于系统底层的问题,我根本就不知道如何解决。

我说的,你不一定要全部掌握或者理解。但一定要有一个起码的概念。至少,知道我说的大概是一个什么样的玩意儿。

第一篇博文,基本没有涉及到任何代码的部分,但是下面,我们要开始干活儿了。