GTLC全球技术领导力峰会·上海站,首批讲师正式上线! 了解详情
写点什么

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

2020 年 2 月 01 日

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

背景介绍

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


函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。函数计算更多信息 参考

Fun: Fun 是一个用于支持 Serverless 应用部署的工具,能帮助您便捷地管理函数计算、API 网关、日志服务等资源。它通过一个资源配置文件(template.yml),协助您进行开发、构建、部署操作。Fun 的更多文档 参考

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
复制代码


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


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


总结

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


本文转载自云栖社区。


原文链接


https://yq.aliyun.com/articles/741206?spm=a2c4e.11153959.teamhomeleft.1.31592eb1RkBs0Q


2020 年 2 月 01 日 11:156905

评论

发布
暂无评论
发现更多内容

深入理解Deno是如何借助PowerShell进行安装脚本

梁龙先森

前端 deno shell脚本编写 PowerShell 28天写作

【LeetCode】翻转图像Java题解

HQ数字卡

算法 LeetCode 28天写作 2月春节不断更

MySQL索引原理,一篇从头到尾讲清楚

云流

数据库 架构

使用PG_STAT_REPLICATION监视复制

PostgreSQLChina

数据库 postgresql 开源 软件 开源社区

MT马特量化机器人软件开发|MT马特量化机器人APP系统开发

开發I852946OIIO

系统开发

火山版强势来袭!字节21版Java程序员面试涨薪手册现已开源

周老师

Java 编程 程序员 架构 面试

为什么挤破头进大厂,大厂如何设置薪资职级体系?

不脱发的程序猿

HR 校园招聘 28天写作 二月春节不断更 互联网行业薪资

C语言重要的知识点

c 考核 重要知识 简单清楚 好看

华为大神珍藏版:SpringBoot全优笔记,面面俱到太全了

互联网架构师小马

Java 架构 微服务 Spring Boot Spring Boot 2

Open-Falcon 中的交换机监控

冯骐

go 运维 监控 网络 交换机

Kafka 是怎么存储的?为什么速度那么快?

码农架构

Java kafka 架构·

细节完美炸裂!GtiHub上点赞已破百万的并发编程四套全彩手册

Java架构追梦

Java 阿里巴巴 架构 面试 并发

中小公司开展NPS的好处

Geek_459987

安卓软件开发文献!阿里P8架构师的Android大厂面试题总结,建议收藏

欢喜学安卓

android 程序员 面试 移动开发

拒绝知识碎片化!阿里大牛亲码Java核心技能精讲笔记,系统梳理Java知识体系,金三银四面试必备!

程序员小毕

Java 程序员 架构 面试 分布式

园区网为主的 DNS 架构设计

冯骐

程序员 运维 监控 网络 DNS

Flink 如何实时分析 Iceberg 数据湖的 CDC 数据

Apache Flink

flink

资深大牛带你了解源码!分析Android未来几年的发展前景,快来收藏!

欢喜学安卓

android 程序员 面试 移动开发

网络编程入门从未如此简单(二):假如你来设计TCP协议,会怎么做?

JackJiang

TCP 网络编程

API策略量化机器人系统开发|API策略量化机器人APP软件开发

开發I852946OIIO

系统开发

一周信创舆情观察(2.8~2.21)

统小信uos

Serverless 如何在阿里巴巴实现规模化落地?

Serverless Devs

阿里云 Serverless 云原生 前端

第五周作业-流程图及时序图

Au revoir

面面俱到!阿里SpringBoot全栈宝典新开源,Spring技术入门进阶提升必备!

Java王路飞

Java spring 程序员 面试 springboot

2021年,是时候把技术债务管理提上日程了

禅道项目管理

效率 产品 创新 技术债

抖音春晚红包互动为啥全程无宕机?看完字节内部高并发速成笔记我悟了!

程序员小毕

Java 程序员 高并发 秒杀 字节

架构设计篇之微服务实战笔记(五)

小诚信驿站

架构师 刘晓成 小诚信驿站 成长笔记 28天写作

立足智能化发展,风电能源产业互联网平台加快建设

一只数据鲸鱼

物联网 数据可视化 3D可视化 能源管理 风力发电

大数据时代

Mr.cool

iOS开发前景

ios

新时代计算机技术

DNSPod与开源应用专场

DNSPod与开源应用专场

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