分布式电商项目 谷粒商城 学习笔记<1>


1、utf-8编码不是最全的,比如不包含聊天表情。utf8mb4编码是最全的。

2、java.util.date 很多方法已过时 建议使用LocalDateTime

user.setLocalDateTime(LocalDateTime.now);

入库时,mybatisplus会自动把LocalDateTime自动转为DateTime类型(数据库数据类型)。

参考笔记:https://blog.csdn.net/hancoder/article/details/106922139

一、基础概念

1.电商模式

1.B2B(Business to Business ),指商家与商家之间建立关系。如:阿里巴巴

2.B2C(Business to Consumer),就是我们经常看到的供应商直接把商品卖给用户,即“商对客”模式,也就是通常说的商业零售,直接面向消费者,销售产品和服务。如:苏宁易购、京东、天猫、小米商城

3.C2B(Customer to Business),即消费者对企业。先有消费者需求产生而后又企业生产,即先有需求,后有生产。

4.C2C(Customer to Customer),客户之间把商品发到网上去卖,如:淘宝,闲鱼。

5.O2O(Online to Offline),即线上下单,线下提供服务。如:饿了么、美团、淘票票、京东到家。

2.分布式&集群

这两个词经常同时出现,但并不一样。

分布式指的是同一个服务(或应用或其他),分布在不同的机器上。多台机器协同实现一个功能。

集群指的是,实现同一个微服务的实例机器有多台。

客户端发送请求到服务器路途中,设置一个网关,请求都先到达网关,网关对请求进行统一认证(合法非法)和处理等操作。他是安检。

在微服务架构中,API gateway作为整体架构的重要组件,它抽象了微服务中都需要的公共功能,同时提供了客户端负载均衡,服务自动熔断,灰度发布,统一认证,限流流控,日志统计等丰富的功能,帮助我们解决很多API管理难题。

3.挂载

在linux操作系统中,所有用户可操作的数据都是放在 / 目录下的

而所有linux操作系统中的设备,全部是以文件的形式存在。挂载就是把计算机中的设备(一般为可存储的设备)放到系统目录下,以便用户可以操作。

二、系统架构简介及开发工具

1.架构图

img

用户从APP,PC端发来请求、首先送到nginx集群

通过nginx集群后来到gateway网关,网关这一层会做认证授权和令牌限流(sentinel做限流,redis做缓存)。

请求通过网关后,经过负载均衡到达springboot(服务),CRUD数据库或者日志存储文书检索(检索用到ES)。

在这个链路中,nacos做服务注册中心配置中心,mysql做硬件数据库,rabbitMQ做消息队列,ES做查询,zipkin做服务链路追踪,Altermanager做服务告警。

项目发布起来后,因为微服务众多,每一个都打包部署到服务器太麻烦,有了持续集成后开发人员可以将修改后的代码提交到github,运维人员可以通过自动化工具Jenkins Pipeline将github中获取的代码打包成docker镜像,最终是由k8s集成docker服务,将服务以docker容器的方式运行。

2.虚拟机

virtualBox或者VMvare创建centos系统,设置一个虚拟ip(可以在虚拟机生成的依赖文件里找到),保证能与本机ping通、之后在虚拟机上安装的应用,就可以在本机Windows操作系统访问了。

安装docker

命令可见上面的链接

步骤是 先卸载旧的docker文件,下载新文件,配置镜像地址,设置开机自启动,配置镜像加速(配置阿里云的镜像网站)

安装mysql

安装好后需要设置utf-8编码

具体的命令见链接

设置mysql自启动

安装redis

拉去redis镜像到docker

挂载redis配置文件到linux目录

设置redis自启动

3.开发工具

前端 vsCode

安装插件列表

  • Auto Close Tag
  • Auto Rename Tag
  • Chinese
  • ESlint
  • HTML CSS Support
  • HTML Snippets
  • JavaScript ES6
  • Live Server
  • open in brower
  • Vetur

git

可以修改.gitignore 文件

在提交的时候忽略一些文件

三、开发

1.数据库初始化

创建使用到的表

所有的数据库数据再复杂也不建立外键

使用mysql客户端工具连接linux虚拟机中的数据库

2.人人开源搭建后台管理系统

在码云上搜索人人开源,我们使用renren-fast(后端)、renren-fast-vue(前端)项目。

https://gitee.com/renrenio

然后打开renren-fast/db/mysql.sql,复制全部,在sqlyog中创建库guli-admin,粘贴刚才的内容执行。

这是开源后台管理系统需要的数据库表格

application.yml 中修改ip地址和数据库url及用户名密码

安装node:http://nodejs.cn/download/ 选择windows下载。下载完安装。

可以去这里找到v12的版本。(不要用12.0,可以用12.1)

https://npm.taobao.org/mirrors/node/

NPM是随同NodeJS一起安装的包管理工具。JavaScript-NPM类似于java-Maven。

命令行输入node -v 检查配置好了,配置npm的镜像仓库地址

然后去VScode的项目终端中输入 npm install,是要去拉取依赖(package.json类似于pom.xml的dependency)

如果有版本冲突可以上去查看原始链接,有nodejs对应的版本

3.人人开源逆向工程搭建

工作流程就是根据你的数据库表格来生成基本的CRUD代码

git clone https://gitee.com/renrenio/renren-generator.git

application中修改成自己的数据库url及用户名密码还有表名的前缀

然后运行,即可在逆向工程的前端页面看到生成的代码 拷贝main文件夹复制到自己的工程下即可

然后再添加相关依赖就可以了

4.公共服务common

本身没有什么功能

里面存放一些其他微服务都用到的类或依赖

之后只需要在其他服务里添加这个服务的依赖就可以引入公共依赖和类了

有缺失的类都可以在renren-fast服务里找到

5.mybatis-plus

使用这个升级版的mybatis需要mapperscan注解声明mapper放置的位置

具体可以看上面的原链接

可以通过一个配置来实现插入数据的主键自增

6.gateway网关

网关是请求流量的入口,常用功能包括路由转发,权限校验,限流控制等。springcloud gateway取代了zuul网关。

开启服务发现: @EnableDiscoveryClient

这样gateway就可以通过nacos发现其他服务,以便可以路由到其他服务

三大核心概念:

Route: 发一个请求给网关,网关要将请求路由到指定的服务。路由有id,目的地uri,断言的集合,匹配了断言就能到达指定位置

Predicate断言: 就是java里的断言函数,匹配请求里的任何信息,包括请求头等。根据请求头路由哪个服务

Filter:过滤器请求和响应都可以被修改。

配置都写到application.yml

总结:

route:流量去哪里

Predicate:满足什么条件

Filter:例如修改路径

spring:
  cloud:
    gateway:
      routes:
        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:  # 这段过滤器和验证码有关,api内容缓存了/renren-fast,还得注意/renren-fast也注册到nacos中
            - RewritePath=/api/(?<segment>.*),/renren-fast/$\{
    
    segment}



  ## 前端项目,/api前缀。开来到网关后断言先匹配到,过滤器修改url,比如跳转到renren微服务,所以要注意renren后端项目也注册到 nacos里
## http://localhost:88/api/captcha.jpg   http://localhost:8080/renren-fast/captcha.jpg
## http://localhost:88/api/product/category/list/tree http://localhost:10000/product/category/list/tree

满足条件的路径 会被重写 /api/… 会重写为 /renren-fast/…

四、前端之ES

vscode中要安装的插件前面写过了 (二、3)

1.let与var

  • let不会作用到{}外,var会越域跳到{}外
  • var可以多次声明同一变量,let会报错
  • var定义之前可以使用,let定义之前不可使用。(变量提升问题)

注:shift+!可以生成html的初始模板

2.解构表达式

  • 支持let arr = [1,2,3]; let [a,b,c] = arr;这种语法

  • 支持对象解析:

  • const person={

  • ​ name:“jack”

  • ​ age:21

  • ​ language:[‘java’,‘c’,‘js’]

  • }

  • const { name: abc, age, language } = person; 冒号代表改名,旧:新

  • 字符串函数

  • 支持一个字符串为多行``

  • let ss = <div>

  • <span>hello world<span>

  • </div>;

  • console.log(ss);

  • 占位符功能 ${}

  • function fun() {
    return “这是一个函数”
    }

    // 2、字符串插入变量和表达式。变量名写在 中 , {} 中, {} 中可以放入 JavaScript 表达式。
    let info = 我是${abc},今年${age + 10}了, 我想说: ${fun()};
    console.log(info);

3.函数优化

支持函数形参默认值 function add2(a, b = 1) {
支持不定参数 function fun(…values) {
支持箭头函数 var print = obj => console.log(obj);
箭头函数+结构 var hello2 = ({name}) => console.log(“hello,” +name);,本来应该是person.name

不定参数java中也支持

箭头函数有点类似于lambda表达式 箭头左边是参数右边是方法体,可以直接实现一个只有一个抽象方法的接口

4.map reduce

map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。
reduce() 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,

  • map处理,arr = arr.map(item=> item*2);
  • reduce。arr.reduce((原来的值,处理后的值即return的值)=>{

5.promise封装ajax 优化异步操作

发送多个有先后顺序的ajax请求(返回的结果作为下一步的参数)

可以使用promise函数来优化代码结构

function get(url, data) {
    
     //自己定义一个方法整合一下
            return new Promise((resolve, reject) => {
    
    
                $.ajax({
    
    
                    url: url,
                    data: data,
                    success: function (data) {
    
    
                        resolve(data);
                    },
                    error: function (err) {
    
    
                        reject(err)
                    }
                })
            });
        }

核心就是一个resolve和一个reject

之后在get后面 . 就可以 then 了

应该是promise函数内部有个then方法

p.then().catch()

顺便捕捉异常

6.模块化import/export

模块化就是把代码进行拆分,方便重复利用。类似于java中的导包,而JS换了个概念,是导模块。

模块功能主要有两个命令构成 export 和import

  • export用于规定模块的对外接口
  • import用于导入其他模块提供的功能

五、前端之vue

MVVM思想

M:model 包括数据和一些基本操作
V:view 视图,页面渲染结果
VM:View-model,模型与视图间的双向操作(无需开发人员干涉)
视图和数据通过VM绑定起来,model里有变化会自动地通过Directives填写到视view中,视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。

使用:

  • new Vue
  • 在dom中{ {name}}代表从模型中放到view中
  • v-model实现双向绑定

1.dom对象直接更新到页面

<h1> {
    
    {
    
    name}} ,非常帅,有{
    
    {
    
    num}}个人为他点赞{
    
    {
    
    hello()}}</h1>

let vm = new Vue({
    
     //生成vue对象
            el: "#app",//绑定元素 div id="app" // 可以指定恰标签,但是不可以指定body标签
            data: {
    
      //封装数据
                name: "张三",  // 也可以使用{} //表单中可以取出
                num: 1
            },
            methods:{
    
      //封装方法
                cancel(){
    
    
                    this.num -- ;
                },
                hello(){
    
    
                    return "1"
                }
            }
        });

vue学到这里

vue开发框架

分三块

猜你喜欢

转载自blog.csdn.net/GBS20200720/article/details/121188930