首页 > 其他分享 >MemfireCloud让静态托管页面动起来!

MemfireCloud让静态托管页面动起来!

时间:2024-03-28 16:13:54浏览次数:25  
标签:github 静态 数据库 托管 网站 MemfireCloud 页面

静态托管

我们最常接触到的静态托管是github pages,它的常见工作模式是在github上创建一个仓库,使用hexo类的工具初始化仓库,编写markdown文件,生成静态页面,推送到github上完成页面更新,比如https://blog.nimblex.cn/就是这样一个静态的网站。

局限性

原生静态托管的局限性在于它的更新通常需要重新将markdown文件编译程静态html,然后再发布到托管站。这是一个重新构建的过程,对于非程序员群体来说是有门槛的。  

常见动态web网站

一般用户通常会使用类似csdn、新浪博客之类的站点来构建自己的博客,用户只需要通过一个富文本编辑器编辑文章内容,提交即可发布。架设这样一个网站,通常需要后台支持,例如需要后台提供新增、删除、查询博客的接口,通常还需要提供登录注册鉴权等功能。这已经超出传统静态托管的范围了。   分析下动态web网站相对于静态网站有哪几点特殊能力
  • 包含一个后台服务例如以SpringBoot编写的服务、以Flask编写的服务,这些服务提供一系列接口供前端调用
  • 包含一个数据库,这个数据库存储网站内容、配置信息
  • 可能会包含一些静态文件或者对象存储服务用来存储图片
  一般需要维护这样一个动态网站需要前端开发、后台开发或者一个全栈开发工程师的配合,即需要前后端的能力。另外,要架设Spring或者Flaks服务,需要提供相应的运行时能力,换言之需要租服务器,像github pages这种静态托管站是不提供这个能力的。

MemfireCloud的增强

MemfireCloud是一个助力快速开发的云平台可以轻松构建小程序、Web网站、移动应用。

MemfireCloud可以提供什么

MemFire Cloud提供哪些能力呢?目前我关注如下这些:
  1. 云数据库
  2. 静态托管服务
  3. 对象存储(兼容S3)
  4. 提供一个supabase JS sdk ,可以访问上述云数据库、对象存储等能力。注意这是一个JS sdk
  5. 内置登录注册、用户管理等功能

王炸组合

我们看下上文中常见动态网站需要的能力
  1. 接口能力
  2. 数据库
  3. 静态文件存储服务
  在MemfireCloud平台上,这些通通都可以实现,而且是仅仅通过html + js就可以实现。放开脑洞,再加上静态托管,我们就可以直接构建动态网站了,不要SpringBoot、不要Flask、不要NodeJS,之要MemfireCloud就够了!!!

让静态托管动起来

我就用MemfireCloud构建并托管了一个类似Flomo的web应用(http://cmsrcpa5g6h1f588b1j0.app.memfiredb.cn/),这个应用其实是一个思绪整理工具。这个应用目前的主要功能是:
  • 用户可以在后上角输入想法内容,打上标签,保存想法
  • 同类标签会进行分归类
  • 支持回收站
  • 支持多用户注册登录访问
  大家从域名可以看到,这是一个公网服务且利用了MemfireCloud的静态托管服务,但是我们完全看不出来它是一个静态网站,它真的很动态!

它是怎么实现的

完全不像是github pages中常见的hexo等静态博客工具,这个网站是用React开发的单页面应用,在开发的过程中我完全就是把它当作一个动态应用来开发的,antd、Echarts之类的组件库直接用起来。下面我简要介绍其中的一些实现。

数据库定义

数据库定义直接使用MemfireCloud的数据库编辑页面进行

增删改查

使用Supbase JS sdk可以让js直接操作数据库,这块大家如果感兴趣可以通过文中链接查看他们的官网教程,使用起来也是非常简单的,非常类似于Python的SQLalchemy、Java的Mybatis等ORM框架,这里我以新增为例。   thoughts是定义的数据表,直接使用js api往库里面加数据。其他的操作也是类似的。
        const {data, error} = await supabase
                .from('thoughts')
                .insert(thoughts)
                .select('id')

静态托管

网站开发好了,需要将其发布到线上,也是很简单,直接将React打包并压缩成ZIP文件,上传到MemfireCloud即可访问在线网站了。

思考

MemfireCloud开发者一种能力,可以一站式开发、部署应用,特别是给予前端同学一种摆脱后端同学依赖的能力,不需要学习后端开发语言,就可以成为一名全栈开发工程师,这是MemfireCloud平台对每个前端开发工程师的赋能!这个意义是非常深远的,感谢MemfireCloudu团队。

标签:github,静态,数据库,托管,网站,MemfireCloud,页面
From: https://www.cnblogs.com/bymzy/p/18101946

相关文章

  • Login页面
    目录页面展示一、引入element-plus为什么要引入element-plus?element-plus的配置1、进行安装2、自动导入3、配置vite文件sass的配置Icon图标配置1、进行下载2、注册所有图标二、Login页面页面展示一、引入element-pluselement-plus官网:https://element-plus......
  • 第四章(页面组件)总结
    4.1一组件的定义及属性组件是页面视图层(WXML)的基本组成单元,组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个)基础组件。每一个组件都由一对标签组成,有开始标签和结束标签,内容放置在开......
  • Nginx配置静态代理/静态资源映射时root与alias的区别,带前缀映射用alias
    场景Nginx搭建静态资源映射实现远程访问服务器上的图片资源:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/117283572以上在配置静态资源映射时使用的如下配置     location/{           root  D:/pic_old/;           try_......
  • Java ----- 静态、继承、引用类型使用
    面向对象最重要的两个概念:类和对象;类名的首字母大写,满足“驼峰写法”;一个Java代码文件中,可以定义多个类,但是只有一个类是public修饰的,而且public修饰的类名必须成为代码的文件名称;、类中的成分研究:类中有且仅有五大成分(五大金刚)1.成员变量(Field:描述类和对象的属性信......
  • 第4章 页面组件
    一. 组件的定义及属性    1.1 语法格式如下: <标签名  属性名=“属性值” >内容....</标签名>  id 组件的唯一表示,保持整个页面唯一,不常用class 组件的样式类,对应WXSS中定义的样式  style组件的内联样式,可以动态设置内联样式......
  • Android开发-Android APP实操-1.项目创建及启动页面UI编码
    一、项目创建及模拟器安装1.选择新建一个project2. 选择空模板3.完成新project的设置 下载完成后点击Finish4.下载安卓模拟器 选择Pixel7点击下载R 为虚拟机命名,选择竖屏,点击Finish.5.点击启动,测试运行 运行成功! 二、启动页面UI编码 1.打开Main......
  • 基于vite多页面实现多端同构开发和部署
    背景由于在开发前端项目中,后台管理端和用户端存在多个模块和页面逻辑可以复用,管理模块和用户端渲染模块使用同一套状态管理机制,只是在管理端和用户端的入口和路由模块不同,为了能够在开发时同时修改管理端和用户端共用模块,不用多项目工程修改和发布,我们基于vite多页面的基础上实现......
  • 浏览器工作原理与实践--渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的
    在上篇文章中,我们介绍了渲染流水线中的DOM生成、样式计算和布局三个阶段,那今天我们接着讲解渲染流水线后面的阶段。这里还是先简单回顾下上节前三个阶段的主要内容:在HTML页面内容被提交给渲染引擎之后,渲染引擎首先将HTML解析为浏览器可以理解的DOM;然后根据CSS样式表,计算出DOM......
  • 浏览器工作原理与实践--渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的
    在上一篇文章中我们介绍了导航相关的流程,那导航被提交后又会怎么样呢?就进入了渲染阶段。这个阶段很重要,了解其相关流程能让你“看透”页面是如何工作的,有了这些知识,你可以解决一系列相关的问题,比如能熟练使用开发者工具,因为能够理解开发者工具里面大部分项目的含义,能优化页面卡......
  • php:页面链接数据库(封装),其他页面引入方法
    数据库连接get_db_conn.php//创建连接$conn=mysqli_connect($servername,$username,$password,$dbname);<?php//数据库连接参数define('DB_SERVER','localhost');//数据库服务器的地址define('DB_USERNAME','root');//数据库账户define(......