# NodeWeb **Repository Path**: wildish/NodeWeb ## Basic Information - **Project Name**: NodeWeb - **Description**: 基于nodejs的前端快速开发框架 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2016-08-31 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README #NodeWeb 本项目同HybridFramework( http://git.oschina.net/wildish/HybridFramework )协同工作，用于提供Hybrid App中Html框架的解决方案 项目主要是为了解决HybridApp难于开发调试，单元测试而产生，实现了在桌面浏览器中开发调试，只修改少量配置文件而不修改代码的情况下一键整合到app中的目标 web目录是Html框架，基于HistoryJS，使用requirejs进行模块管理 server目录是基于ExpressJS的服务器端，提供了热部署，数据模拟等功能 test目录用于单元测试 目前并没有文档，最终的文档会在HybridFramework形成稳定版本之后发布 IDE使用Atom，另外需要NodeJS依赖。 下面有系统搭建的完整记录，按照步骤来应该很快能运行起来。 2016-11-08 by wildish -------------------------------------------------------------------------------- 修改列表控件，使用IScroll5，并实现内部方法和Demo 2016-11-04 by wildish -------------------------------------------------------------------------------- 提交到gitosc 2016-10-10 by wildish -------------------------------------------------------------------------------- 现在系统可以使用真机调试访问node_server了 前提： 手机使用公司网络，同主机在同一网段内 设置： 1. 项目config.js中，修改debug参数 true表示web调试环境，用于在电脑上进行日常开发 false表示真机调试环境，用于真机调试 2. 将web目录整体拷贝到assets目录下，并使用zip默认格式压缩，并修改名称为web.data 该步骤可以使用android studio预设工具，具体方法参见讨论组截图 3. 在android studio中打开Global.java文件(使用ctrl+shift+r可以快速打开文件) 修改常量DEBUG_SERVER_URL为本机node_server地址，比如http://192.168.18.234:3000 修改PROJECT_NAME为需要测试的项目名称 修改静态常量DEBUG为true true表示访问访问DEBUG_SERVER_URL false表示使用正式环境，访问SERVER_URL 4. 使用alt+shift+x启动调试 2016-09-26 by wildish -------------------------------------------------------------------------------- 更新index.js 修正热部署中存在的异常 现在日志中可以输出请求参数了，格式是 :method :url :status :response-time ms - :reqParams method为请求类型 url为请求链接 status是http状态码 response-time响应时间 reqParams请求参数，已经去掉url,_local,d等内置参数 2016-09-08 by wildish -------------------------------------------------------------------------------- 初步建立框架内的自动化测试模块 更新代码 运行 npm install npm install --only=dev 自动测试模块基于mocha(测试系统)，chai(断言)，supertest（express测试框架） 演示代码 /test/project/test_login.js 运行测试 npm test 2016-09-05 -------------------------------------------------------------------------------- 更新代码 运行 npm install npm install --only=dev 1. 引入express-validator，用于实现前端请求参数验证 使用和要求: 参见module_mock.js 地址: https://github.com/ctavan/express-validator 常见验证函数写法参见 https://github.com/chriso/validator.js 2. 引入mockjs，用于模拟数据测试 使用和要求： 参见module_mock.js 文档地址： https://github.com/nuysoft/Mock/wiki 3. 引入node-extend模块，用于实现类似jquery.extend()的功能 文档地址 https://github.com/justmoon/node-extend 2016-08-31 -------------------------------------------------------------------------------- 在atom的setting中 安装docblockr插件以便于写注释 安装pigments插件即时显示页面颜色 安装tortoise-svn插件，安装完成之后需要在配置页面配置本地tortoise目录，只有在目录中就可以右键执行svn相关操作了 2016-08-29 10:18:20 -------------------------------------------------------------------------------- 加入全局日志 1. 执行"npm install morgan --save-dev" 2. 按照正常方式启动服务器 然后访问web/main.html即可看到异步请求及其返回的结果 morgan是以express中间件形式返回的，所以并不提供即时日志的功能 如果需要直接输出日志，请使用console.log 2016-08-26 11:30:01 by wildish -------------------------------------------------------------------------------- 修改前端开发框架，使用express-hot-loader实现Express服务器热部署 首先更新代码 然后打开命令行进入项目目录，执行"npm install"命令和"npm install --only=dev"命令 在此基础上，服务器端添加路由组件时需要按照以下步骤 1. 新建路由组件文件，并实现路由基本内容 注意!!!路由的路径必须使用单引号 比如 router.all('/test', function() {.....} 是正确的 但是 router.all("/test", function() {.....} 则无法刷新 2. 在route_config.js中注册路由组件，并在module.hot.accept中注册组件 3. 运行服务器 3.1 alt+shift+t新建terminal，输入"npm run hot"，并执行 注意!!!，此处脚本可能执行失败，请注意查看错误日志 a) 如果提示"out无操作权限""out目录无法删除"之类的错误，可能由于本地文件目录被占用导致脚本执行失败 这类错误请继续执行，直到根目录下生成out目录且目录下生成bundle.js及bundle.js.map文件为止 b) 如果提示“rm不是内部或者外部命令”之类的命令运行后出错 则可能是系统配置的问题，暂时不能明确问题的原因，解决办法是 i) 手动删除out目录 ii) 执行npm install webpack -g命令 iii) 执行webpack --watch --hot命令 这样就可以正确的生成out目录和文件了 3.2 alt+shift+t新建terminal，输入"npm start"，并执行 之后修改路由内容时，不需要重启服务器即可查看修改 整合后，服务器框架（serve目录及其以下文件）已经支持es2015标准js写法 项目目录（web目录及其以下文件）暂不支持 2016-08-24 by wildish -------------------------------------------------------------------------------- 新建开发环境的方法 1. 下载代码 2. alt+shift+t新建terminal 3. 运行"npm install" 4. 运行"npm install --only=dev" 项目中包括的主要文件说明： .babelrc babel配置文件，用于提供js语法兼容性 .eslintrc.json eslint配置文件，用于代码语法检测 package.json 项目配置文件，包括各种依赖的配置 webpack.config.js webpack配置文件，用于项目打包，本例中使用其实现express动态加载 index.js 项目入口，配置文件 route_config.js 路由配置文件 2016-08-22 by wildish -------------------------------------------------------------------------------- 常见快捷键 ctrl+shift+p 快捷操作检索 ctrl+t 快速打开项目文件 ctrl+shift+f 在项目目录中检索 ctrl+shift+d 复制line ctrl+shift+k 删除line ctrl+up/down 移动line alt+shift+t 新建命令行 ctrl+` 隐藏/打开命令行窗口，无已经打开的，会新建 alt+shift+x 关闭命令行 alt+shift+j 切换命令行