轻松搭建基于 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 ,可以打开轻商城:
可以在轻商城中浏览商品,并将喜欢的商品添加到购物车中(暂不支持支付):
架构图
项目部署
准备工作
- 从 aliyun 获取基础信息: accountId 可以从安全设置页面获取、ak 信息可以从安全信息管理页面获取。
- 下载 Fun 工具: 我们会使用 Fun 工具完成项目的部署工作。这里建议直接下载二进制可执行程序。
- 配置 Fun 工具: 下载完成后,执行 fun config 配置 aliyun accountId、ak 以及 region 等信息。如果域名没有备案,这里 region 只能选择海外集群。如果域名已经备案,则没有限制。
- 域名: 比如本文使用的 litemall.mofangdegisn.cn 域名。在域名所在的控制台添加一个 CNAME 域名解析,将记录值填写为 1911504709953557.cn-hangzhou.fc.aliyuncs.com,然后将这里的 1911504709953557 替换成自己的 accountid,cn-hangzhou 替换为自己在上一步配置的 region。
- 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
需要将上面的域名替换为用户自己的域名,执行完毕后,完成部署。
打开配置的域名即可看到效果。
总结
通过本文介绍的技巧,我们实现了快速部署商城应用到函数计算。
“阿里巴巴云原生关注微服务、Serverless、容器、Service Mesh 等技术领域、聚焦云原生流行技术趋势、云原生大规模的落地实践,做最懂云原生开发者的技术圈。”
轻松搭建基于 SpringBoot + Vue 的 Web 商城应用的更多相关文章
- 搭建基于springboot轻量级读写分离开发框架
何为读写分离 读写分离是指对资源的修改和读取进行分离,能解决很多数据库瓶颈,以及代码混乱难以维护等相关的问题,使系统有更好的扩展性,维护性和可用性. 一般会分三个步骤来实现: 一. 主从数据库搭建 信 ...
- Java版基于SpringBoot+Vue.js实现自动创表自动定时采集(各个微信公众号商城产品进行采集)-爬虫篇
- 一套基于SpringBoot+Vue+Shiro 前后端分离 开发的代码生成器
一.前言 最近花了一个月时间完成了一套基于Spring Boot+Vue+Shiro前后端分离的代码生成器,目前项目代码已基本完成 止步传统CRUD,进阶代码优化: 该项目可根据数据库字段动态生成 c ...
- Jeecg-Boot 2.0 版本发布,基于Springboot+Vue 前后端分离快速开发平台
目录 Jeecg-Boot项目简介 源码下载 升级日志 Issues解决 v1.1升级到v2.0不兼容地方 系统截图 Jeecg-Boot项目简介 Jeecg-boot 是一款基于代码生成器的智能开发 ...
- 使用NetBeans搭建基于Spring框架的Web应用
NetBeans下载链接:https://netbeans.org/. 第一步:选择“文件”菜单下的“新建项目”: 第二步:类别选择“Java Web”,项目选择“Web应用程序”,单击“下一步”: ...
- 服务器上详细前后端分离项目搭建(springboot+vue)
介绍:本文用的经典的前后端分离开源项目ruoyi Gitee链接地址:https://gitee.com/y_project/RuoYi 一.拉取项目: 利用Git把项目拉取到本地,也可以直接利用id ...
- SpringBoot+Vue+WebSocket 实现在线聊天
一.前言 本文将基于 SpringBoot + Vue + WebSocket 实现一个简单的在线聊天功能 页面如下: 在线体验地址:http://www.zhengqingya.com:8101 二 ...
- 基于SpringBoot搭建应用开发框架(二) —— 登录认证
零.前言 本文基于<基于SpringBoot搭建应用开发框架(一)——基础架构>,通过该文,熟悉了SpringBoot的用法,完成了应用框架底层的搭建. 在开始本文之前,底层这块已经有了很 ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(一): 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作
相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...
随机推荐
- Redis源码解析:07压缩列表
压缩列表(ziplist)是列表键和哈希键的底层实现之一.当列表键只包含少量列表项,并且每个列表项要么是小整数值,要么是长度较短的字符串时:或者当哈希键只包含少量键值对,并且每个键值对的键和值要么是小 ...
- idea 启动一直一直build以及勉勉强强的解决方案
周日做了一个密匙解析的功能,在idea的springboot项目的该类上写了个main方法测试,当时一直提示build,没在意,直接打开eclipse上写 今天早上发现 idea启动springboo ...
- 2019-8-31-dotnet-使用-MessagePack-序列化对象
title author date CreateTime categories dotnet 使用 MessagePack 序列化对象 lindexi 2019-08-31 16:55:58 +080 ...
- HDU-6290_奢侈的旅行(Dijstra+堆优化)
奢侈的旅行 Time Limit: 14000/7000 MS (Java/Others) Memory Limit: 512000/512000 K (Java/Others) Problem De ...
- Mybatis/Ibatis,数据库操作的返回值
该问题,我百度了下,根本没发现什么有价值的文章:还是看源代码(详见最后附录)中的注释,最有效了!insert,返回值是:新插入行的主键(primary key):需要包含<selectKey&g ...
- OracleSpatial函数
Oracle_spatial的函数 一sdo_Geom包的函数: 用于表示两个几何对象的关系(结果为True/False)的函数:RELATE,WITHIN_DISTANCE 验证的函数:VALIDA ...
- H3C 路由器的作用
- oracle自动选择索引
如果表中有两个以上(包括两个)索引,其中有一个唯一性索引,而其他是非唯一性. 在这种情况下,ORACLE将使用唯一性索引而完全忽略非唯一性索引. 举例: SELECT ENAME FROM EMP W ...
- 将 vue.js 获取的 html 文本转化为纯文本
我存入数据表中的数据是使用 html 格式,获取数据是使用 vue 获取. 遇到了一个问题,就是界面上显示的数据是 html 格式的,但是我需要它显示纯文本. 怎么做呢?首先在 js 中写一个将 ...
- 深入java面向对象三:抽象类和接口(转载)
文章系转载,地址: http://blog.csdn.net/xw13106209/article/details/6923556 1.概述 一个软件设计的好坏,我想很大程度上取决于它的整体架 ...