zwd_staticweb

昭乌达智慧党建信息平台

快速原型工具，方便在客户现场制作快速制作界面原型，且可运行。

目录介绍

仔细读完下面目录：

.
├── README.md
├── app.js
├── bin     # express 入口
│   └── www
├── db.js   # mongodb链接工具类 
├── node_modules    # 模块
│   └── xxxx_lib
│       ├── LICENSE
│       ├── README.md
│       ├── index.js
│       └── package.json
├── package.json    # node配置
├── public      # 所有静态文件页面存放位置
│   ├── README.md   
│   ├── assets      
│   │   ├── css
│   │   │   ├── common
│   │   │   │   ├── index.css
│   │   │   │   └── theme
│   │   │   │       ├── blue.css
│   │   │   │       └── red.css
│   │   │   ├── djzhb # 项目1名称
│   │   │   │   ├── bgyf  # 一级菜单名称
│   │   │   │       └── bgyf  # 二级菜单
│   │   │   │           └── list.css
│   │   │   ├── main.css
│   │   │   └── reset.css
│   │   ├── img     # 图片目录参照上面css结构
│   │   │   ├── common
│   │   │   │   └── callback.png
│   │   │   ├── djzhb
│   │   │   │   ├── bottom.png
│   │   │   │   ├── index
│   │   │   │   │   └── zdgl.png
│   │   │   │   └── menu
│   │   │   │       ├── demo.css
│   │   │   │       └── iconfont.woff2
│   │   │   └── main
│   │   │       └── tb11.png
│   │   ├── js
│   │   │   ├── api     # 切换后台后此目录无用
│   │   │   │   ├── api.js
│   │   │   │   ├── data  # 可选择将数据存入本地json文件或者服务器mongodb
│   │   │   │   │   └── jcddjs
│   │   │   │   │       ├── djdsj
│   │   │   │   │       │   ├── dsj
│   │   │   │   │       │   └── zdjz
│   │   │   │   │       │       └── list.json
│   │   │   │   │       ├── main_menu.json
│   │   │   │   │       ├── sub_menu_人大.json
│   │   │   │   │       ├── sub_menu_工?\232?\205?工?\224.json
│   │   │   │   └── struct      # 关键目录，用于生成本地json文件，减少手写测试数据的工作量
│   │   │   │       └── jcddjs
│   │   │   │           ├── djdsj
│   │   │   │               │   
│   │   │   │               └── zjzzgl
│   │   │   │                   └── list.json
│   │   │   ├── app.js
│   │   │   ├── common
│   │   │   │   ├── range.js
│   │   │   │   └── validate.js
│   │   │   └── jcddjs
│   │   │       ├── dflz
│   │   │       │   └── dflz
│   │   │       │       └── list.js
│   │   │       ├── djdsj
│   │   │           └── dsj
│   │   │               └── list.js
│   │   └── lib     # 此目录用于存放前端类库
│   │       ├── jquery
│   │       │   ├── jquery-3.2.1.min.js
│   │       │   └── jquery.cookie.js
│   │       ├── layui
│   │       │   ├── css
│   │       │   │   ├── layui.css
│   │       │   │   └── iconfont.woff
│   │       │   ├── images
│   │       │   │   └── face
│   │       │   │       └── util.js
│   │       │   ├── layui.all.js
│   │       │   └── module
│   │       │       └── treetable-lay
│   │       │           └── treetable.js
│   │       └── viewer
│   │           ├── viewer.min.css
│   │           └── viewer.min.js
│   ├── gen-front.js    # 分析struct生成css、js、html、img目录，请在本地执行
│   ├── gen-struct.js   # 分析struct生成data json，请在本地执行
│   ├── index.html      # 主页
│   ├── init-db.js  # 将json文件导入mongodb，请在服务器执行
│   ├── page 
│   │   ├── csgl
│   │   │   ├── home.html
│   │   │   └── index.html
│   │   ├── djzhb   # 项目名称
│   │   │   ├── bgyf    # 一级菜单名称
│   │   │   │   └── bgyf.html   # 二级菜单名称.html
│   │   │   └── zzjg
│   │   │       └── wggl.html
│   │   ├── jzld
│   │       ├── home.html
│   │       └── index.html
│   ├── template_list.html.ejs     # html模版（ejs）
│   ├── template_list.js.ejs    # js模板（ejs）
│   └── template_list.json.ejs   # list.json 测试数据模板（ejs）
├── routes  # 通用后台路由
│   ├── add.js  # c 增加
│   ├── edit.js # u 更新
│   ├── list.js # r 读取列表
│   └── remove.js # d 删除
└── util.js

package.json配置项说明

{
  "name": "staticweb", /*项目英文名称*/
  "version": "1.0.0",
  "description": "昭乌达智慧党建信息平台", 
  "private": true,
  "scripts": {
    "start": "node ./bin/www", /*启动项目*/
    "gen-code": "node ./public/gen-front.js", /*生成页面*/
    "import-json-to-mongo": "cd public;node init-db.js;cd .." /*导入list.json到mongodb*/
  },
  "dependencies": { /*依赖库*/
    "cookie-parser": "~1.4.4",
    "cors": "^2.8.5",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "mongodb": "^3.5.8",
    "morgan": "~1.9.1"
  },
  "devDependencies": { /*开发依赖库，生产环境不需要*/
    "ejs": "^3.1.3",
    "fs-extra": "^9.0.0"
  },
  "mongoUrl": "mongodb://localhost:27017/", /*mongodb 链接*/
  "dataPath": "assets/js/api/data/", /*数据存放目录*/
  "gen": {
    "genDataCount": 100, /*生成测试数据数量*/
    "httpRoot": "http://127.0.0.1:8000", /*本地开发时运行地址，发布服务器后会自动替换掉*/
    "isGenData": false, /*是否生成数据，慎用，可能会覆盖好不容易改好的数据*/
    "isGenMenu": false, /*是否生成菜单数据，慎用，可能会覆盖好不容易改好的数据*/
    "subProjectName": "djzhb" /*生成哪个子项目*/
  }
}

struct 说明

{
  "menu": {
    "menu": "办公用房", /*一级菜单*/
    "menu2": "办公用房" /*二级菜单*/
  },
  "schema": {
    "id": 1, /* key：列名，value：显示lable*/
    "no": "序号", /*后期可扩展为jsobj，如：{colName:"no",colLabel:"序号",type:"string",nullAbl:true,maxLen:10,minLen:2 等等}*/
    "dwmc": "单位名称",
    "fjh": "房间号",
    "pm": "平米",
    "xm": "姓名",
    "zw": "职务",
    "bz": "备注",
    "dwf": "单位负责人",
    "jjf": "纪检负责人",
    "lxdh": "联系电话"
    /*如有更多字段可以往后添加*/
  }
}

运行

1. 安装nodejs、mongodb
2. 打开cmd，到项目目录下运行：npm i
3. 启动：npm run start

建议开发工具：webstorm

从struct生成页面

可生成页面到对应文件夹，在package.json配置好gen{}后，执行下面命令： npm run gen-code

原录入的json导入mongodb

npm run import-json-to-mongo

部署服务器

1. windows10 安装windows terminal 和ubuntu（win商店搜索）
2. 修改脚本，运行
3. 手动部署过程，见脚本

二次开发

1. 修改gen-front和对应struct可支持不同类型字段的生成,甚至关联表页面和代码以及链接等
2. 可修改*.ejs模板调成页面
3. 可在routes下增加其他方法，入导入导出、上传下载图片、文件等