likes
comments
collection
share

全栈项目开发——NOTEBOOK(8): 通过路由传参实现多页面跳转这节课我们利用了路由传参实现了点击不同页面的对应跳

作者站长头像
站长
· 阅读数 23

前言

在上节课中我们使用Vant组件库进行了两个页面的开发——登入后的跳转页和个人详情页（菜单页）。并且利用父子通讯的事件订阅模式巧妙的实现了这两个页面的丝滑跳转。

这节课我们进一步开发笔记页面

已知我们的数据列表如下

const noteClassList = [
    { bgColor: "#f0aa84", title: "美食" },
    { bgColor: "#dcf189", title: "旅行" },
    { bgColor: "#e0c2f1", title: "恋爱" },
    { bgColor: "#c2ebf1", title: "学习" },
    { bgColor: "#949c9d", title: "吵架" },
];
全栈项目开发——NOTEBOOK(8): 通过路由传参实现多页面跳转这节课我们利用了路由传参实现了点击不同页面的对应跳

一 ，路由传参

我们接下来需要实现的功能是点击对应框时能够跳转到对应页面的url地址。我们通过路由传参实现。

路由传参允许用户在不重新加载页面的情况下，通过改变浏览器的URL来访问应用的不同部分

使用 @click="goNoteList(item.title) 绑定点击事件，该函数接收 item.title ， 引入useRouter进行页面跳转。

通过path跳转路径，通过query传递参数。参数将通过 ？ 拼接在目标路径的后面

import { useRouter } from "vue-router";
const router = useRouter();

const goNoteList = (title) => {
    router.push({ path: '/noteList', query: { title: title } })
};

实现功能后 点击对应框将跳转到对应的url地址页。如点击美食，恋爱则分别跳转到对应的url地址

http://localhost:5173/noteList?title=美食 
http://localhost:5173/noteList?title=恋爱

二， 配置路由

为路由配上对应的meta字段，可以灵活地存储与路由相关的额外信息，比如页面的图标、权限要求、备注说明等。我们可以利用meta为不同的页面打上备注。

  1. 例如我在/noteList 的路由下配置meta备注 "日记列表"
 {
            path: '/noteList',
            name: 'noteList',
            component: () => import('../views/NoteList.vue'),
            meta: {
                title: '日记列表'
            }
        }

2 .在前置全局守卫中将页面title改为我们设置的 meta.title

    document.title = to.meta.title

3 .打开这个页面时对应的页面 title 改变：

全栈项目开发——NOTEBOOK(8): 通过路由传参实现多页面跳转这节课我们利用了路由传参实现了点击不同页面的对应跳

这会使得我们的页面更加专业且优雅

三， 开发列表页面

以美食页面为例，，我们使用grid网格布局来排布页面

设计完页面后，我们将获取后端的数据，将后端的数据填入表中。

四， 获取数据

我们这次使用get来获取数据，post和get都能获取到数据，使用get还是post取决于后端使用什么方式来交流信息，后端用get前端就用get，后端用post前端就用post。无论使用什么HTTP请求方法，前后端的交流方式都需要保持一致，才能确保数据能够正确传输和处理。

|| 比较get和post的不同

使用get和post具体有什么不同？get是采用信息拼接的方式将信息放在url中传递，post则是放在HTTP消息的请求体中。针对他们的不同我们做一个总结

1. GET 方法

  1. 用途：主要用于请求服务器发送资源。它是最常用的HTTP方法，用于请求服务器发送指定的页面或数据。
  2. 数据传输：GET请求的数据会附加在URL之后，数据会包含在URL中，以?分隔URL和传输数据，参数之间以&相连。这种方式称为“查询字符串”（Query String）。由于URL的长度限制，GET请求不适合传输大量数据。
  3. 安全性：由于数据暴露在URL中，GET请求不适合传输敏感信息，如密码或个人信息，因为这类信息可能会被保存在浏览器历史记录、服务器日志或代理服务器中。
  4. 缓存：GET请求是可以被缓存的，这意味着相同的GET请求可能会从缓存中获取数据，而不是直接从服务器。
  5. 书签：GET请求的结果可以被书签收藏，因为请求是幂等的（即多次执行相同的请求不会对资源产生副作用）。

2 .POST 方法

  1. 用途：主要用于向服务器提交数据，如提交表单或上传文件。POST请求比GET请求更加复杂，可以携带更多的数据，并且数据不会附加在URL之后。
  2. 数据传输：POST请求的数据不会附加在URL之后，而是放在HTTP消息的请求体中。这使得POST请求可以传输大量数据，并且数据类型也更加灵活（如文本、二进制文件等）。
  3. 安全性：由于数据不会暴露在URL中，POST请求比GET请求更适合传输敏感信息。然而，这并不意味着POST请求本身提供了加密或安全性保证，仍需要通过HTTPS等安全协议来保护数据传输。
  4. 缓存：POST请求通常不会被缓存，因为每次请求都可能包含不同的数据。
  5. 书签：POST请求的结果通常不会被书签收藏，因为每次请求都可能对服务器上的资源产生副作用（如修改数据）。

3 .总结

  • 使用GET还是POST主要取决于你的具体需求。如果你只是请求数据而不改变服务器上的状态，或者数据量不大且不需要传输敏感信息，那么GET是一个不错的选择。
  • 如果你需要向服务器提交数据（如表单数据或文件），或者需要传输大量数据或敏感信息，那么POST是更合适的选择。
  • 无论使用GET还是POST，前后端的交流方式都需要保持一致，以确保数据能够正确传输和处理。

|| useRoute

使用useRoute拿到页面路径下传递的参数——就是我们之前通过路由传参增加的url后拼接的参数

五，后端note.js配置路由

响应前端传递过来的数据，别忘了在index.js中引入

六，线程池

在线程池中打造函数中查找数据

// 根据分类查找笔记
const findNoteListByType = (type) => {
    let _sql = `SELECT * FROM note WHERE note_type="${type}";`

    return allServices.Query(_sql)
}

将该方法抛出，在新定义的接口中使用他

七 ，该接口对get请求做出判断

  • 对接接口
  • 使用 jwt.verify() 校验 token
  • 使用 ctx.request.query 拿到传递的参数
  • 使用抛出的函数 findNoteListByType 传入参数查询对应数据
  • 传入 ctx.userId 精确用户账号，这里需要在jwt.verify()中再加入对于userId的判断
  • 对拿到的数据做出响应
// 定义接口
const router = require('koa-router')();
const { findNoteListByType, findNoteDetailById } = require('../controllers/index.js')
const jwt = require('../utils/jwt.js')

router.get('/findNoteListByType', jwt.verify(), async (ctx) => {
    //获取前端传递的 note_type, 去数据库中以改note_type字段读取数据，返回给前端
    const { note_type } = ctx.request.query

    try {
        const res = await findNoteListByType(note_type, ctx.userId)
        if (res.length) {
            ctx.body = {
                code: '8000',
                data: res,
                msg: '查询成功'
            }
        } else {
            ctx.body = {
                code: '8000',
                data: 'success',
                msg: '当前分类下没有数据'
            }
        }
    } catch (error) {
        ctx.body = {
            code: '8005',
            data: error, //不用打引号，因为error是object
            msg: '服务器异常'
        }
    }
})

module.exports = router

校验数据库返回的数据是否正确。

全栈项目开发——NOTEBOOK(8): 通过路由传参实现多页面跳转这节课我们利用了路由传参实现了点击不同页面的对应跳

全栈项目开发——NOTEBOOK(8): 通过路由传参实现多页面跳转这节课我们利用了路由传参实现了点击不同页面的对应跳

查询成功后成功返回对应数据

全栈项目开发——NOTEBOOK(8): 通过路由传参实现多页面跳转这节课我们利用了路由传参实现了点击不同页面的对应跳

八，展示数据

  • 通过观察数据库中的栏目名称使用循环请求数据
  • 通过 :src="item.head_img" 绑定照片资源
  • 准备空数组 noteList 将数据放入
  • 为 goNoteDetail(item.id) 绑定点击事件，当点击对应栏时跳转到详情页面
  • 别忘了为页面配置路由
<template>
    <div class="note-list">
        <ul>
            <li v-for="item in noteList" :key="item.id" @click="goNoteDetail(item.id)">
                <div class="img">
                    <img :src="item.head_img" alt="">
                </div>
                <div class="time">{{ item.m_time }}</div>
                <div class="title">{{ item.title }}</div>
            </li>
        </ul>
    </div>
</template>

<script setup>
// 获取当前页面对于的数据，一进入页面就发生接s口请求
// 向后端发送某分类下的页面数据
import axios from "@/api";
import { ref } from "vue"
// 获取当前页面的参数
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const noteList = ref([])

axios.get(`/findNoteListByType?note_type=${route.query.title}`)
    .then(res => {
        console.log(res.data);
        noteList.value = res.data
    })

const goNoteDetail = (id) => {
    router.push({ path: '/noteDetail', query: { id: id } })
}

</script>
  • 最后拿到了数据实现了对应的页面跳转功能

如下：

全栈项目开发——NOTEBOOK(8): 通过路由传参实现多页面跳转这节课我们利用了路由传参实现了点击不同页面的对应跳

小计

这节课我们利用了路由传参实现了点击不同页面的对应跳转，利用线程池查询数据库，通过观察数据库拿到后端返回的数据将其展示在页面上。

本章要点：路由传参 ，query ，ctx.request.query ， 动态路由渲染， 遍历展示数据

转载自:https://juejin.cn/post/7401482286503149568
评论
请登录