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

1. GIT

1.1 Git配置用户信息

1. Git配置用户信息

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

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

2. 查看配置

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

1.2 本地初始化Git仓库

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

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

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

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

1.3 记录每次更新到仓库

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

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

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

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

1.4 查看及切换历史版本

1. 查看历史版本的命令:

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

2. 切换历史版本的命令:

  git reset --hard 版本号

3. 拓展命令:

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

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

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

  .gitignore

2. .gitignore文件的常用语法:

  # 忽略 info.txt 文件

  info.txt

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

  .vscode

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

  *.md

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

  doc/*.txt

3. 查看文件状态的命令是: 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 别名方法

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

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

3. 黑马就业数据平台

3.1 配置axios基地址

common.js

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

register.js

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

3.2 抽取轻提示函数

// 抽取轻提示函数，方便后续调用（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 用户注册

// 用户注册
// 完成用户注册功能，提示用户操作结果（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 用户登录

// 完成用户登录功能
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);
  }
});