半叶森

半叶森 查看完整档案

武汉编辑江汉大学  |  电子信息工程 编辑_________________  |  BUG生产者 编辑填写个人主网站
编辑

老想着搞个大新闻~

个人动态

半叶森 发布了文章 · 2018-02-19

技术存档:建站(二),升级https

在被http劫持的广告坑过之后,就想着以后要弄网站就搞https的。大过年闲着没事,买了云服务器,把自己的域名重新解析绑定了一遍,最后升级成了https

阿里云服务器ESC购买时间:2018-02-19
系统和版本:CentOS 7.x
web服务器:nginx(根据个人需求而定)

很久没用过,发现ESC多了个安全组规则的东西。各端口需要配置对应的授权规则才能访问,整体安全性更高了。

当前网站选择最简单的DV证书即可,花了一点时间查资料后,选择申请Let`s Encrypt免费SSL证书。

Let’s Encrypt is a free, automated, and open Certificate Authority.

一、HTTP环境

配置完成后能正常访问http环境即可

1、web服务器安装

# 安装nginx
yum install nginx -y
# 启动
systemctl start nginx

2、配置安全组规则策略

默认会有提示,或者在云服务器ESC中二级菜单下,找到安全组,然后配置规则添加安全组规则,http和https规则配置如图

clipboard.png

3、域名解析配置(略)

二、SSL证书

1、证书生成和配置

可直接使用 Certbot 工具生成和配置SSL证书:

# 安装git
yum install git -y
# 下载工具到本地
git clone https://github.com/certbot/certbot.git
cd certbot/
# 这里是配置nginx服务,请根据情况运行对应命令,具体请阅读Certbot文档
./certbot-auto --nginx

根据提示输入对应命令,如邮箱、选择是否继续、需要认证的域名(空格隔开)等,邮箱需要点击认证。部分命令配置用于生成本地nginx.conf配置,显示如下:

clipboard.png

2、SSL安全组规则策略

配置安全组规则策略图片中的443端口需要开启

3、重启服务并测试

nginx.conf文件将被Certbot工具自动配置完成,配置完成代码如下

server {
    server_name lxlazy.com; # managed by Certbot
    root         /usr/share/nginx/html;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {
    }

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/lxlazy.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/lxlazy.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = lxlazy.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen       80 ;
    listen       [::]:80 ;
    server_name lxlazy.com;
    return 404; # managed by Certbot
}

将默认的server配置注释掉后,重启nginx,测试效果

systemctl restart nginx

三、其他

1、nginx重启出错解决办法

重启可能遇到以下问题 invalid PID number "" in "/var/run/nginx.pid",或nginx -c still could not bind

# 先查看配置,再看端口,解除端口占用后重启nginx,一般都可以解决问题
# 配置
nginx -t
# 端口
netstat -ntlp

实在不行重启主机吧……

2、部署结果

clipboard.png

查看原文

赞 1 收藏 5 评论 0

半叶森 回答了问题 · 2018-01-26

解决replace 全局查找

iSearch.onclick = function(){
    var box = document.getElementById('box');
    box.textContent = box.textContent;
    var str = document.getElementById('box').textContent;
    var regx = new RegExp('(' + document.getElementById('searchkeyword').value + ')', 'gi');
    box.innerHTML = str.replace(regx, '<i>$1</i>')
}

呃……没考虑查询特殊字符的情况,自己改吧~

关注 3 回答 4

半叶森 发布了文章 · 2017-11-04

技术存档:建站(一)

写这系列文章的初衷是:对自己知识面广度和深度的确定,并以此调整后续的发展和学习方向。希望能达到温故而知新的效果。

选择从建站入手,是因为这个是最常见的要求。对于公司而言,网站是展示公司主旨、业务、沟通方式、宣传营销的必选方案,一个符合公司形象的高质量官网,必然能让客户留下良好的第一印象。,对个人而言,博客是表达其特有的思想、展现技术实力、个性化等的有效手段,而个人网站对技术人员而言亦属于有效的展示方案。虽然建站属于最基础的东西,但最基础,不代表是最简单的。

一、域名

作为新时代的程序员,有一个属于自己的独特的域名,是一个很棒的感觉。对一个公司而言,一个通俗易懂或好记的域名,也是相当重要的。

域名选购

对我而言,基本只接触过 万网 ,输入心仪的域名,选择时限,购买即可。当然,购买时注意,顶级域名——即域名后缀,如.com,.edu等——所代表的含义是不一样的,具体请自行查阅,一般个人或公司都可以选用.com。

当然,注册网站的话,你得备案,这个有点麻烦。

域名解析

这里假设你已经够买了一台云服务器,有自己的固定IP,即可将主机IP添加到解析。相关原理有兴趣请自行查找。

解析类型一般为A记录,即将域名指向一个IPv4地址(属于自己的固定)。某些情况下,也会使用CNAME方式,将域名定向到另一个域名别名。

总不能让别人记录IP来访问你的网站吧?

具体并不困难,填写对应参数即可。

DNS解析列表

添加解析

二、技术方案

付费方案

基本上,作为技术人员的一点小骄傲,若非相关人手缺稀,且项目时间紧迫,一般而言是不会将这类业务给其他人做的。

1、外包

若公司内没有懂技术的人,一般都会选择外包。

阿里云、腾讯云、百度云,包括我没提到的各大云平台,都有自己的云市场,可以从中获取各种简单或复杂的官网或博客建站方案。这一块我并没做过太大的研究。虽然基本是属于略有改动的模板型网站,但至少,相对个人而言,一个服务商所能提供的建站方案更加稳定和快捷。

当然也可以在如猪八戒网,或某些技术网站的众包平台发布建站需求,性质类似,此处不做诸如性价比和会不会被坑之类的评价。

优点:便捷,便宜,有钱你就能为所欲为。

缺点:有钱你才能为所欲为。

2、自建

主要花费在购买云服务器上和静态资源托管上,剩余工作一力承担。

选择自建站,一般来说是有着后台的需求,比如能随时发表文章之类。也有如网站个性化,特殊化,有个程序员之类的其他情况。以下只大致讲解两种通用的建站方案,这里主要还是面向技术人员,因此如拖拽式建站托管等方案不在此赘述。

Wordpress

易于操作、易于浏览、有各种插件、主题和解决方案。请自行搜索wordpress主题。

这也是各类云服务商提供的常见建站方案。

要使用wordpress自行建站,你需要了解以下内容:Linux、 Apache/Nginx、 Mysql/MariaDB、Perl/PHP/Python。

以下是大致的安装方案和注意事项(来自多年(大概两年)以前自己建站的笔记):

①、选购云服务器:Linux环境,Centos7.X 版本。可使用xshell命令行工具运行命令,使用xftp上传文件。

②、安装Apache:yum install httpd -y
​ 启动和开机启动:systemctl start httpd.servicesystemctl enable httpd.service
​ 配置文件:/etc/httpd/conf/httpd.conf
​ 修改参数:AllowOverride All ——允许读写;Options FollowSymLinks --- 禁止目录浏览;ServerSignature Off --- 关闭显示版本号……(wordpress优化)

③、安装Mariadb:yum install mariadb mariadb-server -y
​ 启动和开机启动:systemctl start mariadb.servicesystemctl enable mariadb.service
​ 修改默认用户名和密码等:

    mysql -u root -p
    use mysql
    update user set user='新用户' where user='旧用户';
    flush privileges; 
    exit
    mysqladmin -u 新用户 -p password 新密码

④、安装PHP:yum install php -y

⑤、安装对应组件等:yum install php-mysql php-gd libjpeg* php-ldap php-odbc php-pear php-xml php-xmlrpc php-mbstring php-bcmath php-mhash -y

⑥、测试:/var/www/html 目录下,加入文件index.php,内容为 <?php phpinfo();?> ` ,若已经过域名解析,则打开网站后能查看到php版本信息等

⑦、上传或下载(wget 命令)wordpress.gz文件到云服务器中的 /var/www/html/ 目录,解压wordpress-x.x.x-zh_CN.tar.gz 至当前文件夹:tar zxvf wordpress-x.x.x-zh_CN.tar.gz

⑧、设置权限: chmod -R 777 /var/www/html/

⑨、打开网站,跟随引导一步步走就行了。

当然那是属于萌新的时候,现在不需要那么复杂的方案,有现成的lamplnmp一键安装包等。

若是在windows本地搭建wordrpess开发环境,也有xampp之类的安装包用于测试,若有php相关的技术,有耐心阅读文档,也可自定义主题(其实还是挺麻烦的)。

wordpress难的地方在建站,并不是使用。但有关如何优化,如减小页面体积,图片文件托管,插件使用等,就得自己找方案了。

优点:快速,功能全面,过时但经典。
缺点:整体臃肿,不如花钱外包,有技术你也没法为所欲为,得花大量时间优化。
典型的wordpress技术博客:http://www.zhangxinxu.com/

Ghost

基于Node.js的开源博客平台,适用于个人,快速、简单、时尚。支持markdown写作,支持各种模板主题。

你需要了解:Node.js、npm等。若是部署至服务器,你还需要了解:Linux、Mysql/MariaDB。

Ghost类似wordpress,但一般用于建立个人网站。中文版的Ghost安装下载请参照ghost中文网,但已经过时,不建议使用,有一定英文基础可使用官方版本。
本地开发或部署都可选取多种方案,具体请参考官方文档,这里使用官方安装文件进行本地安装测试(win10环境)。

①、安装Node.js、注意各版本支持情况,这里建议6.9.x或对应版本

②、下载并解压Ghost包到自定义目录,npm安装:npm install --production

③、运行并查看运行情况:npm start

可能遇到的问题:

npm安装失败会有提示语句,如需要安装python并添加python路径到全局变量、默认安装sqlite3
npm运行时,若未初始化sqlite3数据库,可能失败,如图
npm start 失败
需要npm 全局安装 knex-migrator并初始化等。请根据报错信息安装对应包并初始化:

npm install -g knex-migrator
knex-migrator init

根据提示信息安装并初始化

虽然官方支持Node.js 8.8以上,但使用8.9.0 LTS的版本时一直提示找不到主题模板,退回Node.js 6.9.x 重新安装后才能正常运行。
clipboard.png

界面效果:

①、初始化安装界面
初始化界面.png

②、前台界面
前台界面.png

③、后台界面
后台界面.png

优点:快捷速轻便,简单时尚,支持各种主题模板等等。
缺点:当前生态相对而言并不强大。

2、免费方案

免费方案属于多数开发人员的选择,若对公司官网需求不高,也可使用此类方法,但并不建议。

很多平台都会自己的免费服务和付费服务,对个人而言,很多时候,免费方案已经大大满足一个小型网站的建设需求了。以下列举一系列免费服务:

Github Pages可直接将你的Github库作为静态文件服务器托管。只要在GitHub上创建一个名为xxx.github.io的新存储库,其中xxx是你在GitHub上的用户名(或组织名称),就可以得到一个属于自己的二级域名,属于多数技术人员的选择。
静态资源托管平台:包括七牛云、又拍云等云存储平台的对象存储服务,免费的情况下,每月可提供限额的流量,实名认证后能得到固定的二级域名。
BAAS云服务:包括野狗云、leancloud等,免费的情况下,每月可以提供限定次数的后台接口调用次数。
其他各大云厂商的免费活动,是熟悉云服务,提升技术的好选择。
……

当然,以上方案,实质上都是将静态文件托管到服务器,最多加几个接口调用,问题是如何更加方便快捷地建立自己的网站,这里忽略手写HTML然后部署的方案。

Hexo

Hexo是将 Markdown 文件根据主题模板和各种插件生成静态页面的Node.js工具。

要使用hexo,你需要了解:Node.js、git、github、Markdown语法。

注意:
①、本地安装使用过程在Hexo官网首页,注意官网右上角可选择语言,由于官网给出的文档说明更加详细,这里不会复述如何安装部署等。

②、运行hexo server可能不会报错,但无法访问4000端口,可查看端口是否被占用:netstat -ano。若是,则改端口后重新运行。如hexo server -p 8080

以下为默认landscape主题首页,更多主题请自行选择:
hexo首页.png

③、由于没有后台,文章标题、标签、时间、ReadMore链接等需要在markdown文档中特定位置标识,也可以使用相关命令生成文章。具体规则请查看官方写作文档或使用的插件文档。

④、包括如 jekyllOctopress 甚至 Webpack 等方案生成静态页面并上传到文件服务器,若是部署到静态资源托管平台,请注意做好CNAME域名解析、刷新DNS缓存、防止盗链之类的设置。

优点:免费,Geek
缺点:由于没有后台,无法线上修改,实际开发或使用体验差强人意

总结

以上仅属于玩票性质的建站,主要面对个人博客,而且仅对其表层的使用方法做了简单的介绍,并不困难,选择也很多。但对真实场景的业务,即使是玩票性质的个人博客,依然还有很多需要补充的技术和注意事项,若涉及其他业务场景,需要的东西又不一样了。

因此待续……

查看原文

赞 2 收藏 8 评论 0

半叶森 发布了文章 · 2017-08-21

JQuery使用总结

目前接触最多的页面开发,基本还是使用 JQuery 的。主要原因基于:操作方便;页面简单;兼容良好;新手多……没有能配合使用其他方案的人。因此,本篇文章就是写着玩加吐点槽的

Write Less,Do More是JQuery的核心理念。所以你们就不要在工作中随意造轮子了!

一、Ajax

绝对禁止同步请求!一定要处理所有可能的情况!

普通示例

function getData(){
  var params= {}
  $.ajax({
    type: 'post',
    dataType: 'json',
    url: 'xxxxx',
    data: params,
    beforeSend: function(){},
    success: function(data){
       if(data.code != 1){
         // 失败方法
         return;
       } 
       // 成功方法
    },
    error: function(){},
    complete: function(){}
  });
}

大部分兼容要求不高,公司使用同一个接口,只是传参不同,因此,共通的ajax请求方案为:

function reqAjax (params) {
  var deferred = $.Deferred();
  $.ajax({
    type: 'post',
    dataType: 'json',
    url: 'xxxx',
    data: params,
    success: function(data){
      deferred.resolve(data);
    },
    error: function(err){
      deferred.reject(err);
    }
  });
  return deferred;
}

主要使用了JQuery(>1.5)的 deferred 对象。请求示例

function getData () {
  // 1、校验,或其他方法获取参数
  var params = {}
  // 2、自定义beforeSend
  // 3、请求数据
  var p = reqAjax(params);
  // 4、自定义success方法
  p.done(function (data) {});
  // 5、自定义error方法,一般属于超时或网络不正常
  p.fail(function (err) {});
  // 以上执行成功之后可链式调用下一步操作
  p.then(function () {});
}

如果想单独使用Ajax,一般来说推荐两个方案:Zepto.js 和 自己去 github 搜索

二、模板

根据设计的不同,有时需要重复添加一些元素。除了基本的模板插件外,还可以充分使用 JQuery 的 clone 方法

尽量不要拼接字符串!

假设dom结构为:

<!--bootstrap样式,静态界面写完后,在test样式上加上隐藏样式hidden-->
<div class="test">
  <p>字段1:<span class="test1 text-info"></span></p>
  <p>字段2:<span class="test2 text-primary"></span></p>
  <p>字段3:<span class="test3 text-warning"></span></p>
</div>

接口请求成功,处理dom:

// 自己处理循环
function addList(arr){
  // 模拟请求过来的数据
  var data = {
    test1: Math.random().toFixed(5),
    test2: Math.random().toFixed(5),
    test3: Math.random().toFixed(5)
  }
  // 假设父级dom
  var pDom = $('.xxx');
  // 直接克隆已经写好且隐藏的模板,去掉hidden
  var dom = pDom.find('.test.hidden').clone().removeClass('hidden');
  // 取巧的方法,根据字段标识的名称取dom元素,然后赋值,一般来说还需要进行其他的处理
  for(var key in data){
    dom.find('.'+key).text(data[key])
  }
  // 处理完毕,加入父级dom中
  pDom.append(dom);
}

主要是我不喜欢拼接字符串,懒得很,而且改别人的BUG好恶心。

三、事件

事件使用多看看教程就行,但如何使用得稍微琢磨一下

如:不要在 $(document).ready() 中初始化所有乱七八糟的方法,很难找的……

对于新添加的元素,添加点击(或其他)事件,可以使用

$(parentDom).on('click', 'newDom', function(){});

$(newDom).live('click', function(){})

四、动效

作为前端,不要光想着js,好歹也学学 animate.css

PC端使用动效是没问题的,但移动端网页,如slideUp、animate之类,最好用css样式代替,不然会有卡顿效果。

……移动端为什么还用jquery?jquery 压缩版一般在80~90 kb,对如今的网络是可以接受的,当然最好用 zepto.js 代替。

请在完成任务之后再考虑优化……

五、No JQuery

不要把不熟悉的东西带到工作中,除非没有更好的替代方案

若不想使用JQuery,且不考虑兼容性,可参考:You-Dont-Need-jQuery

杂项

如果有空,记得重构代码~

本来想写点具有实用性的东西,但Jquery的特性网上已经有很多了,因此不再赘述,能给新人一点提示就行。

查看原文

赞 1 收藏 4 评论 0

半叶森 回答了问题 · 2017-07-07

JS 运算字符串公式

关注 2 回答 2

半叶森 回答了问题 · 2017-05-07

解决如何将div和p重合?

最简单的做法:

*{
    margin: 0;
    padding: 0;
}
#d1 { border: 1px solid black; }
p { border: 1px solid red; }

关注 2 回答 3

半叶森 回答了问题 · 2017-04-29

解决vue-cli npm install 失败

如果不会翻·墙的话,用cnpm下载包,安装或运行才用npm

关注 1 回答 2

半叶森 回答了问题 · 2017-04-27

解决关于前端展示的问题

技术不够就div+css,实力强点就svg或canvas

参考可以看各在线绘制思维导图的网站,比如 https://www.processon.com

当然还是得看业务需求,以上仅供参考

关注 3 回答 3

半叶森 回答了问题 · 2017-04-27

解决两个系统的mysql数据库融合

不根据实际情况谈方案就是耍流氓……

关注 4 回答 3

半叶森 回答了问题 · 2017-04-26

怎么处理前台要展示,但是数据库表没有该字段的实体类冗余属性呢?

1、前端能在加载页面时取到所有的预警类型,那你就不用管了,给前端处理也没那么麻烦

2、前端取不到,那就在实体中加入一个@Transient之类的临时字段codeName,然后取数据时联合查询出来……我两年前是这样做的……

关注 1 回答 1

认证与成就

  • 获得 57 次点赞
  • 获得 8 枚徽章 获得 1 枚金徽章, 获得 1 枚银徽章, 获得 6 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-09-06
个人主页被 1.5k 人浏览