当前位置： 首页 > news >正文

【项目】基于Vue2+Router+Vant 前端面经项目

news 2025/7/10 18:00:07

环境配置

Vue脚手架的创建

  1. 在终端中打开输入
vue create 项目包名 -m npm

注意⚠️：项目名称不再允许包含大写字母。

  1. 选择第三项

image-20240808105439494

3.选择要安装的模块

image-20240808105618092

从上到下的功能模块：

  1. Babel - ES：降级处理
  2. Router-Vue：路由插件
  3. CSS预处理器
  4. ESLint代码格式检查工具
  1. 选择下载Vue2版本

image-20240808105630361

  1. 选择模式
  • 选择路由模式（输入n）
  • 选择Css预处理器（选择Less）
  • ESLint版本（选择Standard——标准版）

image-20240808105841368

  1. 选择配置

image-20240808105919169

从上到下依次是：

  1. Lint on save 代码保存的时候，检查代码格式
  2. 配置文件保存位置选择保存到单个文件中
    1. 如果选择package.json表示几种保存在package.json中
  3. 是否将所有选择保存为预设（输入n）
  1. 等待安装完成，出现如下字样即表示创建成功。

image-20240808110048267

  1. 运行项目：cd到指定文件夹，执行npm run serve启动项目。

安装ESLint插件

ESLint 是一个用于检测和规范 JavaScript 代码风格及语法错误的工具。它可以帮助开发者保持代码的一致性和可读性，提高代码质量。例如，它能检查是否遗漏了分号，变量名是否符合规范等。

作用：检查代码格式，保证每个成员的代码风格应该一致。

安装方式：直接在vscode扩展商店中搜索ESLint，点击下载即可。

image-20240808144213396

当通过 @vue/cli 脚手架工具安装项目后，默认已经将 eslint 相关的包安装并配置好了。

我们将使用vue 的 eslint 插件规定的默认规则进行代码检查。如果需要查看规则，则可以查看 https://eslint.nodejs.cn/docs/latest/rules/%E3%80%82

ESLint报错提示：

image-20240808110940688

配置ESLint

  1. 关于ESLint的配置，需要放到配置文件 .eslintrc.js 中。

  2. 打开 .eslintrc.js 文件，找到里面的 rules 节点，这个 rules节点，用于自定义 ESLint规则

  3. 配置的每条语句结束，必须加分号。

例如：在 rules节点中加入如下规则

"rules": {"semi": ["error", "always"]
}

注意⚠️：修改了配置文件，需要重启项目。

安装自动化格式插件

自动化格式插件有很多种，比如 ESlint、Vue插件，都带这种格式化功能。

这边的话就跟我的配置来安装包，保证了配置统一性。

安装步骤：

  1. 在扩展商店查找以下👇插件

image-20240808112017577

  1. 打开 vscode，按 Ctrl + , 快捷键，打开设置界面。
  2. 点击右上角的 打开设置（json）image-20240808112252922
  3. 将下面的代码复制进去（复制到最后一个大括号之前）
// 代码缩进 2 个空格
"editor.tabSize": 2,
// 保存（包括自动保存），自动格式化
"editor.formatOnSave": true,
// 按Ctrl + S保存时，自动修复
"editor.codeActionsOnSave": {"source.fixAll.eslint": true
},
// 编辑器窗口失去焦点时，自动保存代码【可选】
"files.autoSave": "onFocusChange",
// 配置vue默认的格式化程序【必须的配置】
"[vue]": {"editor.defaultFormatter": "numso.prettier-standard-vscode"
},
// 设置JS文件的默认格式化程序【必须的配置】
"[javascript]": {"editor.defaultFormatter": "numso.prettier-standard-vscode"
},
"[jsonc]": {"editor.defaultFormatter": "numso.prettier-standard-vscode"
},

image-20240808112418716

注意⚠️：如果出现 黄色的下划线，说明有重复的配置。去掉前面的（你自己的）。

使用方法：

右键–>找到使用…格式化文档–>选择Prettier-Standard

image-20240808112101589

Vant组件库

因为本次项目是一个移动端项目，所以移动端上使用的组件库目前比较不错的一个流行库就是Vant啦🥳。

官方网站：Vant 2 - 轻量、可靠的移动端组件库 (vant-ui.github.io)

安装步骤：

打开终端输入以下👇命令
npm i vant@latest-v2
安装如果有报错用👇
npm i vant@latest-v2 --legacy-peer-deps

检查是否安装完成：

image-20240808113706755

引入组件

  1. 按需引入：只引入项目中实际用到的组件，能减小项目体积。通常通过配置或特定的模块加载方式实现。
  2. 全局引入：将组件库整体加载到项目中，在任何地方都能直接使用。比如在入口文件中一次性引入。
  3. 手动导入：把组件库当作一个模块，在需要的模块中单独引入相关组件。

⚠️ 注意三种方式不能混用。

⚠️ 我会讲按需引入和全局引入这两种方式的引入步骤，但是本项目使用的是全局引入的方式来制作。所以按需引入方式教学大家看看就好🙏。

全局引入

步骤：直接在main.js中粘贴以下👇代码:

import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)

按需引入

步骤：

  1. 安装一个插件（插件配置后，就可以实现自动导入）

    npm i babel-plugin-import -D --legacy-peer-deps

  2. 在babel.config.js中配置

    module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
}

  3. 按需引入main.js

    import { Button, Icon } from 'vant'Vue.use(Button)
Vue.use(Icon)

  4. 在App.vue中测试

    <van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

再次强调⚠️

完整导入和按需导入Vant，二者只能用一个；

  • 如果你用完整导入，请将按需导入的配置都去掉，然后重启项目。

实现vw适配

使用Vant组件的适配方案就非常的简单😆。

官方说明：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage

步骤：

  1. 安装命令

    npm i postcss-px-to-viewport@1.1.1 -D
安装报错就用👇
npm i postcss-px-to-viewport@1.1.1 -D --legacy-peer-deps

  2. 在项目的根目录，新建一个配置文件pocstcss.config.js

    // postcss.config.js
module.exports = {plugins: {'postcss-px-to-viewport': {// 设计稿如果是2倍图，宽是750，则 750/2 = 375，下面就写375// 设计稿如果是3倍图，宽是 1080，则 1080/3 = 360，下面就写360viewportWidth: 375}}
}

路由配置

总体路由结构图：

image-20240808150928700

我们根据上面的结构图分析一下，这个项目呢——是由4个页面组成的。

一共有4个一级目录：App.vue、Login.vue、Register.vue、Detall.vue 和1个二级目录：Home.vue。所以我们先根据结构创建好项目目录先。

怎么在src文件夹下的views新建以下👇文件：

  • Home.vue：用来做主页

    <template><div id="app">主页</div>
</template><script>export default {}
</script><style lang="less" scoped></style>

  • Login.vue：用来做登录页

    <template><div id="app">登录页</div>
</template><script>export default {}
</script><style lang="less" scoped></style>

  • Register.vue：用来做注册页

    <template><div id="app">登录页</div>
</template><script>export default {}
</script><style lang="less" scoped></style>

  • Detall.vue：用来做详情页

    <template><div id="app">登录页</div>
</template><script>export default {}
</script><style lang="less" scoped></style>

创建完上面四个文件之后我们还有在views文件夹下再创建一个Layout包，继续创建我们的二级目录文件：

  • Article.vue：文章列表

    <template><div id="app">文章列表</div>
</template><script>export default {}
</script><style lang="less" scoped></style>

  • Collect.vue：收藏界面

    <template><div id="app">收藏界面</div>
</template><script>export default {}
</script><style lang="less" scoped></style>

  • Like.vue：喜欢界面

    <template><div id="app">喜欢界面</div>
</template><script>export default {}
</script><style lang="less" scoped></style>

  • User.vue：用户界面

    <template><div id="app">用户界面</div>
</template><script>export default {}
</script><style lang="less" scoped></style>

配置路由

前置知识：路由

路由模版：

const routes =	[{path:'/',	//url地址component: () => import('文件路径'),	//指定文件}
]

image-20240808154320984

二级路由模版：

const routes =	[{path:'/',	//url地址component: () => import('文件路径'),	//指定文件redirect: '/二级默认展示url地址',	// 重定向，指向二级路由默认展示的页面children: [{path:'/',	//url地址component: () => import('文件路径'),	//指定文件}]}
]

直接在router文件夹下的index.js文件下书写我们的路由代码。

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [// 主页{path: '/',component: () => import('@/views/Home.vue'),redirect: '/article', // 重定向，指向二级路由默认展示的页面children: [// 列表页{ path: 'article', component: () => import('@/views/Layout/Article') },// 藏页{ path: 'collect', component: () => import('@/views/Layout/Collect') },// 喜欢页{ path: 'like', component: () => import('@/views/Layout/Like') },// 用户页{ path: 'user', component: () => import('@/views/Layout/User') }]},// 登录页{ path: '/login', component: () => import('@/views/Login.vue') },// 详情页{ path: '/detail', component: () => import('@/views/Detail.vue') },// 注册页{ path: '/register', component: () => import('@/views/Register.vue') }
]const router = new VueRouter({routes
})export default router

之后在App.vue中和Home.vue中，分别加入 <router-view></router-view>。

<template><div class="layout-page"><router-view></router-view></div>
</template><script>
export default {name: 'layout-page'
}
</script><style lang="less" scoped>
</style>

最后我们进而可以通过url栏手动修改值来测试一下页面跳转。

image-20240808155525768

登录页面搭建

静态布局

效果展示：image-20240809152042999

登录页面的搭建主要用到Vant组件中的导航栏组件。

image-20240809140047929

所以我们只需要保留title属性即可：

image-20240809140830274

<!-- 登录login页面 -->
<template><div class="login-page"><van-nav-bar title="面经项目登录" /></div>
</template><script>
export default {name: 'login-page',methods: {}
}
</script><style lang="less" scoped></style>

image-20240809140929614

然后我们就要写一个表单来实现账号密码输入框，同样的在Vant组件中找到表单组件。

image-20240809141130268

我先来对一些代码字段解析一下让大家更好的理解：

<van-fieldv-model="username"name="username"label="账号"placeholder="请输入账号":rules="[{ required: true, message: '请填写用户名' }]"/>
  • v-model="username": 将输入字段的值绑定到 Vue 实例的 username 数据属性上。
  • name="username": 设置输入字段的 name 属性，通常用于表单提交时标识字段。
  • label="账号": 设置输入字段的标签文本为“账号”。
  • placeholder="请输入账号": 设置输入字段的占位符文本为“请输入账号”。
  • :rules="[{ required: true, message: '请填写用户名' }]": 设置输入字段的验证规则，这里要求输入字段必须填写，否则会显示错误消息“请填写用户名”。

然后就是修改提交按钮的样式，我这里也是先对代码进行解释：

<van-button round block type="info" native-type="submit">提交</van-button>
  • round: 使按钮具有圆角。
  • block: 使按钮宽度充满其父容器。
  • type="info": 设置按钮的类型为 info，通常表示按钮具有提示或信息性质。
  • native-type="submit": 将按钮的 type 属性设置为 submit，使其在表单中可以提交表单数据。

我们还需要修改一下圆角按钮的样式，首先将提交改为登录，然后去掉小圆角，将按钮颜色改为橙色。

如何修改颜色呢？Vant 的 <van-button> 组件支持 color 属性，你可以直接在组件上设置颜色。例如，如果你想将按钮颜色改为橙色。

<div style="margin: 16px"><van-button block type="info" native-type="submit" color="#FF5500">登录</van-button>

下面还有一个超链接用于跳转到注册页面，可以使用a标签或者是直接使用<router-link>标签。我这里就用link标签方便一点。

<router-link to="/register">还没有账号，去注册吧！</router-link>

测试一下是否能跳转：

PixPin_2024-08-09_14-41-27

然后再给link添加一个class写样式：

<style lang="less" scoped>
.link {float: right;font-size: 14px;color: #ff5500;margin-right: 10px;
}
</style>

最后就完成了我们想要的效果啦🥳！

image-20240809144757686

但是我们还可以把代码复制给Ai做一下界面美化。下面我就贴上我完成的代码：

<!-- 登录login页面 -->
<template><div class="login-page"><!-- 标题栏 --><van-nav-bar title="面经项目登录" /><!-- 表单 --><div class="font-div"><van-form @submit="onSubmit"><van-fieldv-model="username"name="username"label="账号"placeholder="请输入账号":rules="[{ required: true, message: '请填写用户名' }]"/><van-fieldv-model="password"type="password"name="password"label="密码"placeholder="请输入密码":rules="[{ required: true, message: '请填写密码' }]"/><div style="margin: 16px"><van-button block type="info" native-type="submit" color="#FF5500">登录</van-button></div></van-form><!-- 超链接-注册按钮 --><router-link class="link" to="/register">还没有账号，去注册吧！</router-link></div></div>
</template><script>
export default {name: 'login-page',data () {return {username: '',password: ''}},methods: {onSubmit (values) {console.log('submit', values)}}
}
</script><style lang="less" scoped>
.font-div {position: absolute;top: 26%;left: 50%;transform: translate(-50%, -50%);width: 300px;padding: 20px;border: 1px solid #ddd;border-radius: 8px;// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);// background-color: #fff;
}.van-nav-bar {// background-color: #ff5500;margin-top: 10px;/deep/ .van-nav-bar__title {color: #ff5500;font-weight: 700;font-size: 25px;}
}.van-button {border-radius: 4px;
}.link {display: block;text-align: right;font-size: 14px;color: #ff5500;margin-top: 10px;
}
</style>

表单验证

Vant组件也有告诉我们，通过 rules 定义表单校验规则

使用 Field 的 rules 属性可以定义校验规则，可选属性如下:

键名说明类型
required是否为必选字段，当值为空字符串、空数组、undefined、null 时，校验不通过boolean
message v2.5.3错误提示文案string | (value, rule) => string
validator v2.5.3通过函数进行校验(value, rule) => boolean | Promise
pattern v2.5.3通过正则表达式进行校验RegExp
trigger v2.5.2本项规则的触发时机，可选值为 onChange、onBlurstring
formatter v2.5.3格式化函数，将表单项的值转换后进行校验(value, rule) => any

我们这里主要用到required`message \pattern `。通过正则表达式校验可以让我们对输入的信息进行数字、字母、长度的要求。

v-model="password"type="password"name="password"label="密码"placeholder="请输入密码":rules="[{ required: true, message: '请输入密码' },{pattern: /^(?=.*[a-zA-Z]).{2,6}$/,message: '密码必须为2-6位且包含至少一个字母'}]"/>

在这个正则表达式中：

  • ^(?=.*[a-zA-Z]) 是一个正向先行断言，确保字符串中至少包含一个字母（不区分大小写）。
  • .{2,6}$ 确保整个字符串的长度在2到6个字符之间。

如果规则比较多，可以在data里面写一个变量，

<van-fieldv-model="username"name="username"label="账号"placeholder="请输入账号":rules="userRules"
/>export default {name: 'login-page',data () {return {username: '',password: '',userRules: [{ required: true, message: '请输入账号' },{ pattern: /^\d{2,6}$/, message: '账号必须为2-6位数字' }]}},
}

其中 pattern 键名对应的正则表达式 /^\d{2,6}$/ 用于验证输入是否全为数字且长度为2-6位。如果输入不符合这个正则表达式，将会显示 message 键名对应的错误信息。

注册页面布局

注册页面和登录页面大多相似，我们直接复制登录页面的代码到注册页面中，然后稍微做一些修改就好了。

  1. 修改标题image-20240809155218288
  2. 修改注册按钮image-20240809155249577
  3. 修改超链接，别忘了还有文本也要修改哦🤗image-20240809155317785
  4. 修改组件名称image-20240809155139029
  5. 修改主题颜色，然他和注册页面有所区分image-20240809155510835

整体效果：

image-20240809155616841

发送请求

首先我们要注册一个账号，所以就要对后台数据发送请求，使用axios来完成这个注册操作。

首先安装一个axios包

npm i axios
如果报错了就用以下👇安装
npm install axios --legacy-peer-deps

axios前置知识

补一下前置知识有关axios的内容！

import axios from 'axios'export default{name:'',date(){},method:{async onSubmit(values){//定义一个变量接受结果const {data:res} = await axios({method:'',url:'',data:value})console.log(res)}}
}

因为黑马那边的数据接口关闭了，所以我们没办法调用他们接口里面的数据。既然别人不给我们，那么我们就自己造！因为大家都是前端朋友，使用json-server来搭建接口会更加友好一点，不会涉及后端知识，也不用mysql数据库。

搭建数据大家可以看我这一篇文章：

然后我们这里的话也是用的是json-server，我这里给大家放上json数据供大家搭建

{"users": [{"id": 1,"name": "李雷","UID": "01a1"},{"id": 2,"name": "韩梅梅","UID": "02b2"},{"id": 3,"name": "张伟","UID": "03c3"},{"id": 4,"name": "王芳","UID": "04d4"},{"id": 5,"name": "赵敏","UID": "05e5"},{"id": 6,"name": "马云","UID": "06f6"},{"id": 7,"name": "马东","UID": "07a7"}],"register": [{"id": 1,"username": "01","password": "a1"},{"id": 2,"username": "02","password": "a2"},{"id": 3,"username": "03","password": "a3"},{"id": 4,"username": "04","password": "a4"},{"id": 5,"username": "05","password": "a5"},{"id": 6,"username": "06","password": "a6"},{"id": 7,"username": "07","password": "a7"}]
}

封装axios

为了让整体项目更加的规整，我们需要将axios单独封装到一个文件当中，方便后面管理。

我们在src目录下新建一个utils文件夹，里面再新建一个文件一般叫做request.js。

// 封装axios请求
// 1.导入axios
import axios from 'axios'
// 2.配置
const requerst = axios.create({// 配置请求根路径baseURL: 'http://localhost:5000'// 超时时间// timeout:5000
})
// request配置拦截器
// 3.导出
export default requerst

导入request.js文件

import request from '@/utils/request'

配置axios

async onSubmit (values) {const { data: res } = await request({method: 'POST',url: '/register',data: values})console.log(res)

抽离注册的API方法

在src目录下新建一个Api文件夹，里面再新建一个文件一般叫做user.js。用来存放与用户相关的请求。

// 和用户相关的请求
import request from '@/utils/request'export function registerAPI (data) {return request({method: 'POST',url: '',data: data})
}

在注册组件中导入api方法

// <!-- 导入封装的axios -->
// import request from '@/utils/request'
// 导入API方法
import { registerAPI } from '@/Api/user'

记得把上次导入axios语句注释掉⚠️

修改调用方法

const { data: res } = await registerAPI()
// 之前的都注释掉了// request({//   method: 'POST',//   url: 'register',//   data: values// })

image-20240810201557459

我们可以发现调用的registerAPI依旧是原来的request。

最后再给registerAPI（）方法传入values参数：

const { data: res } = await registerAPI(values)

还有user.js里面的url写上我们的路径：

// 和用户相关的请求
import request from '@/utils/request'export function registerAPI (data) {return request({method: 'POST',url: 'register',	//user.js里面的url写上我们的路径data: data})
}

之所以要这样写，就是为了我们这个方法能够复用起来，以后要使用这个直接调用这个方法就可以了。

注册、登录页面跳转

下面我们就要写一个注册跳转功能，让我们注册完之后跳转到登录界面 。使用axios的try和catch方法来实现。

async onSubmit (values) {try {const { data: res } = await registerAPI(values)console.log(res) // 其实这个res这个变量没有用到过，可以删掉也可以的this.$toast('注册成功')this.username = this.password = '' // 重置表单this.$router.push('/login')	// 跳转到登录页面} catch (err) {}}

同样的我们也在登录页面设置一些，来实现登录成功跳转到首页当中。这一次我们只需要在login.vue文件中进行设置就可以了，具体代码和注册跳转是同样滴。

methods: {// 点击登录的时候执行async onSubmit (values) {// values={username:'',password:''}try {await registerAPI(values)	//这里我就把没有用到的data删掉了this.$toast('登录成功')this.username = this.password = ''this.$router.push('/article')	//这里url要变成主页的地址} catch (err) {}console.log('submit', values)}}

⚠️前面别忘记导入封装好的registerAPI方法。

主页搭建

面经列表数据

封装面经方法

在Api包中新建一个article.js。

// 存放和面经内容相关的请求
import request from '@/utils/request'export function articleAPI (params) {return request({url: '',params: params})
}

这里因为params先待定。

然后我们在article.vue组件中的脚本区域获取数据。

import { articleAPI } from '@/Api/article'
export default {name: 'article-page',data () {return {curent: 1, // 页码、获取第一页的数据sorter: 'weight_desc'}},methods: {async article () {const { data: res } = await articleAPI({current: this.current,sorter: this.sorter})console.log(res)}},created () {this.article() // 创建生命周期，使其一开始就加载页面}
}

{"code": 10000,"message": "请求成功","data": {"current": 1,"pageTotal": 10,"pageSize": 20,"total": 1000,"rows": [{"id": "40821","stem": "广东紫云平台数据服务有限公司前端面经，未通过","content": "<p><b>面试公司：</b>广东紫云平台数据服务有限公司<br></p><p><b>面试岗位"createdAt": "2022-01-20 00-00-00","creator": "中二苏北陌","avatar": "http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png","likeCount": 1,"views": 32}]}
}
axios前置知识——get请求

  1. 省略method属性（默认GET）:

    javascriptexport function articleAPI(data) {return request({url: '', // 这里应填写实际的API URLparams: data // 使用params来传递URL查询参数});
}

  2. 明确指定method为'GET':

    javascriptexport function articleAPI(data) {return request({method: 'GET',url: '', // 同样需要填写实际的API URLparams: data});
}

在这两种方式中，params属性用于传递URL查询参数，这是GET请求中常见的做法。例如，如果你需要根据用户ID获取文章详情，你可以这样调用articleAPI函数：

javascript复制
articleAPI({ userId: 123 });

面经页面搭建

页面搭建就是用Vant组件库里面的Cell单元格，通过循环遍历的方式，来渲染出列表。

image-20240810233132353

<van-cell title="单元格" value="内容" />

但是单元格现实的内容太少了，我们还需要用到插槽来搭建更多的内容。

<van-cell value="内容" is-link><!-- 使用 title 插槽来自定义标题 --><template #title><span class="custom-title">单元格</span><van-tag type="danger">标签</van-tag></template>
</van-cell><van-cell title="单元格" icon="shop-o"><!-- 使用 right-icon 插槽来自定义右侧图标 --><template #right-icon><van-icon name="search" class="search-icon" /></template>
</van-cell><style>.custom-title {margin-right: 4px;vertical-align: middle;}.search-icon {font-size: 16px;line-height: inherit;}
</style>
给插槽传值

在Vue 2中，给插槽（slot）传值通常使用slot-scope属性。slot-scope属性允许你将数据传递给具名插槽或作用域插槽。

全写形式：<template v-slot:title>
简写形式：<template #title>

静态结构我去直接提供给大家啦，大家可以试一试调一调。

<template><div class="article-page"><nav class="my-nav van-hairline--bottom"><a href="javascript:;">推荐</a><a href="javascript:;">最新</a><div class="logo"><img src="@/assets/logo.png" alt=""></div></nav><van-cell class="article-item" ><template #title><div class="head"><img src="@/assets/logo.png" alt="" /><div class="con"><p class="title van-ellipsis">宇宙头条校招前端面经</p><p class="other">不风流怎样倜傥 | 2022-01-20 00-00-00</p></div></div></template><template #label><div class="body van-multi-ellipsis--l2">笔者读大三, 前端小白一枚, 正在准备春招, 人生第一次面试, 投了头条前端, 总共经历了四轮技术面试和一轮hr面, 不多说, 直接上题&nbsp;一面</div><div class="foot">点赞 46 | 浏览 332</div></template></van-cell></div>
</template>

样式：

<style lang="less" scoped>
.article-page {margin-bottom: 50px;margin-top: 44px;.my-nav {height: 44px;position: fixed;left: 0;top: 0;width: 100%;z-index: 999;background: #fff;display: flex;align-items: center;> a {color: #999;font-size: 14px;line-height: 44px;margin-left: 20px;position: relative;transition: all 0.3s;&::after {content: '';position: absolute;left: 50%;transform: translateX(-50%);bottom: 0;width: 0;height: 2px;background: #222;transition: all 0.3s;}&.active {color: #222;&::after {width: 14px;}}}.logo {flex: 1;display: flex;justify-content: flex-end;> img {width: 64px;height: 28px;display: block;margin-right: 10px;}}}
}
.article-item {.head {display: flex;img {width: 40px;height: 40px;border-radius: 50%;overflow: hidden;}.con {flex: 1;overflow: hidden;padding-left: 10px;p {margin: 0;line-height: 1.5;&.title {width: 280px;}&.other {font-size: 10px;color: #999;}}}}.body {font-size: 14px;color: #666;line-height: 1.6;margin-top: 10px;}.foot {font-size: 12px;color: #999;margin-top: 10px;}
}
</style>

将单个单元格封装成组件

因为不止在主页中会用到这个单元格列表，其二级目录下的收藏页，或者喜欢页也都会有这个列表的展示，所以我们不妨直接将他封装成一个组件，后面需要用到的时候直接调用即可ヾ(◍°∇°◍)ﾉﾞ。

在src下面新建一个components文件夹用来存放组件，然后新建一个.vue文件，就叫做Articleitem.vue吧。

然后把上面写的单元格列表和样式全部丢进去(≧∇≦)ﾉ。

<!-- 封装单元格组件 -->
<template><div><van-cell class="article-item"><template #title><div class="head"><img src="@/assets/logo.png" alt="" /><div class="con"><p class="title van-ellipsis">宇宙头条校招前端面经</p><p class="other">不风流怎样倜傥 | 2022-01-20 00-00-00</p></div></div></template><template #label><div class="body van-multi-ellipsis--l2">笔者读大三, 前端小白一枚, 正在准备春招, 人生第一次面试, 投了头条前端,总共经历了四轮技术面试和一轮hr面, 不多说, 直接上题&nbsp;一面</div><div class="foot">点赞 46 | 浏览 332</div></template></van-cell></div>
</template><script>
export default {}
</script><style lang="less" scoped>
.article-item {.head {display: flex;img {width: 40px;height: 40px;border-radius: 50%;overflow: hidden;}.con {flex: 1;overflow: hidden;padding-left: 10px;p {margin: 0;line-height: 1.5;&.title {width: 280px;}&.other {font-size: 10px;color: #999;}}}}.body {font-size: 14px;color: #666;line-height: 1.6;margin-top: 10px;}.foot {font-size: 12px;color: #999;margin-top: 10px;}
}
</style>

注册全局组件

在main.js中导入：

import ArticleItem from '@/components/ArticleItem.vue'

注册：

Vue.component('ArticleItem', ArticleItem)

回到Article.vue文件使用组件

<ArticleItem></ArticleItem>

[eslint]Component name "Articleitem" should always be multi-word vue/multi-word-component-names

循环遍历列表数据

在data中创建list用来存储面经列表项目

data () {return {curent: 1, // 页码、获取第一页的数据sorter: 'weight_desc'list:[] //存储要展示的面经列表项目}},

v-for循环遍历

 <ArticleItem v-for="item in list" :key="item.id" :item="item"	//父传子></ArticleItem>

子组件接受传值

  props: {item: {type: Object,//默认值如果是数组或对象，则而要写成函数，函数中返回数组或对象default: () =>({})}}

使用差值表达式渲染数据

image-20240811010056292

推荐和最新栏目

类名切换

接口文档中是规定了排序字段通过这个来区分最新还是推荐。

image-20240811172323860

sorter属性通过发请求数据到之前定义好的onLoad方法中：外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

用到的是切换类名，通过绑定类名的值，在模版字符串里面进行判断接口中的数据是哪一种，吐过是推荐就传weight，如果是最新页面就不要传值。

然后还有添加一个点击事件，作用是为了通过点击事件实现两个a标签切换。

image-20240811172229122

点击方法：

image-20240811172213425

数据切换

类名变换实现了，那么我们的样式就会改变。image-20240811172541065

继续调用上面的Onload方法，来获取到数据。

image-20240811173046718

最不好理解的问题，如果在推荐页面滚到比较低的地方，然后切换到最新页面，这个时候滚动条依旧还在先前推荐页面滚动的位置，而不是重新再最顶部。为了避免重复发送请求，就要加上这句代码：

this.loading=true//避免自动发送请求

image-20240811173225587

实现详情页

数据获取

我们希望在列表中点击标题的时候，能够进入到详细页面中观看内容。

localhost:8080/#/detail

这个时候就要用到路由传参

前置知识——路由传参

传参方式

地址栏

  • 查询参数：/xx/xx?id=2
    • path: /xx/xx
    • 组件中获取参数值：$route.query.id

动态路由

  • 动态路由：/xx/xx/2
    • path: /xx/xx/:id
    • 组件中获取参数值：$route.params.id

  1. 设置传参方式，在封装好的articleitem.vue组件中添加一个点击事件

    @click="$router.push(/detail?id=${item.id})

  2. 路由规则不需要改动

  3. 组件中获取参数值image-20240811175243599

内容渲染

在article.js文件中封装axios组件

image-20240811234029430

导入封装好的axios请求

image-20240811234254021

组件中处理请求数据

收藏点赞功能

在文章中，我们会有两个小按钮来实现收藏和点赞两个功能。

image-20240811234650976

主要是通过的在接口里面的这两个数据：

image-20240811234755315

在组件中使用：

  1. 绑定数据image-20240811234847569

  2. 添加点击事件image-20240811234918980

  3. 编写方法image-20240811235050275

  4. 处理细节image-20240811235125240
    当我们点赞的时候，这里也要加上“1”

    • image-20240811235205343

  5. 提示功能就用咱们得轻提示就好啦。

    this.$toast.success('点赞成功')

  6. 修改服务器数据，因为我们做的都是页面上的数据，还没有涉及到服务器请求。一刷新就回到原来的数据了。

实现主题定制

整体网站风格，其实都是橙色的，可以通过变量覆盖的方式，制定主题色

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/theme

注意 ⚠️下面的操作会涉及到修改配置文件，所以修改完配置文件之后都要重启一下项目。

引入样式源文件

main.js 引入less：

import Vant from 'vant'
import 'vant/lib/index.css'
import 'vant/lib/index.less'
Vue.use(Vant)

修改样式变量

vue.config.js 覆盖变量，直接全部复制我们的覆盖掉原来代码就可以了。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,css: {loaderOptions: {less: {// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。lessOptions: {modifyVars: {// 直接覆盖变量blue: '#ff5500',// 'text-color': '#111',// 'border-color': '#eee'// 或者可以通过 less 文件覆盖（文件路径为绝对路径）// hack: 'true; @import "your-less-file-path.less";'}}}}}
})

修改配置文件后，需要重启服务。

实现收藏和喜欢页面

收藏和喜欢的页面结构都是一样的，就像登录和注册一样。所以我们只需要写一个页面，后面再稍微做一下修改就完成了这两个页面。

写一个标题栏：

1.收藏页标题去登录页复制

<template><div class="collect-page"><van-nav-bar fixed title="我的收藏" /><van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"><article-item v-for="(item, i) in list" :key="i" :item="item" /></van-list></div>
</template>

封装API请求方法：

export const collectAndLikeListAPI = (params) => {return request.get('/h5/interview/opt/list', {params: params})
}

script内容：

去Article.vue复制<van-list></van-list>，然后去Article.vue复制data和methods
，去掉sorter变量：去掉changeSorter方法
，最后在api/articlejs中，新封装一个获取收藏列表的方法

<script>
import { collectAndLikeListAPI } from '@/api/article'
export default {name: 'collect-page',data () {return {list: [],loading: false,finished: false,page: 1}},methods: {async onLoad () {// 异步更新数据const { data: res } = await collectAndLikeListAPI({page: this.page,optType: 2})this.list.push(...res.data.rows)this.loading = falseif (this.page === res.data.pageTotal || !res.data.rows.length) {this.finished = true} else {this.page++}}}
}

然后我们在首页收藏一些页面，就有最终的效果啦！image-20240812001541699

喜欢页面也是一样的，直接复制上面的代码，修改请求参数optType: 1即可。

前置知识——vuex的使用

Vuex是vue项目中实现大范围数据共享的技术方案。

作用：能够方便、高效的实现组件之间的数据共享。

  1. 安装vuex

    npm i vuex@3.6.2

  2. 配置vuex

    1. 封装一个store模块，里面新建一个index.js
    2. 在man.js导入store

基本使用：

state用于存储数据。

state:{name:'tom',age:20
}

组件中直接使用数据，组件中可通过$store.state.属性名

getters是vuex中的计算属性，和组件中的计算属性意义一样，但是不支持set修改。

getters:{abc(state){return s
state.age * state.age}
}

为了方便取state中的数据：插件作者会给每个计算属性方法，传递一个state参数。

使用和state用法一致$store.getters.属性名

导航守卫

前置知识——导航守卫

加入导航守卫，目的是如果在没有登录的情况下，是不允许访问到其他的页面。

  • to.path — 要访问的地址
  • from.path — 你从哪里来的
  • next() — 放行
  • next(‘/url’) — 不放行，并且跳转到url中。

在router.index.js路由文件中使用以下👇代码：

router.beforeEach((to,from,next）=>{if （to.path !=='/login'&& store.state.user.token === ''){next('/login')return}next()
})

打包项目

在项目终端中运行npm run build

打包的时候可能会有一点点久，大家稍等一会。

当再次出现终端路径，就表示打包完成了。

打包完毕之后就会生成一个dist文件夹，文件夹里面的内容如下：

image-20240812235835279

然后我们发现点击index.html，项目是展示不出来的。因为我们的一些数据都在接口服务器上，需要在服务器上打来才行。如果要本地打开也不是没有办法，我们在vue.config.js文件中添加下面一句话：

//表示打包的结果，允许以文件的形式打开
publicPath:'./'

我们还会发现在生成的文件当中会出现非常的.map文件，这个作用就是映射原始代码对应打包后的代码位置，一般可以不要的。在vue.config.js文件中添加下面一句话：

//去掉mao文件
productionSourceMap:false

然后还可以添加一个方法——生成打包报告，来看看是那些文件占用的体积比较大。

image-20240813000649386

对于一些外部组件库，可以使用CDN（引入网络中的文件）的方式引入组件。

image-20240813001857374

然后再重新npm run build打包文件。

相关文章：

【项目】基于Vue2+Router+Vant 前端面经项目

环境配置 Vue脚手架的创建 在终端中打开输入 vue create 项目包名 -m npm注意⚠️&#xff1a;项目名称不再允许包含大写字母。 选择第三项 3.选择要安装的模块 从上到下的功能模块&#xff1a; Babel - ES&#xff1a;降级处理Router-Vue&#xff1a;路由插件CSS预处理器E…...

编程日记 2024/8/13 18:55:32

【论文阅读】YOLOv10: Real-Time End-to-End Object Detection

题目&#xff1a;YOLOv10: Real-Time End-to-End Object Detection 作者&#xff1a;Ao Wang Hui Chen∗ Lihao Liu Kai Chen Zijia Lin Jungong Han Guiguang Ding∗ 清华大学的 motivation: 作者觉得YOLO系列的NMS和某些结构非常的耗时&#xff0c;提出NMS-free和一些列高效…...

编程日记 2024/8/13 18:54:31

计算资源消耗

计算资源消耗 计算资源的消耗分成&#xff1a; 模型参数本身的存储。模型参数的梯度以及梯度momentum的存储。token的传播过程 例如以llama3-7b为例&#xff1a; 模型参数存储&#xff1a; 模型参数量 * fp32 例如llama3-70b为例&#xff0c;7 * 10^9 * 4 模型参数的梯度以…...

编程日记 2024/8/13 18:53:25

企业微信推送消息的Java实现教程

在这篇教程中&#xff0c;我们将介绍如何使用Java实现企业微信的消息推送功能&#xff0c;特别是在完成任务后&#xff0c;将结果信息通过企业微信推送给指定的用户。我们将基于您提供的代码进行说明。 1. 环境准备 1.1 依赖库 在开始编写代码之前&#xff0c;确保您的项目中…...

编程日记 2024/8/13 18:50:20

强化学习之Actor-Critic算法（基于值函数和策略的结合）——以CartPole环境为例

0.简介 DQN算法作为基于值函数的方法代表&#xff0c;基于值函数的方法只学习一个价值函数。REINFORCE算法作为基于策略的方法代表&#xff0c;基于策略的方法只学习一个策略函数。Actor-Critic算法则结合了两种学习方法&#xff0c;其本质是基于策略的方法&#xff0c;因为其目…...

编程日记 2024/8/13 18:49:18

Linux学习记录（五）-------三类读写函数

文章目录 三种读写函数1.行缓存2.无缓存3.全缓存4.fgets和fputs5.gets和puts 三种读写函数 1.行缓存 遇到新行&#xff08;\n&#xff09;,或者写满缓存时&#xff0c;即调用系统函数 读&#xff1a;fgets,gets,printf,fprintf,sprintf写&#xff1a;fputs,puts,scanf 2.无缓…...

编程日记 2024/8/13 18:47:16

2024年8月13日（lvs NAT脚本 RS脚本 ds脚本）

lvs-nat模式的优点配置简单,缺点是请求和响应都必须经过ds,容易称为性能瓶颈 希望有这样的模式,请求的时候使用input链进行负载均衡,响应的时候就不要经过ds,直接由rs响应给客户端 在nat模式的时候,请求vip,接收vip的响应 构想 请求vip,接受rip响应,这是不允许lvs-dr模式 NAT脚…...

编程日记 2024/8/13 18:45:13

css实现水滴效果图

效果图&#xff1a; <template><div style"width: 100%;height:500px;padding:20px;"><div class"water"></div></div> </template> <script> export default {data() {return {};},watch: {},created() {},me…...

编程日记 2024/8/13 18:44:12

接口测试面试题目，你都会了吗？

面试题 什么是接口测试&#xff1f; 接口自动化测试的流程是什么&#xff1f; GET请求和POST请求区别是什么&#xff1f; 接口测试的常用工具有哪些&#xff1f; HTTP接口的请求参数类型有哪些&#xff1f; 如何从上一个接口获取相关的响应数据传递到下一个接口&#xff1…...

编程日记 2024/8/13 18:43:11

jmeter-beanshell学习16-自定义函数

之前写了一个从文件获取指定数据&#xff0c;用的时候发现不太好用&#xff0c;写了一大段&#xff0c;只能取出一个数&#xff0c;再想取另一个数&#xff0c;再粘一大段。太不好看了&#xff0c;就想到了函数。查了一下确实可以写。 public int test(a,b){return ab; } ctes…...

编程日记 2024/8/13 18:42:09

LogicFlow工作流在React和Vue3中的使用

LogicFlow 是一款流程图编辑框架&#xff0c;提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制&#xff0c;方便我们快速在业务系统内满足类流程图的需求。 核心能力 可视化模型&#xff1a;通过 LogicFlow 提供的直观可视化界面&#xff0c…...

编程日记 2024/8/13 18:39:05

Python循环语句:不到长城心不死

Python中的循环语句是编程中非常重要的结构&#xff0c;它们允许你重复执行一段代码多次&#xff0c;直到满足某个条件为止。Python提供了两种主要的循环类型&#xff1a;for循环和while循环。 文章目录 1. for 循环2. while 循环循环控制语句range() 函数结合循环语句和 rang…...

编程日记 2024/8/13 18:36:02

Unity教程（九）角色攻击的改进

Unity开发2D类银河恶魔城游戏学习笔记 Unity教程&#xff08;零&#xff09;Unity和VS的使用相关内容 Unity教程&#xff08;一&#xff09;开始学习状态机 Unity教程&#xff08;二&#xff09;角色移动的实现 Unity教程&#xff08;三&#xff09;角色跳跃的实现 Unity教程&…...

编程日记 2024/8/13 18:35:01

宠物空气净化器真的能除毛吗？有哪些选购技巧和品牌推荐修改版

夏日炎炎&#xff0c;有猫超甜。作为一名资深铲屎官&#xff0c;家里养有猫让我倍感幸福&#xff0c;夏天里有空调、有西瓜、有猫&#xff0c;这几个搭配在一起真的是超级爽。但在这么高温的夏天&#xff0c;家里养有宠物还是有不少烦恼的。比如家里的浮毛一直飘&#xff0c;似…...

编程日记 2024/8/13 18:30:57

Qt自定义注释

前言 是谁在Qt中编写代码&#xff0c;函数注释&#xff0c;类注释时&#xff0c;注释符号一个一个的敲&#xff1f; comment注释brief简洁的 Detailed详细的 第一步&#xff1a; 打开Qt 工具->选项->文本编辑器->片段 第二步&#xff1a; 点击添加 然后点击OK…...

编程日记 2024/8/13 18:28:54

【模电笔记】——信号的运算和处理电路（含电压比较器）

tips&#xff1a;本章节的笔记已经打包到word文档里啦&#xff0c;建议大家下载文章顶部资源&#xff08;有时看不到是在审核中&#xff0c;等等就能下载了。手机端下载后里面的插图可能会乱&#xff0c;建议电脑下载&#xff0c;兼容性更好且易于观看&#xff09;&#xff0c;…...

编程日记 2024/8/13 18:27:53

Java之 equals（）与==

目录 运算符用途&#xff1a;用于比较两个引用是否指向同一个对象。比较内容&#xff1a;比较的是内存地址&#xff08;引用&#xff09;。适用范围&#xff1a;适用于基本数据类型和对象引用 equals() 方法用途&#xff1a;用于比较两个对象的内容是否相同。比较内容&#xf…...

编程日记 2024/8/13 18:24:49

Ubuntu20.04 运行深蓝路径规划hw1

前言 环境&#xff1a; ubuntu 20.04 &#xff1b; ROS版本&#xff1a; noetic&#xff1b; 问题 1、出现PCL报错&#xff1a;#error PCL requires C14 or above catkin_make 编译时&#xff0c;出现如下错误 解决&#xff1a; 在grid_path_searcher文件夹下面的CMakeLis…...

编程日记 2024/8/13 18:22:46

企业如何组建安全稳定的跨国通信网络

当企业在海外设有分公司时&#xff0c;如何建立一个安全且稳定的跨国通信网络是一个关键问题。为了确保跨国通信的安全和稳定性&#xff0c;可以考虑以下几种方案。 首先&#xff0c;可以在分公司之间搭建虚拟专用网络。虚拟专用网络通过对传输数据进行加密&#xff0c;保护通信…...

编程日记 2024/8/13 18:21:44

WordPress原创插件：Download-block-plugin下载按钮图标美化

WordPress原创插件&#xff1a;Download-block-plugin下载按钮图标美化 https://download.csdn.net/download/huayula/89632743...

编程日记 2024/8/13 18:20:42

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/7/8 12:04:49

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/7/8 12:16:48

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/7/7 5:55:02

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/7/10 5:35:00

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/7/7 6:04:26

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/7/10 5:16:02

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/7/9 1:22:39

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/7/9 6:16:08

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2025/7/4 20:41:08

深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

编程新知 2025/7/7 0:35:55