EdwardElricNavigate back to the homepage

工作心得

Edward Elric
May 23rd, 2015 · 1 min read

寫這篇文章的初衷

想想在荔枝 FM 工作接近 2 個月了,一直沒能好好總結是一個很大的問題,因此今天就來寫一些東西來回顧一下過去的工作。

工作列表

  • 荔枝達人 HTML5 遊戲
  • 運營後臺·標記播客庫
  • 微信錄音
  • 錄音指南 HTML5
  • 程壁線下文藝店 HTML5
  • 主播資料收集頁 HTML5
  • Young 榜 HTML5
  • 推廣後臺

工作中用到的東西

荔枝達人

HTML5 遊戲使用 egret(白鷺)引擎,這個引擎是使用TypeScript來寫。TypeScript 感覺挺好的,顯式類型並且接近 ES6 規範,但是有一點比較坑的是,對於第三方庫的引入不是很理想,表面而言就是引用的第三方庫後綴為d.ts

有時間就謝謝TypeScript的一些東西和大家分享。

運營後臺

運營後臺使用的是公司自己編寫的 Java 後端框架,一開始我一直在熟悉這個框架,覺得很不適用,但是當我仔仔細細的看過後又挺欽佩前人的智慧。在熟悉完項目之後就開始編寫自己的功能模塊了。這個項目是使用自己定義的 MVC 框架,定義了一些 Controller 規範,已經對應 View 的規則,使用的持久化框架是MyBatis。Model 對 MyBatis 進行封裝,可在選擇在自動事務和自行事務處理,默認為自動事務。總體而言,在寫完一個功能模塊並使之上線算是一次完整的框架“遊覽”。

順便提一個,部署這一塊也是挺有趣的。公司在安全方面挺注重的,因此每個人要將項目部署上去都必須經過跳板機。感謝公司“萬能”的運維大大,在跳板機上有對應掛載的目錄,因此部署也不是太麻煩。我使用的是 XShell,對應的上傳下載命令也就是rzsz

po 一下最近學習的運維知識(果然 Linux 課都白上了,只學到 ls 和 sudo) 以下出於安全考慮,全部 command 都隱去敏感字符

1ssh -p port [email protected]
1mysql -uname -p -h 192.168.1.1 -P port database_name

順便 po 一下最近自學的 mysql 權限處理

1service mysql stop
2/usr/bin/mysqld_safe --skip-grant-tables &
1use mysql;
2
3INSERT INTO user VALUES ('localhost','root',password(''),'Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','','','','','0','0','0','0','','');
4
5INSERT INTO user VALUES ('127.0.0.1','root',password(''),'Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','','','','','0','0','0','0','','');
6
7INSERT INTO user VALUES ('::1','root',password(''),'Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','','','','','0','0','0','0','','');
8
9INSERT INTO user VALUES ('%','root',password(''),'Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','','','','','0','0','0','0','','');
10
11flush privileges;

1ps aux | grep 'mysql'
2kill -9 mysqld-pid
3service mysql start
4vim /etc/mysql/my.cnf
5bind-address = 127.0.0.1

上面這些有的是為了遠程訪問Mysql,看不懂就算了,關於運維以後再補。

微信錄音

做微信录音讓我知道了 Redis 可以用來做服務,這種方式真的很“潮”,這個項目是使用Play Framework作為後端的。 下面講講這個Play Framework

Play FrameworkRuby on Rails非常相似,算是 Java 的 Rails,編寫東西相當敏捷,配置很靈活,缺點也有,模版引擎略坑。這個框架有很多配套的組件,Eclipse 的 Scala IDE,Play Support,sbt,activator,等等。一些實踐,怎麼編寫 Annotation 實現簡單權限,怎麼用 less,怎麼打包部署,編寫 reload 腳本等等。發現好多東西要補,5555……

錄音指南

這是一個翻頁 HTML5,因為是一個靜態的項目,而且比較獨立,所以這個項目用了很多前端的東西,列表如下:

  • yeoman
  • glup
  • webstorm
  • bower
  • browser-sync(這是個非常好的東西)
  • n 多的 gulp 插件

項目部署在nginx下。

關於移動端 head 的較好處理

1<head>
2 <meta charset="utf-8" />
3 <title>Title</title>
4 <meta name="description" content="description" />
5 <meta
6 name="viewport"
7 content="target-densitydpi=device-dpi, width=640px, user-scalable=no"
8 />
9 <!-- 删除苹果默认的工具栏和菜单栏 -->
10 <meta name="apple-mobile-web-app-capable" content="yes" />
11 <!-- 设置苹果工具栏颜色 -->
12 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
13 <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
14 <meta name="format-detection" content="telephone=no, email=no" />
15 <!-- 启用360浏览器的极速模式(webkit) -->
16 <meta name="renderer" content="webkit" />
17 <!-- 避免IE使用兼容模式 -->
18 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
19 <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
20 <meta name="HandheldFriendly" content="true" />
21 <!-- 微软的老式浏览器 -->
22 <meta name="MobileOptimized" content="320" />
23 <!-- uc强制竖屏 -->
24 <meta name="screen-orientation" content="portrait" />
25 <!-- QQ强制竖屏 -->
26 <meta name="x5-orientation" content="portrait" />
27 <!-- windows phone 点击无高光 -->
28 <meta name="msapplication-tap-highlight" content="no" />
29 <!-- UC强制全屏 -->
30 <meta name="full-screen" content="yes" />
31 <!-- QQ强制全屏 -->
32 <meta name="x5-fullscreen" content="true" />
33 <!-- 360强制全屏 -->
34 <meta name="360-fullscreen" content="true" />
35 <!-- UC应用模式 -->
36 <meta name="browsermode" content="application" />
37 <!-- QQ应用模式 -->
38 <meta name="x5-page-mode" content="app" />
39 <!-- 适应移动端end -->
40 <!-- Place favicon.ico in the root directory -->
41 <link rel="shortcut icon" type="image/png" href="/assets/favicon.ico" />
42</head>

鎖定在 640px 就不用擔心什麼了,話說那些這麼寫的是要做什麼

1<meta
2 name="viewport"
3 content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
4/>

程壁線下文藝店 & 主播資料收集頁

這兩個差不多,都是 HTML5 表單,後端也是Play Framework(真的挺好用的框架),用了一下百度統計和騰訊分析,感覺不錯。

Young 榜 HTML5

這個任務拖了我一個多星期,本來預計兩三天結果,結果設計師和市場一直在糾結設計需求,不過要不是這樣也不會有一個好用的推廣後臺 ╮(╯▽╰)╭, 這個東西用了Swiper,很贊的觸摸滑動插件,對移動端支持很棒。

這個 HTML5 是可以配置修改的,只要在後臺設置好就能生成新的一期了,總體來說還 ok。

推廣後臺

這個也能講一大堆,暫時不講了,休息休息~~

Join our email list and get notified about new content

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.

More articles from Edward Elric

Tagless Final in Rust

总所周知学习 Java 逃不开对各类设计模式的理解运用。今天千里冰封介绍了一个全新的设计模式——"Tagless Final" Style, 它可以用 trait 在 Rust 中模拟子类型。 第一步实现目标 实现一个 expr…

July 18th, 2020 · 1 min read

Recoil 一个基于 actor 模型的 React 状态管理库

前言 最近在 React Europe 2020 Conference 上, facebook 内部释出一个状态管理库 Recoil 通过官方的宣传以及初步的使用,Recoil 在处理 shared state 上比较方便,也能做到最小度的更新来提升复杂 App…

May 16th, 2020 · 2 min read
© 2015–2020 Edward Elric
Link to $https://twitter.com/sasuke688848Link to $https://github.com/sasuke40Link to $https://www.linkedin.com/in/sasuke/