Spring-jt-Day11-分布式后端登录页面

已于 2022-08-05 11:32:49 修改
阅读量180 收藏
点赞数
分类专栏： spring 文章标签： 分布式 vue spring java
于 2021-05-13 21:22:37 首次发布
原文链接：https://blog.csdn.net/qq_16804847/article/details/116737327
版权

版权声明：本文为闪耀太阳原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_16804847/article/details/116737327

1. 京淘项目后端架构图

在这里插入图片描述

2. 京淘项目后台搭建

2.1 互联网架构设计

2.1.1 高并发

定义: 在同一时间内,大量用户访问服务器的数量.
常识: 单台tomcat服务器 支持的并发数? 官方数据: 200-270左右(理论值)
实际值: 150左右 网速/硬件设备(核数/内存) 云平台
JVM调优: tomcat服务器单台性能 可以达到1000/秒 (增大运行内存) 监控
软件不够,硬件来凑

2.1.2 分布式

2.1.2.1 分布式计算
一项任务由多台服务器同时完成. 大数据的处理方式  任务拆分(包). 再有多个线程分别执行各自的包, 结果整合
2.1.2.2 分布式系统

说明: 当先的企业在构建项目时 一般都采用分布式的系统的方式.
核心思想: 化整为零 (拆)

2.1.3 分布式系统

2.1.3.0 业务分析

说明: 如果将项目中所有的功能都放到一起,则架构的耦合性较高,如果其中一个出现问题,则直接影响整个服务器.
在这里插入图片描述

2.1.3.1 按照业务拆分

说明: 将项目按照业务(模块) 将大型项目进行拆分,拆分为若干的小型的工程.
在这里插入图片描述

2.1.3.2 按照层级拆分

说明: 由于业务的复杂度高导致开发耦合性高/业务耦合较高, 则可以采用按照层级拆分的方式 实现解耦.
在这里插入图片描述

2.1.3.3 关于分布式总结

说明: 通常由于项目的模块众多业务复杂,导致项目开发时耦合性高. 这时采用分布式的思想进行项目拆分(业务(模块)拆分,按照层级拆分).从架构角度实现了解耦.

2.1.3 集群/高可用(HA)

集群: 通常采用多台服务器一起为用户提供服务.
高可用: 当服务器发生故障时,无需人为的干预,自动的实现故障的迁移.

2.2 分布式系统存在的问题

2.2.1 问题说明

1.众多项目如何管理jar包/版本
2.工具包如何优化

2.2.2 聚合工程构建

在这里插入图片描述

3 京淘项目后台搭建

3.1 创建父级工程

3.1.1 创建项目

在这里插入图片描述

3.1.2 编辑pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.jt</groupId>
    <artifactId>jt</artifactId>
    <version>1.0-SNAPSHOT</version>
    <!--指定打包方式 jar/war/pom聚合工程 -->
    <packaging>pom</packaging>

    <!--引入父级工程-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
        <relativePath/>
    </parent>


    <properties>
        <java.version>1.8</java.version>
        <!--跳过测试类打包-->
        <skipTests>true</skipTests>
    </properties>

    <dependencies>
        <!--SpringMVCjar包文件-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- 引入aop支持 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>

        <!--热部署工具-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <!--lombok插件-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!--测试包-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!--引入jdbc包-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

        <!--引入数据库驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!--spring整合mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>

        <!--spring整合redis -->
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.data</groupId>
            <artifactId>spring-data-redis</artifactId>
        </dependency>
    </dependencies>

    <!--父级工程是一种结构 没有java代码 不需要执行运行,所以不需要build标签-->
</project>

3.2 创建工具API

3.2.1 创建common项目

在这里插入图片描述

3.2.2 导入资源文件

在这里插入图片描述

3.3 创建jt_manage

3.3.1 创建项目

在这里插入图片描述

3.3.2 编辑pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>jt</artifactId>
        <groupId>com.jt</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>jt_manage</artifactId>

    <!-- 依赖工具API-->
    <dependencies>
        <dependency>
            <groupId>com.jt</groupId>
            <artifactId>jt_common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    </dependencies>

    <!--添加build标签-->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>


</project>

3.3.3 导入jt_manage的src文件

说明: 将课前资料中的jt_manage中的src文件导入. 导入之前先删除自己的文件, 效果如图.
在这里插入图片描述

3.3.4 代码测试

在这里插入图片描述

4. 京淘项目业务实现

4.1 关闭ESLint代码校验

在这里插入图片描述

4.1 编辑用户输入框

在这里插入图片描述

4.2 用户数据校验

4.2.1 思路

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。

4.2.2 elementUI表单校验

API用法: Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
1).编辑页面HTML
在这里插入图片描述
2).编辑页面JS
在这里插入图片描述
3).页面效果展现
在这里插入图片描述

4.3 表单重置

4.3.1 需求说明

说明:当用户点击重置按钮时,应该清空表单数据.

4.3.2 组件结构

在这里插入图片描述

4.3.4 实现表单重置

在这里插入图片描述

4.4 登录校验

4.4.1 校验API

在这里插入图片描述

4.4.2 编辑页面JS

在这里插入图片描述

4.5 引入Axios组件

说明: 在main.js中添加axios的组件,并且设定全局变量.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import './assets/css/global.css'
import './assets/ali-icon/iconfont.css'

/* 导入axios包 */
import axios from 'axios'
/* 设定axios的请求根目录 */
axios.defaults.baseURL = 'http://localhost:8091/'
/* 向vue对象中添加全局对象 以后发送ajax请求使用$http对象 */
Vue.prototype.$http = axios



Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4.6 登录业务实现

4.6.1 编辑VO对象

说明: 在jt-common的vo中添加SysResult对象

package com.jt.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult {

    private Integer status; //状态码信息 200成功  201失败
    private String msg;     //服务器提示信息
    private Object data;    //服务器返回值

    public static SysResult fail(){
        return new SysResult(201,"服务器运行失败",null);
    }

    public static SysResult success(){
        return new SysResult(200, "服务器运行成功", null);
    }

    public static SysResult success(Object data){
        return new SysResult(200, "服务器运行成功", data);
    }

    public static SysResult success(String msg,Object data){
        return new SysResult(200, msg, data);
    }
}

4.6.2 编辑UserController

说明: 根据Ajax提交的请求,在UserController中编辑方法,实现用户登录业务.

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * @author 刘昱江
 * 时间 2021/5/11
 */
@RestController
@CrossOrigin
@RequestMapping("/user")    //抽取公共的请求
public class UserController {

    @Autowired
    private UserService userService;

    /**
     * 1.url地址: /user/login
     * 2.请求参数: 用户表单对象的JSON串   post类型
     * 3.返回值结果 SysResult  token?有值 正确        null 错误
     */
    @PostMapping("/login")
    public SysResult login(@RequestBody User user){

        String token = userService.findUserByUP(user);
        if(StringUtils.hasLength(token)){
            return SysResult.success(token);
        }else{
            return SysResult.fail();
        }
    }

}

4.6.3 MD5

MD5信息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。MD5由美国密码学家罗纳德·李维斯特（Ronald Linn Rivest）设计，于1992年公开，用以取代MD4算法。这套算法的程序在 RFC 1321 标准中被加以规范。1996年后该算法被证实存在弱点，可以被加以破解，对于需要高度安全性的数据，专家一般建议改用其他算法，如SHA-2。2004年，证实MD5算法无法防止碰撞（collision），因此不适用于安全性认证，如SSL公开密钥认证或是数字签名等用途。

4.6.4 编辑UserService

在这里插入图片描述

作业

完成用户登录操作

LXC5952
关注
专栏目录
springboot web开发 登录界面后端处理
awodwde的博客
09-28 842
在controller里写一个类：LoginController.java @Controller public class LoginController{ //RequestMapping(value="/user/login", method=RequestMethod.POST) @PostMapping(value="/user/login") public Static login(@RequestParm("username") String usern
spring+servlet+mysql架构的网页用javascript前端，java后端，带登录以及动态验证码界面
qq_34336793的博客
07-11 458
作为一个研究生，导师接项目，打工人做。7天把这个高难度的架构解决了，啃得7788的，什么Struts、spring boot、marven、css，反正拿了一个项目的工程，在这个基础上魔改（节约时间）。先看暂时的成果网页操作带码首先是登录功能，输入账号和密码还有验证码，登录界面。其中的账户是有权限的，主要是给管理员还有员工区分开不同的业务。...
SPRING-分布式环境下Springboot的登录如何保证session共享
飞翔的肥仔
04-21 474
一个很简单的项目，需要介入到权限，于是我直接新建了几张权限用户表。由于该功能仅仅给后台的几个工作人员使用，登录用的很简单。在测试环境一直部署了一台，所以直接用的sessionId是没有问题的。但是部署到了正式环境，由于是分布式部分，平台直接部署了2个实例，这样用sessionId来判断是否登录就有问题了。 怎么解决，用spring-session-data-redis。该包是基于redis的。 引...
SpringCloud 分布式跨域SSO(会话)认证处理 - 个人小记
qq_15057147的博客
01-10 4134
SpringCloud SSO
搭建spring-boot+vue前后端分离框架并实现登录功能
热门推荐
zks_4826的博客
08-12 11万+
源码链接：https://pan.baidu.com/s/1E0e72K6P3_xtkFscL6iEtQ 提取码：t2te 一、环境、工具 jdk1.8 maven spring-boot idea VSVode vue 二、搭建后台spring-boot框架 步骤： 1、new-project选择SpringInitializr next 2、创建项目文件结构以...
spring-boot-klock-starter：基于redis的分布式锁组件，简单方便快捷插入项目，使项目拥有分布式锁能力
01-30
基于redis的分布式锁spring-boot starter组件，由于项目拥有多样化的锁能力变得异常简单，支持spring boot，和spirng mvc等spring相关项目 快速开始 弹簧靴 1.添加锁启动器组件依赖，目前还没上传到公共仓库，需要...
spring-boot-seckill分布式秒杀系统-其他
06-12
spring-boot-seckill分布式秒杀系统是一个用SpringBoot开发的从0到1构建的分布式秒杀系统，项目案例基本成型，逐步完善中。 开发环境： JDK1.8、Maven、Mysql、IntelliJ IDEA、SpringBoot1.5.10、zookeeper3.4.6、...
spring-boot-seckill分布式秒杀系统 v1.0/java秒杀系统源码+安装说明
08-08
spring-boot-seckill分布式秒杀系统是一个用SpringBoot开发的从0到1构建的分布式秒杀系统，项目案例基本成型，逐步完善中。 开发环境： JDK1.8、Maven、Mysql、IntelliJ IDEA、SpringBoot1.5.10、zookeeper3.4.6、...
spring-petclinic-microservices：使用Spring Cloud构建的Spring Petclinic的分布式版本
02-02
使用Spring Cloud构建的Spring PetClinic示例应用程序的分布式版本 该微服务分支最初源自以演示如何将示例Spring应用程序拆分为。 为了实现该目标，我们使用了技术堆栈中的Spring Cloud Gateway，Spring Cloud ...
spring-petclinic-angular：Spring Petclinic示例应用程序的Angular 8版本（前端）
01-30
从后端使用REST API在启动前端应用程序之前，您需要启动后端服务器。 屏幕截图 安装 按照描述将更新到最新版本（当前为8.0.3）。 npm uninstall -g angular-cli @angular/cli npm cache clean npm install -g @...
Spring-jt-Day12-登录退出页面布局
qq_15740267的博客
05-15 199
版权声明：本文为闪耀太阳原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 原文链接：https://blog.csdn.net/qq_16804847/article/details/116780342 1. 用户登录 1.1 用户登录操作 1.1.1 编辑UserController package com.jt.controller; import com.jt.pojo.User; import com.jt.service.UserService; import
spring cloud微服务分布式云架构-单点登录（SSO）
springML的博客
03-21 2746
单点登录SSO（Single Sign-On）是身份管理中的一部分。SSO的一种较为通俗的定义是：SSO是指访问同一服务器不同应用中的受保护资源的同一用户，只需要登录一次，即 通过一个应用中的安全验证后，再访问其他应用中的受保护资源时，不再需要重新登录验证。 目前的企业应用环境中，往往有很多的应用系统，如办公自动化（OA）系统，财务管理系统，档案管理系统，信息查询系统等等。这些应用系统服务于企业的...
Spring Session 实现分布式会话管理
weixin_33953384的博客
04-01 258
2019独角兽企业重金招聘Python工程师标准>>> ...
spring session redis解决分布式登录问题
weixin_44098139的博客
04-18 1176
之前部署的服务都是单机服务，登录用户名校验和权限校验采用的是spring security，配置及实现步骤见另一个博文：http://blog.sina.com.cn/s/blog_6b8518810102xeld.html 随着服务请求量的增加及防单点考虑，将服务由单机改为分布式系统。程序里解决了队列处理、事务控制等问题开始上线，上线后发现登录一直有问题，原因是服务由vanish+4台tomc...
分布式系统统一登录的实现
谢小鱼的博客
11-25 4250
一、 运用Redis缓存将Token存入缓存； 将 session 全部存放到 Redis 中，Redis 全局管理数据，因为独特的 key 过期时间特性，对应 session 的过期特性，也很般配。另外，Redis 比较轻量，性能也很好。 用户在登录的时候如果通过鉴权体系的鉴定，可以生成 Token 数据，以 Token 作为键名，用户登录信息作为值，写入到 Redis 中，设置过期时间，并将 ...
海垦集团养殖场分布式光伏发电项目中的案例分享
最新发布
acreltzy18702111382的博客
09-12 1195
分布式光伏发电，作为分布式能源的一种形式，在我国的实践中主要涵盖户用光伏和工商业分布式光伏。本文阐述了畜牧业中分布式光伏监控系统与光伏运维平台相结合的策略，通过整合数据采集、传输、存储、处理分析以及远程监控和设备管理等功能，有效提升了光伏发电系统的运行效率和可靠性，同时降低了运维成本。本项目中的箱式变压器均配备了干式三相双绕组低损耗无励磁调压变压器，其容量为2500kVA，电压等级为10±5%/0.4kV，接线组别为“D，yn11”，交流频率为50Hz，适用于户外环境，并且其能效等级符合国家相关规范。
Java面试题精选：分布式(二)
YuanLuo0911的博客
09-11 1321
如果接入过支付宝或者微信的支付接口，会遇到这样一种流程。例如，APP调用支付宝或微信的SDK（Software Development Kit软件开发工具包）进行了支付，钱已经从用户的支付宝或微信账户，转到了公司（开发APP的公司）的支付宝或微信账户上，但是支付系统，并不知道钱是否已经支付成功，需要支付宝或者微信回调公司的支付系统，才能进行后续的业务，如图所示。这其实就是一个最大努力通知的解决方案。在方案中主要保证两点：（1）有一定的消息重复通知机制。
ClickHouse--19-- 分布式 GLOBAL IN 和 GLOBAL JOIN
时光里的博客
09-11 914
当数据表包含多个分片的时候，我们需要将普通的本地查询转换为分布式查询。当然，这个转换动作是不需要用户自己进行的，在ClickHouse里面会由Distributed表引擎代劳。Distributed表引擎的定位就好比是一个分表的中间件，它本身并不存储数据，而是分片的代理，能自动的将SQL查询路由到每个分片。发起远程调用，根据集群的配置信息，从当前节点向远端分片发起Remote远程查询调用分布式表转本地表，在发送远程查询时，将SQL内的 _all表 转成 _local表。
15_分布式数据结构
刘炫320的博客
09-11 531
老鸟：我们先从一个简单的例子开始。假设你有一个大表格，数据量非常大，单台机器处理起来很慢。这时候，如果我们把表格分成几部分，分别放到不同的机器上去处理，是不是就会快很多？菜鸟：听起来是这样，但具体怎么做呢？老鸟：这就是分布式数据结构的核心思想。通过将数据分片，分布在多个节点上进行并行处理。我们来看看一个简单的代码示例。老鸟：今天我们讨论了分布式数据结构的基本概念、操作细节和一些优化方法。你可以进一步学习一致性哈希、分布式文件系统（如HDFS）和分布式数据库（如Cassandra、MongoDB）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值