当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

moa-frontend

基于 jQuery + bootstrap 的前端框架
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 国产
投 递 者 苏丰茂
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

基于 jQuery + bootstrap 的前端框架。

技术栈

  • express

  • jade

  • bootstrap

  • bootstraptable

  • jquery

  • gulp

  • nginx

前后端分离实践

  • 前端:moa-frontend

    • public下面的采用nginx做反向代理

    • 其他的采用express+jade精简代码(ajax与后端交互)

  • 后端:moa-api

Install

npm install 
npm start

访问 http://127.0.0.1:3010/

Features

  • 经典的 jQuery + bootstrap 简单易用

  • 响应式,兼容移动端和pc端

  • expressjs + jade 代码极简,功能强大

  • 自动挂载路由,在routes目录创建js文件会被自动识别,无需在app.js里配置

  • 代码变动,自动重启服务器

  • 支持log4js日志

  • 内置simditor和七牛上传图片

  • 内置uploadify文件上传

  • 使用gulp构建

Configuration

nginx

  • 复制config/nginx.example.conf为config/nginx.conf

  • 修改config/nginx.conf相关端口配置

  • 执行gulp nginx

说明

  • 实际端口8000

  • 前端端口3010

  • api端口3005

simditor_qn

  • 复制config/simditor_qn.example.conf为config/simditor_qn.conf

module.exports = {
  path: '/simditor/upload',
  fileKey: 'file',
	multer:{ 
	 	dest: 'uploads/' 
	},
	qn:{
		accessKey: 'xxx',
		secretKey: 'yyy',
		bucket: 'mengxiaoban',
		origin: 'http://{bucket}.u.qiniudn.com',
		// timeout: 3600000, // default rpc timeout: one hour, optional
		// if your app outside of China, please set `uploadURL` to `http://up.qiniug.com/`
		// uploadURL: 'http://up.qiniu.com/',
	},
	url:function(result){
		return "http://img.mengxiaoban.cn/" + result.hash;
	}
}

说明

  • path 是simditor里使用的上传路径

  • fileKey 是上传后,路由里req获取的字段名称

  • multer是express里multer中间件的配置

  • qn是qn这个node模块的配置

  • url是最终图片地址,可以自己定义

Tasks

  • npm start 启动服务器

  • gulp routes 打印路由

  • gulp kp 停止服务器

  • gulp nginx 启动nginx服务器

  • gulp 跑测试,依赖gulp watchgulp mocha

  • ios 技术支持网址: 有问题的可以留言。  邮箱地址: jhtxchenhao@163.com 谢谢

  • moa-release-2019.05.0-bin 不知道为什么官网下载贼慢,其他下好的人都是要C币或积分,我直接分享出来吧,这个是截止目前最新的了。 链接:https://pan.baidu.com/s/1I7CQHQZj14SZAB66JfUhoA 提取码:xcus

 相关资料
  • 本文向大家介绍基于bootstrap风格的弹框插件,包括了基于bootstrap风格的弹框插件的使用技巧和注意事项,需要的朋友参考一下 自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框、提示框。后续功能扩展、bug修改再更新。 html页面中调用: 感觉写的不是很好,后面修改了或者扩展了功能再更新。源码会上传到文件。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多

  • 本文向大家介绍基于.Net实现前端对话框和消息框,包括了基于.Net实现前端对话框和消息框的使用技巧和注意事项,需要的朋友参考一下 关于前端对话框、消息框的优秀插件多不胜数。造轮子是为了更好的使用轮子,并不是说自己造的轮子肯定好。所以,这个博客系统基本上都是自己实现的,包括日志记录、响应式布局等等一些本可以使用插件的。好了,废话不多时。我们来实现自己的对话框和消息框。 对话框 要求:可拖动、点击按

  • 本文向大家介绍基于Layer+jQuery的自定义弹框,包括了基于Layer+jQuery的自定义弹框的使用技巧和注意事项,需要的朋友参考一下 目的:XXXX项目中,很多的弹窗是利用freemarker的网页标签追加的形式实现的,网页弹框只是将隐藏的div显示出来,这样会使网页在预加载时速度变慢,增加页面加载和响应时间 解决方法如下:<已分中心管理的添加分中心弹框实现机制为例> 1.弹框页面部分的

  • 本文向大家介绍详解基于Bootstrap扁平化的后台框架Ace,包括了详解基于Bootstrap扁平化的后台框架Ace的使用技巧和注意事项,需要的朋友参考一下 最近一段时间在做一个管理系统,在网上找了很久的前端展示框架,终于找到一款基于Bootstrap的后台管理系统模版:Ace。Bootstrap是Twitter 于2010年开发出来的前端框架,用过的同学应该知道,这款前端框架不仅界面很美观,而

  • 本文向大家介绍基于BootStrap multiselect.js实现的下拉框联动效果,包括了基于BootStrap multiselect.js实现的下拉框联动效果的使用技巧和注意事项,需要的朋友参考一下 背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动,网上找了半天才找到

  • 本文向大家介绍Bootstrap每天必学之前端开发框架,包括了Bootstrap每天必学之前端开发框架的使用技巧和注意事项,需要的朋友参考一下 BootStrap学习从现在开始,前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传的11大原因。如果你还没有使用Twitter Bootstrap,建议你去了解一下。小编也是最近才