WdBly Blog

懂事、有趣、保持理智

WdBly Blog

懂事、有趣、保持理智

周维 | Jim

603927378@qq.com

工作日志 2018 10-11

工作日志,工作笔记

image.png

2018/10/09

webpack开启 tree-shaking:压缩js,是基于es6的静态模块解析,当一个模块导出多个函数而我们只使用了其中一个的时候,
不开启js压缩则会将所有函数都打包进去,开启后只会将使用的函数打包,具体实现是使用的webpack插件 UglifyJsPlugin
如果在ts中使用这个插件需要将tsconfig.json中的 target字段设置为 es6,应为我们的js压缩是基于es6的静态模块解析(import和export)的。

所谓的import静态模块解析指的是源文件在编译时导入依赖,可以在编译阶段确定所有依赖,这样才可以做静态优化。所有一般来说import会放在文件的开头。
而require是在源文件执行时再进行资源的导入,可以运用在代码的任何地方,也就是说可以在一个异步操作后去require一个文件对象。
那么对于这种动态的导入依赖我们就无法在构建阶段(打包)判断某个资源是否打包,也就无法做静态优化。
需要注意的是使用的require导入的是一个模块,每个文件是一个模块。

2018/10/10

css布局文章
ls -ls 查看目录下文件的权限
sudo chmod 777 filename 修改目标的权限
tail -f blog.error.log  //实时监测日志 在控制台输出
cat filename  //将文件内容显示在控制台中

2018/10/11

DCA4VNWL43_7UHP6O9S.png

2018/10/12

tff自动开票系统:
启动pm2的后台node程序:D:\Code\eticket-client  pm2 start index.js --name eticket 
打开IE浏览器:网站- localhost:3000(只开一个标签页即可)
若接口报错可能需要释放锁
若签章失败 需后台处理这张失败的发票 然后浏览器端在重新跑任务
离线开票时间超限: 打开软件发票查询 待个2分钟

财务需要的月度报表: 报税处理->月度统计->选择年月确定->截图发送财务

有些发票需要开红字发票来冲掉作废的发票


//git 修改远程仓库的源 先删除后添加 新项目直接添加即可
git remote rm origin
git remote add origin https://USERNAME:PASSWORD@github.com/USERNAME/pro.git

2018/10/15

ionic-plugin-keyboard //解决了ios中输入框获得焦点时页面上移的问题

关于设备的分辨率的一些总结
一些概念:
设备的分辨率:1334*750代表了设备的像素点总数
ppi:每英寸屏幕所拥有的像素点总数
dpi: 像素密度 dpi = ppi
屏幕尺寸: 通常是指屏幕对角线的长度。计算  
dpr:devicepixelRatio 设备像素缩放比

1334*750 就是 iPhone6 的分辨率,而iPhone6的屏幕实际宽度为2.3英寸那么设备的ppi为 750/2.3 = 326(这是个大致,精确算法是通过长和宽一起来确定)

 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width>
利用meta标签对viewport进行控制

在我们的html中加入这一句就是为了调整css中的px所对应的真实的像素个数,在ipone6中的横向分辨率为750,在不加meta的情况下若是设置了一个width为750px的div,在iphone中刚刚一屏,这显然是不合理的,在加上meta initial-scale=1后,我们在css中设置的1px会对应iphone中的多个像素点,具体是多少个会根据设备的dpr来计算。

meta 中的width=device-width 是用于处理IE 会横竖屏不分的问题,最好加上。

2018/10/16

完成css前端布局文章编写
添加重新签章的功能

2018/10/17

tffview 启动,tailor -r account(或者其他项目)
当我们访问account项目中的某个url,会根据这个url寻找对应的view,首先会在当前项目也就是account中寻找,
找不到回去找cem和personel中配置的相关项目(如tffview中对应的文件中寻找,一般是dist目录下),这个模式和administration+admin_view类似

2018/10/18

crontab可用于备份数据库
linux touch aaa.txt 创建文件  
使用PM2跑了个后台node程序 两天执行一个 backup.sh的脚本用于备份blog数据库
android tabs被软键盘顶起来了
1:adjustResize 2: adjustResize|stateHidden 3: stateAlwaysHidden

2018/10/19

使用supervisor 管理进程,项目部署进程为 depoyment
git reset 回滚版本:
若是多人开发,其他人推送的错误内容被拉到了本地,首先使用git log拿到需要回滚到的某个commitID,
使用 git reset --hard commitID将本地的代码回滚,但是远端的代码还是有问题,如果我们直接推送是推不上去的 需要使用 git push -f强制推送

2018/10/22

2.6.0修改意见

RYPYJ__MQWE39BH7.jpg
MQ55BWXY`~AIRWV.jpg

react ssr

React 在做页面操作时,实际上不是直接操作 DOM,而是操作虚拟 DOM,也就是操作普通的 JavaScript 对象,这就使得 SSR 成为了可能

if (typeof(window) === 'undefined') //判断当前执行环境

app.use(views(publicPath, {map: {html: "ejs"}}));//这里需要注意views有两个参数 而不是app.use有两个参数

2018/10/23

Did not expect server HTML to contain a <div> in <div>.

react ssr中store的处理。服务端通过各种手段获取到页面的store(其实也就是页面的数据),但有一点,
如果页面的数据是登陆才能查看,或者登陆用户根据权限可以查看不同的内容时的处理
在服务端已经渲染好了页面其实在客户端又会重新渲染一遍,(如果解决让服务端渲染后客户端不再去渲染),客户端再渲染一遍解决的问题:
1:若服务端渲染失败,用户任然能够看到正确的页面,2:服务端渲染的页面不包含事件的处理需要客户端渲染才能添加。
所以服务端渲染的结果需要和客户端渲染结果保持一致,否在会出现页面闪烁的情况。

node image 服务搭建
npm run start -- params
process.agrv 获取命令行中传入的参数

2018/10/24

walk node服务端文件遍历模块
node image 主要流程完成 存在问题jpg->png 最终图大小和标准操作(手动转化)的图文件大小不一,会小点。
png->png 只是将width height调小,最终的文件比标准操作(手动转化)小

2018/10/25

通过webpack DefinePlugin 插件加载的process.env.API_ROOT 只能在客户端获取到。
ssr时服务端使用axios获取数据的API_ROOT需要单独定义
react ssr 可以选择在componentWillMount生命周期中去调用接口获取数据在 componentDidMount(服务端没有这个生命周期)
服务端还有render这个生命周期

现在有个问题 服务端获取数据本身是异步的 而render在执行时 数据还没获取到 导致服务端返回了空的html

经过测试在客户端是先执行 componentWillMount 直到数据获取到后才会触发render执行。

通过configureStore传入initStore的方式初始化store有一点需要注意的,若项目的reducer是通过 combineReducers 将多个reducer合并形成的
那么初始传入的时候必须指定某个reducer传入:
const store = configureStore({ single_reduces1: { userName: "weidada", defaultUserName:"weidada", defaultPassword:123456, articleList:[] }, single_reduces2: { userName: "weidada", defaultUserName:"weidada", defaultPassword:123456, articleList:[] } });

在服务端 调用接口 获取到这个页面中的数据 将之传入store,然后传入rendertoString 方法 同时将之传入 script标签中的一个变量保存起来,这时可以将渲染好的页面返回给浏览器。浏览器拿到页面后 将store作为初始值复制给浏览器端的store,然后在对应的页面中,判断是否有页面的数据,如果已经有了,就不用再发请求获取数据,而是直接用已有的数据即可,否则还是要去重新获取数据渲染页面。

2018/10/29

blog ssr 问题:网页icon没有,v-for not match 问题 用户登陆和未登陆问题。
第三方的代码有doucment ?
列表页 不匹配。详情页在服务端没有加载部分css到时样式会卡一下且 不匹配
由于数据预取导致 接口请求两次的问题。
css中的图片路径的问题。
cookie的问题
cookie穿透的问题
window.__INITSTATE__ 的script必须引入在client.js之前
shortcut 路径是基于根目录

state: `<script>window.__INITIAL_STATE__ = ${state}</script>`, {{{ state }}}

bodyParser和cookieParser中间件的使用

用户登陆后访问一个会显示登陆状态的页面:登陆接口通过node转发一次,如果登陆成功由node层设置cookie。
当用户访问页面时,node首先获取到客户端传来的cookie,然后将之通过asyncData的一个参数传给页面,通过dispatch存入store。

当然cookie还可以通过global.cookie = req.cookies的方式,但是所有用户都共享一个cookie。第一种处理cookie能够处理多用户情况

还存在的问题是,当通过node转发的登陆后,其实所有请求(不管是从浏览器发出的还是node服务器发出的)都是一个未登录状态。
猜测1:如果服务端记录浏览器的域,则浏览器发出的请求应该是登陆状态才对?但不是。
猜测2: 如果服务端记录了node中间层的状态,则刷新页面(node层发出的请求)应该是登陆状态,但不是。

2018/10/31

cookie的解决方案