2017年12月

篇首:俺自己很low,写的东西也很low,各位前辈已经各种总结的,so,大家轻喷啊,俺只是为了记录一下子。
刚刚不经意间查看关于php加速方面的消息,看到了一句话“lamp结构的瓶颈在于M”,感觉是真知灼见,当然这是在理想状态下的情况。对于实际情况下的生产环境来说,需要解决的问题是多种多样的,l-a-
m-
p在不同阶段需要优化的点是不同的,虽然通过努力最终的瓶颈在于M,但是期间的各种努力也是不容忽视的。下面我就意识流的总结一下,在网站生产环境遇到的各种问题。
以下是之前遇到问题的各种汇总:
1、php内的sql代码性能存在问题
这个存在于两方面,一个是sql本身优化不够,另外一个方面是随着数据量的增加,某些性能问题会逐渐暴露。

2、apache处理模式造成的内存消耗
由于apache是以进程的形式,同步阻塞式的处理http请求,so,当网页本身加载元素过多的话,会造成大量的
http进程并发,消耗服务器大量的内存,导致访问缓慢或者异常。
解决办法很是简单,主要有一下几个方面
a、动态页面转成静态页面。
b、转成lnamp的模式,图片等静态资源由nginx进行处理,减少http进程数量

3、CDN服务的使用
这个并不是性能问题,而是为了解决用户访问的页面加载速度问题,以及不同网络之间的延迟问题。
具体使用效果是非常不错的,会大大的改善各地用户的访问速度,土豪公司可以自建CDN,中小公司
选择第三方服务也是不错的选择。

4、缓存的使用
这个有两个方面的缓存,其中主要的缓存是数据也就是动态方面的缓存
使用的软件主要有redis以及memcache(开源用的爽爽哒)
这两个软件都是针对php与mysql之间的请求进行缓存,减少与mysql的直接交互,提高访问速度。

5、apache的负载均衡,mysql的读写分离
即便增加了CDN、缓存,优化了apache的页面,但是高并发的问题依然会随着用户量的增加而慢慢出现,那么这个时候
就要发大招了,扩!容!硬!件!。永远都好使的大招,用完即生效。我们现在主要使用的是nginx+apache的负载均衡方式。
而mysql的读写分离也so easy,使用主从复制即可。对于及时性要就不是太高的网页访问,问题不大。

6、奇葩问题粗现了!!!
Then,该优化的俺们都优化了,前辈的经验也是各种借鉴,最后俺们发现页面访问还是慢得想让用户注销。问题到底在哪?
又经过了艰苦卓绝的调查与研究,最后发现,上一个离职的哥们开放的一个权限系统(所有网页加载都会用),没有关闭
debug,我去!我一口老血喷在了显示器上啊!苍天啊,我曾经一度怀疑自己是不是在做无用功啊!

这里不是挑起运维与研发的阶级矛盾,而是总结经验教训,以后不在走弯路!
先到这吧!以后有了经验再补充!

Serverless实战驾校小程序【考题练习】四

由于没有数据,这次需要拿一些测试数据放到数据库。 这里想到本地采集,大家可以随意用任何后端语言,Python,PHP,Golang,Java,nodejs等等, 这里我就不用其他语言,使用接近JavaScript语法的,nodejs,采集后生成CSV文件。

主要用到三个库:

  1. 网络库
  2. 解析库
  3. 文件库

这里找到一个采集的地址:
http://www.jiakao.com/cnty/web/km1_tc_new.php?q=1

1. 选择Table 打印这效果

let  table = $('table');

         table.each(function (index, item) {
          let  x = $(this).text();   
          console.log(x)   

选择

2.提取标题

由于数据库,标题title是一个单独字段,这里先把title取出来。
let table = $('table');

      table.each(function (index, item) {
        let x = $(this).find("tr>td").eq(0).text();
        let t = x.split('\n\t');
        console.log(t)
      });

image.png

这里的数据[1]就是标题数据

3. 提取题目内容

image.png

这里不细说了,后面我会放上代码,大家自己看。 无非就是拿到A、b、c、d结果,放到一个对象里面,跟导入的格式一致就行。

4.完成导入

Bmob控制台导入CSV,导入后,效果如下。

image.png

小程序里面,我们测试下。

image.png

放代码

let http = require('http');
let fs = require('fs');
let cheerio = require('cheerio');
let request = require('request');
let iconv = require('iconv-lite');
let i = 0;
let url = "http://www.jiakao.com/cnty/web/km1_tc_new.php?q=1";
//初始url 

function fetchPage (x) {     //封装了一层函数
  startRequest(x);
}


function startRequest (x) {
  //采用http模块向服务器发起一次get请求      
  http.get(x, function (res) {
    let html = '';        //用来存储请求网页的整个html内容
    let titles = [];
    res.setEncoding('binary'); //防止中文乱码

    //监听data事件,每次取一块数据
    res.on('data', function (chunk) {

      html += chunk;
    });
    //监听end事件,如果整个网页内容的html都获取完毕,就执行回调函数
    res.on('end', function () {
      html = iconv.decode(html, 'gb2312');

      let $ = cheerio.load(html); //采用cheerio模块解析html

      let table = $('table');
      console.log('help,choseList,title,video,type,bType,bModels,bSubjects,pic')
      table.each(function (index, item) {


        let t;
        let d;

        let tArr = [];
        let choseList = [] //{""item"":""6个月""}

        $(this).find("tr>td").each(function (i, items) {
          // t = $(this).eq(0).text().split('\n\t');
          t = $(this).text().split('\n\t');
          if (i == 0) {
            tArr.push(t[1])
          }
          d = $(this).text().trim()

          if (i > 0 && i < 6) {
            if (d.indexOf('A') != -1 || d.indexOf('B') != -1 || d.indexOf('C') != -1 || d.indexOf('D') != -1) {

              let answerStr, answerArr;
              // 获取正确答案
              let okStr = $(this).parent().attr('onclick')
              if (okStr != undefined) {
                answerStr = okStr.substr(25, 3)
                answerArr = answerStr.split(',')
              }


              d = d.split('、');

              if (answerArr[0] == answerArr[1]) {
                choseList.push({ "\"isChose\"": true, "\"item\"": "\"" + d[1] + "\"" })
              } else {
                choseList.push({ "\"item\"": "\"" + d[1] + "\"" })
              }
            }

          }


        })

        console.log(`,"${JSON.stringify(choseList)}",${tArr},,1,413405afba,1,1,`)

      });
    })


  }).on('error', function (err) {
    console.log(err);
  });

}

fetchPage(url);      //主程序开始运行

总结:

Bmob数据库支持CSV导入, 我们把采集到的数据输出为一个CSV即可,然后后台点击导入,采集到数据后,进行处理,分四步。

  1. 拿到标题
  2. 拿到结果
  3. 分析出正确答案
  4. 整理数据格式导出CSV

由于这里100题只是为了做Demo,时间第一,并没有采集图片,如果正式上线,还需要采集图片并上传。时间关系,这一节就到这,有问题可以在下面评论。

Serverless实战驾校小程序【考题练习】二
介绍
准备工作做完后,今天我们从核心模块,分类与题目练习开始做。由于开发时间比较紧,这里主要写实习思路,与核心代码。

页面一、首页
这里我们主要优先实现功能逻辑,UI后面调整,我们用iview 拖一个大致结构的页面。

这里用了以下组件

{
  "usingComponents": {
    "i-tab-bar": "../../dist/tab-bar/index",
    "i-tab-bar-item": "../../dist/tab-bar-item/index",
    "i-grid": "../../dist/grid/index",
    "i-grid-item": "../../dist/grid-item/index",
    "i-grid-icon": "../../dist/grid-icon/index",
    "i-grid-label": "../../dist/grid-label/index",
    "i-tabs": "../../dist/tabs/index",
    "i-tab": "../../dist/tab/index"
  }
}

页面二、专项练习页面
这个页面,我们从数据库里取出数据,首先建立好数据表,这个表结构昨天有讲。

我们导入一个CSV格式数据到表里

CSV文件内容

bSubjects,title
1,时间题
1,速度题
1,距离题
1,罚款题
1,记分题
1,标志题
1,标线题
1,手势题
1,信号灯
1,灯光题
1,仪表题
1,装置题
1,路况题
1,酒驾题
1,动画题
1,情景题

然后我们取出这里的数据,在小程序里面显示

核心代码

// 库文件
const getQuestionTypeList=()=>{
    return new Promise((resolve, reject) => {
      const query = wx.Bmob.Query('questionType');
      query.find().then(res => {
          console.log(res)
          resolve(res)
      }).catch(err=>{
        console.error(err)
        reject(err)
      })
    });
}

// 页面js文件
wechatApp-questions2/pages/topic/index.js
onLoad(e){
    wx.u.getQuestionTypeList().then(r=>{
      console.log(r,`k`)
      this.setData({
        result:r
      })
    })
  },

  // wxml文件
  <i-panel title="题型列表" hide-top>
    <!-- <view style="padding: 15px;">头部距离为 0 的 Panel</view> -->
    <i-row>
        <i-col wx:for="{{result}}" span="12" i-class="col-class">
            <i-panel bindtap="handleTabClick" data-id="{{item.objectId}}" class="cell-panel-demo" title="">
                <i-cell title="{{item.title}}" value=""> 
                    <i-icon type="enterinto" slot="icon" />
                </i-cell>
            </i-panel>
        </i-col>
    </i-row>
</i-panel>

首页点击到分类,分类点击到题目页面,下一个是题目页面,这个页面是整个项目的核心, 所以的题目都在这个页面进行计算,判断。

页面三、答题页面
这个页面会是最复杂的一个页面, 涉及到,计时,判断、记录历史等等操作。

之前只想到模拟考试,没考虑到这种按照顺序练习, 第二次进入,可以继续之前的题目练习。 这里建个学习表,记录他的顺序练习相关数据,以下是数据表暂定的结构

学习表 learning

| 名称 | 类型 | 描述 | | --------- | ------ | --------------------------------------------------- | | bSubjects | sting | 所属科目 1.科目一 2.科目四 | | bModels | sting | 所属车型 1.小车 2.货车 3.客车 4.摩托车 | | where | string | 查询的条件 {"where":{"name":1},"order":"name"} | | num | string | 学习到第多少道题 | | result | array | 结果 [{" id ":" XXX ', '0'}, {" id ":" XXX ", "1"}] | | type | int | 0,免费版题目 1,付费版题目 | | uid | string | 用户id |

第一步:还是一样,用iview 复制出对应组件

第二步:查询出此类别的题目, 并且默认显示一道题,点击下一题,显示数组下一个元素

第三步:先做单选题,点击选择,判断是否正确, 如果正确,记录到结果对象 [{" id ":" XXX ', '0'}, {" id ":" XXX ", "1"}] ,0代表回答错误,1正确

第四步:点击下一题计算进度条位置,判断当前是否选择了题目,否则提示请选择结果。

目前做到这个一步,明天继续。

大家想学习更多的云服务开发, 可以加入Bmob的交流群:群号:273080081