天一阁
0%

Posted on Edited on In Views: Valine:

这是第二次用Flask了，感觉非常好用，因为简便，可以很快看到demo。

Flask是使用python语言，基于Werkzeug，Jinja2的web开发微框架。作者Armin Ronacher 是出生于1989年的奥地利程序员，2010年时发布了第一版的Flask。目前0.12.2版本的flask也就3k多行代码，但是功能还是相对完善的，主要得益于flask的插件机制。

Read more »

Posted on In Views: Valine:

Web开发是非常重要的技术手段，虽然技术难度不是很大，但是里面涉及的内容却很多。其实软件的世界里，没有什么是无法实现的，现在都是开源的，而且软件基本上没法申请专利，所以软件类的技术都不会有什么独家的技术。

Web开发中，更加看重的是开发速度快，易维护，用户体验好，其实就是颜值要高，要漂亮，从开发角度看，基本上都是使用MVC的模式，做一些简单的CRUD应用，复杂数据处理，技巧性的，算法性的都放到了更后面的地方去了。各种Web开发语言都有很多种MVC框架，我最近比较喜欢Flask，主要是他轻巧，简单，而且是python语言的，但是如果深入到Flask内部，也还是各种的设计模式，理解起来还有点费劲，那就先从表面上梳理一下近期接触到的一些模块吧。

View

​ view其实就是用户看到的页面，很久之前在windows上开发，还叫视图。这个大部分是前端的工作，基础的知识点就是，老三位HTML/CSS/JS。比较流行的类库比如Bootstrap, jQuery都是为了提高前端开发工作效率的，开发效率高，但是也有一定的学习成本。

​ Flask在view这方面提供了Jinjia的模板引擎，他可以很方便的通过标记，对页面进行替换、生成，然后返回给用户。

​ wtform是一个Flask插件，对View表单处理很方便，包括生成表单，表单校验非常方便

Model

​ 我理解Model其实就是数据，为了高效开发，或者说更符合OO原则，很多都是使用ORM。在Flask中，一般使用Flask-SqlAlchemy。一开始我还是挺排斥使用这类ORM的，总觉得直接使用SQL不是很痛苦么。但是发现，当要处理的数据多了，而且业务逻辑多了，把代码分解到不同的模块中，使用面向对象的方式来处理数据实体，还是很方便的。

Controller

​ Flask作为框架，把底层通信，HTTP的request/response，都完美封装了。CRUD开发者只需要处理route，render_template, redirect，再结合Model和View就可以搭建最简单的应用。

​ 此外，Flask有很多插件可以很方便高效的处理一些通用业务逻辑比如Flask-login，Flask-Restful等等。

总之，Flask还是一个挺小清新的web开发框架，只要掌握了基本的模板语言,wtform，SqlAlchemy，Flask基本函数和组件，剩下的就是把所有的创意变成MVP，然后一个个的idea去尝试，没准哪个就成了。

Posted on In Views: Valine:

使用CSS 渐变 是在 CSS3 Image Module 中新增加的 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。

浏览器支持两种类型的渐变：线性渐变 (linear)，通过 linear-gradient 函数定义，以及 径向渐变 (radial)，通过 radial-gradient 函数定义.

线性渐变

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

简单线性渐变

这里是一个线性渐变从中间（水平方向）和顶部（垂直方向）开始，起始于蓝色，过渡到白色.

1
2
3
4
5
/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */
background: -prefix-linear-zgradient(top, blue, white); 

/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to bottom, blue, white);

改变相同的渐变从左到右运行:

1
2
/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to right, blue, white);

可以同时指定水平方向和垂直方向的起始点使渐变对角线式的运行:

1
2
/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to bottom right, blue, white);

使用角度

如果你不指定一个角度，这个将自动基于给定的方向。如果你更喜欢控制渐变的方向，你可以设置特定的角度。

例如，这两个渐变，第一个方向朝右，第二个有个70度的角。

linear_gradient_angle.png

右边的这个使用的是这样的CSS样式：

1
background: linear-gradient(70deg, black, white);

色标

linear-grandient可以填写多于两个颜色，这样可以形成多个颜色的渐变。默认情况下每个颜色都占均等的宽度，但在颜色后面可以指定一个从0-100的百分数，来指定当前颜色的渐变位置。第一个颜色的位置默认为0， 最后一个默认为100

1
background: linear-gradient(to right, red, blue 20%,black);

透明和渐变

渐变是支持透明度的。 举个例子，当你叠加多个背景层，你可以使用这个在背景图片上来创建淡入淡出的效果 :

for Transparency and gradients example

1
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

径向渐变

径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 除了你可以指定渐变结束时的形状 (可能时一个圆形或者一个椭圆形) 以及它的大小. 默认来说，结束形状是一个椭圆形并且和容器的大小比例保持一致。

1
background: radial-gradient(red, yellow, rgb(30, 144, 255));

重复的渐变

linear-gradient 和 radial-gradient不支持自动重复的色标。然而， repeating-linear-gradient 和 repeating-radial-gradient 可以实现这个功能。

1
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);

参考文档

Demo

Posted on In Views: Valine:

问题背景

这两天在折腾一个仿照ProductHunt的应用推荐类的网站，后台用到了wordpress。本来想在办公室的机器上做一个测试环境，但是发现走不通。主要是因为，本地机器无法开80端口，因为国家是不让个人ADSL开通80端口的。但是换成其他端口后，wordpress就是无法访问。

走了好多弯路，都没有解决这个问题，一开始认为是nginx的问题，后来觉得是php-fpm的问题，后来又去定位是不是自己的路由器的问题。最后竟然怀疑到了chrome是不是不支持特殊端口的http访问。结果才发现原来根本问题是WordPress的问题。

主要修改点

1, 修改wordpress的配置文件

修改wordpress下面的wp-config.php文件，在文件最后添加两个变量。

define(‘WP_SITEURL’,‘http://d.yxkeji.cn:9011/’); define(‘WP_HOME’,‘<http://d.yxkeji.cn:9011/’);

2, 修改数据库配置

update wp_options set option_value=‘http://d.yxkeji.cn:9011/’ where option_name=‘siteurl’;

update wp_options set option_value=‘http://d.yxkeji.cn:9011/’ where option_name=‘home’;

修改完成之后，可以正常使用测试环境了。

Posted on In Views: Valine:

今天看了一个youtube频道，挺有意思，也是讲web开发的，他的特点是不仅仅讲技术，还讲了一点点思路和观点。他认为一个初学web开发的人，一定要做5各类型的project，然后一定可以找到工作。分别是租房网站、电商网站、个人简历、订餐网站、digital agency（？？）。

暂且不论他说的这几个网站是否要做，但有一点是肯定的。软件开发里面有80%都是熟练性工作，只要熟悉了就不会有问题，剩下的就是工作量而已。如果想在这步省钱省时，就得自己上手。没办法穷人出身啊，不敢大手大脚

重新捡起来web开发已经四个月了，感觉还是很多事情没法做，或者说做的不熟练。

页面上的布局，结构的划分，内容的添加，各种装饰，各种控件，好多都不是特别容易想到，只能靠不停的模仿。

前端还有js需要仔细研究，这个东西零碎的东西太多。名词好多，框架好多，每个框架的特性还没有学习熟练，这个框架好像就过时了。所以只是学习框架是没有意义的。还是需要多做。

其实Web开发就这几样技术要学，HTML+CSS , Javascript , 后端开发语言PHP/Python/Ruby/Go, DB, Cache, 等等这些前端就是一些熟练工作。那个视频还讲了一个思路挺好，就是如果不懂设计，可以去dribbble上看看，但是我找了一些UI的网站，很少有一些中规中矩的设计，都是过于突出设计感的设计作品。

我目前主要的工具就是HTML+CSS+JS(Bootstrap, jQuery) , Vue（js, node , webpack, scss），Flask(python, webServer), Mysql , 这些其实已经足够用了。

后面就是多做，多看，设计不是问题，大不了就去花钱。

Posted on Edited on In Views: Valine:

效仿这位大神180天180个页面，我也做一个试试，不过人家是学美术的，做的页面都很有艺术感，我感觉我做不到那么好，但是我也可以做到那么多。

  1. 2017.11.1 - 2017.11.2 strength的trainlog页面，db逻辑生疏了
  2. 2017.10.31 strength的login, reg的页面的后台逻辑，已经可以登录了
  3. 2017.10.30 strength的login, reg的页面
  4. 2017.10.29 <空窗>
  5. 2017.10.28 力量举计算器(带后台逻辑)
  6. 2017.10.27 力量举计算器
  7. 2017.10.26 各单项力量数据
  8. 2017.10.25 力量举标准页面
  9. 2017.10.24 CSS使用渐变的效果
  10. 2017.10.23 Portfolio
  11. 2017.10.22 Glozzom之About和Service
  12. 2017.10.21 Glozzom很漂亮的首页
  13. 2017.10.20 Blog Admin之 Profile Settings Login
  14. 2017.10.19 Blog Admin之 Post Category User
  15. 2017.10.18 Blog Admin
  16. 2017.10.17 bootstrap4 Project
  17. 2017.10.16 webpack小实验
  18. 2017.10.15 我的ProductHunt

Posted on Views: Valine:

《Bootstrap 4 From Scratch With 5 Projects》是一位Youtube上的讲师开发的关于bootstrap的课程。他的课程基本都很容易懂，我已经订阅了他的频道。

他最近开发了一门课程是关于Bootstrap4的，并且放到了Udemy上，可是价格太贵了，人民币要1800元，如果是100元我都愿意花钱买，可是1800实在承受不起了。于是通过各种方法终于找到了全部课程视频，我想把这个视频分享给各位。

如果需要全部视频的话可以加我微信.

Posted on In Views: Valine:

今天看了这位老美的Bootstrap的讲座，可能对于长期搞前端的人来说，这没有什么，但对于我来说却特别惊艳。看上去这么复杂的页面竟然1个小时就能搞定了。

Read more »