技术与架构

前言 每一个公司或者团队有会有相关的项目网址，考虑到团队共用的东西，所以计划是开发一个静态导航页，这样就不需要每个人自己维护了，使用同一套即可，当时在Github上面找了一些开源的静态导航页项目，使用的是开源库static-nav，它是使用HTML+CSS+JQ简单实现的，代码里面网址都是直接写死的，我只要将其替换就可以。 1. 遇到问题 static-nav虽然可以正常应对当前的需求，但是使用一段时间之后发现，如果我要替换或者新增一些网址，每次都需要在.html文件中修改，然后再重新部署。一两次还好，次数多了，就有点受不了了，再加上一个模块的网址多了之后，好几个模块所占用的空间不一致的话，那布局就容易错乱，为了解决这个问题，我每次都需要使用占位符解决。 2. 解决方案 考虑到维护、后期拓展难的问题，就打算重构这个项目，并命名为dst-static-nav，基于vue next + vite + element-plus 实现，通过一个navLists.ts文件动态配置，后期只需要将这个文件存放在服务器，如有任何需求，只需要改动这个navLists.ts文件即可，不需要改动项目界面，然后又要重新部署一遍，因为最近百度捣鼓了一个开发者搜索，所以也加了一下，项目效果图，如下所示： 功能主要是以下几点，分别是： 左边菜单栏快速定位，右边静态导航页动态渲染 通过 navList.ts 配置，无需改动前端页面 支持百度开发者搜索 当前只是这些功能，后期可能考虑部署线上，然后怎么可以做到通用一点。 3. 技术要点 项目虽然很小，但是有一些细节点还是可以梳理记录一下的，技术没有高低之分，只要能解决了问题就是好技术。 3.1 基于el-scrollbar实现左右联动定位到标题栏 项目开发过程中，主要解决的问题是，左侧菜单栏和右边导航布局页面的联动，需求就是左侧菜单栏选中，右边导航页对应的标题栏滚动到顶部显示，在实现中主要使用document.getElementsByName()这个函数，当上定义了name属性，就可以通过这个函数获取到它与顶部的距离offsetTop，以此可以将滚动条滚动到指定的位置，如下所示： const handleSelect = (key: string, keyPath: string[]) => { let offsetTop = document.getElementsByName(key)[0].offsetTop scrollbarRef.value!.setScrollTop(offsetTop - 20) } 3.2 实现左侧菜单栏最后几个菜单的标题置顶 在项目使用过程中，发现左侧菜单栏最后几个菜单，来回切换，导航标题没有置顶，原因很简单，因为布局不够，为了解决这个问题，就需要在最后一个导航模块增加布局，但是应该要增加多少呢？每个导航模块的高度都是不定的，所以要新增的布局高度只能通过计算，动态设置。 首先，需要知道最后一个导航模块的名称，如下所示： // 获取左侧菜单最后一项，基于它加上需补充的空间高度(浏览器内高度-卡片整个高度) let lastNavName = navLists.at(-1)?.chindren.at(-1)?.label 然后，需要获取当前浏览器页面的高度，减去这个导航模块的高度，就可以知道需要新增多高的布局了，如下所示： const handleSelect = (key: string, keyPath: string[]) => { let offsetTop = document.getElementsByName(key)[0].offsetTop scrollbarRef.value!.setScrollTop(offsetTop - 20) } 总结 dst-static-nav 项目还有蛮多东西需要完善的，也是在逐步新增需求，虽然不是什么了不起的项目，但是项目开发整个流程规范是一样的，争取培养起来用心做事情的感觉，从中体验到丝丝成就感。

第1章 简介 我们在学习新技术的时候，习惯于将官方文档先过一遍，将全部的知识点全部掌握之后，再进行项目实战，但是因为太多都是概念的知识，学习过程枯燥乏味，很少有人能坚持下来。 所以我在想，怎么改变这种现象？以我个人的经验来说，过多深究官方文档，反而将自己陷入知识点的海洋之中，抓不到重点，往往水过鸭背，因为学了没有真正应用，不久之后就会忘记，我的意思是，不用看什么官方文档，以终为始，不用管自己到底会不会，直接上手开发项目，根据当前的需求，去学习对应的知识点，比如现在你要生成一个 Vue3.0 项目，那么你可能只需要去学一下Vite对应的知识点就好了，不用去学Vue3.0中父子组件应该怎么传值？比如你要学习开发一个登陆页面，那你就需要去看Element-Plus应该怎么引入？如果你所学并不能为当下所用，那将毫无意义。 其实在你一步一步完成真实项目的过程中，就一直在学习Vue3.0的知识点了。 本书计划将 Vue3.0 的知识过一遍，所以一些 Vue2.0 就需要的环境配置就不再过多说明，只会提到 Vue3.0 开发环境配置相关的内容，用到的技术有 Vue3.0+Vite+TypeScript+Element-Plus+Less 。 第2章 开发环境配置 2.1 新建项目 在 Vite官方文档 中，已经提供了很多预设的模板，这里因为只关注当前使用的技术，所以其他模板并不详细说明，使用 Vite 生成 Vue3.0 项目模板，如果是使用 JaveScript 进行开发，使用 vue ，如果是使用 TypeScript 进行开发，使用 vue-ts ，具体命令如下所示： # npm 6.x npm init vite@latest my-vue-app --template vue # npm 7+, 需要额外的双横线： # 如果是使用JaveScript开发，使用vue npm init vite@latest my-vue-app -- --template vue # 如果是使用JaveScript开发，使用vue-ts npm init vite@latest my-vue-app -- --template vue-ts 打开chrome，就会显示项目模板的内容，如下图所示： 2.2 Chrome 91版本以上跨越问题 第3章 Vue3.0基础知识 3.1 Router 3.2 Comand 3.3 Porps 3.4 Emit 3.5 Vuex 3.5.1 computed computed主要用于涉及到视图更新的处理，比如用户名username的更新，刷新后，右上角用户名没有赋值成功。在App.vue中已经添加了getUserInfo的网络请求，但是在右上角上赋值显示失败了。 使用方式如下所示，并没有触发视图更新： const username = store.state.userInfo.username 触发视图更新： improt { useStore } from 'vuex' const store = useStore() const username = computed(() => { return store.state.userInfo.username }) userInfo敲定刷新后的获取策略 ...

1. 前言 计划使用 VuePress 2.x 结合 ElementPlus 实现一个封装组件库的文档说明网站。本文将详细介绍如何搭建环境、配置项目以及解决过程中遇到的问题。 2. Vuepress项目初始化 2.1 准备工作 创建一个名为 VuePressTest 的项目目录，然后进入该目录并安装依赖： mkdir VuePressTest && cd VuePressTest npm init -y npm install -D vuepress@next npm install 2.2 配置 在项目根目录下的 package.json 文件中添加以下脚本： { "scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs" } } 2.3 示例 在项目根目录下创建 docs/README.md 文件，并添加以下内容： --- home: true heroImage: https://artice-code-1258339218.cos.ap-beijing.myqcloud.com/vuepress/element-index.png heroText: Element features: - title: 一致性 Consistency details: 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 - title: 反馈 Feedback details: 通过界面样式和交互动效让用户可以清晰的感知自己的操作 - title: 效率 Efficiency details: 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。 footer: by饿了么 --- 运行 npm run dev 命令后，效果如下： ...

凯撒密码 凯撒密码作为一种最为古老的**对称加密体制，通过把字母移动一定的位数来实现加密和解密。**明文中的所有字母都在字母表上向后（或向前）按照一个固定数目进行偏移后被替换成密文。例如，当偏移量是3的时候，所有的字母A将被替换成D，B变成E，因此，位数就是凯撒密码加密和解密的密匙。 凯撒密码的简单demo实现 public class Caesar { public static void main(String[] args) { //需要加密的数据 String enc = "bravewh"; //需要解密的数据 String dec = "eudyhzk"; //密匙，即偏移量 int key = 3; //举例，用来验证统计字符串出各字符出现的字数 String str = "asdasgasdasdad adawdawd1112212ad"; //打印 System.out.println("加密后："+encrypt(enc, 3)); System.out.println("解密后："+decrypt(dec, 3)); } //加密方法 public static String encrypt(String enc, int key) { //得到字符串里的每一个字符 char[] array = enc.toCharArray(); for (int i = 0; i < array.length; ++i) { //字符转换成 ASCII 码值 int ascii = array[i]; //字符偏移，例如 a->b ascii = ascii + key; //ASCII 码值转换为 char char newChar = (char) ascii; //替换原有字符 array[i] = newChar; //以上 4 行代码可以简写为一行 //array[i] = (char) (array[i] + key); } //字符数组转换成 String return new String(array); } //解密方法 public static String decrypt(String input, int key) { //得到字符串里的每一个字符 char[] array = input.toCharArray(); for (int i = 0; i < array.length; ++i) { //字符转换成 ASCII 码值 int ascii = array[i]; //恢复字符偏移，例如 b->a ascii = ascii - key; //ASCII 码值转换为 char char newChar = (char) ascii; //替换原有字符 array[i] = newChar; //以上 4 行代码可以简写为一行 //array[i] = (char) (array[i] - key); } //字符数组转换成 String return new String(array); } 则此时，运行，打印结果为： ...