项目1——leyou
来自于网上的《乐优商城》项目,进行一个步骤的总结
paynmind
小白一个,只能一步一个脚印。
展开
-
第三十章 订单结算页和微信支付
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 订单结算页:1.1 页面跳转:在购物车页面的最下方,有一个去结算按钮:当点击结算,我们应该跳转到订单结算页,即:getOrderInfo.html。查看购物车的结算按钮:可以看到,地址是正确的。但是只有登录用户才可以去结算付款,因此我们不能直接跳转,而是在跳转前校验用户的登录状态,如果发现是未登录,应该重定向到登录页。我们给这个按钮绑定点击事件:事件中判断登录状态,进行页面跳转:toOrderInfo() { // 判原创 2020-10-18 19:32:56 · 2120 阅读 · 1 评论 -
第二十九章 订单系统接口
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 订单系统接口:1.1 Swagger-UI:1)什么是 OpenAPI:随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染、前后端分离的形态,而且前端技术和后端技术在各自的道路上越走越远。 前端和后端的唯一联系,变成了 API 接口;API 文档变成了前后端开发人员联系的纽带,变得越来越重要。没有 API 文档工具之前,大家都是手写 API 文档的,在什么地方书写的都有,而且 API 文档没有统一规范和格式,每原创 2020-10-18 16:58:11 · 1152 阅读 · 0 评论 -
第二十八章 购物车
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 搭建购物车服务:1.1 创建 module:在 leyou 下创建 module,命名为 leyou-cart,采用 maven 的方式创建。1.2 pom 依赖:<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20原创 2020-10-12 22:30:02 · 1046 阅读 · 1 评论 -
第二十七章 登录
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 登录页面:1.1 修改路径信息:我们在页面输入登录信息,然后点击登录,发现请求的路径不对,我们的认证接口是:/api/auth/accredit我们打开 login.html,修改路径信息,页面 ajax 请求:然后再次测试,成功跳转到了首页。1.2 解决 cookie 写入问题:查看首页 cookie,发现什么都没有。1)问题分析:跨域请求 cookie 生效的条件:服务的响应头中需要携带 Access-Control原创 2020-10-10 09:52:54 · 153 阅读 · 0 评论 -
第二十六章 授权中心
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 无状态登录原理:1.1 什么是有状态?有状态服务,即服务端需要记录每次会话的客户端信息,从而识别客户端身份,根据用户身份进行请求的处理,典型的设计如 tomcat 中的 session。例如登录:用户登录后,我们把登录者的信息保存在服务端 session 中,并且给用户一个 cookie 值,记录对应的 session。然后下次请求,用户携带 cookie 值来,我们就能识别到对应 session,从而找到用户的信息。缺点是什么?服原创 2020-10-10 00:26:13 · 491 阅读 · 0 评论 -
第二十五章:实现短信功能和注册功能
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 发送短信服务:短信微服务已经准备好,我们就可以继续编写用户中心接口了。1.1 接口说明:业务逻辑是这样的:我们接收页面发送来的手机号码生成一个随机验证码将验证码保存在服务端发送短信,将验证码发送到用户手机验证码有一定有效期,一般是5分钟,我们可以利用 Redis 的过期机制来保存。1.2 Redis:1)Spring Data Redis:是Spring Data 家族的一部分。 对 Jedis 客户端进行了封装,与 sp原创 2020-10-07 08:34:21 · 314 阅读 · 0 评论 -
第二十四章:用户微服务和短信微服务
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 创建用户中心:用户搜索到自己心仪的商品,接下来就要去购买,但是购买必须先登录。所以接下来我们编写用户中心,实现用户的登录和注册功能。用户中心的提供的服务:用户的注册用户登录用户个人信息管理用户地址管理用户收藏管理我的订单优惠券管理这里我们暂时先实现基本的: 注册和登录功能,因为用户中心的服务其它微服务也会调用,因此这里我们做聚合。leyou-user:父工程,包含2个子工程:leyou-user-interface:原创 2020-10-06 21:14:56 · 636 阅读 · 0 评论 -
第二十三章:Spring AMQP 以及改造项目
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. Spring AMQP:Spring-amqp 是对 AMQP 协议的抽象实现,而 spring-rabbit 是对协议的具体实现,也是目前的唯一实现,底层使用的就是 RabbitMQ。1.1 依赖和配置:添加 AMQP 的启动器:<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spri原创 2020-10-06 20:23:39 · 144 阅读 · 0 评论 -
第二十二章:RabbitMQ(二)
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 订阅模型以及持久化:1.1 订阅模型分类:在之前的模式中,我们创建了一个工作队列。 工作队列背后的假设是:每个任务只被传递给一个工作人员。 在这一部分,我们将做一些完全不同的事情 - 我们将会传递一个信息给多个消费者。 这种模式被称为“发布/订阅”。订阅模型示意图:1个生产者,多个消费者每一个消费者都有自己的一个队列生产者没有将消息直接发送到队列,而是发送到了交换机每个队列都要绑定到交换机生产者发送的消息,经过交换机到达队列,原创 2020-10-06 17:16:34 · 101 阅读 · 0 评论 -
第二十一章:RabbitMQ(一)
此博客用于个人学习,来源于网上,对知识点进行一个整理。原创 2020-10-06 16:18:38 · 170 阅读 · 0 评论 -
第二十章:商品详情与页面静态化
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 商品详情页面逻辑:1.1 渲染面包屑:在商品展示页的顶部,有一个商品分类、品牌、标题的面包屑。其数据有3部分:商品分类商品品牌spu标题我们的模型中都有,所以直接渲染即可<div class="crumb-wrap"> <ul class="sui-breadcrumb"> <li th:each="category : ${categories}">原创 2020-09-25 21:11:03 · 817 阅读 · 3 评论 -
第十九章:过滤条件的筛选和商品详情后台实现
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 过滤条件的筛选:当我们点击页面的过滤项,要做哪些事情?把过滤条件保存在 search 对象中(watch 监控到 search 变化后就会发送到后台)在页面顶部展示已选择的过滤项把商品分类展示到顶部面包屑1.1 保存过滤项:1)定义属性:我们把已选择的过滤项保存在 search 中:要注意,在 created 构造函数中会对 search 进行初始化,所以要在构造函数中对 filter 进行初始化:search.filt原创 2020-09-24 20:52:57 · 1124 阅读 · 0 评论 -
第十八章:搜索过滤
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 生成分类和品牌过滤:1.1 过滤结果分析:首先看下页面要实现的效果:整个过滤部分有3块:顶部的导航,已经选择的过滤条件展示:商品分类面包屑,根据用户选择的商品分类变化其它已选择过滤参数过滤条件展示,又包含3部分:商品分类展示品牌展示其它规格参数展开或收起的过滤条件的按钮顶部导航要展示的内容跟用户选择的过滤条件有关。比如用户选择了某个商品分类,则面包屑中才会展示具体的分类比如用户选择了某个品牌,列表中原创 2020-09-24 01:01:20 · 341 阅读 · 0 评论 -
第十七章:基本搜索
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 实现基本搜索:1.1 页面分析:1)页面跳转:在首页的顶部,有一个输入框:当我们输入任何文本,点击搜索,就会跳转到搜索页 search.html 了,并且将搜索关键字以请求参数携带过来。<script type="text/javascript"> var vm = new Vue({ el: "#searchApp", data: { }, compon原创 2020-09-19 17:06:55 · 628 阅读 · 0 评论 -
第十六章:索引库数据导入
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 索引库数据导入:使用 Elasticsearch 搭建搜索微服务,实现搜索功能。1.1 创建搜索服务:在 leyou 工程下创建 module:leyou-search。Pom 文件:<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww原创 2020-09-19 10:19:45 · 227 阅读 · 0 评论 -
第十五章:Elasticsearch(二)
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 聚合 aggregations:聚合可以让我们极其方便的实现对数据的统计、分析。例如:什么品牌的手机最受欢迎?这些手机的平均价格、最高价格、最低价格?这些手机每月的销售情况如何?实现这些统计功能的比数据库的 sql 要方便的多,而且查询速度非常快,可以实现实时搜索效果。1.1 基本概念:Elasticsearch 中的聚合,包含多种类型,最常用的两种,一个叫桶,一个叫度量:1)桶(bucket):桶的作用,是按照某种方式对数原创 2020-09-18 23:09:23 · 226 阅读 · 0 评论 -
第十四章:Elasticsearch(一)
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. Elasticaearch 介绍:用户访问我们的首页,一般都会直接搜索来寻找自己想要购买的商品。而商品的数量非常多,而且分类繁杂。如何能正确的显示出用户想要的商品,并进行合理的过滤,尽快促成交易,是搜索系统要研究的核心。面对这样复杂的搜索业务和数据量,使用传统数据库搜索就显得力不从心,一般我们都会使用全文检索技术,比如今天讲到的:Elasticsearch。1.1 简介:Elaticsearch,简称为 es, es 是一个开源的高扩展的分原创 2020-09-17 21:45:05 · 308 阅读 · 0 评论 -
第十三章:商品管理
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 商品新增:把商品的数据分为了4部分来填写:基本信息:主要是一些简单的文本数据,包含了 SPU 和 SpuDetail 的部分数据,如商品分类:是 SPU 中的 cid1 , cid2 , cid3 属性品牌:是 spu 中的 brandId 属性标题:是 spu 中的 title 属性子标题:是 spu 中的 subTitle 属性售后服务:是 SpuDetail 中的 afterService 属性包装列表:是 SpuDet原创 2020-09-17 00:49:12 · 769 阅读 · 0 评论 -
第十二章:商品规格参数与商品查询
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 商品规格参数管理:1.1 页面布局:1)整体布局:因为规格是跟商品分类绑定的,因此首先会展现商品分类树,并且提示你要选择商品分类,才能看到规格参数的模板。页面结构:这里使用了 v-layout 来完成页面布局,并且添加了 row 属性,代表接下来的内容是行布局(左右)。可以看出页面分成2个部分:<v-flex xs3> :左侧,内部又分上下两部分:商品分类树及标题v-card-title:标题部分,这里是提示信息,原创 2020-09-16 00:38:33 · 1454 阅读 · 0 评论 -
第十一节:分布式文件系统
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. FastDFS:分布式文件系统(Distributed File System)是指文件系统管理的物理存储资源不一定直接连接在本地节点上,而是通过计算机网络与节点相连。传统文件系统管理的文件就存储在本机分布式文件系统管理的文件存储在很多机器,这些机器通过网络连接,要被统一管理。无论是上传或者访问文件,都需要通过管理中心来访问FastDFS 是一个轻量级、高性能的开源分布式文件系统。用纯C语言开发,功能丰富:文件存储文件同步文件原创 2020-09-10 09:56:37 · 330 阅读 · 0 评论 -
第十节:品牌新增与图片上传
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 品牌的新增:点击新增品牌按钮,Brand.vue 页面有一个提交按钮,绑定了一个点击触发函数 addBrand该函数触发后,会使得 isEdit 为 false,show 为 true当 show 为 true 时,使得添加窗口出现,而该窗口中的表单绑定了一个子组件在页面中可以查找到该子组件 BrandFrom1.1 页面实现:1)重置表单:v-form 组件已经提供了 reset 方法,用来清空表单数据。只要拿到表单组件对原创 2020-09-09 00:34:59 · 566 阅读 · 0 评论 -
第九节:解决跨域问题与实现品牌查询
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 跨域问题:以下情况都属于跨域:跨域原因说明示例域名不同www.jd.com 与 www.taobao.com域名相同,端口不同www.jd.com:8080 与 www.jd.com:8081二级域名不同item.jd.com 与 miaosha.jd.com如果域名和端口都相同,但是请求路径不同,不属于跨域,如:www.jd.com/item 和 www.jd.com/goodsht原创 2020-09-07 20:36:06 · 248 阅读 · 0 评论 -
第八节:导入 web 层和实现商品分类查询
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 搭建后台管理前端:1.1 导入项目并且安装依赖:先将项目压缩包解压缩,放到工作目录中,package.json 中依然定义了我们所需的一切依赖,我们只需要打开终端,进入项目目录,输入:npm install 命令,即可安装这些依赖。在 package.json 文件中有 scripts 启动脚本配置,可以输入命令: npm run dev 或者 npm start。1.2 目录结构:webpack:是一个现代 JavaScript 应用原创 2020-09-07 19:13:52 · 512 阅读 · 0 评论 -
第七节:Vue 基础知识(二)
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 组件化:在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航,但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。在 vue 里,所有的 vue 实例都是组件。1.1 全局组件:可以通过 Vue 的 component 方法来定义一个全局组件。<div id="app">原创 2020-09-06 20:29:20 · 170 阅读 · 0 评论 -
第六节:Vue 基础知识(一)
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. MVVM 模式:M:即 Model,模型,包括数据和一些基本操作。V:即 View,视图,页面渲染结果。VM:即 View-Model,模型与视图间的双向操作(无需开发人员干涉)。在 MVVM 之前,开发人员从后端获取需要的数据模型,然后要通过 DOM 操作 Model 渲染到 View 中。而后当用户操作视图,我们还需要通过 DOM 获取 View 中的数据,然后同步到 Model 中。而 MVVM 中的 VM 要做的事情就是把 D原创 2020-09-06 16:55:02 · 256 阅读 · 0 评论 -
番外一:Thymeleaf 与 ES6 语法
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. Thymeleaf :SpringBoot 并不推荐使用 jsp,但是支持一些模板引擎技术:FreemarkerThymeleafMustache本项目用到的是 Thymeleaf 技术。1.1 Thymeleaf 的优势:Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP,其本身的特点有:动静结合:Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美原创 2020-09-05 20:25:41 · 756 阅读 · 0 评论 -
第五节:项目搭建
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 乐优商城介绍:1.1 项目介绍:乐优商城是一个全品类的电商购物网站(B2C)。用户可以在线购买商品、加入购物车、下单。可以评论已购买商品。管理员可以在后台管理商品的上下架、促销活动。管理员可以监控商品销售状况。客服可以在后台处理退款操作。1.2 系统架构:整个乐优商城可以分为两部分:后台管理系统、前台门户系统。后台管理系统:后台系统主要包含以下功能:商品管理,包括商品分类、品牌、商品规格等信息的管理销售管原创 2020-09-05 00:54:34 · 222 阅读 · 0 评论 -
第四节:Spring Cloud 核心组件(二)
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. Hystrix:Hystix 是 Netflix 开源的一个延迟和容错库,用于隔离访问远程服务、第三方库,防止出现级联失败。1.1 背景——雪崩问题:微服务中,服务间调用关系错综复杂,一个请求,可能需要调用多个微服务接口才能实现,会形成非常复杂的调用链路:如图,一次业务请求,需要调用 A、P、H、I 四个服务,这四个服务又可能调用其它服务。如果此时,某个服务出现异常:例如微服务 I 发生异常,请求阻塞,用户不会得到响应,则 tom原创 2020-09-04 12:50:58 · 149 阅读 · 0 评论 -
第三节:Spring Cloud 核心组件(一)
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. Eureka 注册中心:微服务项目需要解决的第一问题,服务的管理。问题分析:在刚才的案例中,itcast-service-provider 对外提供服务,需要对外暴露自己的地址。而 consumer(调用者)需要记录服务提供者的地址。将来地址出现变更,还需要及时更新。这在服务较少的时候并不觉得有什么,但是在现在日益复杂的互联网环境,一个项目肯定会拆分出十几,甚至数十个微服务。此时如果还人为管理地址,不仅开发困难,将来测试、发布上线都会非原创 2020-09-04 01:11:20 · 137 阅读 · 0 评论 -
第二节:Spring Cloud 基础使用
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 系统架构演变:随着互联网的发展,网站应用的规模不断扩大。需求的激增,带来的是技术上的压力。系统架构也因此不断的演进、升级、迭代。从单一应用,到垂直拆分,到分布式服务,到 SOA,以及现在火热的微服务架构,还有在 Google 带领下来势汹涌的 Service Mesh。1.1 集中式架构:当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本。此时,用于简化增删改查工作量的数据访问框架(ORM)是影响项目开发的关键。原创 2020-09-03 20:41:17 · 197 阅读 · 0 评论 -
第一节:Spring Boot 基础使用
此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 了解 SpringBoot:1.1 概念:Spring Boot 是 Spring 项目中的一个子工程,与我们所熟知的 Spring-framework 同属于spring的产品。Spring Boot 称为搭建程序的脚手架。其最主要作用就是帮我们快速的构建庞大的spring项目,并且尽可能的减少一切 xml 配置,做到开箱即用,迅速上手,让我们关注于业务而非配置。1.2 使用背景:java 一直被人诟病的一点就是臃肿、麻烦。当我们还原创 2020-09-03 16:07:34 · 201 阅读 · 0 评论