zhangshaolong / Module Project
扩展性和灵活性非常好的模块化开发框架,内置很灵活高效的模板引擎
Stars: ✭ 33
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Module Project
Startup Landing
Collection of free top of the line startup landing templates built using react/nextjs/gatsby. Free to download, simply edit and deploy! Updated weekly!
Stars: ✭ 176 (+433.33%)
Mutual labels: simple, ui-components, template
Chalk
Chalk is a high quality, completely customizable, performant and 100% free Jekyll blog theme.
Stars: ✭ 987 (+2890.91%)
Mutual labels: simple, template
Vipera
Project is now called Swift template, check the link ➡️
Stars: ✭ 57 (+72.73%)
Mutual labels: module, template
Beginners C Program Examples
Simple, Short and Sweet beginners friendly C language programs
Stars: ✭ 138 (+318.18%)
Mutual labels: simple, template
Uicard
Generic UI for card games like Hearthstone, Magic Arena and Slay the Spire...
Stars: ✭ 142 (+330.3%)
Mutual labels: ui-components, template
Swift Template
A template based module generator for Swift projects.
Stars: ✭ 34 (+3.03%)
Mutual labels: module, template
Template
A super-simple way to create new projects based on templates.
Stars: ✭ 120 (+263.64%)
Mutual labels: simple, template
Boomerang Free Bootstrap Ui Kit
Boomerang is a high quality UI Kit built on top of the well known Bootstrap 4 Framework. This theme was designed as its own extended version of Bootstrap with multiple functionalities and controls added, extended color palette and beautiful typography.
Stars: ✭ 196 (+493.94%)
Mutual labels: ui-components, template
Quick Free Bootstrap Theme
Free Bootstrap 4 Theme perfect for building responsive, mobile-first projects on the web suitable for businesses, startups, and agencies.
Stars: ✭ 31 (-6.06%)
Mutual labels: ui-components, template
Try
Dead simple CLI tool to try Python packages - It's never been easier! 📦
Stars: ✭ 588 (+1681.82%)
Mutual labels: simple, module
Tail Kit
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.
Stars: ✭ 997 (+2921.21%)
Mutual labels: ui-components, template
Material Sense
A React Material UI template to create rich applications with wizards, charts and ranges
Stars: ✭ 711 (+2054.55%)
Mutual labels: ui-components, template
Pg Calendar
📆 beautiful and eidetic date picker
Stars: ✭ 109 (+230.3%)
Mutual labels: simple, ui-components
Smoke
💨 Simple yet powerful file-based mock server with recording abilities
Stars: ✭ 142 (+330.3%)
Mutual labels: simple, template
Mcdowell Cv
A Nice-looking CV template made into LaTeX
Stars: ✭ 855 (+2490.91%)
Mutual labels: simple, template
Tempreites
One-file semantic DSL-free templates direto da roça for the browser and server.
Stars: ✭ 31 (-6.06%)
Mutual labels: template
Bootstrap Blog Template
An awesome blog template constructed using Twitter Bootstrap 3
Stars: ✭ 29 (-12.12%)
Mutual labels: template
页面模块化开发
环境搭建
1:安装nodejs,网上很多安装教程。安装完nodejs后,应该会自带npm,如果没有,还需要安装npm。
2:进入项目根目录
cd module-project
3:安装项目依赖的库
npm install
4:启动项目
npm start
5:访问项目
在浏览器输入:http://localhost:8080
6:项目构建
npm run build
使用教程
1:支持本地代理,轻松与rd通过源代码联调。
http://localhost:8080/task/list?proxy=xxx.xxx.xxx.xxx:80
设置proxy参数,指向rd的机器ip与端口
注意:一般联调可能有用户验证之类的操作,如果验证是利用cookie处理的,那么可以把代理地址的cookie手动在本地也设置一份,记得path设置为‘/’,这样的话,代理服务器会自动带上这个cookie。
2:支持本地本地路由,参考local-server/routerConfig.js文件
3:编码规范为src下的main.js为启动框架的js,建议设置,所有的页面入口js也都命名为xxx/main.js
4:编译脚本自己压缩合并js代码、压缩合并编译less代码、编译tpl文件为js代码,并最终把页面的js进行md5处理。
5:页面中如果有多层级的data-module-path声明,可以通过设置对应js的init返回deferred对象控制子模块的初始化时机。
6:可以在声明了data-module-path的元素上声明data-interceptor-path进行模块初始化之前的一些处理,interceptor的init可以返回数据或者返回deferred,由deferred传出数据,返回的数据之间在data-module-path所指向的js的init方法的参数中获取。
7:在每个模块的init方法中都可以获取到作用域元素、事件对象、数据存储对象以及作用域元素的data-xxx的数据。具体如下:
exports.init = function (dataFromInterceptor) {
var moduleNode = this.element;// 所有的注册事件建议都代理到此元素上,可以安全地处理多个模块间的潜在的元素干扰。
var dataFromNode = this.data;// 挂载在moduleNode的data-xxx属性上的数据。
};
8:本地开发mock,比如我们的规则是以/module-project/开头的请求都认为是调用后端api的接口,比如:/module-proejct/common/user,那么映射到mock文件为/mock/common_user.js,对应的内容类似如下:
{
"status" : 200,
"data": {
id: 1,
name: "张三\n12 sfdsd /nsdfsf "
}
};
or
function (params) {
return {
"status" : 200,
"sleep": 1000,
"data": {
id: 1,
name: "张三\n12 sfdsd /nsdfsf "
}
}
}
可以支持直接的数据或者返回一个function,此function支持获取请求参数,并把return的数据作为mock的数据返回。function用于需要动态结果时使用,可以支持延时返回,对应的返回字段sleep,值为毫秒数。
9:添加了restful接口的mock,具体使用方式请查看任务列表中的删除任务的接口。
10:支持了proxy模式下,可配置某些接口仍然走本地mock,需要在local-server/config.js里面配置ignoreProxyPaths。
11:项目中的nginx-conf.txt文件中是部分nginx做前后端分离的配置信息,如果需要,请参考。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].