06-vue(父(主)组件与子组件之间的传值,export与import的基本使用,一个分组件完成的音乐播放器案例,脚手架初识别)

2024-03-14 04:48
文章标签 javascript 使用 组件 音乐 vue 基本 完成 传值 案例 frontend 之间 import 识别 06 播放器 脚手架 export 与子

本文主要是介绍06-vue(父(主)组件与子组件之间的传值,export与import的基本使用,一个分组件完成的音乐播放器案例,脚手架初识别)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

01-父组件传值子组件

在这里插入图片描述

App.vue文件(主组件)
<template><!-- 父组件传值子组件 就是说在父组件里面可以拿到子组件的this就可以访问子组件的data和methods,并修改里面的值 怎么拿? 1.首先在子组件使用的时候,"标签"上写一个ref="值"2.父组件this.$refs.上面ref这个值  === 子组件this--><div><p>我是父组件</p><button @click="btnClick">点我</button><!-- 3.使用组件 --><son ref="son"></son></div>
</template><script>
// 1.导入子组件
import son from "./components/son";
export default {// 2.注册组件components: {son},methods: {btnClick() {//按按钮修改子组件的msg,和调用子组件的sayHi方法.//console.log(this.$refs.son);//这就等价于子组件thisthis.$refs.son.sonMsg = "呵呵";this.$refs.son.sonSayhi();}},mounted() {//如果你想在 进入页面就改子组件中的值,而不是按按钮就写在钩子mounted函数里面// 不能写在created里面,因为父组件和子组件的生命周期, 都是独立的. // 就算父组件创建了,子组件说不定还没创建好,所以访问子组件的msg访问不到// 那如果是mounted里面就不一样,mounted都渲染出来那子组件里的msg肯定也可以访问到//console.log(this.$refs.son.sonMsg);this.$refs.son.sonMsg='嘻嘻嘻嘻嘻嘻嘻'},
};
</script><style>
</style>
son.vue(子组件)
<template><div class="son"><p>我是子组件</p><div>{{sonMsg}}</div></div>
</template><script>
export default {data() {return {sonMsg: "我是子组件的msg"};},methods: {sonSayhi() {console.log("我是子组件的方法");}}
};
</script><style>
.son {width: 200px;height: 200px;background-color: pink;
}
</style>

效果展示说明: 没点按钮之前子组件的msg:"我是子组件的msg,
由于在主组件的mounted钩子函数中设置了一进入页面修改子组件的msg:“嘻嘻嘻嘻嘻嘻嘻”
然后又设置了点击按钮修改子组件的msg:‘呵呵’,并调用了子组件的方法打印了出来

在这里插入图片描述

02-子组件传值父组件

在这里插入图片描述

App.vue文件(主组件)
<template><div><p>我是主组件</p><div>{{fatherMsg}}</div><!-- 3.使用组件 --><son></son></div>
</template><script>
// 导入组件
import son from './components/son'
export default {// 注册组件components:{son},data() {return {fatherMsg: "我是主组件的msg"};},methods: {fatherSayhi() {console.log("我是主组件的方法");}}
};
</script><style>
</style>
son.vue文件(子组件)
<template><!-- 子组件传值父组件就是说可以拿到父组件的this,可以访问并修改父组件的值子组件this.$parent  === 父组件this--><div class="son"><p>我是子组件</p><button @click="btnClick">点我</button></div>
</template><script>
export default {methods: {btnClick() {// 修改父组价的data中的msg,并调用父节点的方法this.$parent.fatherMsg = "呵呵";this.$parent.fatherSayhi();}},mounted() {// 如果你想直接打开页面就修改主组件的msg值,而不是按按钮就写在mounted钩子函数里//注意: 父组件的生命周期和 子组件的生命周期是独立的.//这里要延时,因为怕主组件还没渲染出来setTimeout(() => {//console.log(this.$parent.fatherMsg);this.$parent.fatherMsg = "嘻嘻嘻嘻嘻嘻";}, 10);}
};
</script><style>
.son {width: 300px;height: 300px;background-color: aqua;
}
</style>

效果展示说明: 没点按钮之前子组件的msg:"我是主组件的msg,
由于在子组件的mounted钩子函数中设置了一进入页面修改主组件的msg:“嘻嘻嘻嘻嘻嘻”
然后又设置了点击按钮修改主组件的msg:‘呵呵’,并调用了主组件的方法打印了出来
在这里插入图片描述

03-export与import的基本使用

在这里插入图片描述

App.vue文件(主组件)
<template><div><p>我是主组件</p><son></son></div>
</template><script>
// 导入子组件
import son from './components/son'
// 导入外部js文件
import obj from './assets/sb'export default {
//    注册组件components:{son},created() {console.log(obj)},
}
</script><style></style>
son.vue文件(子组件)
<template><div><p>我是子组件</p><p>{{msg}}</p></div>
</template><script>
export default {data() {return {msg:'你好鸭'}},
}
</script><style></style>
sb.js文件(assets里面)
let obj = {name: '杨杨',age: 19,gender: '男'
}//只能有一个输出
export default obj;

效果展示说明: 运行主组件,(主组件里面有子组件,也有sb.js文件)
子组件son.vue与sb.js都有导出export default(导出只能有一个输出), 主组件就有导入import这两个文件
sb.js文件就写了一个obj对象并且写在主组件的created里面打印出来,所以一打开页面就会出现打印台有这个obj对象
在这里插入图片描述


04-音乐播放器(网易云接口)

在这里插入图片描述

App.vue组件
<!-- 播放器制作步骤: 1.把静态资源(图片)弄进来,assets文件夹2.将模板中的html和css方法App.vue中响应的位置. 修改一下html/css引入的图片路径3.实现搜索歌曲,获取歌曲数据a. input框 v-model="songName"  @keyup.enter="search搜索事件"b. search搜索事件 b1: 安装axios  npm i axiosb2: 导入axios  import axios from axiosb3: 使用axios  axios({method:'';url:"";params:""}).then((res)=>{});b4: 把返回的歌曲数据给保存. 4.把左侧歌曲列表抽成一个组件a.创建一个子组件 songList, 把响应的html放到子组件中. b.在App.vue中导入这个子组件b1: 导入 importb2: 注册 components:{ songList } b3: 把组件当做标签来使用. c.把搜索到的歌曲列表数据 传到子组件中. c1.在子组件 "标签" 上写一个ref="值" c2.父组件this.$refs.值 === 子组件的thisc3.子组件中有一个保存数据的数组list,list中就存放了数据.  c4.渲染出来.5.给左侧列表加上一个iscroll滚动条. 5.1 安装插件  在项目目录下 npm i iscroll5.2 导入插件  在左侧子组件里面导入插件  import 名字 from iscroll5.3 使用a.最佳结构是三层,最外层是用来实例化iscroll, 中间层是用来做滚动的. b.css样式: 包装最外层有高度, 有relative定位, 默认滚动条要去掉c.实例化加配置,代码写在钩子函数mounted里面new 名字(最外层dom,{mouseWheel: true,scrollbars: true});d.刷新d1:子组件中写一个刷新的方法. this.$nextTick(()=>{this.myIscroll.refresh();});d2:在父组件的 更新数据那里 调用这个刷新的方法.  6.点击(单击/双击)左侧歌曲列表的歌曲 6.1 在歌曲li标签上设置一个点击事件  @click="liClick(item.id)"6.2 在这个liClick事件里,  调用的是父组件的方法:  getSongInfo涉及到子组件调用父组件的方法. 6.3 在父组件的 getSongInfo 方法里, 就可以发送ajax请求,获取该歌曲的播放url和评论数据6.4 播放的url就直接使用(因为我们把这个播放条就直接写在父组件里. )7.评论列表7.1 右侧评论列表抽成一个组件a.写一个子组件, html结构拷贝过去b.父组件中导入这个评论子组件. 7.2 获取评论数据. a.在父组件的getSongInfo 方法中 发送ajax请求,获取歌曲评论数据. b.把评论数据 保存到 评论子组件里. 父组件传值给子组件. c.数据已经在子组件了,那就渲染出来. 7.3 评论子组件要设置滚动条. 8.中间播放动画部分8.1 抽取成一个子组件把相对应的html拷贝过去,图片的路径要记得改一下. 在父组件中应用 (导入组件, 注册组件, 使用组件)8.2 控制是否有动画,其实就是给这三个图片是否加playing这个class. 那我们就可以搞一个变量存放控制这个playing的值. 比如这个值为true的时候,就加上这个playing这个类. 比如这个值为false的时候,就不加这个playing这个类. 8.3 audio音频播放标签,有play和pause方法. play()是开始播放音乐的时候触发就在这里把控制是否加playing这个类的值改成true. pause()是暂停播放音乐的时候触发. 就在这里把控制是否加playing这个类的值改成false9.换歌曲的图片9.1 在获取歌曲信息方法里面, 再发送ajax请求,获取歌曲详情(图片)9.2 把这个图片地址 传给 middle.vue里面去. 9.3 把图片给替换. -->
<template><div class="wrap"><div class="play_wrap" id="player"><!-- 上面搜索的 --><div class="search_bar"><img src="./assets/images/player_title.png" alt /><input type="text" v-model="songName" @keyup.enter="search" /></div><!-- 下面歌曲播放部分 --><div class="center_con"><!-- 左侧歌曲列表 --><songList ref="songList"></songList><!-- 中间动画部分 --><middle ref="middle"></middle><!-- 右侧评论部分 --><comments ref="comments"></comments></div><!--下面的 播放条 --><div class="audio_con"><audio @pause="pauseEvent" @play="playEvent" :src="songUrl" autoplay controls loop class="myaudio" ></audio></div></div></div>
</template><script>
//安装导入axios
import axios from "axios";
//导入左边歌曲列表子组件songList.vue
import songList from "./components/songList";
// 导入右边评论子组件comment.vue
import comments from "./components/comment";
//导入中间碟片动画子组件middle.vue
import middle from "./components/middle";export default {//c2.注册组件components: {songList,comments,middle},data() {return {//搜索的歌曲名字songName: "",//   歌曲播放地址songUrl: ""};},methods: {//   搜索事件search() {//b3.利用axios发送ajax请求 得到搜索相应的所有歌曲axios({url: "http://183.237.67.218:3000/search",params: {keywords: this.songName,//网易云音乐看你这个ip一直发请求,会把你跨域限制.//加这个随机数参数就是不会出现跨域xxx: Math.random() * 99999}}).then(res => {// console.log(res);//  把返回的所有歌曲保存到子组件的list数组中,然后显示在页面上this.$refs.songList.list = res.data.result.songs;//   搜索的时候就调用子组件的重新刷新方法,重新加载滚动条高度this.$refs.songList.reload();});},getSongInfo(id) {//1. 获取歌曲的urlaxios({url: "https://autumnfish.cn/song/url",params: {id}}).then(res => {//console.log(res);this.songUrl = res.data.data[0].url;});//   2.获取歌曲的评论axios({url: "https://autumnfish.cn/comment/music",params: {id}}).then(res => {//console.log(res);// 主组件传值子组件this.$refs.comments.list = res.data.hotComments;// 调用评论子组件中的刷新方法,来刷新滚动条this.$refs.comments.reload();});//3.获得碟片中间动画的图片封面axios({url: "https://autumnfish.cn/song/detail",params: {ids: id}}).then(res => {//console.log(res);this.$refs.middle.picUrl = res.data.songs[0].al.picUrl;});},// 播放触发的事件pauseEvent() {// 当播放条暂时播放时,让中间碟片停下来起来也就是取消playing类this.$refs.middle.playing = false;},// 暂停触发的事件playEvent() {// 当播放条开始播放时,让中间碟片动起来也就是加上playing类this.$refs.middle.playing = true;}}
};
</script><style>
body,
ul,
dl,
dd {margin: 0px;padding: 0px;
}.wrap {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: url("./assets/images/bg.jpg") no-repeat;background-size: 100% 100%;
}.play_wrap {width: 800px;height: 544px;position: fixed;left: 50%;top: 50%;margin-left: -400px;margin-top: -272px;/* background-color: #f9f9f9; */
}.search_bar {height: 60px;background-color: #1eacda;overflow: hidden;border-top-left-radius: 4px;border-top-right-radius: 4px;display: flex;align-items: center;justify-content: space-between;position: relative;z-index: 11;
}.search_bar img {margin-left: 23px;
}.search_bar input {margin-right: 23px;width: 296px;height: 34px;border-radius: 17px;border: 0px;background: url("./assets/images/zoom.png") 265px center no-repeatrgba(255, 255, 255, 0.45);text-indent: 15px;outline: none;
}.center_con {height: 435px;background-color: rgba(255, 255, 255, 0.5);display: flex;
}.song_wrapper {width: 200px;height: 435px;box-sizing: border-box;padding: 10px;list-style: none;background: url("./assets/images/line.png") right center no-repeat;position: relative;overflow: hidden;
}.song_list li {font-size: 12px;color: #333;line-height: 36px;width: 180px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;
}.song_list .active {color: #da651e;
}.player_con {width: 400px;height: 435px;position: relative;
}.disc {position: absolute;left: 73px;top: 60px;z-index: 9;
}.cover {position: absolute;left: 125px;top: 112px;width: 150px;height: 150px;border-radius: 75px;z-index: 8;
}.comment_list {width: 200px;height: 435px;box-sizing: border-box;padding: 10px;list-style: none;background: url("./assets/images/line.png") left center no-repeat;overflow: hidden;position: relative;
}.comment_list dl {padding-left: 55px;position: relative;margin-bottom: 20px;
}.comment_list dt {position: absolute;left: 4px;top: 0px;
}.comment_list dt img {width: 40px;height: 40px;border-radius: 20px;
}.comment_list dd {font-size: 12px;
}.comment_list .name {font-weight: bold;color: #333;margin-top: 5px;
}.comment_list .detail {color: #666;margin-top: 5px;line-height: 18px;
}.audio_con {height: 50px;background-color: #f1f3f4;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;
}.myaudio {width: 800px;height: 40px;margin-top: 5px;outline: none;background-color: #f1f3f4;
}/* 旋转的动画 */
@keyframes Rotate {from {transform: rotateZ(0);}to {transform: rotateZ(360deg);}
}/* 旋转的类名 */
.autoRotate {animation-name: Rotate;animation-iteration-count: infinite;animation-play-state: paused;animation-timing-function: linear;animation-duration: 5s;
}/* 是否正在播放 */
.playing {animation-play-state: running;
}.play_bar {position: absolute;left: 200px;top: -10px;z-index: 10;transform: rotate(-25deg);transform-origin: 12px 12px;transition: 1s;
}/* 播放杆 转回去 */
.play_bar.playing {transform: rotate(0);
}
</style>
songList.vue(子组件)左边歌曲列表部分
<template><!-- 左侧歌曲列表 --><div class="song_wrapper" ref="song_wrapper"><ul class="song_list"><li v-for="(item, index) in list" :key="index" @dblclick="play(item.id)">{{item.name}}</li></ul></div>
</template><script>
// 要给左边歌曲列表滚动条,导入IScroll
import iscroll from "iscroll";export default {data() {return {// 存放搜索对应的所有歌曲的数组list: [],//   滚动条实例myIscroll: "",};},methods: {//   滚动条刷新方法reload() {//$nextTick只适用于vue,它自动帮每次增加了新的li渲染完毕之后就帮我们刷新this.$nextTick(() => {this.myIscroll.refresh();});},// 双击左边的歌曲li播放音乐play(id) {// 调用主组件的getUrl方法this.$parent.getSongInfo(id)}},//列表渲染出来就有滚动条mounted() {this.myIscroll = new iscroll(this.$refs.song_wrapper, {mouseWheel: true,scrollbars: true});}
};
</script><style>
</style>
middle.vue(子组件)中间动画部分
<template><div class="player_con"><img src="../assets/images/player_bar.png" class="play_bar" :class="{playing:playing}"/><!-- 黑胶碟片 --><img src="../assets/images/disc.png" class="disc autoRotate" :class="{playing:playing}"/><img :src="picUrl" class="cover autoRotate" :class="{playing:playing}"/></div>
</template><script>
export default {data() {return {// 控制是否加playing这个class的变量playing:false,// 中间图片封面picUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589124884781&di=a6c25dd1c055f8afd1ee1fcb7008c5d0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F11%2F20170411194843_HGBrC.thumb.700_0.jpeg'}},
};
</script><style>
</style>
comments.vue(子组件)右边评论区部分
<template><div class="comment_list" ref="comment_list"><div><!-- 一个dl就是一个评论 --><dl v-for="(item, index) in list" :key="index"><dt><img :src="item.user.avatarUrl" alt /></dt><dd class="name">{{item.user.nickname}}</dd><dd class="detail">{{item.content}}</dd></dl></div></div>
</template><script>
// 1.导入滚动条外部插件
import iscroll from "iscroll";
export default {data() {return {// 存放评论的数组list: [],//评论区滚动条实例myIscroll: ""};},methods: {//   刷新滚动条方法reload() {this.$nextTick(() => {this.myIscroll.refresh();});}},mounted() {//   使用 实例化滚动条this.myIscroll = new iscroll(this.$refs.comment_list, {mouseWheel: true,scrollbars: true});}
};
</script><style>
</style>

效果展示说明: 该播放器功能分成三个部分,分别是左边歌曲列表,中间动画,右边评论区.
分开开发更有利于团队协作,
现在还没学兄弟之间组件怎么传值所以发送请求歌曲的播放地址,评论,图片封面,的ajax请求都写在主组件在
在这里插入图片描述


05-Vue-cli项目创建:

脚手架就是个项目模板 ， 相当于把整个文件基本目录结构搭好了，把必要的文件也建好 了，让我们省了很多事情。脚手架安装: npm install -g @vue/cli ,vue -V 能出现版本号就是安装成功,最好npm配置指向淘宝镜像

创建项目:

1.创建时路径不要选错，就是命令的路径要是需要创建项目的文件夹下
    完美选择不出错路径方法：在文件夹相应路径下的地址栏输入cmd —再 回车
2.运行创建命令:vue create 项目名 //这里项目名不要有中文，不要有大写字母，不要搞特殊符号，尽可能有意义 ，像普    通变量命名一样
3.弹出的对话框先选择默认的选项（如下图）在这里插入图片描述
4.稍等一会，等进度条走完 提示如下画面说明成功了,如下图：在这里插入图片描述
5.进入项目文件夹(就是项目名的文件夹):`cd 项目名 直接根据提示即可
6.运行项目:npm run serve
7.稍等片刻 ，出现如下效果说明成功了在这里插入图片描述

报错的原因:

1.创建命令是create输成了creat
2.在这里插入图片描述

  a.网络问题换wifi
  b.终端的权限问题,新建管理员模式的终端
  c. 当前这个文件夹，这个文件被其他软件占用：关闭所有可能影响的软件（重启）
  d. npm包管理工具的问题:（昨天那篇安装时已做说明）用yarn来安装或. 清除缓存npm cache clean -f 再重新创建项目
3.创建项目时，用到了第三方模块，文件太多了git人为没有必要管，提示你一下，选择不再显示就OK了,vue-cli创建项目时，已经设置了git忽略文件 就在.gitignore文件当中

实在无法创建项目的解决方案（重要）

  1. vue-cli创建项目的本质是：
    1. 创建文件夹
    2. 下载第三方模块
    3. 创建项目的基本结构
    4. 设置各个文件之间的关系
    5. 创建git仓库
  2. 找一个可以创建项目的人，创建一个项目
    1. 删除node_modules(这个里面都是一些第三方模块)
    2. 发给你
    3. 你使用npm i安装项目中用到的第三方模块(会根据package-lock.json文件下载回来)
    4. 运行项目npm run serve

Vue-cli项目结构说明:

  • node_modules 第三方模块包，也就是项目所需要用到的依赖包
  • public
    • favicon.ico 运行项目时在网页上显示 的小图标
    • index.html 项目的页面模板 ，也就是项目运行最开始，是先执行这个模板html的
  • src 项目开发主体就是在这个src目录下面
    • assets 项目所需要的静态资源，如css,图片等文件
    • components 项目中的单文件组件都放这里
    • App.vue 入口组件 ，可以理解为一个项目就是一个app.vue的单文件组件，只不过里面包括了很多小组件
    • main.js 入口js文件，进入项目会优先执行main.js以此来运行app.vue
  • .gitignore 让git忽略某些文件，文件夹
  • babel.config.js js编译的设置，比如把高版本的js转为低版本的js,让项目达到更好兼容性
  • package-lock.json 项目模块详细信息，包括来源。
  • package.json 项目基本信息
  • README.md 项目说明

这篇关于06-vue(父(主)组件与子组件之间的传值,export与import的基本使用,一个分组件完成的音乐播放器案例,脚手架初识别)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/807235。

相关文章

使用Docker构建Python Flask程序的详细教程

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker
阅读更多...
Python使用vllm处理多模态数据的预处理技巧

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核
阅读更多...
Python使用pip工具实现包自动更新的多种方法

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核
阅读更多...
Conda与Python venv虚拟环境的区别与使用方法详解

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,：本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v
阅读更多...
Spring Boot中WebSocket常用使用方法详解

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP
阅读更多...
C#中Guid类使用小结

C#中Guid类使用小结

《C#中Guid类使用小结》本文主要介绍了C#中Guid类用于生成和操作128位的唯一标识符,用于数据库主键及分布式系统,支持通过NewGuid、Parse等方法生成,感兴趣的可以了解一下... 目录前言一、什么是 Guid二、生成 Guid1. 使用 Guid.NewGuid() 方法2. 从字符串创建
阅读更多...
Python使用python-can实现合并BLF文件

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库：CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合
阅读更多...
Python使用OpenCV实现获取视频时长的小工具

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文
阅读更多...
PostgreSQL的扩展dict_int应用案例解析

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法
阅读更多...
Spring IoC 容器的使用详解(最新整理)

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2