Vue项目实战——【基于 Vue3

  username: "",
  password: "",
  type: "login", // 登录注册模式切换参数
  verify: "", // 验证码输入框输入的内容
  imgCode: "", // 生成的验证图片内的文字
});

console.log("verifyRef", verifyRef);
// 提交登录 or 注册表单
const onSubmit = async (values) => {
  // 登录功能
  if (state.type == "login") {
    const { data } = await axios.post("/user/login", {
      username: state.username,
      password: state.password,
    });
    // 添加 token 到本地存储
    localStorage.setItem("token", data.token);
    window.location.href = "/";
  } else {
    // 生成的图片验证码的文字等于验证码组件生成的验证码
    state.imgCode = verifyRef.value.imgCode || "";
    // 如果验证码组件生成的验证码的小写 != 用户输入的验证码的小写，则提示错误
    if (
      verifyRef.value.imgCode.toLowerCase() != state.verify.toLowerCase()
    ) {
      console.log("verifyRef.value.imgCode", verifyRef.value.imgCode);
      Toast.fail("验证码错误");
      return;
    }
    // 验证码匹配成功，注册=>注册成功
    await axios.post("/user/register", {
      username: state.username,
      password: state.password,
    });
    Toast.success("注册成功");
  }
};

// 切换登录和注册两种模式
const chanegType = (type) => {
  state.type = type;
};

return {
  ...toRefs(state),
  onSubmit,
  chanegType,
  verifyRef,
};

},
};

在 custom.less 下补充 link-color 变量的定义，在写样式的时候，以 color: `@link-color;` 这样的形式引用它


custom.less

@primary: #39be77; // 主题色
@danger: #fc3c0c;
@primary-bg: #f5f5f5;
@link-color: #597fe7;

当前页面的外层是 #app、body，作为父级，它们需要先把高度撑开


index.css

body,
html,
p {
height: 100%;
margin: 0;
padding: 0;
}

* {
box-sizing: border-box;
}

#app {
height: 100%;
}

**此时，yarn dev，打开浏览器可以看到…**


![在这里插入图片描述](https://img-blog.csdnimg.cn/453db66e2afc41968faac8355b239e2a.png)


#### 2、图片验证码


注：验证码基本上都是由服务端接口提供，然后上报之后由服务端验证是否正确，所以此部分内容可以自行选择是否去做。

* 绘制文字并让四个文字在不同的位置显示的思路 :
* 1、定义字体
* 2、定义对齐方式
* 3、填充不同的颜色
* 4、保存当前的状态（以防止以上的状态受影响）
* 5、平移 translate()
* 6、旋转 rotate()
* 7、填充文字
* 8、restore 出栈
* */
ctx.font = fontSize + “px Simhei”;
ctx.textBaseline = “top”;
ctx.fillStyle = randomColor(80, 150);
/*
* save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。
* 这就允许您临时地改变图像状态，
* 然后，通过调用 restore() 来恢复以前的值。
* save是入栈，restore 是出栈。
* 用来保存Canvas的状态。save 之后，可以调用 Canvas 的平移、放缩、旋转、错切、裁剪等操作。 restore：用来恢复 Canvas 之前保存的状态。防止 save 后对 Canvas 执行的操作对后续的绘制有影响。
*
* */
ctx.save();
ctx.translate(30 * i + 15, 15);
ctx.rotate((deg * Math.PI) / 180);
// fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
// 请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
// context.fillText(text,x,y,maxWidth);
ctx.fillText(text, -15 + 5, -15);
ctx.restore();
}
// 5.随机产生5条干扰线,干扰线的颜色要浅一点
for (let i = 0; i < 5; i++) {
ctx.beginPath();
ctx.moveTo(randomNum(0, state.width), randomNum(0, state.height));
ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height));
ctx.strokeStyle = randomColor(180, 230);
ctx.closePath();
ctx.stroke();
}
// 6.随机产生40个干扰的小点
for (let i = 0; i < 40; i++) {
ctx.beginPath();
ctx.arc(
randomNum(0, state.width),
randomNum(0, state.height),
1,
0,
2 * Math.PI
);
ctx.closePath();
ctx.fillStyle = randomColor(150, 200);
ctx.fill();
}
return imgCode;
};

return {
  ...toRefs(state),
  verify,
  handleDraw,
};

},
};

**此时，yarn dev，打开浏览器可以看到…**


![在这里插入图片描述](https://img-blog.csdnimg.cn/e7d00b7b1d6c4ba29a8c634dacd8ee61.png)


#### 3、修改 axios


为避免在页面内请求接口的时候，每次都通过 code 码去判断接口请求是否成功，我们可以这样修改 axios.js 文件


axios.js

import axios from ‘axios’
// 轻提示插件（Vant UI）
import { Toast } from ‘vant’
import router from ‘…/router’

// 根据环境变量切换本地和线上的请求地址
axios.defaults.baseURL = process.env.NODE_ENV == ‘development’ ? ‘/api’ : ‘//47.99.134.126:7008/api’
// 允许跨域
axios.defaults.withCredentials = true
axios.defaults.headers[‘X-Requested-With’] = ‘XMLHttpRequest’
// token的用户鉴权方式，在请求头的 headers 内添加 token，每次请求都会验证用户信息
axios.defaults.headers[‘Authorization’] = ${localStorage.getItem('token') || null}
axios.defaults.headers.post[‘Content-Type’] = ‘application/json’

axios.interceptors.response.use(res => {
// 返回数据的类型不是对象，则报异常
if (typeof res.data !== ‘object’) {
Toast.fail(‘服务端异常！’)
return Promise.reject(res)

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】