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

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

函数计算(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

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

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

总结

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


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/517032.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

股市中的Santa Claus Rally (圣诞节行情)

圣诞节行情 Santa Claus Rally Santa Claus Rally 是指 12 月 25 日圣诞节前后股市的持续上涨这样一个现象。《股票交易员年鉴》的创始人 Yale Hirsch 于 1972 年创造了这个定义,他将当年最后五个交易日和次年前两个交易日的时间范围定义为反弹日期。 根据 CFRA Re…

没想到!!Unicode 字符还能这样玩?

来源 | 程序通事责编 |晋兆雨头图 | CSDN 付费下载自视觉中国上周的时候,朋友圈的直升飞机不知道为什么就火了,很多朋友开着各种花式飞机带着起飞。图片来自网络还没来得及了解咋回事来着,这个直升飞机就????到的微博热搜。图片来自网络后…

为什么 APP 纷纷开发“暗黑模式”?优酷最佳实践总结

一、缘起 随着iOS 13和Android 10的正式发布,一个名词"暗黑模式(Dark Mode)"逐渐走入了大家的视野。各大APP都将暗黑模式的适配列入了开发日程,舆情上用户们对暗黑模式支持的呼声也非常的高。优酷主客也顺应时势,启动了相应的技术…

Mongo 安装、配置、启动 Windows

文章目录一、Mongo 安装1. Mongo 下载2. 安装3. 配置环境变量4. 验证5. 连接二、Mongo 配置2.1. 编辑mongod.cfg2.2. 修改dbPath2.3. systemLog路径2.4. 启动Mongod服务2.5. 安装MongoDB服务2.6. 验证一、Mongo 安装 1. Mongo 下载 下载Mongo数据库并安装 https://www.mongod…

混合云存储阵列与云存储网关的协同解决方案

前言 混合云存储阵列(CSA)于2017年云栖大会发布,上市2年多,已经被基因测序,医疗PACS,影视制作,非编,广电,视频监控等行业和场景的客户广泛采用。混合云存储阵列承载了用户…

炸裂!Google这波操作,预警了什么?

我们都知道谷歌爸爸收购了Cask Data一家公司。长期以来,谷歌致力于推动围绕 GoogleCloud 的企业业务,但在这方面一直被亚马逊和微软吊打,这次的收购正是为了弥补自身的短板。被收购的 Cask Data 是一家专门提供基于Hadoop的大型数据分析服务解…

Robo 3T 安装连接 MongoDB

文章目录1. 官网2.安装3. 连接 MongoDB1. 官网 https://robomongo.org 2.安装 3. 连接 MongoDB

何为真正的 FaaS ?阿里舜天平台做了四大创新

导读:数据中心和云计算的超高增速,AI、视频、基因测序等应用对于算力的无尽渴求和摩尔定律发展事实上已经停滞的现实,均给异构加速带来了巨大的应用潜力和商机。但 Faas 解决方案仍有较高的门槛,今天,我们一起了解 Faa…

SOA为什么不“香”了? | 大咖说中台

作者 | 耿立超责编 | 晋兆雨来源 | 《大数据平台架构与原型实现:数据中台建设实战》SOA 所有的理念都是基于现有应用系统展开的,不管是对服务的梳理还是服务之间的交互,都是以现有应用系统为载体的,中台不同于SOA 的地方在于&…

看到抖音上Python工程师晒得工资条,我沉默了......

我是个抖音中毒者闲来无事就喜欢刷抖音最近刷到了一个Python工程师的工资条然后我默默的打开看了然后就默默的关闭了如今Python技术由于大数据、人工智能的兴起Python也越来越火大家都纷纷学Python我不能跟你确保说学完Python你就能拿高工资但是你学完Python肯定有饭吃说不定还…

不用 H5,闲鱼 Flutter 如何玩转小游戏?

阿里妹导读:最近APP游戏化成为了一个新的风口,把在游戏中一些好玩的、能吸引用户的娱乐方式或场景应用在应用当中,以达到增加用户粘性,提升DAU的效果,成本较低。同时在一些需要对用户有引导性的场景,游戏化…

阿里巴巴向全社会开放黑科技:“泡在水里”的服务器

为了让数据中心更绿色,阿里工程曾将服务器“泡在水里”进行散热,节能超70%,今天这项黑科技的神秘面纱被揭开。 2020年1月6日,阿里巴巴宣布将“浸没式液冷数据中心技术规范”向全社会开放。这项规范旨在用一套标准流程为下一代绿色…

VS Code vue 模板

我们希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容。 打开VSCODE编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,我们输入vue, 如下&am…

程序员必备基础:Git 命令全方位学习

来源 | 捡田螺的小男孩责编 | Carol封图 | CSDN 下载自视觉中国掌握Git命令是每位程序员必备的基础,之前一直是用smartGit工具,直到看到大佬们都是在用Git命令操作的,回想一下,发现有些Git命令我都忘记了,于是写了这篇…

eBay邓明:dubbo-go 中 metrics 的设计

最近因为要在 Apache/dubbo-go(以下简称 dubbo-go )里面实现类似的这个 metrics 功能,于是花了很多时间去了解现在 Dubbo 里面的 metrics 是怎么实现的。该部分,实际上是被放在一个独立的项目里面,即 metrics 。 总体…

稳定性专题 | Spring Boot 常见错误及解决方法

导读 『StabilityGuide』是阿里多位阿里技术工程师共同发起的稳定性领域的知识库开源项目,涵盖性能压测、故障演练、JVM、应用容器、服务框架、流量调度、监控、诊断等多个技术领域,以更结构化的方式来打造稳定性领域的知识库。 Spring Boot 作为 Java…

vue3 线上环境 ctx 无法识别

解决方案: Vue3获取当前组件实例的 getCurrentInstance 方法上 ctx 生产获取不到 上面的全局方法, getCurrentInstance代表上下文,即当前实例。ctx相当于Vue2的this, 但是需要特别注意的是ctx代替this只适用于开发阶段,如果将项目…

新职业风口已至!人社部宣布这10个职业缺口近千万!

负责阿里小蜜产品的陈海青是阿里最年轻的P9专家,才30岁出头,已经年入百万。小编的前领导,农村出身毫无背景,但是抓住风口卖掉了手里的比特币全款买了学区房,让他的孩子赢在起跑线上。面对这些踩在风口上的幸运儿&#…

一小时快速搭建基于阿里云容器服务-Kubernetes的Web应用

本文面向的读者 如果您是一个Kubernetes的初学者,本文可以帮助你快速在云上搭建一个可实际使用的集群环境,并发布自己的第一个应用。你无须提前准备任何的硬件资源或者下载任何的软件包。 如果您已经有一个自建的Kubernetes集群,想要尝试阿…

VS Code Git 日常操作

文章目录1. 初始化Git仓库2. 新建分支3. 提交4. 同步远程4.分支切换5. 合并分支1. 初始化Git仓库 使用**ctrl**召唤出命令窗口 # 初始化Git仓库 git init2. 新建分支 点击右下角的master,上方就会出现一个输入框,点击正在创建新分支,输入…