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

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

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

总结

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

目录
相关文章
|
17小时前
|
存储 JavaScript 前端开发
使用 React JS 构建现代化的 Web 应用
React JS 是一个流行的 JavaScript 库,用于构建用户界面。它具有简单、灵活和高效的特点,让开发者可以轻松构建出现代化的 Web 应用程序。在本篇博客中,我们将探讨 React JS 的一些核心概念和技术,以及如何使用它来创建强大的用户界面。
3 0
|
4天前
|
前端开发 搜索推荐 JavaScript
服务端渲染(SSR):提升现代Web应用的性能与用户体验
在现代Web应用开发中,服务端渲染(Server-Side Rendering, SSR)已经成为提高性能、SEO友好以及增强用户体验的关键技术之一。本博客将深入探讨服务端渲染的核心概念、实施方法以及为什么它对于构建现代Web应用如此重要。
15 0
|
4天前
|
前端开发 JavaScript API
前端路由:构建现代Web应用的导航之道
在构建现代Web应用程序时,前端路由是不可或缺的一部分。它允许用户在应用内导航,同时保持URL的同步,使应用看起来像一个多页面应用程序。本博客将深入研究前端路由的核心概念、实现方式、最佳实践以及如何为您的Web应用程序创建流畅的导航体验。
15 0
|
4天前
|
存储 JavaScript 前端开发
Vue.js中的组件通信:构建交互式Web应用的关键
Vue.js是一款流行的JavaScript框架,以其组件化的开发方式而闻名,但在构建复杂的Web应用时,组件之间的通信变得至关重要。在本博客中,我们将深入探讨Vue.js中的组件通信的不同方式、用法示例以及如何选择适当的通信方式来构建交互式和高效的Web应用。
12 0
|
4天前
|
数据库 数据安全/隐私保护 UED
表单处理(Form Handling):构建用户互动的Web应用的关键技巧
在Web应用程序开发中,表单是与用户互动最频繁的一种元素之一。而表单处理是使用户能够输入、提交和处理数据的关键技术。在本博客中,我们将深入探讨表单处理的概念、不同类型的表单元素、表单验证、表单提交和最佳实践,以及如何有效地使用表单处理来构建具有强大用户互动性的Web应用。
15 0
|
4天前
|
缓存 JavaScript 前端开发
列表渲染(List Rendering):构建动态Web应用的关键技术
在现代Web应用开发中,动态显示数据是至关重要的,而列表渲染是实现这一目标的关键技术之一。它允许开发者有效地渲染和管理动态生成的列表,如新闻文章、产品列表、评论等。在本博客中,我们将深入探讨列表渲染的概念、不同的列表渲染方法、性能优化以及如何利用列表渲染来构建具有动态性和响应性的Web应用。
10 0
|
4天前
|
JavaScript 前端开发 UED
事件处理(Event Handling):构建交互性Web应用的基石
在现代Web应用开发中,交互性是吸引用户的重要因素之一。而事件处理是实现这种交互性的关键。通过响应用户的操作,您可以创造出令人愉悦的用户体验。在本博客中,我们将深入探讨事件处理的概念、不同类型的事件、事件绑定、事件冒泡以及如何有效地使用事件处理来构建交互性强大的Web应用。
13 0
|
4天前
|
前端开发 JavaScript 网络架构
路由(Routing):构建现代Web应用的导航之道
在现代Web应用开发中,导航是至关重要的,用户需要能够浏览不同的页面和视图。而路由(Routing)是实现这种导航的关键概念,它允许开发人员在Web应用中定义不同的页面、视图和URL。在本博客中,我们将深入研究路由的概念、类型、工作原理,以及如何有效地使用路由来构建现代、多页面的Web应用。
11 0
|
6天前
|
人工智能 Serverless
课时8:典型案例1:一键迁移 Web 应用
典型案例1:一键迁移 Web 应用
161 0
|
6天前
|
存储 API 数据库
Python Flask - 快速构建Web应用详解
Python Flask - 快速构建Web应用详解
16 0
热门文章
最新文章
相关产品
函数计算
Serverless 工作流
Serverless 应用引擎
推荐文章
更多