现在我们ctrl+c停止,json-server 的服务,让后启动我的使用vite搭建的 Vue 项目,发现默认地址,也是http://localhost:3000,现在我的页面是在访问http://localhost:3000时,重定向到/home页面。 我们在访问浏览器地址的时候一方面,我要通过路由转跳到当前页面,还需要当前页面能够获取到数据,但是同时启动 vue 项目和 js...
首先,在你的 Vue 项目根目录下,使用 npm 或 yarn 安装 json-server。 bash npm install json-server --save-dev # 或者 yarn add json-server --dev 2. 创建 db.json 文件 在项目的根目录下创建一个 db.json 文件,用于存储模拟的 API 数据。例如: json { "users": [ { "id": 1, "name": "...
基于vue-cli3 脚手架搭建前端页面,json-server配置模拟api数据接口。 vue-cli3按官方文档配置即可。 主要讲解json-server配置: 1. 只用于开发环境使用json-server,所以如下安装 npm install json-server --save-dev 2. json-server,在项目src文件夹下新建json-server文件夹,结构如下: 3. 文件内容: server.js co...
element-plus+axios+vue3+json-server实现批量删除 const multipleSelection = ref([]) //用于保存当前选中的表格行的数据。 const handleSelectionChange = (val) => { //val是一个数组 multipleSelection.value = val } const deleteData = (dataId) => { //工具类 axios.delete(`http://localhost:3000/...
vue中使用json-server 流程 1.安装json-server的两个依赖 npm -g i json-server npm install -g json-server 2.安装axios依赖 npm i axios 3.全局导入axios使用src目录下main.js文件内 import axios from ‘axios’; 4.配置全局默认地址:src目录下main.js文件内 ...
vue3 ./config/index.js的port 修改端口。 使用json-server作为后台数据比较方便,在项目下 npm install json-server --save安装好后。 一般使用 "scripts":{"json:server":"json-server --watch db.json","json:server:remote":"json-server http://jsonplaceholder.typicode.com/db"}, ...
3 操作数据 我们先自己倒腾下 db.json 数据,比如现在是个水果商城,放点用户信息和水果价格信息: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 {"fruits":[{"id":1,"name":"apple","price":"33"},{"id":2,"name":"orange","price":"8.88"}],"users":[{"name":{"username":"admin","...
3. JavaScript 基本语法和数据类型 函数与作用域 DOM操作与事件处理 异步编程(Promise、Async/Await) 浏览器API 4. ES6+ let与const 箭头函数 模板字符串 解构赋值 模块化 新增的数组和对象方法 5. Vue.js Vue基础知识 组件化开发 Vue CLI和单文件组件 ...
在前端开发过程中,如果后端接口还没有提供,前端拿不到数据一些交互行为的代码可能就没法继续写,这时我们通常自己造一些数据来让页面流程走下去,最近项目切换到vue框架开发,发现json-server能很好的解决接口mock的问题 json-server官方地址 安装 $ npm install json-server -g ...
vue + json-server 1.安装json-server npm i json-server -g 2.在package.json同级目录新建db.json文件,写上伪数据 {"department": [ {"id": 1,"name": "教务部gsf","describe": "负责教学的一切相关工作gs","person": "小苗1gs","view": "张三2gsf"},...