程序博客网 > 剑灵灵剑捏脸数据图

一点一滴分析LinkIt™ Smart 7688 webUI

来源：互联网 发布：剑灵灵剑捏脸数据图 编辑：程序博客网 时间：2024/05/22 03:49

目录(?)[+]

LinkIt 7688提供了一个友好的登录界面，源代码可以在下面的连接下载到： 
https://github.com/MediaTek-Labs/linkit-smart-7688-webUI 
翻译文档： 
http://blog.csdn.net/hnhkj/article/details/50932118

通过对代码的初步分析：它采用了多种技术，例如：Node.js, React组件，jQuery库等javascrip技术。牵扯的内容比较繁杂。如果说是我们希望对这个webUI有一个详细的了解得话，那么我们就要花费一定的时间来学习和搞清楚这些东西。对于一个JavaScript高手的话，那就另当别论了。对于我们新手的话，那就需要在繁杂的内容当中找到线索，来抽丝剥茧找到技术的核心。这样我们就可以让这个webUI为我所用了。这对于有些人来讲，是非常有用的。 
接下来时间内，我会将我的分析心得一点一点记录下来。让有兴趣的朋友能够不走或少走弯路。

该webUI采用node.js编写，采用的是标准的commonJS规范，整个webUI包由多个相关的文件夹组成。编译后生长应用文件到build/目录下。严格来讲，生成的应用文件仍然是javascrip文件，只是对一些格式进行了缩减。我们完全可以通过对应用文件修改来实现功能修改。最便利的方法当然是对源代码进行修改，然后进行编译生成应用代码。webUI的目录结构参考如下：

linkit-smart-7688-webUI文档结构

linkit-smart-7688-webUI  app    build  //编译文件目录      7688.png      7688_duo.png      en.app.js      main.css      riona-sans-light.otf      riona-sans-medium.otf      riona-sans-regular.otf      zh-cn.app.js      zh-tw.app.js    css // css文件目录      main.css    font  // 字体文件目录      riona-sans-light.otf      riona-sans-medium.otf      riona-sans-regular.otf    img  // 图像文件目录      7688.png      7688.svg      7688_duo.png      7688duo.svg      mediatek.png    lib  // lib文件目录，核心文件保存在此处      actions        appActions.js      components        content.jsx        header.jsx        login.jsx        network.jsx        resetpassword.jsx        sysinfo.jsx      constants        appConstants.js      dispatchher        appDispatcher.js      stores        appStore.js      util        rpcAPI.js        ubusStatus.js      app.jsx    locale  // 本地化目录，首先了中英文显示的对照      en.json      zh-CN.json      zh-TW.json    index.html    webpack.client.config.js    zh-cn.html    zh-tw.html  docs  rpc_demo_files  // 测试目录  package.json  webpack.config.js  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

经过初步的分析，webUI的核心代码包含在lib文件夹下。所有的功能是实现都是由目录下面的这些代码来完成的。

linkit-smart-7688-webUI提供的开发环境

对于webUI提供的开发环境，node和npm的安装对于新手来讲是一个挑战。我使用的是ubuntu 12版的，内置了node和npm。但是它们的版本都比较低，不是webUI要求的版本号。因而，整个模拟运行就不能进行下去。一连串的包版本不对应。利用apt-get install node， 这也是抓瞎。对于我的ubuntu来讲，我采用了指定版本的node来安装。至于，npm，我按照它的安装命令。这是我来回折腾了两天才搞定的，累死宝宝了0^0。 
下面是我的ubuntu的安装过程：

$ wget https://nodejs.org/dist/v0.10.28/node-v0.10.28.tar.gz$ tar -xvf node-v0.10.28.tar.gz$ ./configure$ make$ sudo make install$ sudo npm install npm@2.9.0 -g
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

如此操作，我就顺利安装上了指定版本的node和npm。good，一切就绪，可以开始我们的webUI调试之旅了。

$ git clone https://github.com/MediaTek-Labs/linkit-smart-webUI.git$ npm i$ npm run watch
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

一切并没有想象的那么顺利，又遇到问题卡壳了，显示下面的错误。一头雾水，没有心思看是怎么错误了，这么多的信息，哪里看起？

node v0.10.28 npm v2.9.0

ubuntu@ubuntu-virtual-machine:~/openwrt/linkit-smart-webUI$ sudo npm 
run watch

> linkit-smart-7688-webui@0.0.1 watch /home/ubuntu/openwrt/linkit-smart-webUI 
> NODE_ENV=dev webpack-dev-server –port 8081 –colors –inline –hot –config ./webpack.config.js

Start building: dev

module.js:340 throw err; ^ Error: Cannot find module 
‘./locale/zh-cn’ at Function.Module._resolveFilename 
(module.js:338:15) at Function.Module._load (module.js:280:25) at 
Module.require (module.js:364:17) at require (module.js:380:17) at 
Object. 
(/home/ubuntu/openwrt/linkit-smart-webUI/app/webpack.client.config.js:9:12) 
at Module._compile (module.js:456:26) at normalLoader 
(/home/ubuntu/openwrt/linkit-smart-webUI/node_modules/babel-core/lib/api/register/node.js:199:5) 
at Object.require.extensions.(anonymous function) [as .js] 
(/home/ubuntu/openwrt/linkit-smart-webUI/node_modules/babel-core/lib/api/register/node.js:216:7) 
at Module.load (module.js:356:32) at Function.Module._load 
(module.js:312:12) at Module.require (module.js:364:17) at require 
(module.js:380:17)

npm ERR! Linux 3.2.0-95-generic-pae npm ERR! argv “node” 
“/usr/local/bin/npm” “run” “watch” npm ERR! node v0.10.28 npm ERR! 
npm v2.9.0 npm ERR! code ELIFECYCLE npm ERR! 
linkit-smart-7688-webui@0.0.1 watch: NODE_ENV=dev webpack-dev-server 
--port 8081 --colors --inline --hot --config ./webpack.config.js npm ERR! Exit status 8 npm ERR! npm ERR! Failed at the 
linkit-smart-7688-webui@0.0.1 watch script ‘NODE_ENV=dev 
webpack-dev-server –port 8081 –colors –inline –hot –config 
./webpack.config.js’. npm ERR! This is most likely a problem with the 
linkit-smart-7688-webui package, npm ERR! not with npm itself. npm 
ERR! Tell the author that this fails on your system: npm ERR! 
NODE_ENV=dev webpack-dev-server –port 8081 –colors –inline –hot 
–config ./webpack.config.js npm ERR! You can get their info via: npm ERR! npm owner ls linkit-smart-7688-webui npm ERR! There is 
likely additional logging output above.

npm ERR! Please include the following file with any support request: 
npm ERR! /home/ubuntu/openwrt/linkit-smart-webUI/npm->debug.log

没有办法，硬着头皮也要上。看吧！万事只要静下心来，就都可以解决。发现了问题的所在。原来是源码的问题，原来是app/webpack.client.config.js引用的./locale/zh-cn 和./locale/zh-tw。但是，在实际的目录下的文件名称是这样子的zh-CN.json和zh-TW.json，大小写不同。找不到指定的文件因而出现了这个问题。果断修改app/webpack.client.config.js，将对应的小写字母改称对应的大写字母。重新运行npm run watch。good，没有错误信息的。

ubuntu@ubuntu-virtual-machine:~/openwrt/hnhkj/linkit-smart-7688-webUI$ npm run watch> linkit-smart-7688-webui@0.0.1 watch /home/ubuntu/openwrt/hnhkj/linkit-smart-7688-webUI> NODE_ENV=dev webpack-dev-server --port 8081 --colors --inline --hot --config ./webpack.config.jsStart building:  devhttp://localhost:8081/webpack result is served from http://127.0.0.1:8081/build/content is served from /home/ubuntu/openwrt/hnhkj/linkit-smart-7688-webUI
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

这条命令还没有实现，因为我的ubuntu没有安装chrome。在浏览器中键入 http://127.0.0.1:8081/app. ok，显示登录界面了。

$ open -n -a /Applications/Google\ Chrome.app --args --user-data-dir="/tmp/chrome_dev_session" --disable-web-security
  • 1
  • 1

还没有完，界面只是登录界面，对登录界面的修改可以得到验证。但是对登录后的界面如何验证，还需要以后再研究！

到目前为止，对app的源代码问题应该不大了，验证也可以慢慢研究了。可是如何将进行修改后的源码编译到build/目录下面哪？这是一个新的问题了。我原来以为readme中的开发流程会自动将源码编译到build中，经过测试并没有实现。经过一番研究，我们需要采用新的方法。

javascrip源码打包

javascrip源码需要经过编译后，生成简化的javascrip代码到build/下面。这种方法大大减小了访问时的数据量。 
该webUI采用了webpack工具，Webpack 是一个前端资源加载/打包工具。参考连接https://hulufei.gitbooks.io/react-tutorial/content/webpack.html。经过webpack打包后，jiavascrip源代码被打包到build/目录下。

$ sudo npm install -g webpack$ sudo npm install -g babel-core babel-preset-es2015 babel-preset-react$ sudo npm install babel-loader coffee-loader$ npm run watch
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

运行webpack自动对源代码进行打包。

ubuntu@ubuntu-virtual-machine:~/openwrt/hnhkj/linkit-smart-7688-webUI$    npm run watch   > linkit-smart-7688-webui@0.0.1 watch /home/ubuntu/openwrt/hnhkj/linkit-smart-7688-webUI   > NODE_ENV=dev webpack-dev-server --port 8081 --colors --inline --hot --config ./webpack.config.js       Start building:  dev http://localhost:8081/ webpack result is served    from http://127.0.0.1:8081/build/ content is served from    /home/ubuntu/openwrt/hnhkj/linkit-smart-7688-webUI
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

Openwrt和LinkIt webUI接口

Openwrt提供了新的借口LUCI2，该接口提供ubus技术。这种技术可以使用html+css+js和openwrt进行沟通。

又过了几天的学习，我对LinkIt Smart 7688 webUI有了新的认识。原来，该webUI采用的是openwrt的ubus技术，通过uhttpd-mod-ubus插件进行的服务控制。该方法是通过json数据包实现的对openwrt系统的数据读取。 
在rpc_demo_files目录下面有一个测试文件，该测试文件很好地说明了各个功能的实现测试。原来我是多么的无知！

login界面修改

分析总结

对于该webUI的设计，主要存在的技术手段： 
1. web技术 html+css+javascript 
2. ubus

ubus是核心，做为openwrt服务器对外接口。web技术为前端技术，实现显示介面和控制提交。至于build中的文件，使一种数据的压缩。它是将css, javascript, 图片等信息压缩到了这个目录下面，从而减少了通讯的数据量，提高相应的速度。

对于openwrt的相关技术，后续还会继续分析！至于这个webUI，也会继续分析。分析的结果会持续更新！

如果有志同道合之人，也可分享您的心得。我们共同讨论学习，共同进步。浅显认识，大虾别见笑！ 0^0

技术参考：

ubus (OpenWrt micro bus architecture) 
https://wiki.openwrt.org/doc/techref/ubus?s[]=ubus 
node.js官方网站 
https://nodejs.org 
commonJS规范 
https://webpack.github.io/docs/commonjs.html 
React库中文说明 
http://reactjs.cn/ 
jQuery 教程 
http://www.w3school.com.cn/jquery/index.asp 
javascrip教程 
http://www.w3school.com.cn/b.asp 
JSON教程 
http://www.w3school.com.cn/json/index.asp 
XML教程 
http://www.w3school.com.cn/x.asp

如果英文好点可以访问http://www.w3schools.com/网站

0 0
剑灵灵剑捏脸数据图 剑灵灵剑捏脸数据图
原创粉丝点击
热门IT博客
ip地址和端口的关系ip地址和端口的关系
ws10b 知乎ws10b 知乎
软件开发评分标准
怎么用网络赚钱
程序员gif搞笑图片
spss数据分析教程
python教学视频知乎
java图形输出的编程题
ubuntu ssh连接不上
卢武铉在韩国名声知乎
淘宝新店铺怎样排前
管家婆erp端口
域名排名
欧洲十国游 知乎
响一声电话软件
软件安全培训
刘心武揭秘红楼梦知乎
mysql突然高并发
宁波指动网络董事长
ubuntu chm阅读器
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 怎么聊天不尬 火疮 逗疮 攀登者感情戏太尬 如何和女生聊天不尬聊 抖音尬舞机下载 抖音尬舞机 郑州尬舞二姐 尬舞是什么意思 郑州尬舞 诸天降临现实不要尬舞 诸天降临现实 不要尬舞 如何解除一问一答尬聊模式 朋友聊天怎样不尬聊 即鱼 超鱼 溜鱼段 昆明就业网 就业推荐表 大学生就业 中国就业网 就业形势 就业率 就业机会 再就业 就业情况 就业指导 就业专业 高校就业信息网 日本老人就业率新高 定向就业和非定向就业区别 金融工程就业岗位 就业失业登记证 金融学就业工资 金融工程就业方向女生 金融学硕就业方向 金融工程就业工作职位 金融专业就业方向女生 金融专业就业方向细分 金融管理就业方向女生 武汉理工就业信息网

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里