前端 Vue 基本功自测

目的

下面都是一些考察 vue 使用的题目, 能写出来不一定能找到工作, 但是不会写, 证明你没有学会 vue.

题目

  • 编写一个计数器的功能,并能够实现加减操作。
  • 编写表格,并实现分页功能。要求使用 element-ui 的表格组件,表格内容先写死一百条假数据。
  • 编写一个导航栏,并能够实现在不同页面之间的跳转。要求使用 vue-router 嵌套路由实现。并在跳转之间传递和获取参数。
  • 编写购物车功能,预先写好假数据,并能够实现删除商品、数量调整等功能。要求使用 Vuex 管理共享数据。
  • 编写留言板功能。要求使用 Axios 发送 HTTP 请求获取留言数据,并能够实现新增留言、删除留言等功能。(下面有数据模拟说明)
  • 编写一个 Vue2 组件,实现一个简单的日历功能。要求使用 element-ui 的日期选择器组件,并能够动态传入默认日期、日期范围功能。

配套数据

附上使用 json-server 模拟留言板接口的方法

  1. 安装json-server:
npm install -g json-server
  1. 创建一个名为db.json的文件,用于存储模拟的留言数据。在项目根目录下创建这个文件,并添加一些初始数据:
{
  "messages": [
    { "id": 1, "text": "第一条留言" },
    { "id": 2, "text": "第二条留言" }
  ]
}
  1. 启动json-server来模拟后台数据:
json-server --watch db.json --port 3000

这将在端口3000上启动json-server,并使用db.json文件中的数据。

以下是用于留言板功能的基本接口文档,这些接口是与json-server模拟的后台数据进行交互的。

获取留言列表

  • URL: GET /messages
  • 描述: 获取所有留言的列表
  • 响应示例:
[
  {
    "id": 1,
    "text": "第一条留言"
  },
  {
    "id": 2,
    "text": "第二条留言"
  }
]

添加新留言

  • URL: POST /messages
  • 描述: 添加新留言
  • 请求体:
{
  "text": "新留言内容"
}
  • 响应示例:
{
  "id": 3,
  "text": "新留言内容"
}

删除留言

  • URL: DELETE /messages/:id
  • 描述: 删除指定ID的留言
  • 示例:
DELETE /messages/2
  • 响应示例:
{}

这些接口允许你通过HTTP请求来获取留言列表、添加新留言和删除指定ID的留言。


Tags

  1. vue
  2. 开发
  3. 前端