微服务项目之电商--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平台:天猫、京东、一号店等

一、商城架构图

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第1张图片

前端:

后台系统会采用前后端分离开发,而且整个后台管理系统会使用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、项目测试

创建静态工程

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第2张图片

初始化vue-cli

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第3张图片

eslint是语法校验器,是检验前端标准的一个工具,不适合我们后端开发者使用 

 微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第4张图片

 如果权限不足使用sudo指令

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第5张图片

三、电商项目搭建

创建父模块管理

创建子模板注册中心ly-registry

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第6张图片

 引入eureka相关依赖

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第7张图片

创建启动类 

 微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第8张图片

配置文件

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第9张图片

创建modul子项目ly-gateway

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第10张图片

 由于网关需要通过zuul拉取服务列表,所以需要引入eureka和zuul包

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第11张图片

创建启动类 

 微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第12张图片

 添加配置

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第13张图片

需要注意的是,在团队开发过程中,由多个人同时开发,在之前从eureka中拉取服务的时候,对于对应的类,我们需要copy对应的实体类,这样的话,在开发过程中使及其麻烦的。

为了解决这个问题,我们就需要将对应的类放到一起,然后整合到一个项目中,在打包起来,这样对于开发者只需要引用对应的坐标即可。

创建ly-item父工程(位于leyou父工程的下面)

 微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第14张图片

 微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第15张图片

 微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第16张图片

创建ly-item的modul子项目ly-item-interface

 微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第17张图片

 微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第18张图片

创建ly-item的modul子项目ly-item-service

 微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第19张图片

 微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第20张图片

对于ly-item-interface项目不需要引入jar,ly-item-service要进行增删改查

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第21张图片

ly-item-service一定要记得引入ly-item-interface项目

 微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第22张图片

 创建启动类

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第23张图片

 ly-item-service配置文件

由于url已经写了jdbc:mysql,在springboot后台会自动判断使用的是mysql,就会自动加载MySQL的数据库驱动

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第24张图片

ly-gateway项目添加zuul的路由映射item-service

微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建(1)_第25张图片

你可能感兴趣的:(项目实战,电商项目初步搭建)