用一个例子理解 ES6 的 export/import 用法

使用了一段时间的 Vue.js 以后,其中有大量的 ES6 的 export/import 用法,如

import axios from 'axios';
import Home from '../views/Home.vue';
export default {
  data() { .... }

因为目前对 ES6 的 export/import 用法是一知半解的,所以基本上都是基于 vue-cli 创建的项目上依葫芦画瓢,更是不太理解 vue 的项目是如何由 main.js -> App.vue 把所有的 router, views, 和 components 串联起来的。为了进一步理清 Vue.js 项目的初步运行机制,现在开始着手试图通过一个例子来尽可能多的理解 ES6 的 export/import 用法。

我不是标题党,所以不可能命名如:理解 export/import 一篇就够了,全网最全诸如此类的。且本人博客主要是记录自己学习过程的,而非为了招人眼球。所以尽力吧,在一个代码例子中尽可能多的展示 export/import 的用法,为不增加代码的复杂性,有些技巧在代码后进行解释。 阅读全文 >>

类别: Web/JS. 标签: . 阅读(8). 评论(0) »

Vue.js 项目使用 vue-prism-editor 语法高亮与编辑器

记录一下在 Vue.js 项目中使用 vue-prism-editor 进行语法高亮显示代码,并兼具代码编辑功能。JavaScript 中有几个比较典型的语法高亮显示的代码库,例如 SHJS, SyntaxHighlighter, Rainbow,   highlight.js。本博客曾经使用过 SyntaxHighlighter 来显示日志中的示例代码,现今所采用的是基于 PHP 的 Crayon Syntax Highlighter。除了只为了高亮显示代码外,有时候还需处理在线编辑代码,许多年前试用过 CodeMirror, 而今天要上手 Prism.js 也能够支持代码编辑。 

官方 Demo: prism-editor.netlify.com
Codesandbox:  https://codesandbox.io/s/61yrlnlnmn

为了给 Vue.js 项目提供方便,有人专门做了一个 Vue.js 的插件 vue-prism-editor,本文直接使用该插件,而非直接使用 Prism.js。并且项目蓝本用 @vue/cli 4.4.6 的命令

$ vue create vue-prism-editor-demo

创建的,创建过程可参考 Flask 和 Vue.js 开发及整合部署实例创建 Vue 项目一节,此文简单些,就只选择 default (babel, eslint) 默认项来创建 阅读全文 >>

类别: Vue.js. 标签: . 阅读(6). 评论(0) »

Flask, Vue.js 中集成 Bootstrap/BootstrapVue

紧接上一篇 Flask 和 Vue.js 开发及整合部署实例,来体验一下它们与 Bootstrap/BootstrapVue 的集成。漂亮的网站少不得一个好的 CSS 框架,现在有许许多的 CSS 框架可选,纯 CSS 的, 轻量级的, 含 JS 的 CSS 框架,如 Pure, Bulma, Spectre, 国产的 Element 等。而我总觉得 Bootstrap 更是五臟俱全,像 Element 专为 Vue.js 打造的一样,Bootstrap 也有 BootstrpVue 那样一个结晶品。

本文准确的内容应该是关于 Vue.js 与 Bootstrap/BootstrapVue 的话题,与 Flask 没什么事,不过这里呢,还是强拉上 Flask, 由 Flask 的 API 来产生一些数据。

同样是阅读 Flask和Vue.js构建全栈单页面web应用【通过Flask开发RESTful API】的一个实践品。本篇基于 Flask 和 Vue.js 开发及整合部署实例 中的步骤建立的项目 flask-vue-app,方便起见,用了一个新项目名称 flask-vue-bootstrap。记得我们为 Flask 和 Vue.js 分别建立了 backend  和 frontend 两个子项目。 阅读全文 >>

类别: Web/JS. 标签: , , . 阅读(20). 评论(1) »

谁说 HTTP GET 就不能通过 Body 来发送数据呢?

当我们被问及 HTTP 的 GET 与 POST 两种请求方式的区别的时候,很多答案是说 GET 的数据须通过 URL 以 Query Parameter 来传送,而 POST 可以通过请求体来发送数据,所以因 URL 的受限,往往 GET 无法发送太多的字符。这个回答好比在启用了 HTTPS 时,GET 请求 URL 中的参数仍然是明文传输的一样。

GET 果真不能通过 Request Body 来传送数据吗?非也。如此想法多半是因循着网页中 form 的 method 属性只有 get 与 post 两种而来。因为把 form 的 method 设置为 post, 表单数据会放在 body 中,而 method 为 get(默认值) 时, 提交时浏览器会把表单中的字符拼接到 action 的 URL 后作为 query parameter 传送。于是乎就有了这么一种假像:HTTP GET 必须通过 URL 的查询参数来发送数据。

其实 HTTP 规范并未规定说 GET 就不能发送 body 数据,在 RFC GET 中只是说

The GET method means retrieve whatever information (in the form of an entity) is identified by the Request-URI.

只是说 GET 意味着通过 URI 来识别资源。

我也是本着传统上对 GET 与 POST 区别的误解很多年,今天突然意识到 GET 应该可以使用 body, 况且 HTTP 本身是一个纯文本的协议。没有测试就没有 100% 的发言权,所以做了如下的测试 阅读全文 >>

类别: Web/JS. 标签: , , . 阅读(27,485). 评论(20) »

如果要给 RESTful 每种 HTTP Method 类型指示一种颜色

RESTful 时需要考虑每种 HTTP Method 操作的业务含义,再也不是 GET 使用 URL, POST 提交表单这样简单的区别。http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html 定义有 GET, POST, PUT, HEAD, DELETE, PATCH, OPTIONS, TRACE, CONNECT 九种类型的 HTTP Method。

关于它们可能针对的业务含义就不多说了,而是如果要对每一种操作方法赋予一个颜色应该怎么去对应呢,比如一般 GET 不会有边际效应的操作可以选择绿色,或者蓝色。幸好我也不用多想,这里参考了 Swagger 的颜色方案,它支持除 OPTIONS, TRACE 和 CONNECT 之外的颜色配置,其实我也没用过这两种方法。

从 Play2 Swagger 中截图如下: 阅读全文 >>

类别: Web/JS. 标签: , , . 阅读(228). 评论(0) »

Chrome 扩展开发,定制多功能框(omnibox)

原来一直想着用完整的 Web 应用或 GUI 来做些增强效率的工具集,其实我们每天打交道的浏览器,进行下扩展就能好好的利用。粗略对比了下 Chrome 和 Firefox 的插件系统,Chrome 的插件开发应该要比 Firefox 的简单,无需引用什么新的概念,像 XUL。

例如,想实现一下 omnibox,即 Chrome 的全功能框(地址栏),想要地址栏进入自定的 Unmi 模式,输入关键字让 google 去本站查询,或是输入 tag, category 直接进入本站的相关 tag, category 日志列表,在当前浏览器的 Tab 中打开目的页面。

比如在地址栏上输入关键字 "u>", 然后按空格或 Tab 键就进入到 Unmi 模式,如图

unmi_omnibox

下面是完整开发步骤 阅读全文 >>

类别: Web/JS. 标签: , . 阅读(257). 评论(0) »

AngularJS HelloWorld

经历过一个使用 Backbone.js 的项目,把 Backbone.js 也弄得七七八八了,关键是它比较容易理解。最近接触一个使用了 AngularJS 的项目,乍一看那可是两头雾水,它是一个 MVW(Model - View - Whatever) 型的 Javascript 框架。它与 Backbone.js 相比门槛就要高些了,我的第一感觉。一般都说 MVC,AngularJS 引入个 W(Whatever) 概念来意味就更深远了。

AngularJS 抛却了传统的 Javascript 的操作理念,不再是 Dom 上绑定事件,触发事件,操作 Dom 这样的思维。它在 HTML 代码中的表现就是那些 ng-* 属性,以及 {{...}} 括起来的 AngularJS 表达式。一个简单的操作甚至不需要写一行 Javascript 代码,在 AngularJS 的首页就有几个基本的例子,我体验了类似第一个例子,大概是这样子的 阅读全文 >>

类别: Web/JS. 标签: , . 阅读(331). 评论(0) »

Backbone.js 使用 Collection

在前面我们的 Backbone.js 用上了 Model, 但绝大数的情况下我们处理的都是一批的 Model 数据列表,所以需要有一个 Collection 来容纳 Model, 就像 Java 里最常用的 List。

声明 Collection 时需要指定他处理的 Model 类型,也就是个泛型参数,如我们这样定义 Collection:

然后就是往 Collection 中如何填充 Model 实例,有好多种,这里只演示最直接的方式。还 add, fetch, 及对 Collection 排序, 遍历等各种操作。 阅读全文 >>

类别: Web/JS. 标签: , . 阅读(1,612). 评论(0) »

Backbone.js 中使用 Model

前面几篇 Backbone.js 的例子中有使用到 template, 及数据的填充,其实这已经很接近 Model 了。现在来学习怎么创建自己的 Model 类,并简单的使用。Backbone.js 中 Model 会涉及到很多的概念,如 Model 的初始化,默认值,属性的读写,属性值改变的监听,数据渲染,校验,以及与服务端的数据同步等。

本文不打算讲前面大部分的内容,最初思考的一个脉络是怎么把 Model 引入进来,所以线索会是 建立 Model 类 -> 初始化 Model 实例 -> 设置值 -> 渲染到页面,其余 Model 特性分别再深入。

直观地能想到的 JavaScript 的 Model 是一个 JSON 对象,差不多,不过 Backbone 赋予 Model 默认属性,只能通过 getter/setter 方法来访问 Model 中的属性值,不能直接用点操作符,相当于 Backbone 的属性是私有的。 阅读全文 >>

类别: Web/JS. 标签: , . 阅读(582). 评论(0) »

Backbone.js 的 View 中定义事件

使用 Backbone 的 View 时,可以象传统 jQuery 那样定义事件,$("selector").click(function(){...})。幸运的是 Backbone 让我们在 View 中定义事件变得更为简单和集中,只要设置 View 的 events 属性,配置 事件,元素以及相应的处理方法,基本模式如下:

    events: {
        "click button": "event_handler",
        "focus #name": "event_handler"
    },
    event_handler: function( event ){
        alert(event.target.id);
    }

格式是 "事件 选择器": "事件处理函数名", 奇怪为什么这里不是使用事件处理函数名的引用,也就是不能写成下面两种方式: 阅读全文 >>

类别: Web/JS. 标签: , . 阅读(4,537). 评论(0) »