开发者社区> tanhe123> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

轻松搭建基于 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

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

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

总结

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SpringBoot 居然有 44 种应用启动器
SpringBoot 居然有 44 种应用启动器
79 0
SpringBoot 的 44 种应用启动器,你都知道吗?
什么是应用启动器?SpringBoot集成了spring的很多模块,比如tomcat、redis等等。你用SpringBoot搭建项目,只需要在pom.xml引入相关的依赖,和在配置文件中简单的配置就可以使用相应模块了。 非常方便,spring boot集成了哪些启动器呢?
426 0
SpringBoot 应用篇 实现后端的接口版本支持
作为一个主职的后端开发者,在平时的工作中,最讨厌的做的事情可以说是参数校验和接口的版本支持了。对于客户端的同学来说,业务的历史包袱会小很多,当出现不兼容的业务变动时,直接开发新的就好;然而后端就没有这么简单了,历史的接口得支持,新的业务也得支持,吭哧吭哧的新加一个服务接口,url 又不能和之前的相同,怎么办?只能在某个地方加一个类似v1, v2... 那么有没有一种不改变 url,通过其他的方式来支持版本管理的方式呢?
125 0
面试最流行的问题,springboot简化配置的实现
面试最流行的问题,springboot简化配置的实现
50 0
SpringBoot 应用篇之从 0 到 1 实现一个自定义 Bean 注册器
我们知道在 spring 中可以通过@Component,@Service, @Repository 装饰一个类,通过自动扫描注册为 bean;也可以通过在配置类中,借助@Bean来注册 bean;那么除了这几种方式之外,还有什么其他的方式来声明一个类为 bean 么? 我们是否可以自定义一个注解,然后将这个注解装饰的类主动声明为 bean 注册到 spring 容器,从而实现类似@Component的效果呢?
122 0
基于javaweb(springboot+mybatis)生活美食分享平台管理系统设计和实现以及文档报告
主要模块设计如下: 1.用户模块管理:用户登录、用户的查询、添加、删除操作、 2.个人信息管理以及等操作
113 0
Java Springboot+VUE前后端分离网上手机商城平台系统设计和实现以及论文报告
主要模块设计如下: 1) 用户注册和登录功能:。 2) 用户信息的管理以及角色的管理、不同用户角色具有不同的功能权限操作。 3) 商品的操作、包括商品列表信息、商品的分离、商品的详情、品牌和规格等操作。
96 0
基于java(springboot+mybatis)网上音乐商城设计和实现以及论文报告
主要功能模块如下: (1) 用户登录和用户注册功能: ①用户注册 : 登录系统首页用户输入相关信息进行注册 ②用户登录 :
56 0
SpringBoot 整合 Security(一)实现用户认证并判断返回json还是view
看这篇文章的我默认都认为是有security基本基础的,因为封装的缘故,没有基础的话很容易被绕晕。但是只要认真看,我相信没什么大问题,如果仅仅是会用,该教程让你更熟悉底层实现,更优雅的写代码。
1087 0
SpringBoot+MyBatis开发环境搭建并实现登录权限过滤
  最近尝试了一下SpringBoot,发现在controller和service数量相同的时候,比之前用Tomcat启动SpringMVC快了一大半,配置也更少了,很多东西不去重新覆盖设置的话直接会以默认配置启动。
1371 0
+关注
tanhe123
热爱技术的技术男
文章
问答
来源圈子
更多
专注 Serverless、微服务、函数计算、Serverless 应用引擎、云原生技术
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
从Web到Cloud App——YunOS Web App 开发经验分享
立即下载
Serverless 开发实战--十分钟上线一个 Web 应用
立即下载
基于VUE的单页面性能优化实践
立即下载