1、JS原生路由实现Tab选项卡
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>原生路由实现Tab选项卡</title><style>* {text-decoration: none;box-sizing: border-box;font-size: 14px;color: #000;}.active {color: #009688;border-bottom: 3px solid #5fb878;}ul {list-style: none;border-bottom: 1px solid #ccc;}ul > li {height: 40px;display: inline-block;margin-right: 20px;}ul > li a {display: block;line-height: 40px;text-align: center;}ul > li a:hover {color: #009688;border-bottom: 3px solid #5fb878;}</style></head><body><div class="nav"><ul><li><a href="#nav1" class="active">购物指南</a></li><li><a href="#nav2">运输须知</a></li><li><a href="#nav3">退货说明</a></li><li><a href="#nav4">问题反馈</a></li></ul></div><div id="app"></div><!-- 404 --><div id="page404" style="display: none">你点哪里了？没反应过来。</div><script>// 原生的SPA(单页面应用)的路由实现方式// 基于锚点实现// (一)路由的原理:// 实现不刷新页面,就可以动态实现数据的加载,达到SPA的效果// window.location.hash: 获取url中的锚点: #以后面的内容// (二)路由的实现// 1 创建dom节点,const app = document.querySelector("#app");const div1 = document.createElement("div");// console.log(div1);div1.innerHTML = "打开支付页面，付款就行了！";const div2 = document.createElement("div");div2.innerHTML = "那是快递公司的事，别问我，嘿嘿~";const div3 = document.createElement("div");div3.innerHTML = "不支持退货，就是这么任性!";const div4 = document.createElement("div");div4.innerHTML = "买都买了，有问题就再买一个。";// 2. 并注册到路由表中// 路由表const routeTable = {1: div1,2: div2,3: div3,4: div4,};// 3. 生成路由function route(container) {// 1: 获取到路由let num = window.location.hash.substr(-1);// 2. 默认路由num = num || 1;// 3. 根据路由表获取对应的内容let content = routeTable[num];// 4. 如果路由表不存在指定的内容,获取到404的页面if (!content) content = document.querySelector("#page404");content.style.display = "block";// 5. 先将这个容器清空container.innerHTML = null;// 6. 将路由对应的页面渲染到指定的容器中container.appendChild(content);}// 路由的初始化/显示默认页面route(app);// 监听路由的变化/ 监听的锚点的变化window.addEventListener("hashchange", () => {route(app);setActive();});//设置焦点高亮显示function setActive() {//获取所有A标签const res = document.querySelectorAll("A");//获取hash最后一位数字const i = window.location.hash.substr(-1);//遍历去除原来高亮状态res.forEach((item) => {item.setAttribute("class", "");// item.classList.remove("active");});//设置焦点高亮状态res[i - 1].setAttribute("class", "active");}</script></body></html>
2、Vue路由实现Tab选项卡
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vue-router路由库实现Tab选项卡</title><style>* {text-decoration: none;box-sizing: border-box;font-size: 14px;color: #000;}.router-link-active {color: #009688;border-bottom: 3px solid #5fb878;}#app {height: 40px;position: relative;margin-bottom: 120px;}#app a {display: inline-block;margin: 10px;line-height: 40px;text-align: center;}.content {position: relative;top: -12px;z-index: -1;border-top: 1px solid #ccc;padding: 10px;}</style><script src="../vue.js"></script><!-- vue-router库 --><script src="vue-router.js"></script></head><body><div id="app"><!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link to="/nav1">购物指南</router-link><router-link to="/nav2">运输须知</router-link><router-link to="/nav3">退货说明</router-link><router-link to="/nav4">问题反馈</router-link><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div><script>// 1. 定义 (路由) 组件。const div1 = {template: "<div class='content'>打开支付页面，付款就行了！</div>",};const div2 = {template: "<div class='content'>那是快递公司的事，别问我，嘿嘿~</div>",};const div3 = {template: "<div class='content'>不支持退货，就是这么任性!</div>",};const div4 = {template: "<div class='content'>买都买了，有问题就再买一个。</div>",};// 2. 定义路由// 每个路由应该映射一个组件。// 其中"component" 可以是通过 Vue.extend() 创建的组件构造器， 或者，只是一个组件配置对象。const routes = [{ path:"/",redirect:"/nav1"}, //路由空默认跳转{ path: "/nav1", component: div1 },{ path: "/nav2", component: div2 },{ path: "/nav3", component: div3 },{ path: "/nav4", component: div4 },];// 3. 创建 router 实例，然后传 `routes` 配置const router = new VueRouter({routes, // (缩写) 相当于 routes: routes});// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能const app = new Vue({router,}).$mount("#app");// 现在，应用已经启动了！</script></body></html>
3、Git的基本操作流程
- 在工作中编程- 将代码添加到暂存区- 将暂存区内容一次性的提交到本地版本库- 将本地的版本库内容提交到远程的版本库
第1步：安装Git
打开Git网站：https://git-scm.com/downloads ,根据自身操作系统下载，然后按默认选项安装即可。
第2步：安装完成后，在开始菜单里找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功！
第3步：打开Git Bash，配置用户名和邮箱
git config --global user.name '用户名'git config --global user.email '用户邮箱'
注意git config命令的—global参数，用了这个参数，表示你这台机器上所有的Git仓库都会使用这个配置，当然也可以对某个仓库指定不同的用户名和Email地址。
- 第4步：git 版本库的初始化: 创建版本库
git init
创建后目录下多了一个
.git的目录，是个隐藏的目录，这个目录是Git来跟踪管理版本库的（本地库），不要手动修改这个目录里面的文件，可能会导致Git仓库被破坏。
- 第5步：创建版本库的忽略文件
.gitignore
每个Git项目中都需要一个“.gitignore”文件，这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。
/lib/ 过滤整个文件夹*.zip 过滤所有.zip文件/password.php 过滤某个具体文件
配置语法：以斜杠/开头表示目录；以星号*通配多个字符；以问号?通配单个字符以方括号[]包含单个字符的匹配列表；以叹号!表示不忽略(跟踪)匹配到的文件或目录；
- 第6步：将工作区的以及修改好的文件提交到暂存区
git add 文件名 # 提交指定单个文件
git add . # 一次性全部提交完毕
git status # 查看状态
- 第7步：再将所有的内容从本地暂存区一次性的提交到本地的版本库
git commit -m '2020-9-12 18:59'
- 第8步：添加远程版本库
以 Gitee（码云）为例，登录网站：https://gitee.com/ 并创建仓库
- 第9步：添加远程版本库
git remote add origin https://gitee.com/用户项目仓库地址
可使用以下命令查看远程仓库
git remote -v
- 第10步：提交到远程仓库
git push origin master : 表示提交到远程仓库git push -u origin master ：这行命令表示下次我再更新文件提交时只需要使用 git push 命令就可以提交了git push -f origin master ：如果提交失败的话，使用此行命令可以强制提交，但是会覆盖以前的文件
- 第11步：提交完成，可以从远程仓库拉取内容
以下两条命令都可以git pull https://gitee.com/用户项目仓库地址
git pull origin master
总结
- 对路由的实现方式：原生及VUE都有了了解；
- 路由的应用场景不是很了解，除了单页面描点操作还能干什么？
- 网络有很多单页面网站，链接也是ID描点，但地址栏没有hash信息，这个和路由有关系吗？
- git简单仓库使用以前都用过，按老师的重温了下步骤。