elementplus官网是如何进行中英文切换的

京淘项目搭建

一、ElementUI介绍

1、官网介绍

网址：https://element.eleme.cn/#/zh-CN/component/installation

1.1）CDN说明

1.2）ElementUI入门案例

心法：ctrl+c + ctrl+v，CV大法

1.2.1）页面效果

1.2.2）标签结构体说明

<!--
      知识点:
        1.el-container 代表一个组件
        2.关联组件名称 Container (组件对象由谁定义 UIJS)
        3.mian.js 引入import './plugins/element.js'
        4.import {Container} from 'element-ui'
    -->
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>

cs样式：

<style>
   .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }

    body > .el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
</style>

1.2.3）JS引入过程

//1.从JS文件中引入组件
import {
  	Container
} from 'element-ui'

//2.实现父子组件参数传递.
Vue.use(Container)

1.3）入门案例

需求：要求调用日期输入组件

1.3.1）添加组件

<!-- 按钮案例2-->
    <el-row>
      <!-- 组件名称: Button  -->
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <hr />
     <!-- 日期选择 -->
     <div class="block">
        <span class="demonstration">默认</span>
        <!-- 组件名称:DatePicker   -->
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>

1.3.2）从JS文件中引入组件

import { DatePicker } from 'element-ui'

1.3.3）实现父子组件参数传递.

Vue.use(DatePicker)

1.3.4）定义js属性，实现组件的属性

<script>
   export default {
      data() {
        return {
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }, {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            }, {
              text: '一周前',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }]
          },
          value1: '',
          value2: '',
        };
      }
    };
</script>

1.3.5）案例效果

二、后端代码–用户登录操作

1、user表设计

1.ID 是主键自增

2.密码：加密之后的密文，加密API

3.status 0-1 布尔类型值 0-false 1-true 启用还是禁用

4.创建时间/修改时间 每张表里需要单独定义，可以进行封装优化

2、User对象说明

说明：一张表对应一个User对象

@TableName("user") 			//对象与表一一对应 注意大小写问题
@Data             		 	//动态生成get/set方法
@Accessors(chain = true)    //链式加载结构
public class User extends BasePojo {
    @TableId(type = IdType.AUTO)
    private Integer id; 	//ID主键自增
    private String username;
    private String password;
    private String phone;
    private String email;
    private Boolean status;
    @TableField(exist = false)  	//该属性（数据库）不存在
    private Role role;  			//定义role角色数据（数据库不存在）
}

3、用户登陆业务实现流程

步骤1: 用户输入完 用户名和密码之后,点击登录按钮
步骤2: 准备username/password数据 向后台服务器发送请求, 请求类型: post类型
步骤3: 后台服务器接收用户的请求参数 username/password
步骤4: 根据用户名和密码查询数据库 结果: 有数据 用户名和密码正确
| 没有结果 用户名和密码错误
步骤5: 后端服务器应该返回一个业务回执 标识业务逻辑是否正确执行
假设: status 200 正确, 201 表示失败
步骤6: 前端服务器根据用户的200/201 提示用户操作成功/操作失败.

4、业务接口文档

说明：一般做前后端交互时，必须有业务接口文档，文档中详细阐述了业务需求/url地址/参数/返回值信息等要素。
前后端严格按照业务接口文档进行编码。

4.1）用户登录验证接口

请求路径：/use/login
请求方式：POST

请求参数：

参数名称	参数说明	备注
username	用户名	不能为空
password	密码	不能为空

响应数据SysResult对象

参数	参数说明	备注
status	参数说明	200表示服务请求成功，201表示服务器异常
msg	服务器返回的提示信息	可以为null
data	服务器返回的业务数据	返回秘钥token信息

返回值格式：

{ "status " :200 , " mSg":"服务器调用成功! " , "data " : "1e893a97634847b3a8b499b173bea620"}

5、系统返回值SysResult对象

关于SysResult对象的说明：该对象用来实现后端与前端业务的交互。

业务执行正确 status=200，业务执行错误 status=201

概念：前后端交互的层级，定义为 VO层

6 编辑SysResult对象

根据用户不同的需求，实现VO对象的返回
vo：实现前后端交互

package com.jt.vo;

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


import java.io.Serializable;

//作用：实现前后端交互
@Data                     //提供get、set。。。方法
@Accessors(chain = true) //开启链式编程
@NoArgsConstructor      //无参构造
@AllArgsConstructor     //全参构造
public class SysResult implements Serializable { //规定
	private Integer status; //状态码 200 201
	private String msg;     //服务器返回的
	private Object data;

	//为了用户使用VO对象，更加的方便，重载一些方法，简化程序的调用
	public  static SysResult fail(){
		return new SysResult(201,"业务执行失败",null);
	}

	//1.不带参数的正确返回
	public static SysResult success(){
		return new SysResult(200, "服务器处理成功", null);
	}

	//2.带返回值的正确返回  用户传递什么/返回值就是什么
	public static SysResult success(Object data){
		return new SysResult(200, "服务器处理成功", data);
	}

	//3.带返回值,携带提示信息
	public static SysResult success(String msg,Object data){
		return new SysResult(200, msg,data);
	}

	//4.这样的写不对的!!! 重载方法 参数不要耦合!!!
   /* public static SysResult success(String msg){
        return new SysResult(200,msg,null);
    }*/
}

7、前端页面解析(调用流程!!!)

7.1）页面URL请求地址

7.2）前端JS分析

7.2.1）页面登陆按钮

7.2.2）前端JS分析

8、token的作用

说明：
前端服务器: 用户进行登陆操作时，输入用户名和密码进行校验!!!
将数据信息发送到后端服务器进行校验，查询数据库
假设：用户用户名和密码正确!!! 页面应该跳转到系统的首页 “/home” 对
问题：是否可以在浏览器中直接输入 “/home” 理论上不允许访问该页面!
解决方案：
后端服务器返回一个独一无二的 token数据, 前端只要携带token，认为该用户已经登陆，可以跳转页面。
权限操作雏形!!!
总结: token是用来标识用户已经登陆!!!

9、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公开密钥认证或是数字签名等用途。

9.1）总结:

1.MD5信息摘要算法
	2.通常可以将数据进行MD5加密 生成 “数字指纹”
	3.现阶段md5的加密的算法应用于各大网站中
	4.md5加密之后 理论上来说 无法由密文转化为明文 不可以反向编译
	5. 限定输入密码的次数!!! 3-5次 锁定账户!!!

9.2）核心算法:

知识回顾：高中的函数!!!

什么是函数：给定未知数x 经过函数计算 得到一个唯一的结果y

实质：MD5的本质就是hash算法!!!

流传的MD5可以被破解的原理: 就是将md5进行反向查询，md5 改进版: hash(明文+ 盐值) 了解

10、 编辑UserController

业务要求：完成用户信息校验,并且返回特定的token数据

/**
     * 业务需求:用户登陆校验
     * 类型:POST
     * URL: /user/login
     * 参数: username/password json串 {username: "xxx", password: "xxx"}
     * 返回值: SysResult对象  data的String类型的信息 token
     * 用户名/密码 admin123/admin123456
     */
    @PostMapping("/login")
    public SysResult login(@RequestBody User user){
        //System.out.println(user);
        //1.根据用户名和密码校验 返回token Service层中完成
        String token = userService.login(user);
        //2. token 有值业务正确   | null 业务操作失败
        if(token == null){
            return SysResult.fail();
        }
        return SysResult.success(token);
    }

11、编辑UserServiceImpl实现类

/**
     * 需求:
     *      1.根据用户名和密码查询数据库
     *      2.将密码进行加密处理 md5加密方式
     *      3.如果用户名和密码正确 返回token
     *      4 UUID: 每次生成的UUID几乎不重复.   重复概率 2^128/1
     *        b809cd3e-f4fa-11eb-b396-52152e05da50
     * @param user  作用: 在未来生成API文档时 有效果 一般都是默认的
     * @return
     */
    @Override
    public String login(User user) {
        //1.将密码进行加密的处理
        String password = user.getPassword(); //明文
        
        //2. 将字符串 转化为字节数组
        byte[] passByte = password.getBytes();
        
        //3. 将明文加密
        String md5Pass = DigestUtils.md5DigestAsHex(passByte);
        
        //4. 根据用户名和密文查询数据库
        //Sql: select * from user where uname="xxx" and ps="xx"
        //根据对象中不为null的属性充当where条件!!!!
        user.setPassword(md5Pass);
        QueryWrapper<User> queryWrapper = new QueryWrapper<>(user);
        
        //5. 从数据库中获取结果
        //用户名和密码是否与数据库中的匹配!!!!!
        //BUG: 根据MD5加密 admin123456 可能由于windows版本问题 可能出现偏差
        //  admin123456 A  !=  B  将数据库中的密码改为B
        //从数据库中获取结果
        User userDB = userMapper.selectOne(queryWrapper);

        if(userDB == null){ //用户名和密码错误 返回null
            return null;    //业务流程结束
        }

        //6. 如果程序执行到这一行,则数据用户的输入正确的. 返回token
        String token = UUID.randomUUID().toString()
                        .replace("-","");
        return token;
    }