Peiqin

时间有限，不要在此停留太久

0%

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 0 阅读时长 ≈ 1 分钟

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 871 阅读时长 ≈ 1 分钟

在日常生活和工作当中经常会遇到问题。而的问题的种类有许多，面对各种的问题我们都会有对应的办法去解

阅读全文 »

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 146 阅读时长 ≈ 1 分钟

思考如何快捷记录和阅读笔记

阅读全文 »

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 22k 阅读时长 ≈ 20 分钟

任正非采访

阅读全文 »

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 0 阅读时长 ≈ 1 分钟

发表于 更新于 阅读次数： Valine：
本文字数： 1.8k 阅读时长 ≈ 2 分钟

连接mysql数据库出错

本次案例是开发者 同时在本地安装了mysql 和 xampp(集成了mysql等的本地开发环境)

问题描述:

开发者 系统更新后 使用sequel pro 连接xampp中的MySQL数据库 失败
xampp mysql database runing 绿灯显示正常！！！

解决办法：

第一步：

打开terminal 输入

1
sudo /Applications/XAMPP/bin/mysql.server start

第二步:

更改xampp中访问MySQL的端口（3306=》3366）

进入xampp Manage Servers 控制面板,点击Configure 修改port的值

或者 进入 my.cnf 文件中[client] [mysqld]中 port值 和 php.ini 中 mysqli.default_port= 3366

问题分析

  1. 在sequel pro 中配置如下
    1
    2
    3
    4
    5
    host: 127.0.0.1
    user: root
    passward: 默认空
    databade: 不填
    port:3366(已经修改)
    1
    2
    3
    4
    5
    Unable to connect to host 127.0.0.1, or the request timed out.

    Be sure that the address is correct and that you have the necessary privileges, or try increasing the connection timeout (currently 10 seconds).

    MySQL said: Can't connect to MySQL server on '127.0.0.1' (61)
    修改port是避免xmapp中连接mysql的端口与本地连接mysql端口冲突

回头小结： 由于本地mysql登录需要密码 那么如果不更改xampp中mysql默认的3306 在不输入密码的情况下 且 xampp mysql sever start . sequel pro 会自动选择连接xmapp中的数据库.(强烈建议修改端口，以免产生不必要的损失)

*重点

关于两者之间切换问题 和 注意事项

开启本地mysql 步骤

  1. 检查 xampp mysql database 的status 设置为stopped
  2. 去控制面板或者终端 启动本地mysql server

开启xmapp mysql

  1. 进入xmapp 按钮操作 start ，如果本地已经能够正常访问 且 xmpapp mysql server 成功跑起 就直接在sq中自由切换两者

想自由切换两者 可以在活动监视器查看是否存在有两个mysald的进程 

1
2
3
4
5
6
cengpeiqindeMacBook-Pro:~ cengpeiqin$ sudo /Applications/XAMPP/bin/mysql.server start
Starting MySQL
.2019-04-25 21:51:41 28258 mysqld_safe Logging to '/Applications/XAMPP/xamppfiles/var/mysql/cengpeiqindeMacBook-Pro.local.err'.
2019-04-25 21:51:41 28258 mysqld_safe Starting mysqld daemon with databases from /Applications/XAMPP/xamppfiles/var/mysql
 SUCCESS!
cengpeiqindeMacBook-Pro:~ cengpeiqin$
关于本地mysql 控制面版
如果 在xampp 开启的情况下 点击stop 就可以终止 这时候控制面板会出现异常显示
（stop server后，控制面板会继续亮绿灯,可以在活动监视器观察情况，是否真正退出myaqld进程）
或者在 活动监视器 中退出mysqld

结语： 在开发前 必须把环境搭好 在开发过程中重点关注开发

数据库日常注意事项

  1. 小程序的数据库表中字段命名：user-id user-name 在小程序的列表渲染中 会读取不到改字段的属性 用userID 取代

    2.mac下使用sequel pro test-builds（银色图片），解决了sequel pro（黄色图标）的不知明问题。

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 2k 阅读时长 ≈ 2 分钟

小程序与web开发对比分析

注册小程序开发账号 安装开发者工具等

  1. 在使用开发工具的过程中 注意 项目名称是唯一的 包括 代码片段 公众号 小游戏

对于初始化的小程序 关注app.json app.js 以及 pages文件夹

app.json 全局的页面配置文件 ：主要负责定义所有页面的引用路径 和 基本的页面属性 配置

  1. 添加属性tabBar 可以显示底部固定导航栏：注意list字段中的子项路径（pagePath） 在pages属性中要置顶，必须写在非tabBar页面路径之前 否则tab会显示异常(不显示)
  2. 代码中存在注释 会引致语法错误 导致页面报错 谨慎使用
  3. 每个属性的结尾 不能有任何符号

app.js 小程序项目入口文件 项目初始化init

pages文件夹 内放置对应的 单一页面（每个页面文件都基本需要配置 .js .wxml .wxss. .json)

单一页面的生成

  • .js :处理逻辑业务 与web开发类似
  • .wxml :具有模板数据绑定的功能 类似 Vue
  • .wxss :等同css
  • .json :此处添加配置会 将全局中相同的配置覆盖
  1. .js : Page({}) 页面实例必须正确初始化 否则页面会报错
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    Page({
        data:{

            },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
            
        }

        })
  2. .json : 同上 
    1
    2
    3
    {

    }

与web开发中的html js css 对比

由于小程序的界面空间有限且运行环境非浏览器 而是在微信app内置环境中 有以下地方需要注意:

文档内容较全 初学者 第一天可着重阅读以下整理过后的文档

  • wxml: 小程序页面的结构 页面导航 路由api 界面交互：例如消息提示框 底部操作菜单等

  • .js: 事件

  • wxss: wxss

进入小程序项目

项目拆解

combat-okr项目 文件内应该分为 sever（服务端即Koa框架） client（客户端 即小程序项目）开发时着重各自的开发环境 初学者 避免混淆

1.小程序登录

本次登录功能分为三部分 客户端（小程序项目） 本地服务端（koa) 微信服务端
登录就是如何处理好 req res 请求和响应的数据接发
区分这两者在不同的服务端的不同语法是关键

三者存在以下关系

1
2
3
客户端 <=> 微信服务端 ／／code 的获取

客户端 <=> 本地服务器 <=> 微信服务端 ／／
  1. code : 由客服端直接向微信服务端 发起请求所得（wx.login())
  2. 获取openId等数据: 由本地服作为中转，向第三方服务器 发起请求
  3. 操作数据

主要讲解 数据在 三者中的 获取方式 存储方式

客户端： 这里是小程序项目的文件 为实际操作的目录
主要是运用到小程序的API（请求语法/存取语法）

本地服： koa的中 ctx的理解和其API

关于客户端请求 wx.login()&& wx.request 的分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
wx.login({
  success(res) {
    if (res.code) {
      // 发起网络请求
      wx.request({
        url: 'https://test.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

  • 要有一个强硬的逻辑：发起请求 就必须 想到 响应

  • 去查找 发起者 和 接收者 的语法， 如上面是 小程序客户端向 本地服务（如koa)发起的请求

    那么接下来 就是想 本地服 如何 响应客户端的请求(数据怎么传递)

  • 发请求的目的是要拿到什么数据？

  • 本地服 在满足客服端的请求 是否需要向第三方或者 数据库 ？

带着以上的思路,找出服务端之间的请求和响应 的数据传递所运用的语法 就能很好的处理各种类型的客户端（前台） 服务端（后台） 之间的交互工作

目前用作前台类型有： 原生（html） vue 小程序

充当服务端角色类型有： 原生（ajax:是一种写法） express koa.

注意事项

  1. 小程序的数据库表中字段命名：user-id user-name 在小程序的列表渲染中 会读取不到改字段的属性 用userID 取代

数据库操作和页面渲染数据

杂记：
  1. client 请求类型为（Get 或 Put )，通过 API 访问serever ，server (Koa框架 )通过ctx.request.body 获取到 client中 data字段中定义的对象（键值对）
  2. client 请求类型为（Post )，通过 API 访问serever ，server (Koa框架 )：需要引入第三方库koa-bodyparser ctx.request.body 获取到 client中 data字段中定义的对象（键值对）
  3. 交互逻辑简述 稍后补充
    1. Client view中

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 3k 阅读时长 ≈ 3 分钟

搭建快速发布文章的技术博客

基于GitHub Page 和 hexo 博客框架

应用的知识：hexo + Github

搭建步骤：

Github:github page

生成 Github Page

hexo:

1.安装hexo

npm install -g hexo-cli (全局安装)

2.cd到你的工作目录 （blog是你的hexo项目文件夹名字）

hexo init blog

3.为了简化流程 就直接先更换网站的主题

$ cd blog
$ git clone https://github.com/iissnan/hexo-theme-next themes/next 旧版地址
$ git clone https://github.com/theme-next/hexo-theme-next themes/next 新版地址

修改next主题样式 ：在主题文件夹next的配置文件scheme字段中修改

4.cd _config.yml 全局配置文件 修改theme属性

theme:next

5.本地跑起hexo

$ hexo g 打包项目（没上线前可不执行）

$ hexo s 启动本地web服务器

6.打开 http://localhost:4000/ 检查是否成功

推送到Github

7.修改hexo项目的根目录，根目录，根目录， 下的全局配置文件_config.yml

1
2
3
4
deploy:
  type: git
  repo: https://github.com/hizeng/hizeng.github.io.git
  branch: master

8.为一键部署做准备 安装git hexo 发布插件

$ npm install hexo-deployer-git –save(页面显示问题save前面是两个-)

9.上线

$ hexo clean 清理缓存
$ hexo g 打包项目
$ hexo d 一键部署

10.发布文章

采用md语法编写文章 原因简单易上手操作
由于hexo打包（hexo g) 时候 会编译成 对应的html css js 等线上部署的文章
那么 我们要对文章 和 项目的主题 进行相关的配置

10.1文章

进入根目录的souce文件下的_posts里 新增md文件xxx.md
文章最顶部插入以下代码 之后发布都 把这段代码加上
这是YAML的语法 相关语法可以阅读教程yaml

1
2
3
4
5
6
7
8
9
10
11
12
---
layout:     post                    # 使用的布局（不需要改）
title:      零基础教你搭建技术博客   # 标题 
subtitle:                         #副标题
date:       2019-04-19             # 时间
author:     lishujun                # 作者
 # header-img: img/post-bg-2015.jpg    这篇文章标题背景图片
catalog: true                       # 是否归档
categories: skill                   #分类
tags:                                   
     - work-skill                      #标签  
---

10.2项目主题

进入项目主题文件themes 目录下的_confiy.yml 文件 中menu注释部分 按下面的依次打开
目的为菜单栏的按钮 添加链接

1
2
3
4
5
6
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

10.3日常发布

在_post文件夹中添加xxx.md文章后 只需要执行以下命令
记得添加10.2中的代码片段 不然没标题和日期等等信息 

1
2
3
$ hexo g 
$ hexo s (本地预览，可不执行)
$ hexo d

11.0关于域名配置

购买域名(阿里云)

解析域名

  1. $ ping hizeng.github.io 得到一个IP后 记得ctrl+c 退出命令

  2. 修改你的域名解析记录，添加一个A记录，用得到的IP

  3. 登录http://github.com>进入项目>Settings>Custom domain>输入你的域名>Save。

hexo项目中添加 CNAME 文件

添加你的域名

因为在下次 hexo d 部署的过程中 会把根目录下的CNAME 覆盖删除了 因为hexo并不会自动生成 CNAME 文件
有两种方法可以解决

  1. 我们就需要这个 CNAME 工具hexo-generator-cname，这时会自动在 public 里生成一个 CNAME 文件，把你的域名加进去再部署一下吧！
  2. 在根目录下sourse文件中添加 （我采用的是第二种）

11.1 同一域名下挂载第二hexo博客

在全局配置文件中_config.yml 修改
如果您的网站放在子目录中，请将网址设置为”http://yoursite.com/child “，将root设置为”/child/“

12.拓展功能

12.1 添加动画效果

在根目录下操作
$ npm install –save hexo-helper-live2d （安装时间比较长）

安装模板 在根目录下操作(例子是一只白猫 黑猫是hijiki)

$ npm install live2d-widget-model-tororo

开源作者 提供了10多个 模板 可以在下方 hexo-helper-live-2d 中查阅 对应名字可以在
这里阅览模板

cd _config.yml 添加配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  model:
    use: live2d-widget-model-tororo
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 150
    height: 300
    position: right
    hOffset: 0
    vOffset: -20
  mobile:
    show: true
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

12.2 草稿功能

草稿相当于很多博客都有的“私密文章”功能。使用如下命令创建：

1
$ hexo new draft "new draft"

会在source/_drafts目录下生成一个new-draft.md文件。但是这个文件不被显示在页面上，链接也访问不到。也就是说如果你想把某一篇文章移除显示，又不舍得删除，可以把它移动到_drafts目录之中。

如果你希望强行预览草稿，更改配置文件（_config.yml）：
render_drafts: true
或者如下方式启动server：
$ hexo server --drafts

下面这条命令可以把草稿变成文章，或者页面：

1
`$ hexo publish [layout] <filename>`

12.3小结next主题插件

使用插件： 全局安装依赖（npm install –save hexo-helper-live2d ）到 package.json
全局配置： 在_config.yml 中根据对应的插件文档 进行配置
其他功能大家可以根据 next文档去尝试配置

hexo文档
nexT主题文档
markdown文档
hexo-helper-live-2d

延伸拓展
浏览器工作原理
Hexo源码设计模式

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 1.2k 阅读时长 ≈ 1 分钟

逻辑混乱 阅读者可忽略

1.采用nunjucks第三方模板库渲染数据

结合继承的思想 我们引入模板引擎 进行页面开发 同时 引擎是拥有 数据绑定 的功能
这个功能在开发中起到很大的作用

在项目根目录下 npm install nunjucks –save 下载；

在app.js 引入nunjucks模板库 var nunjuck = require(‘nunjucks’)

并配置模板引擎：

1
2
3
4
5
6
7
app.set('view engine', 'tpl');

  nunjucks.configure('views',{
      autoescape:true,
      express:app,
      watch:true
  });

2.路由Router

随着对页面进行操作，页面会发生变化。那么页面之间的跳转如何实现？数据如何在跳转中进行加载？

引入 var router = express.Router();

页面中跳转的URL： /user/edit 对应路由中配置的路径 router.get(‘/user/edit’,methods);

路由请求中调用的方法（methods）：是控制跳转至URL后 需要对页面数据交换 进行的操作

遵行MVC模型，将其定义在根目录下 file://Controllers 而负责页面跳转路由,则定义在根目录下 file://Router;

关于Router，补充与一点，专门与服务器 请求数据的 我们独立分开成两个文件 将其命名api.js 而页面跳转
则命名为index.js 目的是 严谨代码逻辑，体现模块化的功能 下面Controllers Model 也有所体现。

3.控制器Controllers 与 模块器Model

Controllers: 在里面定义 methods: async function(req,res,next){
调用封装后的Model里面定义的读取数据库的方法}

在方法里面 调用到Model的方法时 使用 await (async await的理解 后续补上)

res.locals.protype = value;

res.locals 是express中 对于单次请求响应的周期内 所使用的数据

app.locals 则针对于 全局的 常量 来使用

value 就是 Model 与数据库 连接后 所获取得到的数据。

##本内容关注的是页面的渲染 只关注 从数据库获取数据#

res.render(‘index’) 服务器发出响应 要求 客户渲染模板的方法 事先在 app.js 中配置好模板引擎 可忽略 模板文件的后缀

index完整的信息是 ‘路径/index.tpl’

4.模板调用数据

上面操作中：res.locals.protype =value;

protype 对应tpl文件中的使用语法如下

加载数据

####以上就是数据渲染到模板的流程

深化请继续阅读
nunjuck.js 模版语法
express.js request respones router 的API