fis系列-基于fis3前后端工程解决方案weg

weg

基于fis3+node.js+express/koa+swig的前端和后端集成解决方案,当然weg也可以使用于纯前端项目。

github源码:https://github.com/hubcarl/weg

weg模块化解决方案通过自定义相关插件解决了fis3以下问题:

  1. 插件weg-command-server 解决了fis3的默认server不自动安装package.json依赖问题.
  2. 插件weg-command-server 解决了fis3不能指定node启动入口文件,weg server start –entry app.js.
  3. 插件weg-command-server 支持控制台或者命令行显示log日志功能.
  4. 插件weg-command-server 支持了监听服务器文件修改自动重启node server的功能.
  5. 支持多项目release目录隔离,解决fis多个项目release到同一目录问题.
  6. weg-swig插件通过标签支持模板继承和模块化加载widget.
  7. 插件weg-swig插件支持模块chunk加载和lazy加载,以及pagelet模式.
  8. weg结合express/swig/es6, 提供一套完整的前后端解决方案,并提供解决方案脚手架weg-blog.
  9. 提供自定义中间件解决 根据配置文件自动注册注册中间件遍历指定目录自动注册路由

weg-blog

基于weg+express+swig的前端和后端集成解决方案工程示例.

使用文档:http://codehelp.cn/blog/2016/04/09/weg-blog

github源码:https://github.com/hubcarl/weg-blog

目录

特点

  • 基于原生fis3前端集成方案对前端资源进行打包,相比自定义fis扩展,方便fis组件升级和维护。
  • 整合前端和node.js后端,提供一套express + swig骨架,并提供基于mysql的运行实例. 服务器支持路由, 中间件自动注册, 同时引入coexpress 解决异步回调问题, 支持es6 yield语法. 拿来即可使用,扩展也很方便。
  • 模板引擎采用 swig ,提供易用的 html、head、body、pagelet、widget、script、style 等扩展标签。基于这些标签后端可以自动完成对页面的性能优化。
  • 基于 widget 标签,可以轻松实现组件化,同名tpl、 css、js自动关联加载。

示例截图

image

快速开始

如果还没有安装 node 请先安装 node.

“`bash

安装 fis 到全局

npm install -g weg

下载工程.

git clone https://github.com/hubcarl/weg-blog.git

进入 weg-blog 目录, release 后就可以预览了。

cd weg-blog

工程运行

weg release -w 文件修改监控

weg server start 默认入口文件为server.js 自定义入口文件需要指定entry参数(weg server start –entry app.js)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
graduation 毕业设计代码,还没完成!但可以跑哦~ Fis3+Es6+Smarty+Tmpl 项目实战 阅读以下部分假定你已经了解: 构建工具 Fis3 基于Smarty的解决方案 Fis-Smarty 一些杂碎 Less, Tmpl, Es6 ... 微薄网站的设计与实现 功能 展示,留言,评论,评论量,访问量 后台CMS 瀑布流展示,懒加载数据 接入微博组件等 技术方案 前后端分离 构建: Fis3 结构: HTML,TMPL,Smarty 样式: Less 类库/框架: jQuery util: urlParam ... 数据: 假数据模拟,后期发布开发机联调 目录结构 前端目录 └─graduation ├─ README.md ├─ home └─ common ├─ plugin # Smarty 的插件放入这个目录 ├─ smarty.conf # 本地测试的 Smarty 引擎的配置文件 ├─ fis-conf.js # fis3 的配置文件 ├─ page # 放一些页面 ├─ server.conf # 本地测试的URL转发规则配置文件 ├─ static # 非组件静态资源 ├─ test # 假数据 └─ widget # 放一些 widget,里面代码最终会被组件化封装 ├─ header # 头部模块 │ ├─ header.js # js文件es6 │ ├─ header.less # css预处理 │ ├─ header.tmpl # JS模板 │ └─ header.tpl # Smarty 复用还是挺方便的 ├─ nav # 导航模块 ├─ article # 文章模块 └─ footer # 尾部模块 目录文件不是都必须需要,一般都会包含page、widget俩目录 前端预览或发布到本地模拟开发机预览该项目 发布到本地模拟开发机预览该项目 修改 fis-global-conf.js const RECEIVER = 'http://127.0.0.1/graduation-rd/receiver.php'; const to_path = '/graduation-rd'; const base_url = '/Applications/XAMPP/xamppfiles/htdocs/graduation-rd/'; 安装 npm install -g fis3 npm install -g fis3-smarty 后端环境下载 启动 fis3 release -r common xuecheng fis3 release -r home xuecheng fis3 release -r ... 发布成功后目录 └─ htdocs └─graduation-rd ├── application ├── home.php ├── license.txt ├── receiver.php ├── system ├── user_guide ├── template # .tpl 发布位置 ├── static # 静态资源发布位置 ├── plugin # plugin/*.php 发布位置 └── config # config/*.json 发布位置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值