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

环境配置

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打包文件。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/402776.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

仿Muduo库实现高并发服务器——Buffer模块

仿Muduo库实现高并发服务器——Buffer模块

Buffer模块建议描述图。 关于Buffer模块主要就是信息的读取写入。 这个模块在Connect模块中使用&#xff0c;作为输入输出缓冲区进行使用。 以下是这个模块在本项目中的作用。 写入&#xff1a; 涉及到是否有足够大小的存储空间。 //确保可写空间足够&#xff08;整体空闲空间…
阅读更多...
FASTSPEECH 2论文阅读

FASTSPEECH 2论文阅读

FASTSPEECH 2: FAST AND HIGH-QUALITY END-TOEND TEXT TO SPEECH 现状 非自回归模型可以在质量相当的情况下显著快于先前的自回归模型合成模型。但FastSpeech模型训练依赖与自回归教师模型进行时长预测&#xff08;提供更多的信息作为输入&#xff09;和知识蒸馏&#xff08;…
阅读更多...
SEREN赛恩电源RX01/LX01系列射频手侧

SEREN赛恩电源RX01/LX01系列射频手侧

SEREN赛恩电源RX01/LX01系列射频手侧
阅读更多...
C:数组传参的本质

C:数组传参的本质

1、一维数组传参的本质 数组传参是指在函数调用时将数组作为参数传递给函数。 int main() {int arr[10] { 1,2,3,4,5,6,7,8,9,10 };test(arr);return 0;}数组传参只需要写数组名就可以了。注意&#xff1a;数组名是arr&#xff0c;而不是arr[10] 数组传参形参该怎么写呢&am…
阅读更多...
Golang Map 深度剖析：原理、实践与面试要点

Golang Map 深度剖析：原理、实践与面试要点

嘿，小伙伴们！我是 k 哥。今天，咱们来聊聊 Map 。 在 Go 语言这个神奇的世界里，Map 这个有点神秘的数据结构一直都是开发者们特别关注的。 你是不是在用 Map 的时候，对它里面咋工作的感到好奇？是不是碰到复杂操作的时候，特别想弄明白它背后的原理？别着急，今天这篇文章…
阅读更多...
【计算机网络】应用层自定义协议与序列化

【计算机网络】应用层自定义协议与序列化

记得在上一节我们说过TCP中的读取时需要改进&#xff0c;这节就可以解决读取问题了。 目录 应用层再谈 "协议"网络版计算机方案一方案二 序列化 和 反序列化 重新理解 read、write、recv、send 和 tcp 为什么支持全双工 应用层 再谈 “协议” 我们在UDP与TCP中写的…
阅读更多...
支持I2C接口、抗干扰性强、14通道触摸按键的电容式触摸芯片-GTX314L

支持I2C接口、抗干扰性强、14通道触摸按键的电容式触摸芯片-GTX314L

电容式触摸芯片 - GTX314L是具有多通道触发传感器的14位触摸传感器系列&#xff0c;它是通过持续模式提供中断功能和唤醒功能&#xff0c;广泛适用于各种控制面板应用&#xff0c;可直接兼容原机械式轻触按键的处理信号。 GTX314L芯片内部采用特殊的集成电路&#xff0c;具有高…
阅读更多...
基于YOLOv8-pose的手部关键点检测（3）- 实现实时手部关键点检测

基于YOLOv8-pose的手部关键点检测（3）- 实现实时手部关键点检测

目录 前言 1.扩大检测框区域 2.先检测手部&#xff0c;后检测手部关键点 3.正面视角检测 4.侧面视角检测 5.摄像头视角检测 6.遮挡视角检测 7.结论 前言 使用YOLOv8-m对图像进行手部检测&#xff0c;然后扩大检测框区域&#xff0c;并对该区域使用YOLOv8-s-pose使用关键…
阅读更多...
大数据技术——实战项目：广告数仓（第六部分）报表数据导出至clickhouse

大数据技术——实战项目：广告数仓（第六部分）报表数据导出至clickhouse

目录 第11章 报表数据导出 11.1 Clickhouse安装 11.2 Clickhouse建表 11.2.1 创建database 11.2.2 创建table 11.3 Hive数据导出至Clickhouse 第11章 报表数据导出 由于本项目最终要出的报表&#xff0c;要求具备交互功能&#xff0c;以及进行自助分析的能力&#xff0c;…
阅读更多...
CSS——字体背景（Font Background）

CSS——字体背景（Font Background）

一、字体族 1、字体的相关样式&#xff1a; ① color 用来设置字体颜色&#xff08;前景颜色&#xff09; ② font-size 字体的大小 和font-size相关的单位&#xff1a; em 相对于当前元素的一个font-size rem 相对于根元素的一个font-size ③ font-family 字体族&#x…
阅读更多...
命令行参数环境变量

命令行参数环境变量

目录 前言&#xff1a; 命令行参数&#xff1a; 现象&#xff1a; 这些参数的意义&#xff1a; 为什么要这么做&#xff1f; 这些事是谁做的呢&#xff1f; 环境变量 现象&#xff1a; 创建环境变量&#xff1a; 结合程序理解&#xff1a; 前言&#xff1a; 我们在前…
阅读更多...
1.Linux_常识

1.Linux_常识

UNIX、Linux、GNU 1、UNIX UNIX是一个分时操作系统&#xff0c;特点是多用户、多任务 实时操作系统&#xff1a;来了请求就去解决请求 分时操作系统&#xff1a;来了请求先存着&#xff0c;通过调度轮到执行时执行 2、Linux Linux是一个操作系统内核 发行版本&#xff1…
阅读更多...
C++(10)类语法分析(1)

C++(10)类语法分析(1)

C(10)之类语法分析(1) Author: Once Day Date: 2024年8月17日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: 源码分析_Once-Day的博客-CSDN博客 …
阅读更多...
基于单片机的智能晾衣系统设计

基于单片机的智能晾衣系统设计

摘 要 &#xff1a;在网络信息技术的推动下&#xff0c;智能家居得到了广泛应用&#xff0c;文章根据当前的市场动态&#xff0c;针对基于单片机的智能晾衣系统设计展开论述&#xff0c;具体包括两个方面的内容———硬件设计和软件设计。 关键词 &#xff1a;单片机&#xff…
阅读更多...
【数据结构篇】~顺序表

【数据结构篇】~顺序表

顺序表前言 想要学好数据结构的三大基本功&#xff1a;1.结构体2.指针3.动态内存开辟,这三样将是贯彻整个数据结构的工具。&#xff08;可以去这里了解这三大基本功&#xff09; 顺序表也是线性表的一种&#xff0c;那线性表又是什么呢&#xff1f; 线性表&#xff08;linear …
阅读更多...
应急响应-DDOS-技术指南

应急响应-DDOS-技术指南

初步预判 通常&#xff0c;可从以下几方面判断服务器/主机是否遭受DDoS攻击查看防火墙、流量监控设备、网络设备等是否出现安全告警或大量异常数据包。如图所示&#xff0c;通过流量对比&#xff0c;发现在异常时间段存在大量UDP数据包&#xff0c;并且与业务无关。 通过安全设…
阅读更多...
uniapp多图上传uni.chooseImage上传照片uni.uploadFile，默认上传9张图

uniapp多图上传uni.chooseImage上传照片uni.uploadFile，默认上传9张图

uniapp多图上传uni.chooseImage上传照片uni.uploadFile 代码示例&#xff1a; /**上传照片 多图*/getImage() {uni.chooseImage({count: 9, //默认9sizeType: [original, compressed], //可以指定是原图还是压缩图&#xff0c;默认二者都有sourceType: [album], //从相册选择/…
阅读更多...
8 Java常用API(基本语法6)-- Object和Objects类、Math、System、浅克隆和深克隆、手动下载导入第三方jar包

8 Java常用API(基本语法6)-- Object和Objects类、Math、System、浅克隆和深克隆、手动下载导入第三方jar包

文章目录 前言一、Math(工具类)1 属性2 常见方法二、System(工具类，和系统相关的)1 public static void exit(int status) --- 终止当前运行的 Java 虚拟机。2 public static long currentTimeMillis() --- 以毫秒为单位返回当前unix时间。3 public static void arraycopy(Obj…
阅读更多...
在Windows上配置VSCode MinGW+CMake（包括C++多线程编程的两套API：posix和win32）

在Windows上配置VSCode MinGW+CMake（包括C++多线程编程的两套API：posix和win32）

创建目录 首先&#xff0c;需要电脑上安装VSCode, 并且创建三个文件夹&#xff1a;cmake、MinGW-posix、MinGW-w32 文件下载 下载posix-seh posix和win32分别是c多线程变成的两套API,可根据不同需求安装&#xff0c;现在先下载配置环境需要的几个文件 百度搜索MinGW-64 点…
阅读更多...
Apache--简介与基本使用

Apache--简介与基本使用

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、Apache简介 Apache HTTP Server&#xff08;在Red Hat发行版中俗称Apache或httpd&#xff09;是由Apache Software Foundation在Apache License…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023