Vue基础21之Vuex第二节

已于 2023-03-14 15:05:54 修改
阅读量393 收藏 1
点赞数
分类专栏： 前端 Vue基础 文章标签： vue.js javascript 前端
于 2023-03-14 15:00:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/129518457
版权

Vue基础21

Vuex

多组件共享数据

在这里插入图片描述

Calculation.vue

<template>
<div>
  <h1>当前求和为：{{sum}}</h1>
  <h2>当前求和数放大10倍后为：{{bigSum}}</h2>
  <h3>我在{{school}}学习{{subject}}</h3>
  <h3 style="color: red;">person组件的总人数为：{{personList.length}}</h3>
  <div class="event">
<!--    v-model.number强制转换为数字-->
    <select  class="same" v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button class="same" @click="increment(n)">+</button>
    <button class="same" @click="decrement(n)">-</button>
    <button class="same" @click="incrementOdd(n)">当前和为奇数再加</button>
    <button class="same" @click="incrementWait(n)">等一等再加</button>
  </div>
</div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    export default {
      name: "Calculation",
      data(){
          return{
            n:1, //用户选择的数字
          }
      },
      methods:{
        ...mapMutations({increment:"Addmore",decrement:"Deduce"}),
        ...mapActions({incrementOdd:"addOdd",incrementWait:"addWait"})
      },
      computed:{
        //借助mapState生成计算属性，从state中读取数据（对象写法）
        // ...mapState({he:"sum",xuexiao:"school",xueke:"subject"}),

        //借助mapState生成计算属性，从state中读取数据（数组写法）
        ...mapState(["sum","school","subject","personList"]),

        //借助mapGetters生成计算属性，从getters中读取数据（对象写法）
        // ...mapGetters({bigSum:'bigSum'})
        // 借助mapGetters生成计算属性，从getters中读取数据（数组写法）
        ...mapGetters(["bigSum"])
      },
      mounted() {
        // const x=mapState({he:"sum",xuexiao:"school",xueke:"subject"})
        const x=mapState(["sum","school","subject"])
        console.log(x)
      }
    }
</script>

<style scoped>
.event{
  display: flex;
  justify-content: space-between;
  width: 300px;
}
</style>

Persons.vue

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red;">calculation组件求和为：{{sum}}</h3>
    <input type="text" v-model="name">&nbsp;<button @click="addPerson">添加</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
    export default {
        name: "Persons",
        data(){
          return{
            name:""
          }
        },
        computed:{
          personList(){
            return this.$store.state.personList
          },
          sum(){
            return this.$store.state.sum
          }
        },
        methods:{
          addPerson(){
            var personObj={id:nanoid(),name:this.name}
            this.$store.commit("AddPerson",personObj)
            this.name=""
          }
        }
    }
</script>

<style scoped>

</style>

src/store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions={
    addOdd(context,value){
        if(context.state.sum%2){
            console.log("actions中的addOdd被调用了")
            context.commit("Addmore",value)
        }
    },
    addWait(context,value){
        setTimeout(()=>{
            console.log("actions中的addWait被调用了")
            context.commit("Addmore",value)
        },500)
    }
}
//准备mutations——用于操作数组（state）
const mutations={
    Addmore(state,value){
        console.log("mutations中的Addmore被调用了")
        state.sum+=value
    },
    Deduce(state,value){
        console.log("mutations中的Deduce被调用了")
        state.sum-=value
    },
    AddPerson(state,value){
        state.personList.unshift(value)
    }
}
//准备state——用于存储数组
const state={
    sum:0,
    school:"幸福大学",
    subject:"计算机",
    personList:[
        {id:"001",name:"张三"}
    ]
}

//准备getters——用于将state中的数据进行加工
const getters={
    bigSum(state){
        return state.sum*10
    }
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

请添加图片描述

vuex模块化+namespace

在这里插入图片描述

模块化

src/store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)

//求和相关的配置
const countOptions={
    namespaced:true,
    //准备actions——用于响应组件中的动作
    actions:{
        addOdd(context,value){
            if(context.state.sum%2){
                console.log("actions中的addOdd被调用了")
                context.commit("Addmore",value)
            }
        },
        addWait(context,value){
            setTimeout(()=>{
                console.log("actions中的addWait被调用了")
                context.commit("Addmore",value)
            },500)
        }
    },
    //准备mutations——用于操作数组（state）
    mutations:{
        Addmore(state,value){
            console.log("mutations中的Addmore被调用了")
            state.sum+=value
        },
        Deduce(state,value){
            console.log("mutations中的Deduce被调用了")
            state.sum-=value
        },
    },
    //准备state——用于存储数组
    state:{
        sum:0,
        school:"幸福大学",
        subject:"计算机",
    },
    //准备getters——用于将state中的数据进行加工
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}

//人员相关的配置
const personOptions={
    namespaced:true,
    actions:{
        addPersonWang(context,value){
            if(value.name.indexOf("王")==0){
                context.commit("AddPerson",value)
            }else{
                alert("添加的必须是姓王的人!")
            }
        }
    },
    mutations:{
        AddPerson(state,value){
            state.personList.unshift(value)
        }
    },
    state:{
        personList:[
            {id:"001",name:"张三"}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }
    }
}


//创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})
Calculation.vue
<template>
<div>
  <h1>当前求和为：{{sum}}</h1>
  <h2>当前求和数放大10倍后为：{{bigSum}}</h2>
  <h3>我在{{school}}学习{{subject}}</h3>
  <h3 style="color: red;">person组件的总人数为：{{personList.length}}</h3>
  <div class="event">
<!--    v-model.number强制转换为数字-->
    <select  class="same" v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button class="same" @click="increment(n)">+</button>
    <button class="same" @click="decrement(n)">-</button>
    <button class="same" @click="incrementOdd(n)">当前和为奇数再加</button>
    <button class="same" @click="incrementWait(n)">等一等再加</button>
  </div>
</div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    export default {
      name: "Calculation",
      data(){
          return{
            n:1, //用户选择的数字
          }
      },
      methods:{
        ...mapMutations('countAbout',{increment:"Addmore",decrement:"Deduce"}),
        ...mapActions('countAbout',{incrementOdd:"addOdd",incrementWait:"addWait"})
      },
      computed:{
        //借助mapState生成计算属性，从state中读取数据（对象写法）
        // ...mapState({he:"sum",xuexiao:"school",xueke:"subject"}),

        //借助mapState生成计算属性，从state中读取数据（数组写法）
        ...mapState('countAbout',["sum","school","subject"]),
        ...mapState('personAbout',["personList"]),

        //借助mapGetters生成计算属性，从getters中读取数据（对象写法）
        // ...mapGetters({bigSum:'bigSum'})
        // 借助mapGetters生成计算属性，从getters中读取数据（数组写法）
        ...mapGetters('countAbout',["bigSum"])
      },
      mounted() {
        console.log(this.$store)
      }
    }
</script>

<style scoped>
.event{
  display: flex;
  justify-content: space-between;
  width: 300px;
}
</style>
Persons.vue
<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red;">calculation组件求和为：{{sum}}</h3>
    <h3>列表中第一个人的名字是：{{firstName}}</h3>
    <input type="text" v-model="name">&nbsp;<button @click="addPerson">添加</button>
    &nbsp;
    <button @click="addWang">添加一个姓王的人</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
    export default {
        name: "Persons",
        data(){
          return{
            name:""
          }
        },
        computed:{
          personList(){
            return this.$store.state.personAbout.personList
          },
          sum(){
            return this.$store.state.countAbout.sum
          },
          firstName(){
            return this.$store.getters['personAbout/firstPersonName']
          }
        },
        methods:{
          addPerson(){
            var personObj={id:nanoid(),name:this.name}
            this.$store.commit("personAbout/AddPerson",personObj)
            this.name=""
          },
          addWang(){
            var personObj={id:nanoid(),name:this.name}
            this.$store.dispatch("personAbout/addPersonWang",personObj)
            this.name=""
          }
        }
    }
</script>

<style scoped>

</style>
App.vue
<template>
  <div class="bg">
    <Calculation></Calculation>

    <hr>

    <Persons></Persons>
  </div>
</template>

<script>
import Calculation from "@/components/Calculation";
import Persons from "@/components/Persons";
export default {
  name: "App",
  components: {Calculation,Persons},
  mounted() {
    console.log("App",this)
  }
}
</script>

请添加图片描述

发送Ajax请求处理并拆分store

在这里插入图片描述

请求

https://api.uixsj.cn/hitokoto/get?type=social
随机生成语录

src/store/personOptions.js
//人员相关的配置
import axios from "axios";
import {nanoid} from 'nanoid'
export default {
    namespaced:true,
    actions:{
        addPersonWang(context,value){
            if(value.name.indexOf("王")==0){
                context.commit("AddPerson",value)
            }else{
                alert("添加的必须是姓王的人!")
            }
        },
        addPerson(context){
            axios.get("https://api.uixsj.cn/hitokoto/get?type=social").then(
                response=>{
                    context.commit("AddPerson",{id:nanoid(),name:response.data})
                },
                error=>{
                    alert(error.message)
                }
            )
        }

    },
    mutations:{
        AddPerson(state,value){
            state.personList.unshift(value)
        }
    },
    state:{
        personList:[
            {id:"001",name:"张三"}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }
    }
}
src/store/countOptions.js
//求和相关的配置
const countOptions={
    namespaced:true,
    //准备actions——用于响应组件中的动作
    actions:{
        addOdd(context,value){
            if(context.state.sum%2){
                console.log("actions中的addOdd被调用了")
                context.commit("Addmore",value)
            }
        },
        addWait(context,value){
            setTimeout(()=>{
                console.log("actions中的addWait被调用了")
                context.commit("Addmore",value)
            },500)
        }
    },
    //准备mutations——用于操作数组（state）
    mutations:{
        Addmore(state,value){
            console.log("mutations中的Addmore被调用了")
            state.sum+=value
        },
        Deduce(state,value){
            console.log("mutations中的Deduce被调用了")
            state.sum-=value
        },
    },
    //准备state——用于存储数组
    state:{
        sum:0,
        school:"幸福大学",
        subject:"计算机",
    },
    //准备getters——用于将state中的数据进行加工
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}
export default countOptions
main.js
import Vue from 'vue'

import App from './App'
//引入vue-resource插件
import vueresource from 'vue-resource'

//引入store
import store from './store'

Vue.config.productionTip = false
//使用vue-resource插件
Vue.use(vueresource)

new Vue({
    el: "#app",
    render: h => h(App),
    store,
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})
src/store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)

//引入
import countOptions from "@/store/countOptions";
import personOptions from "@/store/personOptions";


//创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})
Persons.vue
<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red;">calculation组件求和为：{{sum}}</h3>
    <h3>列表中第一个人的名字是：{{firstName}}</h3>
    <input type="text" v-model="name">&nbsp;<button @click="addPerson">添加</button>
    &nbsp;
    <button @click="addWang">添加一个姓王的人</button> &nbsp;
    <button @click="addPersonServer">添加一个随机的人名</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
    export default {
        name: "Persons",
        data(){
          return{
            name:""
          }
        },
        computed:{
          personList(){
            return this.$store.state.personAbout.personList
          },
          sum(){
            return this.$store.state.countAbout.sum
          },
          firstName(){
            return this.$store.getters['personAbout/firstPersonName']
          }
        },
        methods:{
          addPerson(){
            var personObj={id:nanoid(),name:this.name}
            this.$store.commit("personAbout/AddPerson",personObj)
            this.name=""
          },
          addWang(){
            var personObj={id:nanoid(),name:this.name}
            this.$store.dispatch("personAbout/addPersonWang",personObj)
            this.name=""
          },
          addPersonServer(){
            this.$store.dispatch("personAbout/addPerson")
          }
        }
    }
</script>

<style scoped>

</style>
Calculation.vue
<template>
<div>
  <h1>当前求和为：{{sum}}</h1>
  <h2>当前求和数放大10倍后为：{{bigSum}}</h2>
  <h3>我在{{school}}学习{{subject}}</h3>
  <h3 style="color: red;">person组件的总人数为：{{personList.length}}</h3>
  <div class="event">
<!--    v-model.number强制转换为数字-->
    <select  class="same" v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button class="same" @click="increment(n)">+</button>
    <button class="same" @click="decrement(n)">-</button>
    <button class="same" @click="incrementOdd(n)">当前和为奇数再加</button>
    <button class="same" @click="incrementWait(n)">等一等再加</button>
  </div>
</div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    export default {
      name: "Calculation",
      data(){
          return{
            n:1, //用户选择的数字
          }
      },
      methods:{
        ...mapMutations('countAbout',{increment:"Addmore",decrement:"Deduce"}),
        ...mapActions('countAbout',{incrementOdd:"addOdd",incrementWait:"addWait"})
      },
      computed:{
        //借助mapState生成计算属性，从state中读取数据（对象写法）
        // ...mapState({he:"sum",xuexiao:"school",xueke:"subject"}),

        //借助mapState生成计算属性，从state中读取数据（数组写法）
        ...mapState('countAbout',["sum","school","subject"]),
        ...mapState('personAbout',["personList"]),

        //借助mapGetters生成计算属性，从getters中读取数据（对象写法）
        // ...mapGetters({bigSum:'bigSum'})
        // 借助mapGetters生成计算属性，从getters中读取数据（数组写法）
        ...mapGetters('countAbout',["bigSum"])
      },
      mounted() {
        console.log(this.$store)
      }
    }
</script>

<style scoped>
.event{
  display: flex;
  justify-content: space-between;
  width: 300px;
}
</style>
App.vue
<template>
  <div class="bg">
    <Calculation></Calculation>
    <hr>
    <Persons></Persons>
  </div>
</template>

<script>
import Calculation from "@/components/Calculation";
import Persons from "@/components/Persons";
export default {
  name: "App",
  components: {Calculation,Persons},
  mounted() {
    console.log("App",this)
  }
}
</script>

请添加图片描述

总结：模块化+命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确
  2. 修改store.js
const countAbout={
	namespaced:true,//开启命名空间
	state:{x},
	mutations:{...},
	actions:{...},
	getters:{
		bigSum(state){
			return state.sum*10
		}
	}
}

const personAbout={
	namespaced:true,//开启命名空间
	state:{...},
	mutations:{...},
	actions:{...}
}

const store=new Vuex.Store({
	modules:{
		countAbout,
		personAbout
	}
})
  1. 开启命名空间后，组件中读取state数据
//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取
...mapState('countAbout',['sum','school','subject']),
  1. 开启命名空间后，组件中读取getters数据
//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取
...mapGetters('countAbout',['bigSum']),
  1. 开启命名空间后，组件中调用dispatch
//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions读取
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
  1. 开启命名空间后，组件中调用commit
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations读取
...mapMutations('countAbout',{incrementOdd:'JIA',decrement:'JIAN'}),
VillanelleS
关注
专栏目录
Vue2中使用Vuex
weixin_44685106的博客
04-30 547
在App.js中,通过 $store.commit() 将方法回调名,以及数据,直接传给mutations对象,在mutations对象中写方法回调,将数据进行处理使用。由于已经引入Vuex,所以在this中会有$store方法, store方法中存在 commit,dispatch,getters,state等属性具体属性见下图。并且在其中进行逻辑运算,然后再通过 context.commit('大写方法名区别actions中的方法',value)方法名(context,value){
在Vue2中配置Vuex
最新发布
weixin_44685106的博客
04-30 1829
Vuex流程（截选Vuex官网）Vuex流程（截选Vuex官网）1.Vuex 是一个专为 Vue.js 应用程序开发的。2.它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在 Vue 之后引入vuex。
一言API（自用）
m0_62068678的博客
08-31 1996
发现一特别好玩社会语录网址：https://api.uixsj.cn/hitokoto/get这儿是原网址：一言API (uixsj.cn)
常用API
虎康的博客
02-27 363
语录 API：https://api.uixsj.cn/hitokoto/get?type=social
vuex---在action中使用axios
wlijun_0808的博客
02-15 850
在action中： // 接收服务器的数据，不用传递参数 addPersonServe(context){ axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then( response =>{ context.commit('ADD',{id:nanoid(),name:response.data})
SoulPosion:一言 API 心灵毒鸡汤
05-10
心灵毒鸡汤一言 使用方法 安装 MongoDB 并创建 Collection soulposion 编辑 config/default.json 设置你的连接字符串和监听地址端口 安装依赖 运行 npm install 使用 npm run dev 或者 node index.js 启动 HTTP API 文本模式 URL /text   仅返回正文本体 JSON 模式 URL /json   返回 JSON {"content":"正文", "author": "作者", "source": "来源"} 此接口也支持 JSONP 添加参数 ?callback=xxx 即可获得 jsonp 调用 Write 模式 URL /write   返回一个 Content-Type 为 application/javascript 的回应，直接使用 <script src="https://exa
uniApp 学习笔记总结(二)
探索技术与实践的旅程，分享编程经验与工具使用心得，助力开发者提升技能。
04-29 1367
1. 如何发送get请求 2. 数据缓存 3. 图片上传 + 预览 3.1 图片上传 3.2 图片预览 4. 条件注释实现跨段兼容 5. 导航跳转 + 传参 5.1 利用navigator组件进行跳转 (组价式跳转) 5.2 API页面跳转 (编程式导航) 6. uni-app组件创建引入 + 组件生命周期 7. 组件之间的通讯方式 8. uni-ui组件库 9. 对于请求可能统一封装js文件来处理
Vue全家桶(vue-router+vuex)
06-21
其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之vue-router和vuex、基于权限控制实现...
vue全家桶之vuex数据状态管理
m0_62371650的博客
09-24 1345
vue全家桶之vuex数据状态管理
Vue-CLI与Vuex使用方法实例分析
01-21
本文实例讲述了Vue-CLI与Vuex使用方法。分享给大家供大家参考，具体如下： 1、通过Vue-CLI创建项目 Vue-CLI是Vue用于创建Vue项目的脚手架工具，它可以快速帮你创建一个Vue项目的文件目录，使Vue开发更加便捷、标准化...
使用UniApp对接一言API接口
qq_46016042的博客
05-07 217
一言Api接口地址：https://api.uixsj.cn/hitokoto/get 配置文件我就不写了 <template> <view class="uni-padding-wrap uni-common-mt" > <view> {{data.content}} </view&gt...
Vuex学习笔记
Azbtt的博客
11-05 583
Vuex学习笔记
Vuex响应式原理--解决state属性问题满足响应式
qq_45001147的博客
03-17 3693
- 我们知道vuex的store的state是响应式的，当state中的数据发生改变时，vue组件会自动更新。 必须遵循一些规则： 提前在store初始化所需的属性 当给state中添加新的属性是使用下面方式： 方式一：使用Vue.set(obj,"新属性名称","对应的属性值") 方式二：用新对象对就对象重新赋值 在state删除已经存在的属性： 使用“delete+某个属性...
Vuex中比较实用的各个知识点用法与总结
爱码士&的博客
08-18 385
注：本章知识点全部内容总结来自于尚硅谷男神天禹老师vue3课程资料，感谢老师的开源精神和无私奉献。整理好以便于以后的复习也希望能分享给需要的人，附上老师课程地址，讲课真的很不错课程地址连接 目录 1.概念 2.何时使用？ 3.搭建vuex环境 4.基本使用 5.getters的使用 6.四个map方法的使用 7.模块化+命名空间 1.概念 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件...
vue常用之状态管理的vuex的“模块化编码“
空投在我怀里的博客
03-14 217
一、目的：让代码更好维护，让多种数据分类更加明确。 二、修改store.js const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } } } const personAbout = { namespaced.
Vue2（三）
lushixuan12345的博客
11-16 668
Vue一、Vue核心Vue核心Vue第一部分的代码二、Vue组件化编程Vue组件化编程Vue第二部分+第三部分的代码三、Vue脚手架Vue脚手架Vue第二部分+第三部分的代码四、Vue中的ajax五、Vuex六、Vue-router七、Vue UI组件库 一、Vue核心 Vue核心 Vue第一部分的代码 二、Vue组件化编程 Vue组件化编程 Vue第二部分+第三部分的代码 三、Vue脚手架 Vue脚手架 Vue第二部分+第三部分的代码 四、Vue中的ajax 五、Vuex 六、Vue-router 七、V
聊一聊常见的网络请求方式（AJAX、$.ajax()、fetch 、axios）
summer爱前端
12-10 3618
对于前端伙伴们来说，学习各种请求方式应该是一个必经之路，今天简单总结一下常见的请求方式（ajax、fetch、$.ajax()、axios），一起看看吧
2019Hexo博客Next主题深度美化 打造一个炫酷博客(2)-奥怪的小栈
奥怪的小栈
07-24 1128
本文转载于：2019Hexo博客Next主题深度美化 打造一个炫酷博客(2)-奥怪的小栈 这篇文章告诉你在搭建好博客后,面对网上千篇一律的美化教程怎么才能添加自己独特点,使人眼前一亮. 本站基于 HEXO+Github 搭建。 所以你需要准备好HEXO+Github等相关软件和工具。详细我会在下面放出。 前言 由于网上已经有很多而且很详细的hexo搭博客教程了，我就不再学习他们，把全部过程都...
好用API收集总汇
反杀爱意的博客
05-31 835
个人收藏整理的一些觉得好用的API接口，不定时更新 网易云评论 简述：爬取来自网易云音乐的评论数据，数据每天更新，美中不足的是获取到的评论质量参差不齐，而且表情只会显示成短代码 ( 想解决就写个正砸表达式把表情过滤掉？)。 作者主页：https://4gml.com 接口地址：https://api.4gml.com/NeteaseMusic?type=bq 返回格式：可指定，默认返回 text/javascript 参数：这里不再赘述，需要的可以到作者原链接中查看 https://www.4gml.com
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值