本文详细介绍了在Vue.js项目中如何配置路由，包括页面标题设置和用户登录判断。同时，讲解了使用element-plus库实现分页组件的方法，包括按需引入组件的配置。此外，文章讨论了会话跟踪的实现，包括传统的Session方式和使用token的方式，并提到了前后端跨域时的配置。最后，探讨了项目调试技巧，包括在VSCode和浏览器中的调试方法。
本章概要
- 路由配置
- 分页组件
- 会话跟踪
- 项目调试
- 在 VSCode 中调试
- 在 浏览器中调试
- 其它调试方法
17.11 路由配置
下面给出本项目的路由配置，其中包含了页面标题的设置，以及对结算页面的路由要求用户已登录的判断。如下：
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home'
import store from '@/store'
const routes = [
{
path: '/',
redirect: {
name: 'home'
}
},
{
path: '/home',
name: 'home',
meta: {
title: '首页'
},
component: Home
},
{
path: '/newBooks',
name: 'newBooks',
meta: {
title: '新书上市'
},
component: () => import('../components/BooksNew.vue')
},
{
path: '/category/:id',
name: 'category',
meta: {
title: '图书分类'
},
component: () => import('../views/Books.vue')
},
{
path: '/search',
name: 'search',
meta: {
title: '搜索结果'
},
component: () => import('../views/Books.vue')
},
{
path: '/book/:id',
name: 'book',
meta: {
title: '图书'
},
component: () => import('../views/Book.vue')
},
{
path: '/cart',
name: 'cart',
meta: {
title: '购物车'
},
component: () => import('../views/ShoppingCart.vue')
},
{
path: '/register',
name: 'register',
meta: {
title: '注册'
},
component: () => import(/* webpackChunkName: "user" */'../components/UserRegister.vue')
},
{
path: '/login',
name: 'login',
meta: {
title: '登录'
},
component: () => import(/* webpackChunkName: "user" */'../components/UserLogin.vue')
},
{
path: '/check',
name: 'check',
meta: {
title: '结算',
requiresAuth: true
},
component: () => import('../views/Checkout.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
//设置页面的标题
router.afterEach((to) => {
document.title = to.meta.title;
})
router.beforeEach(to => {
// 判断该路由是否需要登录权限
if (to.matched.some(record => record.meta.requiresAuth)) {
// 路由需要验证，判断用户是否已经登录
if (store.state.user.user) {
return true;
}
else {
return {
path: '/login',
query: { redirect: to.fullPath }
};
}
}
else
return true;
})
export default router
17.12 分页组件
完善一下商品列表的显示，如果商品数量较多，就需要分页显示。分页功能可以使用 element-plus 组件库中的分页组件来实现。element-plus 是一套支持 Vue 3.0 的组件库，提供的组件涵盖了绝大部分页面 UI 的需求。关于该组件库的详细介绍可以参看以下网址：
在本项目中只是使用了它的分页组件 Pagination。
首先是安装 element-plus 的 npm 包。在 Visual Studio Code 的终端窗口执行以下命令：
npm install element-plus -S
编辑 main.js ，引入整个 element-plus 组件和所需的样式，由于 element-plus 组件内部默认使用英语，而本项目需要使用中文，因此还需要引入中文的语言包。如下：
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import axios from 'axios'
import VueAxios from 'vue-axios'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import locale from 'element-plus/locale/lang/zh-cn'
// 配置全局的 baseURL 默认值
axios.defaults.baseURL = "/api"
createApp(App).use(store).use(router).use(VueAxios, axios).use(ElementPlus,{locale}).mount('#app')
如果想按需引入，如本项目中只用到了分页组件，不想引入整个 element-plus 组件库，则需要借助 babel-plugin-component 插件。首先，在终端窗口中执行下面的命令安装 babel-plugin-component
npm install babel-plugin-component -D
然后编辑项目目录下的 babel.config.js 文件，添加以下内容：
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
[
"component",
{
"libraryName": "element-plus",
"styleLibraryName": "theme-chalk"
}
]
]
}
接下来，在 main.js 文件中就可以按需引入分页组件 EIPagination。如下：
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
// import ElementPlus from 'element-plus'
import { ElPagination } from 'element-plus'
import 'element-plus/theme-chalk/index.css'
// import locale from 'element-plus/locale/lang/zh-cn'
import lang from 'element-plus/locale/lang/zh-cn'
import locale from 'element-plus/locale'
// 配置全局的 baseURL 默认值
axios.defaults.baseURL = "/api"
// 使用中文
locale.use(lang)
createApp(App).use(store).use(router).use(VueAxios, axios).use(ElPagination,{locale}).mount('#app')
作为分页实现，至少需要 3 个属性控制分页的显示和跳转，即每页显示的条数、总条数和当前页数。有了每页显示的条数和总条数就可以计算出需要分多少页，有了当前页数就可以记录用户要跳转的分页。
温馨提示：以上main.js在实际上出现了依赖版本问题，可以参考以下引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import axios from 'axios'
import VueAxios from 'vue-axios'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 配置全局的 baseURL 默认值
axios.defaults.baseURL = "/api"
createApp(App).use(store).use(router).use(VueAxios, axios).use(ElementPlus).mount('#app')
编辑 views 目录下的 Books.vue ，添加 3 个数据属性。
views/Books.vue
data() {
return {
title: '',
books: [],
message: '',
loading: true,
total: 5,
pageNum: 1,
pageSize: 2
}
},
这 3 个数据属性分别代表总条数、当前页数、每页显示的条数。由于服务端数据较少，为了能够看到分页组件的效果，这里将每页显示的条数初始值设为 2.
接下来在 Books 组件中使用 EIPagination 组件实现分页功能。如下：
views/Books.vue
<template>
<div>
<Loading v-if="loading" />
<h3 v-else>{{ title }}</h3>
<BookList :list="books" v-if="books.length" />
<h1>{{ message }}</h1>
<el-pagination
:hide-on-single-page="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[2, 10, 20, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</template>
...
接下来就是编写当前页数改变和每页显示条数改变的事件响应函数代码，以及修正向服务端发起请求获取数据的接口，因为服务端对于分页数据的返回提供了不同的接口。修改代码如下：
至此，实现分页功能。
17.13 会话跟踪
传统 Web 项目的会话跟踪是采用服务端的 Session 实现的。当客户初次访问资源时，Web 服务器为该客户创建一个 Session 对象，并分配一个唯一的 Session ID ，将其作为 Cookie（或者作为 URL 的一部分，利用URL 重写机制）发送给浏览器，浏览器在内存中保存这个会话 Cookie。
当客户再次发送 HTTP 请求时，浏览器将 Cookie 随请求一起发送，服务端程序从请求对象中读取 Session ID ，然后根据 Session ID 找到对应的 Session 对象，从而得到客户的状态信息。
传统 Web 项目的前端和后端是在一起的，所以会话跟踪实现起来很简单。当采用前后端分离的方式开发时，前后端分别部署在不同的服务器上。由于是跨域访问，前端向后端发起的每次请求都是一个新的请求，在这种情况下，如果还想采用 Session 跟踪会话，就需要在前端和后端都做一些配置。
对于前端而言，配置很简单，只需要在 main.js 文件中添加以下代码即可：
axios.defaults.withCredentials = true
这会让前端的每次请求带上用于跟踪用户会话的 Cookie 报头。
服务端也比较简单，只需要在响应报头中带上 Access-Control-Allow-Orgin 和 Access-Control-Allow-Credentials 这两个报头。前者必须制定明确的访问源（即前端项目部署的服务器域名或 IP）不能使用星号（*）；后者设置为 true 即可。如下：
response.setHeader("Access-Control-Allow-Orgin","http://localhost:8080")
response.setHeader("Access-Control-Allow-Credentials",true)
服务端可以通过拦截器的方式来统一设置这两个响应报头。
目前还有一种流行的跟踪用户会话的方式就是使用一个自定义的 token，服务端根据某种算法生成唯一的 token，必要时可以采用公钥私钥的方式来加密 token，然后将这个token 放到响应报头中发送到前端，前端在每次请求时在请求报头中带上这个 token ，以便服务端可以获取该 token 进行权限验证以及管理用户的状态。
在前端可以利用 axios 的拦截器（参见 15.8 节）进行 token 的统一处理，包括结合 Vuex 进行 token 的状态管理。
17.14 项目调试
在项目开发过程中，不可避免会遇到一些 Bug，即使再有经验的开发人员也无法完全通过代码走读的方式来解决全部 Bug，这就需要对程序进行调试，设置断点跟踪代码的执行，最终找到问题所在并解决它。
前端程序的调试不如某些高级语言（如 C++、Java 等）的集成开发环境提供的调试那么容易，但利用一些扩展插件也能实现在编辑器环境和浏览器环境中进行调试。本届介绍如何在 VSCode 环境中和浏览器中调试。
17.14.1 在 VSCode 中调试
注意：17.14.1 小节不重要（有坑）
在 VSCode 开发环境左侧的活动栏中单击“扩展”图标按钮，如下：
在搜索框中输入 debugger，在出现的插件中选中 Debugger for Chrome 或 Debugger for Firefox，根据自己计算机上已安装的浏览器来选择对应的插件。
接下来，修改 Webpack 的配置以构建 source map，这是为了让调试器能够将压缩文件中的代码映射回原始文件中的位置，这可以确保即使在 Webpack 优化了应用中的资源后也可以调试应用程序。
编辑项目根目录下的 vue.config.js 文件，添加以下代码：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
configureWebpack:{
devtool:'source-map'
},
transpileDependencies: true,
devServer:{
proxy:{
// api 是后端数据接口的上下文路径
'/api':{
// 这里的地址是后端数据接口的路径
target : 'http://127.0.0.1',
// 允许跨域
changeOrigin:true,
}
}
}
})
单击左侧活动栏中的“运行”图标按钮，选择启动调试。
选择 Chrome 环境（如果刚才安装的是 Dbugger for Firefox，那么这一步就选择 Firefox），如下：
选中 Chrome 后，会生成一个 launch.json 文件。编辑这个文件，代码如下：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs:chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad":true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
}
]
}
Firefox 环境下的配置代码如下：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"request": "launch",
"name": "vuejs:firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad":true,
"pathMappings": [{"url":"webpack:///src/","path":"${webRoot}"}]
}
]
}
配置好调试环境后，就可以开始调试程序。打开一个组件，如 BookCommentList 组件，在 data 上添加一个端点，如下：
在终端窗口中运行项目，按 F5 开始调试，如下：
报警告，略了。。。
17.4.2 在浏览器中调试
此处有坑，快跑。。。
在浏览器中调试 Vue 程序是利用 2.3 节介绍的 vue-devtools 工具完成的。首先确保该扩展程序已经安装并启用，在浏览器窗口中按 F12 调出开发者工具窗口，选择Vue 选项，如下：
我这没有，略了。。。
17.4.3 其它调试方法
以上两种调试我都没用过，最常用的是以下这种
在开发者工具窗口中找到要调试的代码，左侧直接打断点，简单粗暴有木有！！！
注：Ctrl + P 可快速搜索代码文件。
扫一扫
4588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
