//axios封装
import axios from "axios";
const instant = axios.create({
baseURL: "http://localhost:3000", //配置基础路径
timeout: 8000, //响应时间
headers: {
//设置响应头的类型
"Content-type": "application/json;charset=utf-8",
},
});
export default instant;//router路由配置
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{
path: "/",
component: () => import("../views/login/login.vue"),
},
{
path: "/home",
component: () => import("../views/home/home.vue"),
},
{
path: "/about/:id", //携带参数
component: () => import("../views/About/about.vue"),
},
{
path: "/layout",
name: "layout",
component: () => import("../views/LayOut/layout.vue"),
//配置子路由 子路由
children: [
{
path: "rolesList",
component: () => import("../views/pages/rolesList.vue"),
},
{
path: "userList",
component: () => import("../views/pages/userList.vue"),
},
],
},
];
const router = createRouter({
routes,
history: createWebHashHistory(),
});
export default router;//配置完路由了以后 还需要在main.js里注册路由
import { createApp } from "vue";
// import './style.css'
import App from "./App.vue";
import router from "./router/index"; //导入路由 注意自己路由配置文件的位置
const app = createApp(App);
app.use(router); //注册路由
app.mount("#app");路由跳转
<template>
<router-link to="/">login</router-link>
<router-link to="home">home</router-link>
<router-link to="/about/123">About</router-link>
</template>1.设置 pinia
下载 pinia
npm install pinia
在src目录下创建一个store的文件夹，在该文件夹下创建index.js文件来配置pinia
import { defineStore } from "pinia";
const useStore = defineStore("demoStore", {
state: () => {
return {
name: "zs",
age: 20,
};
},
getters: {
//通过getters来获取状态数据
getName() {
return this.name;
},
getAge() {
return this.age;
},
},
actions: {
//通过actions来修改状态数据
setName(name) {
this.name = name;
},
setAge(age) {
this.age = age;
},
},
});
export default useStore;
然后在 main.js 里注册 pinia
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
//通过3个步骤来注册pinia
import { createPinia } from "pinia"; //获取pinia里的 createPinia
const pinia = createPinia(); //通过 createPinia 来获取 pinia
const app = createApp(App);
app.use(pinia); //然后注册pinia
app.mount("#app");
使用 pinia
import useStore from "../store";
const demo = useStore();
//修改或者设置状态数据
demo.setAge(22);
demo.setName("李四");
//获取状态数据
let name = demo.getName;
let age = demo.getAge;2.下载安装
先查看自己的电脑有没有安装
json-serverjson-server -v如果没有，就使用 npm 全局安装 json-server：
npm install -g json-server#3.创建 json 数据 db.json
既然是造数据，就需要创建一个 json 数据。
在任意一个文件夹下（此处假设我创建了一个 demo 文件夹，不要用 json-server 为名字，否则会报错哦），进入到该文件夹里面，执行代码：
json-server --watch db.json
4.修改端口号
json-server 默认是 3000 端口，我们也可以自己指定端口，指令如下：
json-server --watch db.json --port 3004
4.修改端口号
json-server 默认是 3000 端口，我们也可以自己指定端口，指令如下：
json-server --watch db.json --port 3004
五、操作数据
我们先自己倒腾下 db.json 数据，比如现在是个水果商城，放点 水果价格 信息：
{ "fruits": [ { "id": 1, "name": "糖心富士苹果", "price": 2.38 }, { "id": 2, "name": "橘子", "price": 3.88 }, { "id": 3, "name": "宁夏西瓜", "price": 1.98 }, { "id": 4, "name": "麒麟西瓜", "price": 3.98 }, { "id": 5, "name": "红蛇果", "price": 2.5 }, { "id": 6, "name": "黑皮西瓜", "price": 0.98 }, { "id": 7, "name": "红心火龙果", "price": 2.69 }, { "id": 8, "name": "国产火龙果", "price": 1.69 }, { "id": 9, "name": "海南荔枝", "price": 9.9 }, { "id": 10, "name": "陕西冬枣", "price": 5.39 }, { "id": 11, "name": "软籽石榴", "price": 2.39 }, { "id": 12, "name": "蜜橘", "price": 1.99 }, { "id": 13, "name": "海南香蕉", "price": 1.45 } ] }要注意，数据格式符合 JSON 格式（尤其注意最后一个键值对后面不要有逗号）。如果数据格式有误，命令窗口会报错，可以根据错误提示进行修整。
接下来我们就可以 GET, POST, PUT, PATCH or DELETE 方法来对数据进行操作。
首先，我们先来看 GET 操作。
浏览器地址访问就可以看做 GET 操作，所以不用写任何代码，我们就可以先来测试下 url -GET 操作。
#1.常规获取数据
http://localhost:3000/fruits<script setup> import { ref, onBeforeMount, reactive } from "vue"; import req from "../../api/req.js"; //这个就是网络请求封装的文件 let fruits = reactive({ fruitsList: [] }); //定义函数获取数据 const getData = () => { /** * 请求的路径是http://localhost:3000/fruits * 但是我在网络请求封装中已经配置了基础路径 baseURL="http://localhost:3000" * 所以它会自动与 /fruits 拼接成 http://localhost:3000/fruits */ req.get("/fruits").then((res) => { fruits.fruitsList = res; }); }; //组件生命周期 就是在组件挂载之前执行函数 getData() 发送请求获取数据 onBeforeMount(() => { getData(); }); </script> <template> <div> <table> <tr> <th>ID</th> <th>name</th> <th>price</th> </tr> <tr v-for="item in fruits.fruitsList"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.price }}</td> </tr> </table> </div> </template> <style lang="css" scoped> table, td, th { border: 1px solid black; border-collapse: collapse; } table { width: 500px; text-align: center; } tr { height: 35px; } </style>
9.更新数据
PUT 方法，常用来更新已有资源，若资源不存在，它也会进行创建。
案例：输入水果对应 id，修改其价格。
<script setup> import { ref, onBeforeMount, reactive } from "vue"; import req from "../../api/req.js"; let fruits = reactive({ fruitsList: [] }); const getData = () => { req.get("/fruits").then((res) => { fruits.fruitsList = res; }); }; //修改 const updateData = (index) => { let obj = { id: 14, name: "苹果000", price: 100, }; //obj 为要修改的数据 14就是要修改id为14的数据 req.put(`/fruits/${index}`, obj).then((res) => { getData(); }); }; </script> <template> <div> <div class="btn"> <el-button type="primary" @click="updateData(14)">修改</el-button> </div> <table> <tr> <th>ID</th> <th>name</th> <th>price</th> </tr> <tr v-for="item in fruits.fruitsList"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.price }}</td> </tr> </table> </div> </template>
删除数据
DELETE 方法，常用来删除已有资源
案例：根据 id 删除水果数据
<script setup> import { ref, onBeforeMount, reactive } from "vue"; import req from "../../api/req.js"; let fruits = reactive({ fruitsList: [] }); const getData = () => { req.get("/fruits").then((res) => { fruits.fruitsList = res; }); }; //删除 const deleteData = () => { //删除id为14的数据 req.delete("/fruits/14").then((res) => { getData(); }); }; </script> <template> <div> <div class="btn"> <el-button type="primary" @click="deleteData">删除</el-button> </div> <table> <tr> <th>ID</th> <th>name</th> <th>price</th> </tr> <tr v-for="item in fruits.fruitsList"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.price }}</td> </tr> </table> </div> </template>
8.添加数据
POST 方法，常用来创建一个新资源。
案例：添加模拟数据，通过 post 添加到 db.json 中。
<script setup>
import { ref, onBeforeMount, reactive } from "vue";
import req from "../../api/req.js";
let fruits = reactive({ fruitsList: [] });
const getData = () => {
req.get("/fruits").then((res) => {
fruits.fruitsList = res;
});
};
//添加
const insertData = () => {
let obj = {
id: 14,
name: "苹果111",
price: 100,
};
/**
* 添加模拟数据 obj
* req.post("url地址","传输的数据")
*/
req.post("/fruits", obj).then((res) => {
getData(); //添加成功后，重新获取所有数据，就可以看到新添加的数据了
});
};
</script>
<template>
<div>
<div class="btn">
<el-button type="primary" @click="insertData">添加</el-button>
</div>
<table>
<tr>
<th>ID</th>
<th>name</th>
<th>price</th>
</tr>
<tr v-for="item in fruits.fruitsList">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
</tr>
</table>
</div>
</template>
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
