写给小白的低代码教程(1)

1,531 阅读2分钟

1、目的

有小伙伴想要了解 并且尝试 低代码平台,但是没有找到非常简单的小白教程,今天它来了,此处使用 foxpage

PS: 低代码认知

通过配置化的低成本交互方式(主流是拖拽)加上少量代码,去满足一类应用的需求
低代码实现原理其实蛮简单,预置子组件,通过拖拽选择所需组件在画板上进行位置的编排

2、环境 && 拉取项目

环境准备(自己装一下 非常简单 有问题评论区见 haha)

  • nodejs 14.15.1+
  • mongodb 5.0+
  • 安装
$ npm install -g @foxpage/foxpage-cli


# install with yarn


$ yarn global add @foxpage/foxpage-cli
  • 如果直接在根目录下(mac 终端新起一个 命令页) 跑上面的命令 可能 没办法 继续 运行 接下来的 代码 , 所以建议 新起一个 空文件夹 再运行安装

  • 还是 失败 在命令前面 添加 sudo 目的是 缺少的包 在mac 会尝试去下载,会请求 系统权限,没有 sudo 就无权限

image.png

sudo npm install @foxpage/foxpage-cli -g
  • 看到这样的字样应该就是 ok 了

image.png

  • 拉取项目
foxpage-server fetch
  • 注意 需要 选择 这两个 安装依赖

image.png

  • 然后 可能会像这样 失败 非常的瓜皮

image.png

  • 再次安装 注意 需要 cd 到 foxpage 目录下 执行命令
foxpage-server install
  • 经过 一段时间等待

image.png

3、跑起来

  • 配置 mongod
cd foxpage/foxpage-server
  • 找到这个文件 development.ts

主要修改 mongo 端口

  • 继续报错 server 起不来 怎么解决 这个明显是 ts 校验有问题,我们没有深入了解代码前 建议 直接忽略处理

image.png

  • like this

image.png

  • 在尝试 跑一下 good !

image.png

  • 继续 报错? mongo 也启动了

image.png

  • 这样导致的问题是 无法使用 server 无法登陆体验功能 和修改

image.png

  • 命令行 报错

image.png

  • 这个怎么解决 ?

下期 再谈 ~ 敬请期待 ~

foxpage 文档 还是 需要 细化一些 对于 新手 不太友好