前端-笔记

HSMgogogo!

已于 2022-07-07 16:12:29 修改

阅读量200

点赞数 1

文章标签：前端

于 2022-05-23 20:53:45 首次发布

本文链接：https://blog.csdn.net/scuff/article/details/124321842

版权

问题 1：google浏览器查看返回json

在前端F12进入开发者模式
在这里插入图片描述
ZF3R0-FHED2-M80TY-8QYGC-NPKYF

vscode国内镜像https://vscode.cdn.azure.cn

问题2：vue项目启动

在这里插入图片描述

问题3：在vue中通过注入插件阻止返回

1、安装插件

npm install vue-prevent-browser-back --save

2、在不允许返回的页面内导入

import preventBack from 'vue-prevent-browser-back'

3、在不允许返回的页面内注入

export default {
  mixins:[preventBack],  // 注入
  data() {
    return {....};
  },
  .
  .
  .
}

问题4：实现侧边栏点击界面跳转

1、安装vue的路由，后面是版本号

npm install vue-router@4

2、在main.js中引入路由
3、创建一个router文件夹管理路由，在index.js中管理路由

5：登录成功后将token保存在 sessionStorage

localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。

//本地缓存服务

import da from "element-ui/src/locale/lang/da";

const PREFIX='ginessential_'

//uesr模块
const USER_PREFIX=`${PREFIX}user_`;
const USER_TOKEN=`${USER_PREFIX}token`;
const USER_INFO=`${USER_PREFIX}info`;

//存储
const set=(key,data)=>{
    localStorage.setItem(key,data);
};

const setSession=(key, data)=>{
    sessionStorage.setItem(key,data);
}


//读取
const get=(key)=>localStorage.getItem(key);

const getSession=(key)=>sessionStorage.getItem(key);


//清除
const clearSession=()=>sessionStorage.clear();

export default {
    set,
    setItemSession: setSession,
    getItemSession: getSession,
    get,
    clearSession,
    USER_TOKEN,
    USER_INFO,
};

6:路由重定向

  {
    path:'/',
    redirect:'/login',
  },
  {
    path: "/login",
    component:()=>import('../views/Login')
  },

7：由路由守卫控制访问权限

如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

router.beforeEach((to, from, next) => {
    if (to.path === "/login" || to.path === "/register") {
      next();
    } else {
      // 这里相当于我不是去登录,需要权限才可以进入，验证sessionStroage中缓存了token
      if (storageService.getItemSession(storageService.USER_TOKEN)) {
        // 检查通过，那么，放行，return
        next();
      } else {
        //验证不通过返回登录页
        next('/login');
      }
    }
})

8、vue侧边栏未铺满

在这里插入图片描述
给el-menu这个组件加上下面class

.left-menu{
    height: 100vh;
  }

在这里插入图片描述

9、fetch请求（POST、GET）

post请求

				//向后台发送登录数据请求
                fetch('http://localhost:8080/api/auth/login', {
                    body: JSON.stringify(this.user),
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization':`Bearer ${storageService.get(storageService.USER_TOKEN)}`
                    },
                    method: 'POST',
                }).then(res =>res.json()).then(res=>{
                      console.log(res)
                      res.records.token
                      //密码正确
                      this.$router.push("/home")
                  })

get请求

	//请求用户信息
   fetch('http://localhost:8080/api/auth/info',{
          headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json',
         'Authorization':`Bearer ${storageService.get(storageService.USER_TOKEN)}`,
         }}).then(res=>res.json()).then(res=>{storageService.set(storageService.USER_INFO,JSON.stringify(res.data.user))
          //跳转页面
          this.$router.push("/home")
    })

10、 Axios发送请求（POST）

const config={
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${storageService.get(storageService.USER_TOKEN)}`
            }
          }
          //提交表单数据
          axios.post("http://localhost:8080/api/file/submitForm", 
          JSON.stringify(this.ruleForm), config
          ).then(res => {
            console.log(res)

          }).catch(err => {
            console.log(err)
          })

11、Authorization和token区别

header里面放Authorization，就是为了验证用户身份，现在前后端分离，有跨域问题，session经常会失效。所以使用了token来验证用户身份token和session拥有同一功能就是判断当前用户是不是之前登录了的用户。比如你登陆后，在同一浏览器不同页面打开同一网址，你想跳过登录环节，这时候因为跨域问题，发送给后台的session会是一个新的session，服务器没法通过session来验证你的身份，所以服务器的过滤器（或拦截器）会过滤掉你的请求，让你返回登陆界面重新登录，使用户体验变差

Authorization里面放的就是token，就相当于每次发送请求的时候，拦截器都会拦截一次你的请求，把你请求头部的Authorization拿出来，与当前存在服务器上的token做对比。如果是同一个，则证明是同一用户，然后拦截器就为你当前的请求放行，继续执行你的请求，如果不是同一个，那么服务器会截断你的请求并发送错误码给前端，让前端验证身份重新登陆。

12、js基础知识

foreach方法主要是针对数组而言的，对数组中的每个元素可以执行一次方法

var array = ['a', 'b', 'c', 'e'];
array.forEach((a)=> {
  console.log(a);
});

在这里插入图片描述

slice(start,end)方法可从已有数组中返回选定的元素，返回一个新数组，包含从start到end（不包含该元素）的数组元素。该方法不会改变原数组，而是返回一个子数组，如果想删除数组中的一段元素，应该使用Array.splice()方法。

var arr = [1,2,3,4,5];
console.log(arr.slice(1));//[2,3,4,5]  选择序列号从1到最后的所有元素组成的新数组。
console.log(arr.slice(1,3))//[2,3]  不包含end，序列号为3的元素

lastIndexOf的结果是该字符的下标。下标从0开始。

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。 some() 方法会依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。

const arr = [1,2,3,4]; 
arr.some((item)=>
	{return item>1})

//打印结果： true

//some()循环遍历找符合条件的值，一旦找到，则不会继续迭代下去。

indexof()判断字符串是否包涵子字符串

let str = 'orange';
 
str.indexOf('o');  //0
str.indexOf('n');  //3
str.indexOf('c');  //-1 代表未匹配

join() 方法主要是用于把数组中的所有元素转换一个字符串。元素是通过指定的分隔符进行分隔的。默认通过逗号进行分割

var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join());  George,John,Thomas

document.write(arr.join("."));George.John.Thomas

13、vue表中设置表头和单元格内容居中

<el-table :data="tableData" style="width: 100%" border
            :header-cell-style="{background:'#ccc','text-align':'center'}"
            :cell-style="{'text-align':'center'}"
  >

14、后端实现验证码功能思路

验证码流程如下：

前端发送get请求来获取验证码图片。需要前端生成uuid并把uuid的值传到后端；
后端收到前端的生成验证码请求，生成验证码图片和验证码内容。然后将前端传递过来的uuid值作为键，验证码内容作为值，形成一对键值对，存储在Redis中。同时根据需求设置验证码的有效期。
前端获取到验证码，等待用户输入验证码之后进行提交请求。提交请求中包含用户输入的验证码以及刚才生成的uuid。
后端拿到uuid以及用户输入的验证码内容。根据uuid取出Redis中保存的值，如果值为空，那么说明验证码已经过期；如果值不为空，取出值和前端传过来的用户输入的验证码内容进行比价，如果相等，那么就验证码输入正确，否则验证输入错误，将结果返回给前端。
前端收到后的响应，如果验证码正确，则显示提交成功，否则重新请求后端生成验证码，然后重复上述步骤。