十八(GIT)、GIT基本命令、axios别名方法、黑马就业数据平台(axios基地址、轻提示函数、注册及登录功能)

1. GIT

1.1 Git配置用户信息

Git配置用户信息

git config --global user.name "用户名"

git config --global user.email 邮箱地址

查看配置

git config --list (信息太多使用输入 q 退出)

1.2 本地初始化Git仓库

通常有两种获取Git仓库的方式:

将尚未进行版本控制的本地目录转为 Git仓库（初始化仓库）从其他服务器克隆一个已存在的Git仓库

本地初始化Git仓库的步骤:

在本地目录打开git bash（终端），执行命令 git init

1.3 记录每次更新到仓库

使用Git进行版本控制的项目中的3个区: 工作区、暂存区、版本库

记录每次更新到仓库的核心操作:

工作区开发→添加到暂存区 → 记录到版本库

工作区开发(项目文件夹) → git add . → git commit -m"信息"

1.4 查看及切换历史版本

查看历史版本的命令:

git log --oneline（一行）、 git log

切换历史版本的命令:

git reset --hard 版本号

拓展命令:

clear（清屏）、git reflog（查看完整历史）

1.5 Git忽略文件和查看文件状态

Git设置忽略文件需要创建的文件是:

.gitignore

.gitignore文件的常用语法:

忽略 info.txt 文件

info.txt

忽略 .vscode/ 目录下所有的文件

.vscode

忽略目录下所有.md结尾的文件

*.md

会忽略 doc/目录下扩展名为txt的文件

doc/*.txt

查看文件状态的命令是: git status

红色(工作区有文件更改)、

绿色(暂存区有文件更改)、

nothing to commit(没有任何文件更改)

1.6 Git分支

(把工作从开发主线分离，以免影响开发主线)

查看分支 git branch

创建分支 git branch 新分支名

切换分支 git checkout 分支名

创建+切换分支 git checkout --b 新分支名

合并分支 git merge 分支名

删除分支 git branch --d 分支名

强制删除分支 git branch --D 分支名

重命名分支 git branch --m 老分支名新分支名

1.7 Git分支-冲突

冲突原因 → 不同分支，相同文件，相同位置，不同修改

2. axios 别名方法

javascript 复制代码

// axios函数+对象写法
axios({
  url: "url地址",
  method: "post",
  data: { key: "value" },
});

// axios别名方法（简化方法）
axios.post("url地址", { key: "value" });

3. 黑马就业数据平台

3.1 配置axios基地址

common.js

javascript 复制代码

// 配置axios基地址
// 项目中配置 axios基地址，简化后续URL设置（Git记录）
axios.defaults.baseURL = "https://hmajax.itheima.net";

javascript 复制代码

// 测试用，基地址是否成功配置
axios({
  url: "/register",
  method: "post",
  data: {
    username: "bpmf0723223",
    password: "123456",
  },
}).then((res) => {
  console.log(res);
});

3.2 抽取轻提示函数

javascript 复制代码

// 抽取轻提示函数，方便后续调用（Git记录）
function showToast(msg) {
  // 获取弹窗元素
  const myToast = document.querySelector(".my-toast");
  // 创建弹窗对象
  const Toast = new bootstrap.Toast(myToast);
  // 替换提示文字
  document.querySelector(".toast-body").innerHTML = msg;
  // 显示弹窗
  Toast.show();
}

// 测试用，抽取轻提示函数是否成功
showToast("注册成功");

3.3 用户注册

javascript 复制代码

// 用户注册
// 完成用户注册功能，提示用户操作结果（Git记录）
const btnRegister = document.querySelector("#btn-register");
btnRegister.addEventListener("click", async function () {
  const data = serialize(document.querySelector(".register-form"), {
    hash: true,
    empty: true,
  });

  const { username, password } = data;
  if (username == "" || password == "")
    return showToast("账号和密码长度不能为空");
  if (username.length < 8 || username.length > 30)
    return showToast("账号长度应为8-30个字符之间");
  if (password.length < 6 || password.length > 30)
    return showToast("密码长度应为6-30个字符之间");

  try {
    const res = await axios.post("/register", data);
    showToast(res.data.message);
    // console.log(res);
  } catch (error) {
    // console.log(error);
    // dir 展开error对象
    // console.dir(error);
    showToast(error.response.data.message);
  }
});

3.4 用户登录

javascript 复制代码

// 完成用户登录功能
const btnLogin = document.querySelector("#btn-login");
btnLogin.addEventListener("click", async function () {
  const data = serialize(document.querySelector(".login-form"), {
    hash: true,
    empty: true,
  });

  const { username, password } = data;
  if (username == "" || password == "")
    return showToast("账号和密码长度不能为空");
  if (username.length < 8 || username.length > 30)
    return showToast("账号长度应为8-30个字符之间");
  if (password.length < 6 || password.length > 30)
    return showToast("密码长度应为6-30个字符之间");

  try {
    const res = await axios.post("/login", data);
    showToast(res.data.message);

    // index首页右上角需用到用户名数据 → 本地存储
    localStorage.setItem("username", res.data.data.username);
    // token：服务器返回的标识 → 标注当前用户是否登陆成功
    localStorage.setItem("token", res.data.data.token);

    // 延迟跳转页面
    setTimeout(() => {
      location.href = "./index.html";
    }, 1500);
  } catch (error) {
    showToast(error.response.data.message);
  }
});