独立开发者训练营现在报名,享受优惠立即启程

博客

Vue:设计一个经得起实战的应用项目结构


图:Mathieu L.B

开发一个应用最难的事情就是给各种东西起名字,还有就是用什么方法组织各种东西的文件。今天跟大伙分享一个经过我实践之后的一个 Vue 项目结构。Vue 是一个前端应用框架,它只给我们制造零部件的方法与材料,但是并没告诉我们项目如何组织。好处是这很自由,怎么整都行,坏处也是很自由,因为我们自己要做很多决定,每次决定都会消费一点脑力,所以一开始你会很头痛。

Node.js 服务端应用开发 #8:服务端与客户端交换数据

客户端与服务端之间一般会用 HTTP 这种应用协议沟通交流。 HTTP 协议提供了一些方法,比如 GET(获取),POST(发布),PUT(覆盖),PATCH(修正) 还有 DELETE(删除)都是 HTTP 里的一些方法。在服务端定义服务接口的时候,可以设置接口支持用哪一种 HTTP 的方法使用它。

客户端与服务端之间最常用的交换数据的方法就是通过请求与响应,客户端向服务端发出请求,服务端可以做出响应。客户端可以向服务端请求它需要的数据,或者把客户端上的数据发给服务端。服务端根据请求的地址可以决定要去做什么事情,比如它可以给客户端准备一些数据,然后发给客户端。

请求与响应主要由两部分组成,头部(Header)与主体(Body)。请求可以把要给服务端的数据放到请求的主体里面,请求的头部里面会包含请求相关的一些信息,比如服务端给用户签发的令牌就可以放在请求的头部里面。服务端给客户端做出的响应里面,可以把客户端需要的数据放在响应的主体里面,然后可以通过响应的头部信息告诉客户端一些额外的事情,比如响应的数据是什么格式的。

Node.js 服务端应用开发 #7:应用框架(Express.js)

图:Reijo Palmiste

我们要开发一个应用,一般都不太会从零开始做,可以找一些库(Library),或者基于框架(Framework)或者系统(System)来做。库里面一般提供的就是一些零部件,框架里边儿除了提供应用需要的一些零部件以外,它还会给我们定一些规矩,帮我们做出一些决定,还会提供一套开发的方法与流程。 系统,就是一个现成的能用的东西,比如常见的就是内容管理系统(CMS)。它们三个的关系大概是这样的,在框架里边儿可能会用到一些库里面边儿的零部件,一个系统可能是基于某个应用框架做出来的。

九年

图:Alexey Kuvaldin

今年太特别了,过得飞快,年夜饭的香味与内心的恐惧仿佛都还没有散尽。今年增长的除了年纪,还有几撮白发。我曾经很自信地说自己不会染头发,但现在却怕父母看见了会多想。今天是宁皓网第九个年头,当年那个小么子,已经成 “蜀黍” 了。

Node.js 服务端应用开发 #6:管理应用的包(Package)

JavaScript 社区里面提供了很多现成的包,包里面都提供了一些功能或者工具,我们可以直接把它们用在自己的项目里,这样很多功能我们就不用自个儿去开发了。管理项目里使用的包会用到一个包管理工具叫 npm。后面我们会在项目里用到一些包,所以下面可以先了解一下包与包管理到底是怎么一回事儿。

包(Package)

把一些东西打成一个包(Package),这个包可以提供一些功能,然后在其它地方可以使用这个包提供的功能,这个包里面主要就是一些用 JavaScript 语言写的代码文件。比如在我们自己开发的应用里,可以安装一些包,然后使用它们里面提供的功能。可以把它们想成是一些零部件,或者功能模块。

Node.js 服务端应用开发 #5:网络基础

前面我们用 Node.js 做了一个 Web 服务器,启动以后大家就可以通过网络使用这个 Web 服务了。这就扯出来一些跟网络相关的概念,地址里的 HTTP 是什么意思,Localhost 是啥玩意,端口号是又干什么用的。这一章我们就来了解一点网络的基础,这会有助于我们以后开发服务端的应用。

传输协议(HTTP)

协议(Protocol)是网络上的设备之间签订的合同,大家都要遵守、履行这个合同才可以正常沟通、交流、合作。也可以把协议想成是一套协调商议出来的方法,比如先干什么,再干什么,怎么干等等,大家可以用这套方法来相互协作,交换数据。

HTTP(HyperText Transfer Protocol) 就是一种传输数据用的协议。客户端与服务端,服务端与服务端之间都可以通过这种协议传输数据。我们之前搭建了一个 Web 服务,这个服务遵照了 HTTP 协议的要求,所以客户端可以使用 HTTP 这种协议使用我们的 Web 服务。

Node.js 服务端应用开发 #4:创建并运行一个 Web 服务器

服务端应用在服务器上运行,提供了一些服务,比如发布内容,上传文件的服务。如果想让大家可以通过网络使用这些服务,在这台服务器上就必须要运行一个 Web 服务器。下面我们就来看看,如何写几行代码,创建一个 Web 服务器,提供一个简单的服务。

准备

任务:准备项目<web-server>

在项目里,项目所在目录的下面,基于 develop 分支,创建并且切换到一个新的分支,名字叫 web-server。

git checkout -b web-server

语法

require()

Node.js 里面自带了很多模块,它们都提供了不同的功能,在我们的项目里可以直接使用这些模块提供的功能。首先要在想在使用这些模块的文件里导入它们,导入模块的时候用的就是 require() 这个函数,一般我们还会给导入的模块起个名字。

Node.js 服务端应用开发 #3:JavaScript 程序设计语言基础

开发语言(程序语言)是一种写作语言,不同的开发语言都有各自的书写方法,如果你想用某种开发语言表达自己的想法,开发应用,就需要了解这种语言规定的书写方法,也就是语法。

一开始,不推荐大家在学习书写方法这种事儿上花太多的时间,只需要了解一些基本的写法就可以了,剩下的可以在实际工作中学习,带着需求去学习,效率会更高。不同的开发语言虽然各有不同,但很多概念都是通用的,所以只要学会其中一门开发语言,再去学习其它的语言就很容易了。

在这一章里,我们先做一些基础的语言训练,了解一下在任何开发语言中都可能会经常出现的一些概念,这样再去做后面的任务就会轻松很多。

语言训练场地

现在我们要学习的是 JavaScript 这种开发语言,找个可以运行这种语言的环境就可以学习它了。浏览器里都带着一个 JavaScript 引擎,所以可以在浏览器上学习这门语言。 之前我们在本地电脑上安装过一个 Node.js,所以也可以在这个环境里学习 JavaScript 这门开发语言。

如果选择在浏览器上学习,推荐使用 Chrome 浏览器,打开浏览器以后,再打开它的开发者工具,然后打开 Console(控制台)这个选项卡,这样就可以直接在控制台上执行 JavaScript 代码,而且可以立即得到执行的结果。

Node.js 服务端应用开发 #2:学会使用源代码管理工具(Git)

虽然我们现在只写了一个两行代码的小应用,它现在只能说 “hello ~”。不过可以想像的是,在未来我们的应用可能会包含很多行代码,放在许多文件里。所以我们需要一种管理这些源代码的工具还有方法,Git 是我们选择要用的源代码管理工具。

对于开发的项目,我们可以说要对这个项目做 “源代码管理”,或者也可以说要做 “版本控制”,它们指的是一个意思。做源代码管理或版本控制用的工具叫源代码管理工具(SCM),或者叫版本控制系统(VCS),它们指的是一种东西,Git 就是其中一种可以做源代码管理或版本控制用的工具。

我们对项目对了一些修改,比如添加了一个小功能,修复了某个 Bug 等等,你可能希望要保存一下项目当前的这个状态,这样以后遇到问题的时候,我们可以把项目恢复到保存的这个状态。如果不用源代理管理工具,要保存项目的当前状态,可以复制一份整个项目,然后重命名一下这个目录,以后出了问题,想要恢复项目的时候,可以用这个复制品替代正在开发的项目。

Vue 3 快速上手指南

先准备一下,搭建一个 Vue 应用的开发环境,创建并且运行一个 Vue 项目,然后理解 Vue 的组件。接着我们就准备一个服务端应用接口,学会在 Vue 应用里请求使用服务端应用接口获取应用需要的数据。再去了解怎么在 Vue 里创建路由器,定义应用的路由(Vue Router),最后要学会一套应用状态的管理方法(Vuex ),最终我们会准备好一个能够应对复杂应用的应用结构。

第一章:启动与预热

前置知识

学习使用 Vue 开发前端应用或者小程序,前置知识就是最基本的 Web 老三样:HTML,CSS 与 JavaScript。如果您打算成为一名开始者,强烈推荐先学它们仨,最长久,最实用,可以用它们做很多事情。只需要学会基础即可,不用学太多,理解了核心概念以后,可以随用随学。

Vue 做的就是应用的界面,界面的内容结构用的就是 HTML  组织出来的。你要知道一块界面如何用 HTML 组织好。HTML 提供了很多标签(元素),不同的标签在浏览器上会呈现出不同的样子,标签也可以称为元素。用 CSS 可以设计界面的样式,比如元素的定位,长度,宽度,排版,背景,边框,字号,文字颜色等等。



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

13504
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点