作者：Eno_Yao

转发链接：
https://segmentfault.com/a/1190000022623676

电脑完蛋了，好不容易抢回来的文档

列表页传参Staff.vue：

<template>
    <div class="staff">
        <main class="container">
            <aside class="sidebar">
                <nav>
                    <ul>
                        <li v-for="staff in staffList" :key="staff.id">
                            <!-- <router-link :to="`/staff/info?id=${staff.id}&name=${staff.name}&age=${staff.age}`" active-class="activeLink">{{ staff.name }}</router-link> -->
                            <router-link :to="{
                                path: '/staff/info',
                                query: {
                                    id: staff.id,
                                    name: staff.name,
                                    age: staff.age
                                }
                            }" active-class="activeLink">
                                {{ staff.name }}
                            </router-link>
                        </li>
                    </ul>
                </nav>
            </aside>
            <section class="content">
                <router-view />
            </section>
        </main>
    </div>
</template>
<script lang='ts' setup name='Staff'>
import { reactive } from 'vue';
// 数据准备
const staffList = reactive([
    { id: "1", name: "张三", age: 22 },
    { id: "2", name: "李四", age: 23 },
    { id: "3", name: "王五", age: 24 }
])
</script>
<style scoped>
.staff {
    background-color: darkslategrey;
}

.container {
    display: flex;
    margin-top: 10px;
}

.sidebar {
    width: 50px;
    color: white;
    box-sizing: border-box;
}

.sidebar nav ul {
    list-style-type: square;
    padding: 0;
}

.sidebar nav ul li {
    margin: 15px 0;
    color: gold;
}

.content {
    flex: 1;
    width: 600px;
    box-sizing: border-box;
    overflow-y: auto;
    background-color: #ecf0f1;
}

.activeLink {
    color: white;
}
</style>

我们将优化之前的 Flask 聊天机器人，添加记忆功能，并总结 30 天学习成果，最后提出下一步建议。

优化聊天机器人 - 添加记忆功能

前文：

微信小程序开发极简入门（一）

预览图：

原理

合理使用 Grid 的属性：

1. display:设置为grid指明当前容器为Grid布局
2. grid-template-columns: 定义每一列的列宽（百分比或绝对单位）

方舟像素字体(Ark Pixel Font)是一款开源的泛中日韩像素字体。开源的泛中日韩像素字体。支持 10、12 和 16 像素。目标是为像素风格的游戏开发提供一套可用于正文的开箱即用的字体解决方案。这个项目不仅提供了全部的字形设计源文件，也提供了构建字体所需要的完整程序。

前端打工人面试时有没有这种体验？以为准备好常见问题，结果面试官突然盯着控制台问："说说 HTML 里的空元素有哪些？和可替换元素啥关系？" 瞬间大脑卡壳？别慌！今天就用一道高频题带你啃下这个基础硬骨头，下次面试直接甩标准答案！

面试题：列举 HTML 中的空元素，并说明可替换元素和不可替换元素的区别

问题一：哪些标签属于空元素？为啥有的空元素必须闭合？

前言

相信很多同学在练习Python爬虫项目时遇到过文本混淆，也就是

简介

虽然dart可以同时用作客户端和服务器端，但是基本上dart还是用做flutter开发的基本语言而使用的。除了andorid和ios之外，web就是最常见和通用的平台了,dart也提供了对HTML的原生支持，这个支持就是dart:html包。