【VUE2】第五期——VueCli创建项目、Vuex多组件共享数据、json-server——模拟服务端api

news2025/3/16 5:17:26

黑马程序员视频地址:091-vuex的基本认知_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1HV4y1a7n4?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=91


目录

1 VueCli 自定义创建项目

2 Eslint代码规范

2.1 规则表 

2.2 手动修改对照文档

2.3 通过插件修改

3 Vuex

3.1 创建仓库

3.1.1 安装Vuex包

3.1.2 创建仓库

3.1.3 将仓库挂载到vue实例上

3.2 仓库中的共享数据与方法 

3.2.1 state状态(数据)

3.2.1.1 提供数据

3.2.1.2 访问数据

3.2.1.2.1 $store

 3.2.1.2.2 mapState

3.2.1.2 修改数据与严格模式

3.2.2 mutations(同步方法)

3.2.2.1 提供方法

3.2.2.2 使用方法

3.2.2.2.1 $store

3.2.2.2.2 mapMutations

3.2.3 actions(异步方法)

3.2.3.1 提供方法 

3.2.3.2 使用方法

3.2.3.2.1 $store

3.2.3.2.2 mapActions

3.2.4 getters(计算数据)

3.2.4.1 提供计算数据

3.2.4.2 使用计算数据

3.2.4.2.1 $store

 3.2.4.2.2 mapGetters

3.2.5 总结

3.3 module模块化

3.3.1 提供数据/方法

 3.3.2 访问数据/方法

3.3.2.1 打印对比是否开启命名空间对$store中属性的影响 

3.3.2.2 未开启命名空间

3.3.2.3 开启命名空间

 4 json-server——模拟服务端api

4.1 使用步骤 

4.2 使用语法

4.2.1 获取数据

4.2.2 修改数据


1 VueCli 自定义创建项目

1.安装脚手架 (已安装)

npm i @vue/cli -g

2.创建项目

vue create hm-exp-mobile

以上两步与之前普通创建vue2项目一样


不同操作:

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义


3.配置自定义项目 

  • 手动选择功能

  • 选择vue的版本

  3.x
> 2.x

  • 是否使用history模式

  • 选择css预处理

  • 选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范)

  • 比如:const age = 18; => 报错!多加了分号!后面有工具,一保存,全部格式化成最规范的样子

  • 选择校验的时机 (直接回车)

  • 选择配置文件的生成方式 (直接回车)

  • 是否保存预设,下次直接使用? => 不保存,输入 N

  • 等待安装,项目初始化完成

  • 启动项目
npm run serve

2 Eslint代码规范

2.1 规则表 

ESLint:是一个代码检查工具,用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时,我们使用的是 JavaScript Standard Style 代码风格的规则

2.2 手动修改对照文档

打开 ESLint 规则表,使用页面搜索(Ctrl + F)这个代码,查找对该规则的一个释义。

2.3 通过插件修改

特点:

eslint会自动高亮错误显示

通过配置,eslint会自动帮助我们修复错误

配置:

eslint的配置文件必须在根目录下,这个插件才能才能生效  

加入以下代码:

// 当保存的时候,eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 保存代码,不自动格式化
"editor.formatOnSave": false

如果有以下语句记得删除,即自动格式化:

"editor.formatOnSave": true

3 Vuex

3.1 创建仓库

3.1.1 安装Vuex包

安装vuex与vue-router类似,vuex是一个独立存在的插件,如果脚手架初始化没有选 vuex,就需要额外安装

yarn add vuex@3 或者 npm i vuex@3

注意:报错可能是因为脚手架安装的eslint版本太高了,如果使用npm安装,可以在后面添:

npm i vuex@3 --legacy-peer-deps

进行强制安装

安装好后,为了维护项目目录的整洁,可以在src目录下新建一个store目录其下放置一个index.js文件 (和 router/index.js 类似) 


3.1.2 创建仓库

//store/index.js
// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库
export default store

3.1.3 将仓库挂载到vue实例上

//main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

此刻起, 就成功创建了一个空仓库!!


3.2 仓库中的共享数据与方法 

3.2.1 state状态(数据)

3.2.1.1 提供数据
//store/index.js
// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别:
  // 1.data 是组件自己的数据, 
  // 2.state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  }
})

3.2.1.2 访问数据
3.2.1.2.1 $store

 1.Vue模板中获取 this.$store
    模板中:     {{ $store.state.xxx }}
    组件逻辑中:  this.$store.state.xxx
 2.js文件中获取 import 导入 store
    JS模块中:   store.state.xxx

这样写太复杂,可以使用下面的映射方法


 3.2.1.2.2 mapState

第一步:导入mapState (mapState是vuex中的一个函数)(在需要该方法的vue文件中导入) 

import { mapState } from 'vuex'

第二步:采用数组形式引入state属性

mapState(['count']) 

上面这个语句最终得到类似于下面这个结果 

count () {
    return this.$store.state.count
}

 第三步:利用展开运算符将导出的状态映射给计算属性

  computed: {
    ...mapState(['count'])
  }

 接下来就相当于conputed计算属性中有了count这个属性,可以直接用了

要区分的是,虽然写在computed中,但state并没有直接修改数据的权利,要使用getters


3.2.1.2 修改数据与严格模式

state中的数据实操上可以直接修改,如下:

<template>
  <div class="box">
    <h2>Son1 子组件</h2>
    从vuex中获取的值: <label>{{$store.state.count}}</label>
    <br>
    <button @click="set">值 + 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son1Com',
  methods: {
    set () {
      this.$store.state.count++
    }
  }
}
</script>

 但并不建议这样做,违背了vuex的单向数据流初衷,我们建议只使用mutations修改数据

通过 配置strict: true 可以开启严格模式,开启严格模式后,直接修改state中的值会报错

//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  strict: true,
  state: {
    count: 200
  }
})

export default store

3.2.2 mutations(同步方法)

3.2.2.1 提供方法
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  strict: true,
  state: {
    count: 200
  },
  mutations: {
    // 方法里参数:第一个参数是当前store的state属性
    // 第二个参数:传递进来的数据,只能传一个,多参数可用对象
    addCount (state, n) {
      state.count += n
    }
  }
})

export default store

3.2.2.2 使用方法
3.2.2.2.1 $store

语法:

this.$store.commit('方法名', 数据)

示例:

<template>
  <div class="box">
    <h2>Son1 子组件</h2>
    从vuex中获取的值: <label>{{$store.state.count}}</label>
    <br>
    <button @click="set(1)">值 + 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son1Com',
  methods: {
    set (num) {
      this.$store.commit('addCount', num)
    }
  }
}
</script>

3.2.2.2.2 mapMutations

与mapState使用步骤相同,此处不再赘述,

注意:

1. mutations为方法而不是state那样的计算属性,因此要放在methods中进行展开

2. 传参直接加括号传即可,因为...mapMutations(['addCount'])等效于

addCount (n) {
   this.$store.commit('addCount', n)
}

示例: 

<template>
  <div class="box">
    <h2>Son2 子组件</h2>
    从vuex中获取的值:<label>{{count}}</label>
    <br />
    <button @click="addCount(-1)">值 - 1</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'Son2Com',
  //computed: {
    //...mapState(['count'])
  //},
  methods: {
    ...mapMutations(['addCount'])
  }
}
</script>

注意:Vuex中mutations中要求不能写异步代码,如果有异步的ajax请求,应该放置在actions中


3.2.3 actions(异步方法)

3.2.3.1 提供方法 

示例:1s后修改数据 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  //...
  mutations: {
    addCount (state, n) {
      state.count += n
    }
  },
  actions: {
    setAsyncCount (context, num) {    //context在模块中理解,此处就当作是store仓库
      setTimeout(() => {
        context.commit('addCount', num) 
        //actions不能直接修改state中的数据,需要调用mutations进行修改
      }, 1000)
    }
  }
})

export default store

3.2.3.2 使用方法
3.2.3.2.1 $store
<template>
  <div class="box">
    <h2>Son1 子组件</h2>
    从vuex中获取的值: <label>{{$store.state.count}}</label>
    <br>
    <button @click="set(1)">值 + 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son1Com',
  methods: {
    set (num) {
      this.$store.dispatch('setAsyncCount', num)
    }
  }
}
</script>

3.2.3.2.2 mapActions

与mapMutations使用方法类似,不再赘述

<template>
  <div class="box">
    <h2>Son2 子组件</h2>
    从vuex中获取的值:<label>{{count}}</label>
    <br />
    <button @click="setAsyncCount(-1)">值 - 1</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'Son2Com',
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['addCount']),
    ...mapActions(['setAsyncCount'])
  }
}
</script>

等价:

methods: {
  setAsyncCount (n) {
    this.$store.dispatch('setAsyncCount', n)
  },

3.2.4 getters(计算数据)

3.2.4.1 提供计算数据
const store = new Vuex.Store({
  //...
  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
    filterList (state) {
      return state.list.filter(item => item > 5)
    }
    // 简写:
    // filterList: state => state.list.filter(item => item > 5)
  }
})

3.2.4.2 使用计算数据
3.2.4.2.1 $store

与state一样 

<div>{{ $store.getters.filterList }}</div>

 3.2.4.2.2 mapGetters
computed: {
    ...mapGetters(['filterList'])
}
 <div>{{ filterList }}</div>

3.2.5 总结


3.3 module模块化

3.3.1 提供数据/方法

写法与前文中一样,只不过把实例化对象内部的state、mutations、actions、getters对象抽离出放在单独个js文件中,再导出,最后再在实例化对象中的module对象上挂载即可

示例:定义两个模块user、setting

user: 

//modules/user.js
const state = {
  userInfo: {
    name: 'zs',
    age: 18
  }
}


const getters = {
  // 分模块后,state指代子模块的state
  UpperCaseName (state) {
    return state.userInfo.name.toUpperCase()
  }
}

//默认模块中的 mutation 和 actions 会被挂载到全局,需要开启命名空间,才会挂载到子模块
const mutations = {
  setUser (state, newUserInfo) {
    state.userInfo = newUserInfo
  }
}

const actions = {
  setUserSecond (context, newUserInfo) {
    // 将异步在action中进行封装
    setTimeout(() => {
      // 调用mutation   context上下文,默认提交的就是自己模块的action和mutation
      context.commit('setUser', newUserInfo)
    }, 1000)
  }
}


export default {
  namespaced: true, //开启命名空间
  state,
  mutations,
  actions,
  getters
}

setting:

// modules/setting.js

const mutations = {
  setTheme (state, newTheme) {
    state.theme = newTheme
  }
}

const actions = {}

const getters = {}

export default {
//官方推荐在模块化中,state以方法的形式进行书写,原因与data一样
  state () {
    return {
      theme: 'dark',
      desc: '描述真呀真不错'
    }
  },
  mutations,
  actions,
  getters
}

在store/index.js文件中的modules配置项中,注册这两个模块

import user from './modules/user'
import setting from './modules/setting'

const store = new Vuex.Store({
    modules:{
        user,
        setting
    }
})

 3.3.2 访问数据/方法

3.3.2.1 打印对比是否开启命名空间对$store中属性的影响 

红色框:cart组件内的数据与方法

蓝色框: 全局的数据与方法

未开启命名空间:

开启命名空间:

 


3.3.2.2 未开启命名空间

未开启命名空间时,模块中的数据/方法存在时的变量名称与位置和全局数据/方法一样,

因此获取数据/方法的步骤语法也完全一样,此处就不再过多赘述,直接列出:

xxx代表数据/方法变量名,yyy代表模块名,n代表参数,组件逻辑指的是vue文件script内,模板指的是vue文件template内部标签中

mapxxx组件逻辑中直接使用模板中直接使用JS文件中
statemapState(['yyy'])this.$store.state.yyy.xxx$store.state.yyy.xxxstore.state.yyy.xxx
gettersmapGetters(['xxx'])this.$store.getters.xxx$store.getters.xxxstore.getters.xxx
mutationsmapMutations(['xxx'])this.$store.commit('xxx', n)$store.commit('xxx', n)store.commit('xxx', n)
actionsmapActions(['xxx'])this.$store.dispatch('xxx', n)$store.dispatch('xxx', n)store.dispatch('xxx', n)

注意:不需要死记硬背,观察3.3.4.1中的位置与名称即可

1.mapXXX(['aaa', 'bbb'])可以同时映射多个,开启命名空间时也同理

2.无论是否开启命名空间,只要写在模块中,state中的数据就会被套一层模块名,

因此要用mapState(['yyy'])

3.mapxxx使用前要引入,如 import { mapxxx } from 'vuex'

4.state、getters的mapxxx要在computed中进行展开,而mutations与actions的则要在methods中

5.展开之后相当于直接给computed/methods添加了同名的数据/方法,使用方法与事项与不使用vuex时的一样

6.在js中使用前要引入,如 import store from '@/store/index.js'

7.mutations与actions中的参数只能传一个,要传多个需要用数组或对象


3.3.2.3 开启命名空间

开启命名空间时,除了state保持不变,其他三类的数据/方法名都会被加上 模块名/ ,但本质使用方法仍不变

因此直接把原本的xxx替换为yyy/xxx即可,除此之外mapxxx还增加了一种写法,见下表 

mapxxx组件逻辑中直接使用模板中直接使用
state

mapState(['yyy'])

mapState('yyy', ['xxx'])

this.$store.state.yyy.xxx$store.state.yyy.xxx
getters

mapGetters(['yyy/xxx'])

mapGetters('yyy', ['xxx'])

this.$store.getters.['yyy/xxx']$store.getters.['yyy/xxx']
mutations

mapMutations(['yyy/xxx'])

mapMutations('yyy', ['xxx'])

this.$store.commit('yyy/xxx', n)$store.commit('yyy/xxx', n)
actions

mapActions(['yyy/xxx'])

mapActions('yyy', ['xxx'])

this.$store.dispatch('yyy/xxx', n)$store.dispatch('yyy/xxx', n)

注意:

1.由于篇幅原因,我删除了js这一列,但其也一样,将xxx改为yyy/xxx即可

2.记得加[''],因为yyy/xxx是一个整体作为变量名


 4 json-server——模拟服务端api

4.1 使用步骤 

第一步:安装全局工具 json-server (全局工具仅需要安装一次)

yarn global add json-server 或 npm i json-server  -g

第二步:新建一个.json文件

推荐在vue等项目根目录中新建一个db文件夹,再在其中创建一个index.json文件

.json文件书写示例:

{
  "cart": [
    {
      "id": 100001,
      "name": "低帮城市休闲户外鞋天然牛皮COOLMAX纤维",
      "price": 128,
      "count": 1,
      "thumb": "https://yanxuan-item.nosdn.127.net/3a56a913e687dc2279473e325ea770a9.jpg"
    },
    {
      "id": 100002,
      "name": "网易味央黑猪猪肘330g*1袋",
      "price": 39,
      "count": 10,
      "thumb": "https://yanxuan-item.nosdn.127.net/d0a56474a8443cf6abd5afc539aa2476.jpg"
    },
    {
      "id": 100003,
      "name": "KENROLL男女简洁多彩一片式室外拖",
      "price": 128,
      "count": 2,
      "thumb": "https://yanxuan-item.nosdn.127.net/eb1556fcc59e2fd98d9b0bc201dd4409.jpg"
    },
    {
      "id": 100004,
      "name": "云音乐定制IN系列intar民谣木吉他",
      "price": 589,
      "count": 1,
      "thumb": "https://yanxuan-item.nosdn.127.net/4d825431a3587edb63cb165166f8fc76.jpg"
    }
  ],
  "friends": [
    { "id": 1, "name": "zs", "age": 18 },
    { "id": 2, "name": "ls", "age": 19 },
    { "id": 3, "name": "ww", "age": 20 }
  ]
}

第三步:进入 db 目录,执行命令,启动后端接口服务

使用--watch 参数 可以实时监听 json 文件的修改

json-server  --watch  index.json

4.2 使用语法

4.2.1 获取数据

axios.get('http://localhost:3000/cart')

4.2.2 修改数据

axios.patch(`http://localhost:3000/cart/${obj.id}`, {
        count: obj.newCount
      })

要修改哪个值就在对象中传哪个值

更多使用方法见 json-server - npm

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2315797.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

rpmlib(SetVersions) is needed by can-uilts-v2019.00.0-alt1.aarch64

在我在Linux中安装离线CAN工具时&#xff0c;出现了一个问题&#xff0c; rootwanghuo:~# rpm -ivh can-uilts-v2019.00.0-alt1.aarch64.rpm error: Failed dependencies:rpmlib(SetVersions) is needed by can-uilts-v2019.00.0-alt1.aarch64 意思是尝试安装 can-uilts-v20…

CNN 稠密任务经典结构

FCN UNet FPN FCNUNETFPNpadding无&#xff08;逐渐变小&#xff09; 有&#xff08;左右对称&#xff09;上采样 双线性双线性 最近邻跳跃链接 相加 Cropcat 1x1卷积相加 三个网络差不多&#xff0c;UNet名字最直观&#xff0c;后续流传…

算法刷题整理合集(二)

本篇博客旨在记录自已的算法刷题练习成长&#xff0c;里面注有详细的代码注释以及和个人的思路想法&#xff0c;希望可以给同道之人些许帮助。本人也是算法小白&#xff0c;水平有限&#xff0c;如果文章中有什么错误或遗漏之处&#xff0c;望各位可以在评论区指正出来&#xf…

STM32配套程序接线图

1 工程模板 2 LED闪烁 3LED流水灯 4蜂鸣器 5按键控制LED 6光敏传感器控制蜂鸣器 7OLED显示屏 8对射式红外传感器计次 9旋转编码器计次 10 定时器定时中断 11定时器外部时钟 12PWM驱动LED呼吸灯 13 PWM驱动舵机 14 PWM驱动直流电机 15输入捕获模式测频率 16PWMI模式测频率占空…

Houdini学习笔记

1. Houdini中一次只能显示一个物体 如果要都显示 需要 merge 节点 粉色的是 以参考显示 2.对任意一个节点按F1 可以弹出houdini官方文档 3. 恢复视角 Space H,居中 Space G 居中选中物体

仿Ant Design Vue风格自定义浏览器滚动条样式

仿Ant Design Vue风格自定义浏览器滚动条样式 问题原因 浏览器默认的滚动条样式很丑&#xff0c;无法满足需求&#xff0c;需要自定义滚动条样式&#xff0c;参考ant-design-vue的样式 css修改滚动相关属性可查阅官方文档 选择器介绍 ::webkit-scrollbar&#xff1a;滚动条…

单元测试、系统测试、集成测试、回归测试的步骤、优点、缺点、注意点梳理说明

单元测试、系统测试、集成测试、回归测试的梳理说明 单元测试 步骤&#xff1a; 编写测试用例&#xff0c;覆盖代码的各个分支和边界条件。使用测试框架&#xff08;如JUnit、NUnit&#xff09;执行测试。检查测试结果&#xff0c;确保代码按预期运行。修复发现的缺陷并重新测…

网络安全反渗透 网络安全攻防渗透

网络渗透防范主要从两个方面来进行防范&#xff0c;一方面是从思想意识上进行防范&#xff0c;另一方面就是从技术方面来进行防范。 1.从思想意识上防范渗透 网络攻击与网络安全防御是正反两个方面&#xff0c;纵观容易出现网络安全事故或者事件的公司和个人&#xff0c;在这些…

《GitHub网路访问不稳定:解决办法》:此文为AI自动生成

《GitHub网路访问不稳定&#xff1a;解决办法》&#xff1a;此文为AI自动生成 GitHub 网路访问不稳定初现 在当今数字化时代&#xff0c;软件开发行业蓬勃发展&#xff0c;GitHub 作为全球最大的代码托管平台&#xff0c;已然成为无数开发者不可或缺的 “宝库”。它不仅汇聚了…

G-Star 公益行 | 温暖相约 3.30 上海「开源×AI 赋能公益」Meetup

你是否曾想过&#xff0c;在这个数字化浪潮席卷的时代&#xff0c;公益组织如何突破技术瓶颈&#xff1f;当 AI 成为热门话题&#xff0c;它能为公益事业带来怎样的温度&#xff1f;开源的力量&#xff0c;如何让每一份善意都拥有无限可能&#xff1f; G-Star 公益行&#xff…

docker pull 镜像问题

问题一&#xff1a;pull镜像报错:time out 分析&#xff1a;源问题&#xff0c;网络不稳定&#xff0c;更换加速源&#xff0c;地址&#xff1a;/etc/docker/daemon.json 解决&#xff1a;更换地址&#xff0c;如下&#xff0c;然后敲&#xff1a;docker daemon-reload &&…

STAR Decomposition 一种针对极端事件的信号分解方法 论文精读加复现

STAR 分解&#x1f680; 在时序预测任务中&#xff0c;为了情绪化信号的各种成分&#xff0c;例如趋势信息季节信息等往往都需要对信号进行分解。目前熟知的分解方式有很多种&#xff0c;经验模态分解 EMD 变分模态分解 VMD &#xff0c;还有 集合经验模态分解 EEMD&#xff0c…

基于SpringBoot + Vue 的房屋租赁系统

基于springboot的房屋租赁管理系统-带万字文档 SpringBootVue房屋租赁管理系统 送文档 本项目有前台和后台两部分、多角色模块、不同角色权限不一样 共分三种角色&#xff1a;用户、管理员、房东 管理员&#xff1a;个人中心、房屋类型管理、房屋信息管理、预约看房管理、合…

Excel中国式排名,3种方法!

大家好&#xff0c;我是小鱼。 什么是中国式排名呢&#xff1f; 举个例子比如说公司一共有10名员工进行成绩考核&#xff0c;如果9个人考核成绩都是90分&#xff0c;你是89分&#xff0c;按照国际惯用的排名法则&#xff1a;9 个人考核成绩并列第一&#xff0c;你第10名&…

Flutter:跑马灯公告栏

组件 import dart:async; import package:flutter/material.dart; import package:ducafe_ui_core/ducafe_ui_core.dart;class MarqueeNotice extends StatefulWidget {/// 公告数据列表&#xff0c;每条公告包含title和descfinal List<Map<String, String>> notic…

Jmeter下载及环境配置

Jmeter下载及环境配置 java环境变量配置配置jdk环境变量检查是否配置成功JMeter下载 java环境变量配置 访问地址&#xff1a; https://www.oracle.com/cn/java/technologies/downloads/ 注意&#xff1a;需要自己注册账号 下载完成&#xff0c;解压后的目录为&#xff1a; …

【初级篇】如何使用DeepSeek和Dify构建高效的企业级智能客服系统

在当今数字化时代,企业面临着日益增长的客户服务需求。使用Dify创建智能客服不仅能够提升客户体验,还能显著提高企业的运营效率。关于DIfy的安装部署,大家可以参考之前的文章: 【入门级篇】Dify安装+DeepSeek模型配置保姆级教程_mindie dify deepseek-CSDN博客 AI智能客服…

微信小程序threejs三维开发

微信小程序threejs开发 import * as THREE from three; const { performance, document, window, HTMLCanvasElement, requestAnimationFrame, cancelAnimationFrame, core, Event, Event0 } THREE .DHTML import Stats from three/examples/jsm/libs/stats.module.js; im…

大数据-spark3.5安装部署之standalone模式

真实工作中还是要将应用提交到集群中去执行&#xff0c;Standalone模式就是使用Spark自身节点运行的集群模式&#xff0c;体现了经典的master-slave模式。集群共三台机器&#xff0c;具体如下 u22server4spark&#xff1a; master worker u22server4spark2&#xff1a; worke…

技术视界|构建理想仿真平台,加速机器人智能化落地

在近期的 OpenLoong 线下技术分享会 上&#xff0c;松应科技联合创始人张小波进行了精彩的演讲&#xff0c;深入探讨了仿真技术在机器人智能化发展中的关键作用。他结合行业趋势&#xff0c;剖析了现有仿真平台的挑战&#xff0c;并描绘了未来理想仿真系统的设计理念与实现路径…