微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建（1）
目录
一、商城架构图
前端：
二、商城管理系统前端页面
1、SPA介绍
2、webpack
四个核心概念
3、vue-cli
安装
4、项目测试
三、电商项目搭建
创建父模块管理
创建子模板注册中心ly-registry
创建modul子项目ly-gateway
创建ly-item父工程（位于leyou父工程的下面）
创建ly-item的modul子项目ly-item-interface
创建ly-item的modul子项目ly-item-service
ly-gateway项目添加zuul的路由映射item-service
互联网行业的要求：
高并发（分布式、静态化技术、CDN服务、缓存技术、异步并发、池化、队列）
高可用（集群、负载均衡、限流、降级、熔断）
电商行业的一些常见模式：
B2C：商家对个人，如：亚马逊、当当等
C2C平台：个人对个人，如：闲鱼、拍拍网、ebay
B2B平台：商家对商家，如：阿里巴巴、八方资源网等
O2O：线上和线下结合，如：饿了么、电影票、团购等
P2P：在线金融、贷款，如：网贷之家、人人聚财等。
B2C平台：天猫、京东、一号店等
一、商城架构图
前端：
后台系统会采用前后端分离开发，而且整个后台管理系统会使用vue.js框架搭建出单页应用（SPA）。
前台系统我们会使用nuxt（服务端渲染）结合vue完成页面开发。处于SEO优化的考虑，我们将不采用单页应用。
二、商城管理系统前端页面
我们的后台管理系统前后端分离开发，而且整个后台管理系统会使用vue.js框架搭建出单页应用（SPA）。
1、SPA介绍
SPA（single page application），即单页应用。整个后台管理系统只会出现一个HTML页面，剩余一切页面的内容都是通过vue组件来实现。
这些vue组件其实就是许多的JS文件。不过前端项目除了js，还有css、image、font等，甚至前端还开发出各种不同类型的拓展语言，这么多东西在打包、构建的过程中，人工来操作非常麻烦，因此就会有一些工具来帮助搭建前端。例如：webpack、vue-cli等
2、webpack
将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
将代码打包的同时进行混淆，提高代码的安全性。
四个核心概念
入口（entry）：webpack打包的启动，可以有一个或多个，一般有js文件。webpack会从启动文件开始，寻找启点直接或间接依赖的其他所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据
输出（output）：出口一般包括两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。
加载器（loader）：webpack本身只识别js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。
插件（plugins）：插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩，提高效率。
自己去构建webpack的所有配置，完成打包会比较麻烦，还好，vue官方给出了一个工具，叫做vue-cli，可以帮我们快速搭建vue项目，里面已经内置了webpack。
3、vue-cli
在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就比较麻烦。幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli
安装
4、项目测试
创建静态工程
初始化vue-cli
eslint是语法校验器，是检验前端标准的一个工具，不适合我们后端开发者使用
如果权限不足使用sudo指令
三、电商项目搭建
创建父模块管理
创建子模板注册中心ly-registry
引入eureka相关依赖
创建启动类
配置文件
创建modul子项目ly-gateway
由于网关需要通过zuul拉取服务列表，所以需要引入eureka和zuul包
创建启动类
添加配置
需要注意的是，在团队开发过程中，由多个人同时开发，在之前从eureka中拉取服务的时候，对于对应的类，我们需要copy对应的实体类，这样的话，在开发过程中使及其麻烦的。
为了解决这个问题，我们就需要将对应的类放到一起，然后整合到一个项目中，在打包起来，这样对于开发者只需要引用对应的坐标即可。
创建ly-item父工程（位于leyou父工程的下面）
创建ly-item的modul子项目ly-item-interface
创建ly-item的modul子项目ly-item-service
对于ly-item-interface项目不需要引入jar，ly-item-service要进行增删改查
ly-item-service一定要记得引入ly-item-interface项目
创建启动类
ly-item-service配置文件
由于url已经写了jdbc：mysql，在springboot后台会自动判断使用的是mysql，就会自动加载MySQL的数据库驱动
ly-gateway项目添加zuul的路由映射item-service
微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建（1）相关推荐
- Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构
Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构 概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留 ...
- 单体 soa 微服务 区别_漫谈何时从单体架构迁移到微服务？
面对微服务如火如荼的发展,很多人都在了解,学习希望能在自己的项目中帮得上忙,当你对微服务的庐山真面目有所了解后,接下来就是说服自己了,到底如何评估微服务,什么时候使用微服务,什么时间点最合适,需要哪些 ...
- Taurus.MVC V3.0.3 微服务开源框架发布：让.NET 架构在大并发的演进过程更简单。
Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单. 前方: 开源地址:GitHub - cyq1162/Taurus.MVC: Taurus.mvc i ...
- net微服务框架/c#/netcore微服务框架，一个轻量级的.Net 5.0微服务开发框架，同时也适用于单体架构系统的开发
net微服务框架/c#/netcore微服务框架,一个轻量级的.Net 5.0微服务开发框架,同时也适用于单体架构系统的开发. 支持经典三层与DDD架构开发模式.集成了一系列主流稳定的微服务配套技术栈 ...
- 商城文档、商城原型、全局说明、o2o商城、汽车商城、业务逻辑、商城架构图、流程图、版本规划、需求说明、活动、预约、会员、prd、交互说明、页面说明、显示规则、字段说明、操作规则、数据来源、需求规划
商城文档.商城原型.全局说明.o2o商城.汽车商城.业务逻辑.商城架构图.流程图.版本规划.需求说明.活动.预约.会员.prd.交互说明.页面说明.显示规则.字段说明.操作规则.数据来源.需求规划 A ...
- 天弘基金首席架构师李鑫：微服务接口限流的算法及架构实现
李鑫(码码的土狼) 读完需要 9 分钟 速读仅需 3 分钟 李鑫,著有<微服务治理:体系.架构及实践>一书,公众号"码码的土狼"分享技术干货及心得. 目前是天弘基金移动 ...
- go微服务框架go-micro深度学习(一) 整体架构介绍
产品嘴里的一个小项目,从立项到开发上线,随着时间和需求的不断激增,会越来越复杂,变成一个大项目,如果前期项目架构没设计的不好,代码会越来越臃肿,难以维护,后期的每次产品迭代上线都会牵一发而动全身.项目 ...
- 微服务模块综合管理(模块视图管理，自动化热部署，前端资源实时刷新......)
一.微服务可视化整体管理 微服务模块太多,启动关闭等管理操作就会很复杂,用这种方法就会很方便管理 方法是 1 idea底下没有的找出services窗口 2 IDEA底边栏选services 2 选择 ...
- 基于微服务和Docker的PaaS云平台架构设计
基于微服务架构和Docker容器技术的PaaS云平台建设目标是给我们的开发人员提供一套服务快速开发.部署.运维管理.持续开发持续集成的流程.平台提供基础设施.中间件.数据服务.云服务器等资源,开发人员 ...
最新文章
- 从照片中可视化图像数据
- 【OFDM】基于simulink的OFDM系统仿真
- index.html example demonstration
- 3 CSS 高级语法
- 数据库-数据库的介绍
- NAT 及 NAT 打洞技术
- PB 级大规模 Elasticsearch 集群运维与调优实践
- 【专题】多角度深入解析开放原子开源基金会
- java类和对象的基础（笔记）
- UVA11645 Bits【位运算+大数】
- YOLOv5的详细使用教程，以及使用yolov5训练自己的数据集
- 通俗理解什么是隐马尔科夫模型(hmm)
- Matlab-信号处理工具箱
- python实现topsis法
- 再遇soundmix.dll，小试pe_xscan
- vm使用PE安装系统（1）
- Excel 2010 VBA 入门 129 利用窗体向工作表中录入数据
- 北京极简智能科技有限公司正式加入信创运维工作组
- 中央企业数字化转型案例架构
- Goldengate Monitor Agent 安装