Git Product home page Git Product logo

qpenform's Introduction

QpenForm

意思是Quick Open Form

前后端可分离,基于mdui和markdown-it,支持markdown语法

通过自定义语法增加控件

English: Tooooooooo loooooooooooog, I don't want to translate. Open your translate apps!


特点

  • 通过query获取表单文件
  • 表单文件是markdown,自由度高,限制少
  • 10秒自动保存
  • Material You设计控件
  • 支持文件上传等控件
  • 支持防止重复提交(前后端都检测)
  • 后端使用SQLite存储数据

快速开始

打开网页

你可以去这里或者其他地方访问前端部分

在url后面加上?和markdown文件链接即可

元数据语法

在第一行加上!&-->后加上json格式的元数据

{
  "title": "网页标题",
  "theme": "颜色主题(可选),要十六进制颜色码",
  "to": "后端地址,将会post过去",
  "upload": "上传文件url",
  "norep": "验证重复的链接(不填则不验证)"
}

控件语法

在行首加上&-->后加上json格式的控件数据

{
    "type": "控件类型",
    "id": "控件id",
    "config": "控件配置",
    "req": true /*是否必填*/
}

控件id

控件id用于在提交时获取值,在html中将作为元素的id

控件类型与配置

  • 单行输入框

type: text

config: {"holder": "输入框提示文字", "type":"text", "range": []}

type: 输入框类型

包括 text number email url date time

  • 多行输入框

type: textarea

config: {"holder": "输入框提示文字"}

  • 标签输入框

type: tagsinput

config: {"pinnedtags": true, "tags": ["标签","标签"]}

pinnedtags: 是否固定标签,true时tags才有效

  • 单选框

type: radios

config: {"opt": ["选项","选项"], "br': true}

req无效

br: 是否换行

  • 多选框

type: checkboxs

config: {"label": "标签", "br': true}

req无效

br: 是否换行

  • 下拉列表

type: select

config: {"opt": ["选项","选项"]}

req无效

  • 文件

type: files

config: {"withtext": true, "accept": "image/png"}

withtext: 是否带有文本

accept: 接受的文件类型(选填)

  • 表格选项

type: table

config: {“column”: [”列名”,”列名”], ”row”: [”行名”,”行名”]}


后端

有一个config.yaml,是配置的

save_files: f保存文件的位置(用于上传文件的)
no_repeat_db: 防止重复提交的后端部分数据库位置

forms:
    任意名字,好像没什么用:
        source: 前端url写的东西,也是md的路径
        relativepath: md相对于本程序的路径
        db: 存储数据库路径
    ...

很多地方没有完善,够自己用就行

新手第一次做这么大(相对于自己)的项目,花了我好几天的时间(算上在校有一个多月了)

qpenform's People

Contributors

for-the-zero avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.