轻松搭建基于 SpringBoot + Vue 的 Web 商城应用

2023-11-03

首先介绍下在本文出现的几个比较重要的概念:

函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。
Fun: Fun 是一个用于支持 Serverless 应用部署的工具,能帮助您便捷地管理函数计算、API 网关、日志服务等资源。它通过一个资源配置文件(template.yml),协助您进行开发、构建、部署操作。
litemall 是一个基于 Spring Boot、Vue、微信小程序等技术开发的商场系统。它包括 Spring Boot 后端 + Vue 管理员前端 + 微信小程序用户前端 + Vue 商城移动端。

本文演示如何将该商城应用的 Spring Boot 后端、Vue 管理员前端、Vue 商城移动端三个组件迁移到函数计算

下面是一个已经将到函数计算应用示例效果演示。

效果演示

管理后台效果演示

打开 http://litemall.mofangdegisn.cn 显示登陆页面:

使用默认的账户即可登陆。完成后,会进入到后台管理页面:

可以在后台管理页面添加商品类目、上架商品、用户管理、系统管理等等。

移动端轻商城效果演示

使用手机打开网址 http://litemall.mofangdegisn.cn/vue/index.html ,可以打开轻商城:

可以在轻商城中浏览商品,并将喜欢的商品添加到购物车中(暂不支持支付):

架构图

项目部署

准备工作

  1. 从 aliyun 获取基础信息: accountId 可以从安全设置页面获取、ak 信息可以从安全信息管理页面获取。
  2. 下载 Fun 工具: 我们会使用 Fun 工具完成项目的部署工作。这里建议直接下载二进制可执行程序。
  3. 配置 Fun 工具: 下载完成后,执行 fun config 配置 aliyun accountId、ak 以及 region 等信息。如果域名没有备案,这里 region 只能选择海外集群。如果域名已经备案,则没有限制。
  4. 域名: 比如本文使用的 litemall.mofangdegisn.cn 域名。在域名所在的控制台添加一个 CNAME 域名解析,将记录值填写为 1911504709953557.cn-hangzhou.fc.aliyuncs.com,然后将这里的 1911504709953557 替换成自己的 accountid,cn-hangzhou 替换为自己在上一步配置的 region。
  5. Mysql: 可以是自己搭建的 MYSQL 数据库,也可以使用 aliyun RDS 数据库,准备好 MYSQL 的用户名以及密码。如果仅仅是 demo 示例,可以将 rds 白名单设置为 0.0.0.0/0,并申请外网地址,如果是非示例场景,需要为函数计算配置 VPC 访问,可以参考这里的教程配置 VPC 访问 RDS。本文的示例为 demo 性质,因此使用的是 0.0.0.0/0 的方式。

克隆项目

执行下面的命令克隆项目:

git clone git@github.com:tanhe123/litemall.git

如果没有安装 Git,也可以直接在页面点击 Downlaoad Zip 直接下载代码并解压:

为域名创建 CNAME

为我们准备好的域名,添加 CNAME 记录

导入数据库

在 MYSQL 数据库上创建一个名为 litemall 的 database,然后将 litemall-db/sql 中的 litemall_table.sql 以及 litemall_data.sql 两个文件导入到该数据库中。

如果使用的是 aliyun RDS,可以直接通过下面的方法导入:

修改 template.yml 中的配置

修改 template.yml 中的 SPRING_DATASOURCE_DRUID_URL 为数据库地址,修改 SPRING_DATASOURCE_DRUID_USERNAME 为数据库用户名,修改 SPRING_DATASOURCE_DRUID_PASSWORD 为用户名密码。

最后将 template.yml 中的域名 litemall.mofangdegisn.cn 替换为自己域名。

安装商城 Vue 管理员后端 + Vue 商城移动端的 npm 依赖

对于 linux 或者 mac,可以直接执行项目内的 ./install.sh,该命令会分别进入到 litemall-admin 以及 litemall-vue 执行 cnpm install。

编译 Java 项目并部署

假如我们要使用的域名是 http://litemall.mofangdegisn.cn ,执行以下命令:

DOMAIN=http://litemall.mofangdegisn.cn ./deploy.sh

需要将上面的域名替换为用户自己的域名,执行完毕后,完成部署。

打开配置的域名即可看到效果。

总结

通过本文介绍的技巧,我们实现了快速部署商城应用到函数计算


原文链接
本文为阿里云原创内容,未经允许不得转载。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

轻松搭建基于 SpringBoot + Vue 的 Web 商城应用 的相关文章

  • 内网穿透的应用-使用Net2FTP轻松部署本地Web网站并公网访问管理内网资源

    文章目录 1 前言 2 Net2FTP网站搭建 2 1 Net2FTP下载和安装 2 2 Net2FTP网页测试 3 cpolar内网穿透 3 1 Cpolar云端设置 3 2 Cpolar本地设置
  • AntDB内存管理之内存上下文之内存上下文机制是怎么实现的

    4 内存上下文机制是怎么实现的 下文将针对内存上下文机制进行代码说明 本次以AntDB的代码为例 来解析内存上下文的实现方式 4 1 最基础的数据结构 MemoryContextData和MemoryContextMethods是内存上下文
  • 【Mysql】InnoDB 引擎中的页目录

    一 页目录和槽 现在知道记录在页中按照主键大小顺序串成了单链表 那么我使用主键查询的时候 最顺其自然的办法肯定是从第一条记录 也就是 Infrimum 记录开始 一直向后找 只要存在总会找到 这种在数据量少的时候还好说 一旦数据多了 遍历耗
  • 【计算机毕业设计】个人日常事务管理系统

    进入21世纪网络和计算机得到了飞速发展 并和生活进行了紧密的结合 目前 网络的运行速度以达到了千兆 覆盖范围更是深入到生活中的角角落落 这就促使 管理系统的发展 管理系统可以实现远程处理事务 远程工作信息和随时追踪工作的状态 网上管理系统给
  • 【计算机毕业设计】航空信息管理系统

    传统信息的管理大部分依赖于管理人员的手工登记与管理 然而 随着近些年信息技术的迅猛发展 让许多比较老套的信息管理模式进行了更新迭代 飞机票信息因为其管理内容繁杂 管理数量繁多导致手工进行处理不能满足广大用户的需求 因此就应运而生出相应的航空
  • 【计算机毕业设计】基于web的山东红色旅游信息管理系统

    有效的处理想要的相关信息和如何传播有效的信息 一直是人类不断探索的动力 人类文明火种的传承都是通过了多种媒介作为载体 也是随着社会生产力的发展不断的更新 随着互联网的到来 信息传播与管理都上升了一个新的台阶 并且方便应用的同时也要考虑信息传
  • 软件测试/测试开发/全日制/测试管理丨Redis内存数据库

    Redis是一种开源 内存中的数据结构存储系统 它提供了高性能 灵活性和丰富的数据结构 以下是Redis内存数据库的基本介绍 键值存储 Redis基于键值对的存储模型 其中每个键都与一个特定的值相关联 这种简单的数据模型使其易于使用和理解
  • 如何使用其他端口在 Visual Studio Code 中离线调试无服务器?

    我有两个无服务器离线 服务器 我需要同时在本地运行 所以我需要更改其中一台服务器的端口 我使用 Visual Studio Code 调试器运行服务器 服务器的配置位于 launch json 文件中 如何更改无服务器离线应用程序的端口 以
  • 【计算机毕业设计】二手图书交易系统

    随着世界经济信息化 全球化的到来和互联网的飞速发展 推动了各行业的改革 若想达到安全 快捷的目的 就需要拥有信息化的组织和管理模式 建立一套合理 动态的 交互友好的 高效的二手图书交易系统 当前的信息管理存在工作效率低 工作繁杂等问题 基于
  • 【计算机毕业设计】趵突泉景区的智慧导游小程序_5ztvv

    当今社会已经步入了科学技术进步和经济社会快速发展的新时期 国际信息和学术交流也不断加强 计算机技术对经济社会发展和人民生活改善的影响也日益突出 人类的生存和思考方式也产生了变化 传统趵突泉景区的智慧导游采取了人工的管理方法 但这种管理方法存
  • 【计算机毕业设计】OA公文发文管理系统_xtv98

    近年来 人们的生活方式以网络为主题不断进化 OA公文发文管理就是其中的一部分 现在 无论是大型的还是小型的网站 都随处可见 不知不觉中已经成为我们生活中不可或缺的存在 随着社会的发展 除了对系统的需求外 我们还要促进经济发展 提高工作效率
  • Oracle EBS AP发票导入 API Rejection List 第二部分

    Oracle EBS AP发票导入 API Rejection List 第二部分 The report lists the reason the invoice could not be imported and prints a bri
  • Mysql中设置只允许指定ip能连接访问(可视化工具的方式)

    场景 Mysql中怎样设置指定ip远程访问连接 Mysql中怎样设置指定ip远程访问连接 navicat for mysql 设置只有某个ip可以远程链接 CSDN博客 前面设置root账户指定ip能连接访问是通过命令行的方式 如果通过可视
  • 毕业设计:基于python人脸识别系统 LBPH算法 sqlite数据库 (源码)✅

    博主介绍 全网粉丝10W 前互联网大厂软件研发 集结硕博英豪成立工作室 专注于计算机相关专业 毕业设计 项目实战6年之久 选择我们就是选择放心 选择安心毕业 感兴趣的可以先收藏起来 点赞 关注不迷路 毕业设计 2023 2024年计算机毕业
  • 每日变更的最佳实践

    在优维公司内部 我们采用发布单的方式进行每天的应用变更管理 这里给各位介绍优维的最佳实践 变更是需要多角色合作的 而且他是整体研发流程的一部分 在优维内部 我们坚持每日变更 打通开发环节到最终发布上线的全过程 在保证质量的前提下 尽可能提升
  • 部署 lambda 函数时如何从无服务器获取 API 网关 ID 作为输出部分

    我想在无服务器的输出部分获取API网关的ID 然后将其转换为我的API URL https fgh5t4tjm2 execute api us east 1 amazonaws com dev 在另一个无服务器中使用 下面是我通过在无服务器
  • 我可以使用 AWS API Gateway 作为 S3 网站的反向代理吗?

    我在 AWS S3 上有一个无服务器网站 但 S3 有一个我想克服的限制 它不允许我拥有友好的 URL 例如 我想替换网址 www mywebsite com user html login daniel 对于这个 URL 友好 www m
  • Zeit (Vercel) 现在无服务器身份验证请求因 CORS 而失败

    我在执行以下任一操作时都无法正确处理 CORS 问题PATCH POST PUT来自浏览器的请求发送Authorization标题带有一个Bearer token 这在浏览器之外可以正常工作 并且适用于GET请求 中Zeit 现在无服务器
  • page.goto() 上的云函数超时

    我在云函数中使用 puppeteer 运行测试 如果我在本地机器上运行测试一切都很好 如果我在云函数模拟器中运行测试也没关系 但是当我将函数部署到云端时 所有测试都停留在 page goto https 并且函数因超时而失败 在我的例子中是
  • 如何使用 AWS Lambda 安装 Git?

    我在代码提交存储库中有代码 我正在编写一个 lambda 函数来为代码提交存储库的每个签入 事件 构建代码 我无法安装 git 因此无法克隆存储库 我该怎么办呢 正如其他人提到的 在 lambda 上安装 git 要么非常困难 要么完全不可

随机推荐

  • JVM调优工具总结(jConsole jmc jvisualvm)

    一 环境准备 centos7服务器一台 安装jdk1 8 一个可运行java的jar包 最好是有个服务器运维工具 我用的是宝塔面板 主要是用来开放端口 当然你是用命令开放也可以的 本地win10上安装jdk1 8 二 启动 1 将jar包放
  • 最易懂得 鸿蒙 实战 - 真机调试 原子服务

    升级到3 0 ide后 增加一些sdk 更新速度还是很快 广告也开始鸿蒙标识了 看来华为大动作很快 另外 体验了华为m6的超级终端 还是被震撼一下 速度上 性能上确实是万物互联的感觉 鸿蒙的动态效果 确实有点自己独有味道 但是缺少独特性 反
  • 前馈神经网络(一 神经元)

    声明 本文是博主在学习前馈神经网络时的笔记 仅供学术交流 非商用 内容可能涉及一些大佬的资料 包含网上电子的和实体书籍等 由于学习工程中查阅的资料多而杂 所以每一部分具体的参考资料并没有详细对应 如有侵权 还望海涵 并联系博主删除 本人才疏
  • apache编程思想--挂钩(HOOK)

    如果让你自己编写一个web服务器你会怎么设计 我曾经使用java语言实现了一个最简单的web服务器 我的做法是应用一个socket类启用去监听一个特定的端口 并根据http协议标准去解析这样一个长串 POST reg jsp HTTP CR
  • PHP代码导航编辑 PhpStorm 2022中文

    PhpStorm 2022提供最优秀的代码补全 重构 实时错误预防等等功能 能够为程序员提供更为效率的php开发 新版本改进了phpstorm软件的自动完成功能 还增加了代码清理工具 可以删除不必要的部分来优化全类名称 从而更好的提高用户的
  • sql计算用户留存率和时间留存率

    Sql 29 计算用户的平均次日留存率 题目 现在运营想要查看用户在某天刷题后第二天还会再来刷题的平均概率 请你取出相应数据 解法1 表里的数据可以看作是全部第一天来刷题了的 那么我们需要构造出第二天来了的字段 因此可以考虑用left jo
  • Android 打包Jar(发布SDK)常见问题及解决方案

    在Android开发过程中 我们经常会有这种需求 需要将自己开发一个类库打包成jar包以供他人 其他人一般指开发者 调用 而不是直接打包apk文件供最终用户使用 在打包成jar后 你往往会自己先测试一下看jar包能不能直接使用 这时就会常常
  • mac下ssh报错:ssh_exchange_identification: read: Connection reset by peer

    1 美图 2 背景 base lcc lcc hadoop 2 7 4 sh sbin stop all sh This script is Deprecated Instead use stop dfs sh and stop yarn
  • Ant Design Pro入门之部署安装

    部署安装 下载地址 https github com ant design ant design pro 我们使用资料中提供的 已经下载好的文件 ant design pro master zip 第一步 将ant design pro m
  • VSCode 无法更新插件 XHR timeout error 解决办法

    注 本方案仅为XHR timeout error错误的其中一种解决方案 作者使用此方法修改后更新成功 但不保证对于所有的XHR Timeout Error错误 使用此方法后可解决问题 另注 依评论区要求 现已上传修改windows授时服务器
  • 为什么实时时钟的晶振都是32.768KHZ呢

    原来我也只知道实时时钟就应该用32 768KHZ的晶振但不知道为什么 今天突然想知道为什么就查了查 搞懂了 写下来 为了积累 为了分享 1 振荡电路用于实时时钟RTC 对于这种振荡电路只能用32 768KHZ 的晶体晶体被连接在OSC3 与
  • OpenWrt 快速入门(源码目录)

    文章目录 1 OpenWrt 优点 2 OpenWrt 版本发展 3 OpenWrt 源码 缩略语 Acronyms and Abbreviations OpenWrt Wrt Wirless Router 官网 www openwrt o
  • Namomo Test Round 2 C 序列

    题意 给定一个长度为 n n n的序列 a a a 每次可以选择 l
  • Python报错合集(1)

    1 slice None None None 0 is an invalid key X train X test y train y test train test split X resampled y resampled test s
  • MySQL启动过程中的问题

    1 创建my ini 进入MySQL的安装目录 创建配置文件my ini配置文件 写入内容 mysql 设置mysql客户端默认字符集 default character set utf8 mysqld 设置3306端口 port 3306
  • easyExcel设置水印

    1 依赖导入
  • Linux命令入门教程(五):系统管理篇

    Linux系统管理 包括权限管理 网络配置 软件安装 各类参数设置 开关机 系统运行状态等 5 1 权限管理 在linux系统中 用户类别有超级用户和普通用户 只有一个超级用户root 普通用户可以有多个 最根本的区别就是权限不同 在lin
  • iOS17可以更新了!网友实测炫酷值拉满,但续航嘛…

    丰色 发自 凹非寺量子位 公众号 QbitAI iOS 17终于来了 今天凌晨正式推送 有数码博主评价 实用性不高 但酷炫值拉满 旺柴 可以说是一句话概括了 不过有测评发现 更新后续航掉依然的厉害 特别是iPhone XR 可得谨慎了 还登
  • 关于代理抓包,ssl pinning解决方案

    详情见我的博客小生博客 抓包 代理抓包 Fiddler charles能抓http https websocket属于应用层 优点 配置简单 抓取解析ssl方便 缺点 app对代理抓包的检测越发厉害 https http是明文传播 易被修改
  • 轻松搭建基于 SpringBoot + Vue 的 Web 商城应用

    首先介绍下在本文出现的几个比较重要的概念 函数计算 Function Compute 函数计算是一个事件驱动的服务 通过函数计算 用户无需管理服务器等运行情况 只需编写代码并上传 函数计算准备计算资源 并以弹性伸缩的方式运行用户代码 而用户