谷粒商城之分布式基础篇p1-p50

莫等闲白了少年头

已于 2022-08-07 23:42:05 修改

阅读量734

点赞数 1

分类专栏：笔记文章标签： vue.js node.js

于 2021-08-11 21:06:46 首次发布

本文链接：https://blog.csdn.net/weixin_44229645/article/details/119617116

版权

笔记专栏收录该内容

68 篇文章 2 订阅

订阅专栏

2021年8月11日准备把谷粒商城这个项目笔记大概记录一下!

2022年7月21日晚上23:30,二刷谷粒商城!!!

当前进度:P17

坚持就是胜利!!!

P1-P4

主要是介绍项目使用了哪些技术,以及介绍项目是前后端分离模式开发,前端是使用vue开发,后端使用springcloud+spirngcloud alibaba,项目分为三篇 基础篇高级篇架构篇

P5 项目结构图

在这里插入图片描述

p6 虚拟机环境搭建

安装虚拟机软件

先下载virtualbox 这个软件和vmware差不多
在这里插入图片描述

在这里插入图片描述
下载完成后安装即可

安装linux

可以下载镜像再用virtualbox一步步创建 ,但是有更简单的方式
使用vagrant
在这里插入图片描述
下载安装vagrant

安装后cmd敲 vagrant能出相关命令即安装成功!

cmd再使用vagrant init centos/7
在这里插入图片描述
这时会在用户下面出现一个文件

再使用vagrant up命令

这个时候,vartualbox已经有了虚拟机了

使用vagrant ssh即可连接虚拟机 ,因为系统已经默认有一个vagrant用户(这里不用像以前还装一个crt或者xshell之类的远程软件,直接使用cmd就能连接)
启动虚拟机可以在virtual box上启动,也可以直接cmd使用命令 vagrant up
root用户密码也是vagrant

p7 虚拟机网络设置

为了不用端口映射,我们这里没有用 NAT模式(网络地址转换模式)
而是采用仅主机模式

先查看本地ip网卡
在这里插入图片描述

设置文件虚拟机ip 在这里插入图片描述

在这里插入图片描述
vargrant ssh登陆后查看虚拟机ip

互相ping一下主机和虚拟机看是否都能ping通,能ping通即可!

p8 安装docker

以后我们的redis和mysql 等安装在docker
之前下载过docker的,使用命令先移除

下载依赖等
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
在这里插入图片描述
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

sudo yum install docker-ce docker-ce-cli containerd.io

启动docker

开机自启 sudo systemctl enable docker

p9 docker配置阿里云镜像

四条命令

sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-‘EOF’
{
“registry-mirrors”: [“https://chqac97z.mirror.aliyuncs.com”]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker

p10 docker 安装mysql

下载mysql镜像
在这里插入图片描述
创建容器
–p是虚拟机与容器端口映射
–name是给容器取名
挂载相当于一个快捷方式左边是虚拟机文件右边是容器文件

查看容器

进入容器

在挂载目录配置


设置开机自启动:sudo docker update mysql --restart=always

p11安装redis

og.csdnimg.cn/37894f2df0ad4f0fa158f852f23804de.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIyOTY0NQ==,size_16,color_FFFFFF,t_70)

进入redis的docker容器直接进入客户端
在这里插入图片描述
编辑配置文件,启用aof持久化

p12 开发环境配置

jdk 1.8
配置maven 镜像加速

下载vscode,安装插件写前端代码

p13配置git

下载git,注册码云
在这里插入图片描述
生成公钥,配置码云 ssh免密登陆

p14 使用码云创建项目

新建仓库 ,用idea拉取代码
新建5个服务
在这里插入图片描述
设置git忽略文件
push到码云

p15数据库初始化

在这里插入图片描述
设置docker mysql容器自动启动

p16快速搭建人人开源后台系统

从码云上导入人人开源的后台与前台系统,快速搭建

renren-fast
在这里插入图片描述
renren-fast-vue

前端需要安装node.js环境 npm类似后端的maven

设置npm淘宝镜像

package.json 指定各种依赖版本
加粗样式

控制台 npm install

安装的各个依赖模块在node_modules下面
在这里插入图片描述

npm run dev启动项目

即可跳出登陆页面,登陆前后端联调
在这里插入图片描述
注意:这里有坑,有时候node和saas版本不支持,要匹配版本
这里我用的node是

sass版本是

具体参考https://blog.csdn.net/hancoder/article/details/113821646

p17使用人人逆向工具项目

在这里插入图片描述
配置逆向数据库,生成代码复制到项目中

生成的代码有些报错的少了依赖和工具类,
1.common添加依赖
2.把renren-fast的工具类复制到我们项目的 common

p18 配置与测试crud

配置数据库连接配置mybatis主键自增等
在这里插入图片描述

p19逆向生成各个模块并测试

把多个服务都逆向生成

p20 介绍要使用的分布式组件

我们要使用 springcloud +springcloud alibaba组件

p 21 nacos注册中心

在阿里云下载nacos注册中心组件服务,启动
在这里插入图片描述

在我们自己的common服务中添加nacos依赖,

然后配置注册中心地址
在这里插入图片描述

p22 openFeign远程调用

在这里插入图片描述
注意在启动类上要加注解启用feign

p23 nacos配置中心

导入依赖
在这里插入图片描述

新建配置文件bootstrap.优先级比application高
在这里插入图片描述
在配置中心新建一个配置文件

使用@value 结合 @RefreshScope即可动态获取配置中心配置

p24 nacos 命名空间分组

命名空间

可以基于环境 比如开发dev 测试test 生产环境配置,也可以基于不同服务来设置比如建立一个商品product服务的命名空间
命名空间有对应的ID,在idea bootstrap配置文件中使用id
在这里插入图片描述

配置命名空间的id

配置集

在这里插入图片描述

分组

在这里插入图片描述
配置默认使用的是default分组

使用下面的 1111 分组

我们的项目以服务名为命名空间,以分组为不同环境

p25 nacos多配置集

我们可以把配置文件拆分成多部分
在这里插入图片描述

p26网关gateway

介绍了网关 route功能,还有过滤器filter功能

p27创建测试网关

讲解了一下网关配置

p28 前端技术栈

在这里插入图片描述
var let es6之后使用let
const常量

p29 解构

数组解构
在这里插入图片描述

对象解构
在这里插入图片描述
另外一种解构,将person的name属性赋值给abc

字符串

表达式

p31 es6箭头函数

和java的lambda表达式差不多
在这里插入图片描述

箭头函数结合解构表达式

在这里插入图片描述

p32 es6对象优化

第一个 object类似java 的map集合方法
第二个 assign 把属性复制到第一个参数
在这里插入图片描述
声明对象,有点反解构的意思

p33 es6 map reduce

map就是映射处理数组中每一个元素的意思
在这里插入图片描述
reduce就是接着map的返回结果,进行进一步的处理

在这里插入图片描述

p34 promise异步编排

在这里插入图片描述

p35模块化

类似java中的导包

先导出
在这里插入图片描述
要用这个变量的模块导入即可

不取名字,直接export default

p36 Vue

在这里插入图片描述

p37 vue基本语法和插件

主要简单讲了一下语法 ,浏览器安装插件,vscode安装插件

p38 vue单向绑定和双向绑定

v-bind v-model

p39 vue指令

v-on 简写
在这里插入图片描述
v-for

v-if v-show 展示
key是唯一值,可以加快渲染

p40 计算属性和侦听器

计算属性

在这里插入图片描述

监听器

在这里插入图片描述

过滤器(还可以设置全局过滤器)

在这里插入图片描述

p41组件化

全局组件可以直接使用
在这里插入图片描述

局部组件需要注册

p42 vue声明周期和钩子函数

主要有一下几个钩子函数
在这里插入图片描述

p43 vue脚手架模块化开发

在这里插入图片描述
运行项目: npm run dev

访问

项目结构

config下的index.js可以配置端口等
在这里插入图片描述

代码主要在src下

index.html

main.js挂载了index.html

main.js的router是router包下的index.js导出的

main.js引用的comment组件 App

路由里面配置了各种路径,路由视图根据路径匹配不同的组件,这hello组件是我们自己定义的
在这里插入图片描述

p44 使用elementUI

在这里插入图片描述
安装完后需要引用

菜单路由设置:

在这里插入图片描述

这里是单页面应用,只有一个html界面 index.html
在这里插入图片描述

路由配置:

单文件组件:

p45 商品服务三级分类-查询-递归树

每个父级分类下面有多个子分类,mybatis plus中使用@tableField注解声明表中不存在这个字段
在这里插入图片描述
拿到一级分类,并设置一级分类的子分类

@Override
    public List<CategoryEntity> cateTree2() {
        List<CategoryEntity> categoryEntities = baseMapper.selectList(null);

        List<CategoryEntity> level1List = categoryEntities.stream().filter(categoryEntity -> categoryEntity.getParentCid() == 0)//先过滤出一级分类
                .map(categoryEntity -> {
                    categoryEntity.setChildren(getChildren(categoryEntity, categoryEntities));
                    return categoryEntity;//对一级分类的每个分类实体,添加子级分类
                }).sorted((cat1, cat2) -> {
                    return cat1.getSort() - cat2.getSort();//排序
                }).collect(Collectors.toList());

        return level1List;

    }

这一步,子分类还有子分类 ,用到了递归

//拿到父元素的子级分类
    private List<CategoryEntity> getChildren(CategoryEntity root, List<CategoryEntity> all) {//传入的root是一级分类,以及all 所有的分类
        List<CategoryEntity> childrens = all.stream().filter(categoryEntity -> {
            return categoryEntity.getParentCid().equals(root.getCatId());//拿到了二级分类
        }).map(categoryEntity -> {//二级分类下面有又有三级分类
            categoryEntity.setChildren(getChildren(categoryEntity, all));
            return categoryEntity;
        }).sorted((cat1, cat2) -> {
            return (cat1.getSort() == null ? 0 : cat1.getSort()) - (cat2.getSort() == null ? 0 : cat2.getSort());//排序
        }).collect(Collectors.toList());

        return childrens;
    }