但是同时启动 vue 项目和 json-server 两个地址就冲突,后启动的地址会被默认更改到http://localhost:3001,但是我们要通过访问http://localhost:3000/users 来获取到用户信息,这个时候就和我们实际工作中项目的开发非常类似了。
如:接口 /jsonServer/user/getUserName ,对应的mock数据,存放在 mock文件夹下的 jsonServer/user/getUserName.json 中。 有人可能会说,不知道接口的url和返回的数据结构,凭自己的想象模拟,和后台同学实际设计的接口大概率不会吻合,拿到真实接口之后,还需要做修改,这是一种浪费。 我认为,这种浪费,相比被动等待、依...
npm run mock Tips: json-server启动在3000端口,此处需要配置vue-cli的代理服务: vue.config.js module.exports ={ devServer: { proxy:'http://127.0.0.1:3000'} }
npm install -g @vue/cli 这样我们就可以用vue cli来创建我们的项目了。 vue create blog 查看下package.json, 确保你安装的vue版本是vuejs 3, 否则利用不了composition API这个特性。接下来我们来安装vue-router和bootstrap: vueaddrouter npm install bootstrap 接下来我们通过src/main.js来引入bootstrap css。
element-plus+axios+vue3+json-server实现批量删除 const multipleSelection = ref([]) //用于保存当前选中的表格行的数据。 const handleSelectionChange = (val) => { //val是一个数组 multipleSelection.value = val } const deleteData = (dataId) => { //工具类...
最近在跟着做vue2.0以上版本的一个购物平台,在涉及到模拟后台数据交互的时候,视频里讲的是通过json-server和express,由于之前的配置都是在build/dev-server.js文件下,dev-server.js在vue2.0都没有了,整合到了build/webpack.dev.conf.js文件里,通过综合几篇博文,最终问题得以解决。
数据的模拟方法有很多种,其中一种常用的是json server。数据模拟可以帮助前端开发在后端接口未完成时先实现项目效果,剥离了后端接口的限制。实现数据模拟可以通过npm安装json server插件来实现。
按需引入ElementPlus: yarn add -D unplugin-auto-import unplugin-vue-components ElementPlus设置为中文:在main.ts中import locale from "element-plus/lib/locale/lang/zh-cn",并app.use(ElementPlus, {locale}) 安装json-server yarn add json-server ...
A small but complete CRUD web app with Vue3 + Vite + TypeScript + element-plus + axios + JSON Server Features Full CRUD Base search/ pagination/sort Chinese areas cascader, Custom components/data access/form validator Responsive design
npm install-g json-server 可以通过查看版本号,来测试是否安装成功: 代码语言:javascript 代码运行次数:0 复制 Cloud Studio代码运行 json-server-v 2 创建json数据——db.json 既然是造数据,就需要创建一个json数据。 在任意一个文件夹下(此处假设我创建了一个myserver文件夹),进入到该文件夹里面,执行代码: ...