asp.net做的网站模板下载,镇江 网站,网站开发费用会计分录,软件下载网站 知乎一、Axios
1 Axios概述 Axios是一个基于Promise的HTTP库#xff0c;可以发送get、post等请求#xff0c;它作用于浏览器和Node.js中。当运行在浏览器时#xff0c;使用XMLHttpRequest接口发送请求#xff1b;当运行在Node.js时#xff0c;使用HTTP对象发送请求。
Axios的…一、Axios
1 Axios概述 Axios是一个基于Promise的HTTP库可以发送get、post等请求它作用于浏览器和Node.js中。当运行在浏览器时使用XMLHttpRequest接口发送请求当运行在Node.js时使用HTTP对象发送请求。
Axios的主要特性如下
支持所有的 API。支持拦截请求和响应。可以转换请求数据和响应数据并可以将响应的内容自动转换为JSON类型的数据。安全性高客户端支持防御跨站请求伪造Cross-Site Request ForgeryCSRF。
2 安装Axios Axios的安装方式主要有两种一种是通过标签引入另一种是使用包管理工具安装。
通过标签引入 使用 Unpkg 或 jsDelivr 的内容分发网络服务提供的Axios文件也可以将Axios文件下载至本地再引入。
使用包管理工具安装 使用npm或yarn包管理工具安装Axios。
1. 通过标签引入
① 使用Unpkg的CDN服务引入Axios。
script srchttps://unpkg.com/axios/dist/axios.min.js/script② 使用jsDelivr的CDN服务引入Axios。
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script2. 使用包管理工具安装
使用npm或yarn包管理工具安装Axios。
# 使用npm包管理工具安装
npm install axios --save
# 使用yarn包管理工具安装
yarn add axios --save在Vue 3项目中使用yarn安装Axios
步骤一 打开命令提示符切换到D:\vue\chapter07目录使用yarn创建一个名称为my-axios的项目。 在命令提示符中切换到my-axios目录为项目安装所有依赖。
cd my-axios
yarn步骤二 在my-axios目录下使用yarn安装Axios。 步骤三
使用VS Code编辑器打开my-axios目录执行命令启动服务。
yarn dev项目启动后会默认开启一个本地服务地址为http://127.0.0.1:5173/。
3 使用Axios 在项目中使用Axios时通常的做法是先将Axios封装成一个模块然后在组件中导入模块。
① 将Axios封装成模块创建src\axios\request.js文件。
import axios from axios
const request axios.create({timeout: 2000
})
export default request② 在组件中导入模块在src\App.vue文件中导入模块。
import request from ./axios/request.jsAxios常用的请求方式get请求和post请求。
① 使用Axios发送get请求的基本语法格式。
request({url: 请求路径,method: get,params: { 参数 }
}).then(res {console.log(res)
}).catch(error {console.log(error)
})② 使用Axios发送post请求的基本语法格式。
request({url: 请求路径,method: post,data: { 参数 }
}).then(res {console.log(res)
}).catch(error {console.log(error)
})4 Axios图书列表案例
使用Axios实现图书列表案例图书列表页面初始效果如下图所示。
单击上图中“请求数据”按钮数据请求成功页面效果如下图所示。
图书列表案例的实现分为以下2步。 使用mockjs模拟后端接口
步骤一
在my-axios目录下使用yarn安装mockjs。
yarn add mockjs1.1.0 --save步骤二
创建src\mock\books.json文件该文件用于存放模拟的数据。 {id: 1,name: 西游记,author: 吴承恩},{id: 2,name: 红楼梦,author: 曹雪芹},{id: 3,name: 三国演义,author: 罗贯中},{id: 4,name: 水浒传,author: 施耐庵}
]步骤三
创建src\mock\mockServer.js文件该文件用于配置模拟数据的相关信息。
import Mock from mockjs
import books from ./books.json
Mock.mock(/mock/getBooks, get, {code: 200, // 请求成功的状态码data: books // 模拟的请求数据
})步骤三
修改src\main.js文件在创建Vue应用实例前导入mockServer.js文件。
import ./mock/mockServer.js在页面中请求接口并获取数据
步骤一
清空src\App.vue文件中的内容。
templatediv classboxbutton请求数据/buttontable width90% classtablecaptionh2图书列表/h2/captiontheadtrth编号/thth书名/thth作者/th/tr/theadtbody!-- 主体内容 --/tbody/table/div
/template步骤二
在src\App.vue文件中编写样式代码。
style
body, html {width: 100%;height: 100%;
}
#app {width: 100% !important;
}
table {border-collapse: collapse;margin: 0 auto;text-align: center;}
table td, table th {border: 1px solid #cad9ea;color: #666;height: 30px;
}
table thead th {background-color: #CCE8EB;width: 100px;
}
table tr:nth-child(odd) {background: #fff;
}
table tr:nth-child(even) {background: #F5FAFA;
}
/style步骤三
为“请求数据”按钮绑定单击事件处理方法。
button clickgetData请求数据/button
步骤四
在src\App.vue文件中请求接口数据。
script setup
import { reactive } from vue
import request from ./axios/request.js
const bookData reactive({list: []
})
// 测试请求方法
const getData function() {request({url: /mock/getBooks,method: get}).then(res {bookData.list res.data.dataconsole.log(res.data.data)}).catch(error {console.log(error)})
}
/script步骤五
在src\App.vue文件中编写主体内容。
tbody v-foritem in bookData.list :keyitem.id!-- 主体内容 --trtd{{ item.id }}/tdtd{{ item.name }}/tdtd{{ item.author }}/td/tr
/tbody二、Vuex
1 Vuex概述 Vuex是一个专为Vue开发的状态管理库它采用集中式存储的方式管理应用的所有组件的状态解决了多组件数据通信的问题使数据操作更加简洁。 2 安装Vuex Vuex的安装方式主要有两种一种是通过标签引入另一种是使用包管理工具安装。
通过标签引入 使用 Unpkg 的 CDN 服务提供的Vuex文件也可以将Vuex文件下载至本地再引入。
使用包管理工具安装 使用 npm 或 yarn 包管理工具安装Vuex。
1. 通过标签引入
使用 Unpkg 的CDN服务引入 Vuex 。
script srchttps://unpkg.com/vuexnext/script2. 使用包管理工具安装
使用 npm 或 yarn 包管理工具安装 Vuex 。
# 使用npm包管理工具安装
npm install vuex --save
# 使用yarn包管理工具安装
yarn add vuex --save在Vue 3项目中使用yarn安装Vuex
步骤一 打开命令提示符切换到D:\vue\chapter07目录使用 yarn 创建一个名称为 my-vuex 的项目。
在命令提示符中切换到my-vuex目录为项目安装所有依赖。
cd my-vuex
yarn步骤二
在my-vuex目录下使用yarn安装 Vuex 。
步骤三
使用VS Code编辑器打开my-vuex目录执行命令启动服务。
yarn dev项目启动后会默认开启一个本地服务地址为http://127.0.0.1:5173/。
3 使用Vuex 在项目中使用Vuex时通常的做法是先在项目中创建一个store模块然后导入并挂载store模块。store模块是用于管理状态数据的仓库。
② 在src\main.js文件中导入并挂载store模块。
import { createApp } from vue
import ./style.css
import store from ./store // 导入store模块
import App from ./App.vue
const app createApp(App)
app.use(store) // 挂载store模块
app.mount(#app)4 Vuex计数器案例 讲解计数器案例的实现
步骤一
清空src\App.vue文件中的内容重新编写如下代码。
templatep每次增加1button clickincrement/button数字0/pp每次减少1button clickreduction-/button数字100/p
/template
script setup
const increment () { }
const reduction () { }
/script
style
button {background-color: aquamarine;
}
/style步骤二
创建src\store\index.js文件。
import { createStore } from vuex
const store createStore({state: {add: 0,reduce: 100},mutations: {increase(state) {state.add},
decrease(state) {state.reduce--}},actions: {},modules: {}
})
export default store步骤三
修改src\App.vue文件提交increase()方法和decrease()方法。
script setup
import { useStore } from vuex
const store useStore()
const increment () {store.commit(increase)
}
const reduction () {store.commit(decrease)
}
/script步骤四
在template模板中获取state中的数据并显示在页面中。
p每次增加1button clickincrement/button数字{{ this.$store.state.add }}
/p
p每次减少1button clickdecrement-/button数字{{ this.$store.state.reduce }}
/p三、Pinia
1 Pinia概述 Pinia是新一代的轻量级状态管理库它允许跨组件或页面共享状态解决了多组件间的数据通信使数据操作更加简洁。 2 安装Pinia
使用 npm 或 yarn 包管理工具安装 Pinia 。
# 使用yarn包管理器安装
yarn add pinia --save
# 使用npm包管理器安装
npm install pinia --save
在Vue 3项目中使用yarn安装Pinia
步骤一
打开命令提示符切换到D:\vue\chapter07目录使用yarn创建一个名称为my-pinia的项目。 在命令提示符中切换到my-pinia目录为项目安装所有依赖。
cd my-pinia
yarn步骤二
在my-pinia目录下使用yarn安装Pinia。
步骤三
使用VS Code编辑器打开my-pinia目录执行命令启动服务。
yarn dev项目启动后会默认开启一个本地服务地址为http://127.0.0.1:5173/。
3 使用Pinia 在项目中使用Pinia时通常先在项目中创建一个store模块然后创建并挂载Pinia实例。其中store模块是用于管理状态数据的仓库。
① 编写store模块创建src\store\index.js文件。 ② 在src\main.js文件中创建并挂载Pinia实例。
import { createApp } from vue
import ./style.css
import { createPinia } from pinia
import App from ./App.vue
const app createApp(App)
const pinia createPinia() // 创建Pinia实例
app.use(pinia) // 导入Pinia实例
app.mount(#app)4 Pinia计数器案例 讲解计数器案例的实现
步骤一
清空src\App.vue文件中的内容重新编写如下代码。
templatep每次增加1button clickincrement/button数字0/pp每次减少1button clickreduction-/button数字100/p
/template
script setup
const increment () { }
const reduction () { }
/script
style
button {background-color: aquamarine;
}
/style步骤二
创建src\store\index.js文件。
import { defineStore } from pinia
export const useStore defineStore(storeId, {state: () {return {add: 0,reduce: 100}},
getters: {},actions: {increase() {this.add},decrease() {this.reduce--}}
})步骤三
修改src\App.vue文件调用actions中定义的increase()方法和decrease()方法。
script setup
import { useStore } from ./store
import { storeToRefs } from pinia
const store useStore()
const { add, reduce } storeToRefs(store)
const increment () {store.increase()
}
const reduction () {store.decrease()
}
/script步骤四
p每次增加1button clickincrement/button数字{{ add }}
/p
p每次减少1button clickreduction-/button数字{{ reduce }}
/p5 Pinia模块化
Pinia模块化应用场景 讲解user.js和shop.js模块的创建
步骤一
创建src\store\user.js文件编写用户信息数据。
import { defineStore } from pinia
export const useUserStore defineStore(user, {state: () {return {name: 小明,sex: 男,age: 18}},getters: {},actions: {}
})步骤二
创建src\store\shop.js文件编写商品信息数据。
import { defineStore } from pinia
export const useShopStore defineStore(shop, {state: () {return {list: [{id: 01,name: 手机,price: 2000},{id: 02,name: 音响,price: 5000}]}},getters: {},actions: {}
})
getters: {},actions: {increase() {this.add},decrease() {this.reduce--}}
})步骤三
创建src\components\User.vue文件在页面中显示用户信息数据。
templatedivuser模块p姓名{{ name }}/pp性别{{ sex }}/pp年龄{{ age }}/p/div
/template
script setup
import { useUserStore } from ../store/user.js
import { storeToRefs } from pinia
const user useUserStore()
const { name, sex, age } storeToRefs(user)
/script步骤四
修改src\main.js文件切换页面中显示的组件。
import App from ./components/User.vue保存上述代码在浏览器中访问http://127.0.0.1:5173/user模块的页面效果如下图所示。
步骤五
创建src\components\Shop.vue文件在页面中显示商品信息数据。
templateshop模块div v-foritem in listp商品id{{ item.id }}/pp商品名称{{ item.name }}/pp商品价格{{ item.price }}元/p/div
/template
script setup
import { useShopStore } from ../store/shop.js
import { storeToRefs } from pinia
const shop useShopStore()
const { list } storeToRefs(shop)
/script步骤六
修改src\main.js文件切换页面中显示的组件。
import App from ./components/Shop.vue保存上述代码在浏览器中访问http://127.0.0.1:5173/shop模块的页面效果如下图所示。
6 Pinia持久化存储 在项目开发中使用Pinia进行状态管理时若想要刷新浏览器后仍保留之前的操作状态可以通过Pinia的持久化插件pinia-plugin-persist实现。
使用npm或yarn包管理工具安装pinia-plugin-persist。
# 使用npm包管理工具安装
npm install pinia-plugin-persist --save
# 使用yarn包管理工具安装
yarn add pinia-plugin-persist --save在my-pinia项目中安装pinia-plugin-persist
步骤一
在my-pinia目录下使用yarn安装pinia-plugin-persist插件。
步骤二
使用VS Code编辑器打开my-pinia目录执行命令启动服务。
yarn dev在src\main.js文件中导入并挂载pinia-plugin-persist插件。
import { createApp } from vue
import ./style.css
import { createPinia } from pinia
import piniaPluginPersist from pinia-plugin-persist
import App from ./components/Shop.vue
const pinia createPinia()
pinia.use(piniaPluginPersist)
const app createApp(App)
app.use(pinia)
app.mount(#app)挂载pinia-plugin-persist插件后在模块中实现持久化存储的示例代码如下。
persist: {enabled: true, // 开启数据缓存strategies: [{key: StoreId1, // 当前store的idstorage: localStorage, // 存储方式paths: [字段] // 指定要持久化的字段}
]
}{key: user,storage: localStorage}]
}1. 全部数据持久化存储 使用Pinia实现全部数据持久化存储
步骤一
在src\components\User.vue文件中定义“增加年龄”按钮。
templatedivuser模块p姓名{{ name }}/pp性别{{ sex }}/pp年龄{{ age }}/pbutton clickchangeAge增加年龄/button/div
/template步骤二
修改src\store\user.js文件在actions中定义一个改变年龄的方法并实现持久化存储。
actions: {changeAge() {this.age},
},
persist: {enabled: true,strategies: [{key: user,storage: localStorage}]
}步骤三
在src\components\User.vue文件中定义changeAge()方法在该方法中调用actions中定义的changeAge()方法。
const changeAge () {user.changeAge()
}步骤四
修改src\main.js文件切换页面中显示的组件。
import App from ./components/User.vue2. 部分数据持久化存储 使用Pinia实现部分数据持久化存储
步骤一
修改src\store\user.js文件在actions中定义一个改变姓名的方法。
changeName() {this.name 小亮
}步骤二
修改src\store\user.js文件中持久化存储的代码通过paths指定要持久化存储的字段。
persist: {enabled: true,strategies: [{key: user,storage: localStorage,paths: [age]}],
}步骤三
在src\components\User.vue文件中找到“增加年龄”按钮在该按钮下方增加一个“改变姓名”按钮。
button clickchangeName改变姓名/button步骤四
修改src\components\User.vue文件定义changeName()方法在该方法中调用actions中定义的changeName()方法。
const changeName () {user.changeName()
}
