Angular+Flask搭建一个记录工具
平时用的最多的文本编辑器就是Notepad++,很多东西都是通过Notepad++直接记录的:
- 没有看完的网页链接
- 要整理、收藏的网页
- 读书笔记
- 要处理的事情
- 待看/看过的文档和电子书
- 等等。。。
随着内容越来越多,就不方便管理和查看了。
于是决定自己实现一个简单的记录工具来管理这些信息,工具就叫Remember。
关于Remember
自己平时工作主要用Python,并且对前端方向一直很有兴趣,所以Remember的开发就使用了Angular和Flask,分别实现了前端的页面逻辑和后台的RESTful API。
另外,Remember开发中主要用到了下面的工具:
- 通过pylint、jshint进行Python、JavaScript代码的静态检查
- JavaScript的单元测试使用karma和Jasmine
- 前端包管理使用bower
- 前端构建使用gulp
下面就看看Remember中提供的一些功能。
管理任务
Markdown编辑/预览
管理便签
管理文件
一些感想
在开发Remember的过程中遇到了一些问题,也开始更加注意一些事情。
编码风格很重要
每个开发人员都有自己的编码习惯和风格,不能说谁的编码风格就是最好的。
但是,对于一个项目,编码风格的统一很重要,统一风格的代码将更方便的管理、查阅,降低维护成本。
在开发Remember的时候自己也是尽量去按照Python和JavaScript的style guide去编码,主要有以下参考。
对于Python,主要参考:
- PEP 0008 -- Style Guide for Python Code
- Google Python Style Guide
对于JavaScript和Angular,主要参考:
- Crockford style
- angular-styleguide
即使有了统一的风格,对于Python和JavaScript这些解释性的语言,静态检查也是很有必要的。所以Remember中就使用了pylint和jshint进行静态检查。这种静态检查可以进一步保持统一的代码风格,同时帮忙发现一些代码错误。
单元测试
由于自己是边开发边使用Remember,所以经常有一些改动,但是改动之后没有进行测试,有时候相关的功能就不正常了,就需要查看最近的提交记录。
所以对一些基本的功能模块,编写单元测试还是很必要的。
Remember中主要使用karma和Jasmine进行JavaScript单元测试,但是测试的coverage还是很少,需要慢慢补上。
使用工具简化流程
开发过程中接触了一些工具,很大程度上方便了开发。
记得以前需要什么前端库的时候,都是直接搜索,然后下载相应的js/css文件。不仅工作效率低下,对于这些库的管理也是一个很大的问题。所以去了解了一下bower这个工具,然后就可以方便的获取和管理需要使用的库了。
另外就是使用了gulp进行一些自动化构建,以前很多手动的工作现在都简化成了一个简单的命令。通过gulp合并、压缩js/css/html之后,加载首页的对比:
- 压缩合并前:
- 压缩合并后:
寻找和利用一些工具来简化流程是十分必要的,往往会有事半功倍的效果(Ps:现在前端开发的工具实在太多了)。
总结
Remember开发过程是边开发边使用,到现在已经可以满足我的需求了,而且现在已经习惯了使用这个工具进行各种记录工作。但是还有很多可以增加、改进的地方,就慢慢来吧。
虽然对JavaScript有一些了解,但是Angular是开始做这个工具时候现学的;关于JavaScript的单元测试工具,通过bower管理前端库,通过gulp构建前端项目等等都是边学边使用,所以收获还是挺多的。
项目源码已经托管到Github上了,如果你也刚开始学习Angular或Flask,希望项目的源码能够对你有所帮助。
如果你也需要一个记录工具,不妨试试Remember,或者基于Remember定制一个符合你习惯的工具。
Remember on Github:https://github.com/WilberTian/Remember
Gif 制作工具:ScreenToGif
Angular+Flask搭建一个记录工具相关推荐
- 从零开始用 Flask 搭建一个网站(二)
从零开始用 Flask 搭建一个网站(一) 介绍了如何搭建 Python 环境,以及 Flask 应用基本项目结构.我们要搭建的网站是管理第三方集成的控制台,类似于 Slack. 本篇主要讲解数据如何 ...
- python打造流媒体服务器_使用Flask搭建一个流媒体服务器
摘要 收到前不久订阅的PythonWeekly发过来的一个邮件通知,由Miguel写的一篇介绍如何使用Flask搭建一个流媒体服务器的文章,思路很新颖也很有意思.你可以点击这里阅读英文原文.或者跟随本 ...
- 使用Flask搭建一个流媒体服务器
摘要 收到前不久订阅的PythonWeekly发过来的一个邮件通知,由Miguel写的一篇介绍如何使用Flask搭建一个流媒体服务器的文章,思路很新颖也很有意思.你可以点击这里阅读英文原文.或者跟随本 ...
- python云服务器搭建教程_Python利用flask搭建一个共享服务器的步骤
这篇文章我们来讲一下在网站建设中,Python利用flask搭建一个共享服务器的步骤.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 零.概述 我利用flask搭建了一个简易 ...
- flask 检测post是否为空_使用Flask搭建一个校园论坛-4
在上一节中完成了注册功能的前期准备工作,在这一节内容中将完成用户注册.登录功能. 1.知识预览 在本届中将学习到以下内容的知识 如何使用wtform来渲染表单 如果使用flask-mail来发送邮件 ...
- 使用Flask搭建一个校园论坛3-登录注册
简介 在上一节中,主要介绍了项目入口怎么实现,同时基于jinja2提供的模板继承功能完成了基模板的编写,同时使用flask的错误处理装饰器完成了继承自基模板的错误页面自定义.在本章节中,将介绍用户注册 ...
- 2021-04-08 Python通过flask搭建音频流/文件服务
Python通过flask搭建音频流/文件服务 工作上需要搭建一个音频推送服务,考虑到使用python Flask搭建一个服务,下面给出简单的代码,代码中每次请求推送当前目录下的音频文件. from ...
- 测试开发——搭建一个简单 web服务(flask框架基础)项目实战
搭建一个简单 web服务-flask框架 一.什么是wsgi? 二.搭建一个简单 web服务 三.扩展 四.请求加参数的情况 五.安装flask 一.什么是wsgi? wsgi是webserver和a ...
- 前端自动化构建工具:用Gulp4.0搭建一个基本的前端开发环境
一个项目的完成一般需要经过三个步骤:初始化.开发和部署.在前端开发过程中,我们经常需要依靠一些自动化构建工具来优化前端工作流程,来帮助我们完成一系列繁琐的工作,例如浏览器热更新.ES6编译.代码压缩. ...
最新文章
- 测中策---我的Web自动化测试思路
- 最细的实现剖析:jQuery 2.0.3源码分析Deferred
- UBUNTU下彻底删除MYSQL
- 定位html中的背景图,关于背景图的定位和透明度问题(HTML+CSS笔记)
- 一个back propagation的例子
- Tcpdump的用法及使用案例
- linux 下ftp的上传与下载
- 《中文分词算法研究》
- 30天自制操作系统——Day8实验报告
- github上成员贡献量_精确统计github贡献者的代码行数
- Duplicate entry for key 'PRIMARY'
- 厦门大学信息学院夏令营经历
- TANGENT_SPACE_ROTATION的解释
- mac 更新系统时间
- 用python读取tif格式图像
- 八、服务器【Ubuntu】GPU-TeslaP100部署
- 宙邦转债上市价格预测
- 【c语言】(函数)金字塔图形问题:根据n的个数,输出由字母组成的一个金字塔图形
- YYKit - YYModel 使用方法
- python猜单词游戏
热门文章
- html如何引入swiper,vue-cli webpack 引入swiper的操作方法
- 14大招打造你的平面设计创意
- php js 异步上传图片,javascript实现异步图片上传方法实例
- php获得帮助类数据_PHP实现的一个时间帮助类
- 家庭NAS搭建实战之samba共享
- 虚拟主机1服务器,虚拟主机1服务器
- matlab scatter cdata,matlab cdatamapping
- python输入ip地址_python批量生成本地ip地址的方法
- MySQL乱码问题解决步骤详解
- INDEX FULL SCAN和INDEX FAST FULL SCAN区别