展现自己小技能

小凡爱睡觉
147 阅读7分钟

技能三十一 掌握两种页面跳转传值的方式-query&params

前端页面跳转传值的方式，同样可以使用query和params两种方式。

1. Query传值

下载.png在前端页面跳转中，可以使用location.search获取URL中query部分的内容，将参数以key=value的形式进行拼接。例如，要跳转到index.html页面并传递一个名为name的参数，值为"小明"，可以使用以下代码：

window.location.href = 'index.html?name=小明';

下载.png在接收方页面（即:index.html）中，可以使用location.search获取传递的参数值：

const searchParams = new URLSearchParams(window.location.search);
const name = searchParams.get('name');
console.log(name); // 输出 "小明"

2. Params传值

下载.png前端页面跳转中，也可以使用location.pathname获取URL中路径部分的内容，并将参数以/:paramValue的形式添加到路径中。例如，要跳转到chapter.html页面并传递一个名为id的参数，值为"123"，可以使用以下代码：

window.location.href = 'chapter.html/123';

下载.png在接收方页面（即:chapter.html）中，需要先将参数占位符定义好，即使用/:paramName的格式，然后使用location.pathname获取传递的参数值：

const params = window.location.pathname.split('/');
const id = params[1];
console.log(id); // 输出 "123"

下载.png以上是基本的前端页面跳转传值方式，当传递的参数比较复杂时，也可以使用其他方式进行传递，比如将参数以JSON对象的形式进行序列化，然后使用localStorage、sessionStorage等进行存储和读取。

技能三十二 正确使用el-table 和 el-pagination做分页

下载.png要使用 el-table 和 el-pagination 进行分页，需要分别定义两个组件。

下载.png首先，定义 el-table 组件，指定它的数据源（即 data），需要显示的字段（即 columns），以及在该表格中每页显示的数据条数（即 pageSize）：

<template>
  <el-table :data="tableData" :columns="columns" :row-key="row => row.id">
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { label: 'ID', prop: 'id' },
        { label: '姓名', prop: 'name' },
        { label: '性别', prop: 'gender' },
        { label: '年龄', prop: 'age' },
        { label: '地址', prop: 'address' }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: []
    }
  },
  methods: {
    // 处理每页显示数据条数
    handleSizeChange(size) {
      this.pageSize = size
      this.getData()
    },
    // 处理翻页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getData()
    },
    // 获取数据
    getData() {
      // 根据当前页码和每页显示的条目数，发起请求获取数据
      // ...
      // 假设返回的数据为 response.data
      this.total = response.total
      this.tableData = response.data
    }
  }
}
</script>

下载.png上面的代码定义了一个 tableData 数组，作为 el-table 的 data 属性，columns 数组指定表格中要显示的列，currentPage 和 pageSize 变量指定当前页码和每页显示的数据条数，total 变量指定数据总条数，以及分别处理了 el-pagination 中的两个事件，即 size-change 和 current-change，在这两个事件中分别调用了 getData 方法获取数据。

下载.png在 getData 方法中，可根据当前页码和每页显示的数据条目数，发起请求获取数据。将获取到的数据（这里假设为 response.data）赋值给 tableData 数组，并将获取到的数据总行数（即 response.total）赋值给 total 变量。

下载.png通过 el-pagination 来实现分页功能，当用户点击分页组件中的页码按钮或改变每页显示数据条数时，会触发相应的事件（即 size-change 和 current-change 事件）。在这两个事件中，更新当前页码和每页显示数据条目数，并重新获取数据。同时 el-pagination 中的 total 属性会根据数据总条数自动计算总页数。

技能三十三 正确在el-table 和 el-tree中使用作用域插槽

下载.png在 el-table 和 el-tree 中使用作用域插槽可以定制表格或树形结构中的每一格或每一个节点的样式。以下是在 el-table 和 el-tree 中正确使用作用域插槽的示例：

在 el-table 中使用作用域插槽

<el-table :data="tableData">
  <el-table-column prop="id" label="ID"></el-table-column>
  <el-table-column label="姓名">
    <template #default="{ row }">
      <span>姓名：{{ row.name }}，性别：{{ row.gender }}</span>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

下载.png在上面的代码中，我们在 el-table-column 中定义了一个作用域插槽，该插槽的 default 属性值指向一个匿名函数，该函数接收一个名为 row 的参数，表示当前行的数据。在该函数中，我们可以根据该行的数据，定制该行中“姓名”一列的显示方式。

在 el-tree 中使用作用域插槽

<el-tree :data="treeData" :props="treeProps">
  <template #default="{ node, data }">
    <span>
        {{ data.label }} ({{ data.id }})
    </span>
  </template>
</el-tree>

下载.png在上面的代码中，我们在 el-tree 中定义了一个作用域插槽，该插槽的 default 属性值指向一个匿名函数，该函数接收两个参数：一个名为 node 的参数，表示当前节点的信息；另一个名为 data 的参数，表示当前节点所对应的数据对象。在该函数中，我们可以根据节点的信息和数据对象，定制该节点的显示方式。

下载.png需要注意的是，在该场景下需要使用 template 标签来定义作用域插槽，并使用 # 号来指定该插槽的名称。同时，在与 el-table 或 el-tree 组件有关的属性和事件中，应该采用驼峰式写法，而不是连字符式写法。

技能三十四 写出 array-to-tree的代码

下载.pngarray-to-tree 是一个将具有父子关系的扁平化数组转换为树形结构的函数。以下是一个基于 JavaScript 的实现示例：

function arrayToTree(list, options = {}) {
  const { id = 'id', parentId = 'parentId', children = 'children' } = options;
  const result = [];
  const map = list.reduce((prev, cur) => {
    prev[cur[id]] = cur;
    return prev;
  }, {});

  for (const item of list) {
    const parent = map[item[parentId]];
    if (parent) {
      parent[children] = parent[children] || [];
      parent[children].push(item);
    } else {
      result.push(item);
    }
  }
  return result;
}

下载.png在上述代码中，arrayToTree 函数接收两个参数，第一个参数 list 是一个扁平化的具有父子关系的数组，第二个参数 options 可以指定自定义的 id、parentId 和 children 字段名。

下载.png首先，我们定义了 result 数组用于存储最终生成的树形结构；定义了 map 对象用于存储每个节点的信息。map 对象的生成过程可以使用 Array.prototype.reduce 方法实现，它将数组 list 中的每一个元素 cur 添加到 prev 对象中，并以该元素的 id 字段（或者 options.id）作为 prev 对象中的键，以 cur 作为值，返回一个新的对象作为下一次循环的 prev。

下载.png接下来，我们使用 for...of 循环遍历 list 数组中的每一个节点，查找该节点的父节点，将该节点作为子节点添加到父节点中，或者如果该节点没有父节点，则将其作为根节点添加到 result 数组中。

最后返回 result 数组即可得到生成的树形结构。

技能三十五 了解history模式的刷新白屏并用nginx来解决

下载.png在实际开发过程中，我们有时会使用 Vue、React 或 Angular 等单页应用框架。这些框架通常使用 HTML5 History API 来实现前端路由，可使 URL 不带 #，让页面看起来更像是多个页面的组合。例如，路由为 /home 和 /about 的页面可以通过以下方式访问：

http://example.com/home
http://example.com/about

复制代码

下载.png但是，当我们刷新页面时，会发现浏览器的地址栏中 URL 的路径仍然是 /home 或 /about，但是页面变成了空白的一片。这是由于在 HTML5 History API 中，刷新浏览器会向服务器发送 URL 请求，而服务器并没有提供对应的资源，所以会返回一个 404 Not Found 响应。

想要解决这个问题，我们可以借助 Nginx 服务器来完成。下面是解决方案：

第一步：安装 Nginx

下载.png如果您还没有安装 Nginx，可以按照以下步骤安装：

sudo apt update
sudo apt install nginx

复制代码

第二步：配置 Nginx

下载.png在配置 Nginx 之前，您需要找到您的应用的根目录。假设您的 Vue 应用放在了 /var/www/my-app 目录下，我们可以按照以下步骤进行配置。

下载.png首先，在 Nginx 的配置文件 /etc/nginx/nginx.conf 中添加以下内容：

http {
  # ...省略其他内容...

  server {
    listen 80;
    server_name example.com;

    location / {
      root /var/www/my-app/;
      index index.html;
      try_files $uri $uri/ /index.html;
    }
  }
}

复制代码

下载.png在以上配置中：

  • listen 指令用于监听端口 80，即 HTTP 的默认端口。
  • server_name 指令用于指定服务器的主机名，不同主机名访问不同的网站（虚拟主机）。
  • location 块指定了某个 URL 的请求将由哪个应用程序处理。

下载.png在上述配置中，我们指定了 / 这个 location 块，也就是当 URL 为 http://example.com/ 时，将会请求 /var/www/my-app/index.html 文件。如果该文件不存在，会尝试向后降级，寻找与请求路径相符合的文件或目录。如果能找到，则以该文件或目录为响应内容返回给客户端，否则返回 /var/www/my-app/index.html。

下载.png这里使用了 try_files 指令来处理路径，它的格式为 $uri $uri/ /index.html。

  • $uri 表示请求的 URL 路径。
  • $uri/ 表示请求的 URL 路径加上“/”。
  • /index.html 表示默认的根页面。

下载.png这样，当我们刷新页面时，会向 Nginx 服务器请求对应的资源，由于存在对应的 /var/www/my-app/index.html 文件，因此可以成功返回响应内容，避免了白屏现象。

第三步：重启 Nginx

下载.png在完成 Nginx 配置后，需要重启 Nginx 的服务以使配置生效。您可以使用以下命令来重启 Nginx：

sudo systemctl restart nginx

复制代码

下载.png这样，当您刷新 Vue 路由页面时，就不会再出现白屏现象了。

avatar
文章
阅读
粉丝