From c12c87e7313a392b5a22b821affa1e2309f1daf1 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 19 May 2024 19:54:06 +0800
Subject: [PATCH] vue-note

---
 ...20240513 - \350\267\257\347\224\261AIP.md" |  52 +++++
 ...pi\347\232\204\346\246\202\345\277\265.md" |  17 ++
 ...36\345\210\240\346\224\271\346\237\245.md" | 179 ++++++++++++++++++
 3 files changed, 248 insertions(+)
 create mode 100644 "\351\202\261\346\245\267\346\235\255/20240513 - \350\267\257\347\224\261AIP.md"
 create mode 100644 "\351\202\261\346\245\267\346\235\255/20240514 - webapi\347\232\204\346\246\202\345\277\265.md"
 create mode 100644 "\351\202\261\346\245\267\346\235\255/20240516 - \350\267\257\347\224\261\345\242\236\345\210\240\346\224\271\346\237\245.md"

diff --git "a/\351\202\261\346\245\267\346\235\255/20240513 - \350\267\257\347\224\261AIP.md" "b/\351\202\261\346\245\267\346\235\255/20240513 - \350\267\257\347\224\261AIP.md"
new file mode 100644
index 0000000..21d4582
--- /dev/null
+++ "b/\351\202\261\346\245\267\346\235\255/20240513 - \350\267\257\347\224\261AIP.md"	
@@ -0,0 +1,52 @@
+# 路由Api
+Pinia 是一个基于 Vue 3 的状态管理库，它提供了一种简单、轻量级和易于使用的方式来管理应用程序中的状态。在 Vue 路由中使用 Pinia 可以让状态管理更加方便和灵活。
+
+在 Vue 路由中使用 Pinia，可以通过以下步骤实现：
+
+1. 安装 Pinia：首先需要安装 Pinia 库，可以通过 npm 或 yarn 安装：
+
+```bash
+npm install pinia
+```
+
+2. 创建 Pinia Store：在应用程序中创建一个 Pinia Store，用于管理应用程序的状态。可以在 store 文件夹中创建一个 store.js 文件，并在其中定义一个 Pinia Store：
+
+```javascript
+import { createPinia } from 'pinia';
+
+export const store = createPinia();
+```
+
+3. 在应用程序中使用 Pinia Store：在应用程序的入口文件中使用 Pinia Store，例如在 main.js 文件中：
+
+```javascript
+import { createApp } from 'vue';
+import App from './App.vue';
+import { store } from './store';
+
+const app = createApp(App);
+app.use(store);
+app.mount('#app');
+```
+
+4. 在路由组件中使用 Pinia Store：在路由组件中可以通过 `useStore` 函数来获取 Pinia Store 的实例，并使用它来管理状态：
+
+```javascript
+import { useStore } from 'pinia';
+
+export default {
+  setup() {
+    const store = useStore();
+
+    // 使用 store 中的状态和方法
+    const count = store.count;
+    store.increment();
+
+    return {
+      count
+    };
+  }
+};
+```
+
+通过以上步骤，就可以在 Vue 路由中使用 Pinia 来管理应用程序的状态，实现更加灵活和方便的状态管理。
diff --git "a/\351\202\261\346\245\267\346\235\255/20240514 - webapi\347\232\204\346\246\202\345\277\265.md" "b/\351\202\261\346\245\267\346\235\255/20240514 - webapi\347\232\204\346\246\202\345\277\265.md"
new file mode 100644
index 0000000..f51ea5c
--- /dev/null
+++ "b/\351\202\261\346\245\267\346\235\255/20240514 - webapi\347\232\204\346\246\202\345\277\265.md"	
@@ -0,0 +1,17 @@
+# webapi的概念
+Web API（Web Application Programming Interface）是一种用于与 Web 服务器或 Web 服务进行通信的接口。它允许不同的软件系统之间进行数据交换和通信，从而实现各种功能和服务。
+
+以下是关于 Web API 的一些知识点：
+
+1. 类型：Web API 可以分为两种类型：基于 SOAP（Simple Object Access Protocol）的 Web 服务和基于 REST（Representational State Transfer）的 Web 服务。基于 SOAP 的 Web 服务使用 XML 格式进行数据交换，而基于 REST 的 Web 服务则使用 JSON 格式。
+
+2. 功能：Web API 可以用于实现各种功能，如数据获取、数据提交、身份验证、文件上传下载等。它可以让不同的应用程序之间进行数据交换和通信，实现信息共享和功能扩展。
+
+3. 使用方式：开发人员可以通过 HTTP 请求来调用 Web API 提供的功能。通常，开发人员会使用各种编程语言和框架来调用 Web API，如 JavaScript、Ajax、Fetch API、Vue.js、React 等。
+
+4. 安全性：Web API 通常需要进行身份验证和授权才能访问受保护的资源。开发人员可以使用 API 密钥、OAuth 认证等方式来确保 Web API 的安全性。
+
+5. 示例：一些常见的 Web API 包括 Google Maps API（用于地图服务）、Twitter API（用于获取推文）、GitHub API（用于访问 GitHub 上的数据）等。
+
+总的来说，Web API 是一种用于实现不同软件系统之间数据交换和通信的接口，可以帮助开发人员构建更加强大和灵活的应用程序。
+
diff --git "a/\351\202\261\346\245\267\346\235\255/20240516 - \350\267\257\347\224\261\345\242\236\345\210\240\346\224\271\346\237\245.md" "b/\351\202\261\346\245\267\346\235\255/20240516 - \350\267\257\347\224\261\345\242\236\345\210\240\346\224\271\346\237\245.md"
new file mode 100644
index 0000000..965a492
--- /dev/null
+++ "b/\351\202\261\346\245\267\346\235\255/20240516 - \350\267\257\347\224\261\345\242\236\345\210\240\346\224\271\346\237\245.md"	
@@ -0,0 +1,179 @@
+# 路由增删改查
+```js
+//main.js
+ 我的 
+ 1 
+  
+  
+ 卢建祥 / net前端班Vue课堂笔记forked from 22级Net前端班 / net前端班Vue课堂笔记 
+该仓库未声明开源许可证文件（LICENSE），使用请关注具体项目描述及其代码上游依赖。 
+ 
+net-front-end-class-vue-notes/ 卢建祥 / 20240516-路由实现增删改查.md 
+20240516-路由实现增删改查.md
+4.30 KB
+卢建祥 提交于 3天前 . 笔记提交
+main.js代码贴
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import userList from './components/userList.vue'
+import userEdit from './components/userEdit.vue'
+let app = createApp(App);
+import { createRouter, createWebHistory } from 'vue-router'
+let router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            component: userList
+        },
+        {
+            path: '/edit',
+            component: userEdit
+        }
+    ]
+});
+app.use(router);
+app.mount('#app');
+
+//use.vue
+<template>
+    <div class="content">
+        <div class="top">
+            <input type="text" placeholder="请输入查询的关键字" v-model="find">
+            <input type="button" value="查找" @click="btnFind">
+            <input type="button" value="新增" @click="btnAdd">
+        </div>
+        <div class="listV">
+            <table class="tb">
+                <tr>
+                    <th>id</th>
+                    <th>姓名</th>
+                    <th>性别</th>
+                    <th>年龄</th>
+                    <th>操作</th>
+                </tr>
+                <tr v-for="item in list" :key=item.id>
+                    <td>{{ item.id }}</td>
+                    <td>{{ item.username }}</td>
+                    <td>{{ item.sex }}</td>
+                    <td>{{ item.age }}</td>
+                    <td>
+                        <input type="button" value="编辑" @click="btnEdit(item.id)">
+                        <input type="button" value="删除" @click="btnDel(item.id)">
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+    </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import axios from 'axios';
+import { useRouter } from 'vue-router'
+let router = useRouter();
+let list=reactive([])
+//挂载后的操作
+onMounted(async() => {
+    let dataList=await axios.get('http://localhost:3000/logs')
+    dataList.data.data.forEach(item => {
+        list.push(item);
+    });
+})
+async function btnDel(id) {
+    if (confirm('确定删除？')) {
+        let idx=list.findIndex(item=>item.id===id);
+        list.splice(idx,1);
+        axios.delete(`http://localhost:3000/logs/${id}`);
+    }
+}
+function btnAdd() {
+    router.push('/edit')
+}
+function btnEdit(id) {
+    router.push({path:`/edit`,query:{id:id}})
+}
+let find=ref('')
+async function btnFind() {
+    let findList=await axios.get(`http://localhost:3000/logs/${find.value}`)
+    list.splice(0);
+    findList.data.data.forEach(item=>{
+        list.push(item)
+    })
+}
+</script>
+
+<style scoped>
+.add {
+    width: 100%;
+    border: 1px solid;
+    border-radius: 20px;
+    position: absolute;
+    top: 25px;
+    background-color: aliceblue;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.bgcclass {
+    width: 100%;
+    height: 100px;
+    background-color: #888;
+}
+</style>
+
+///edit.vue
+
+<template>
+    <div class="add">
+        <p>姓名：<input type="text" v-model="editData.username"></p>
+        <p>性别：<input type="text" v-model="editData.sex"></p>
+        <p>年龄：<input type="text" v-model="editData.age"></p>
+        <p>
+            <input type="button" value="保存" @click="btnSave">
+            <input type="button" value="取消" @click="btnNot">
+        </p>
+    </div>
+</template>
+<script setup>
+import axios from 'axios';
+import { reactive,onMounted } from 'vue';
+import { useRouter,useRoute } from 'vue-router'
+let router = useRouter();
+let route=useRoute()
+let editData = reactive({
+    username: '',
+    age: '',
+    sex:''
+})
+onMounted(async ()=>{
+    let id=route.query.id;
+    if (id) {
+        let edit=await axios.put(`http://localhost:3000/logs/${id}`)
+        let editArr=edit.data.data
+        editData.id=editArr.id
+        editData.username=editArr.username
+        editData.age=editArr.age
+        editData.sex=editArr.sex
+    }else{
+    }
+})
+async function btnSave(){
+    if (editData.id>0) {
+        await axios.put(`http://localhost:3000/logs/${editData.id}`,editData)
+    }else{
+        await axios.post('http://localhost:3000/logs',editData)
+    }
+    router.push('/')
+}
+function btnNot(){
+    router.push('/')
+}
+</script>
+  
+```
\ No newline at end of file
-- 
Gitee