pdsu_zhao
pdsu_zhao

基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）

1、项目开发需求分析：

包含四个层面——

（1）推荐模块

（2）歌手模块

（3）排行模块

（4）搜索模块

2、项目开发流程

（1）搭建项目：借助vue-cli脚手架工具，具体请参考博客： ...；

由于项目存放在本地电脑E盘VueTest目录下，

cd E:\VueTest


图1：切换项目存放目录、vue-cli搭建初始项目

通过脚手架vue-cli工具搭建项目

vue init webpack vue-music

选择配置项目相关webpack

                    

（2）进入项目vue-music

cd vue-music

安装项目node_mudules依赖（在这里采用淘宝镜像cnpm，可加快安装效率）

cnpm install

上述流程具体操作见（图2：安装项目依赖）

    基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）_第1张图片

                                         图2：安装项目依赖

在本地加载该项目工程文件

npm run dev


                     图3：搭建成功界面

当看到localhost:8080/8081时，说明项目工程环境搭建成功。

基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）_第2张图片

                                        图4：本地搭建环境成功

当显示上述界面，则表示vue-cli脚手架搭建的vue-music项目成功。


（3）在编辑器中打开该项目工程文件（在该环节中我采用的编辑器：VS Code）

项目目录中所以开发主要基于src目录作为主载

基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）_第3张图片

图5：项目工程目录

2.3-1——目录src

api：主要存放后台请求相关的代码，包括ajax，jsonp等，

有.gitkeep文件表示虽为空，但可上传至git上

common：主要存放通用的静态资源，包括字体图标fonts、图片images、脚本文件js库、样式文件stylus

   stylus——

base.styl：基础样式，引用variable.styl

variable.styl：以“变量定义”方式引入样式文件（颜色、字体定义规范）

icon.styl：字体图标样式文件

index.styl：引入reset、base、icon三者样式文件

mixin.styl：定义一些函数，方便组件.vue文件中引用

reset.styl：重置样式文件

基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）_第4张图片

图6：common目录下stylus 

components：主要存放项目中组件化.vue文件

router：主要存放静态路由相关代码index.js

store:主要存放vuex相关代码

App.vue：

main.js：主要存放渲染app文件的js脚本

2.3-2：更改相关文件

在build文件夹下，webpack.base.conf.js中

resolve: {
extensions: [ '.js', '.vue', '.json'],
alias: {
'src' : resolve( 'src'),
'common' : resolve( 'src/common')
}
},

这样，在项目中可以这么使用，如下：

import 'common/stylus/index.styl'


3、页面骨架开发

（1）页面入口+header

首先，package.json文件做以下更改

"dependencies": {
"babel-runtime": "^6.26.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"fastclick": "^1.0.6"
},

在“devDependencis”下，新增下面babel-polyfill、stylus、stylus-loader三个依赖，

运行cnpm install

"stylus ": "^0.54.5",
"babel-polyfill": "^6.2.0",
"stylus-loader": "^3.0.1"


（2）路由配置+顶导组件开发

router静态路由——根组件默认指向

vue-router（index.js）——new Vue({ router })（main.js）——（App.vue）

main.js——babel-polyfill、fastClick


在http://localhost:8080/#中可以用静态路由vue-router实现界面间切换

基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）_第5张图片

图7：vue-router实现界面跳转

解析：由于在项目工程文件中指定根路径path:/recommend，所以默认为该界面，同时点击不同的tab选项列   表，可由静态路由进入不同的组件。

import Router from 'vue-router'
Vue. use( Router)

export default new Router({
routes: [
// 根组件默认的指向
{
path: '/',
component: Recommend
},
{
path: '/recommend',
component: Recommend
},
{
path: '/singer',
component: Singer
},
{
path: '/rank',
component: Rank
},
{
path: '/search',
component: Search
}
]
})


4、推荐模块开发

locahost:8080/#/recommend

疑难点：

a、数据获取——线上真实数据，非模拟。用qq音乐进行抓取数据，（采用jsonp进行抓取线上数据）

                       基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）_第6张图片

图8：qq音乐播放器抓取数据

b、jsonp原理：可参考github地址（https://github.com/webmodules/jsonp）

基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）_第7张图片

图9：github-jsonp地址

c、在index.js可查看具体实现原理

（1）Install

Install for node.js or browserify usingnpm:

$ npm install jsonp

Install for component(1) using component:

$ component install LearnBoost/jsonp

Install for browser using bower:

$ bower install jsonp

（2）API

jsonp(url, opts, fn)

  • url (String) url to fetch
  • opts (Object), optional
    • param (String) name of the query string parameter to specify the callback (defaults to callback)
    • timeout (Number) how long after a timeout error is emitted. 0 to disable (defaults to 60000)
    • prefix (String) prefix for the global callback functions that handle jsonp responses (defaults to __jp)
    • name (String) name of the global callback functions that handle jsonp responses (defaults to prefix + incremented counter)
  • fn callback
操作——在package.json下定义jsonp，再cnpm install安装该依赖

"dependencies": {
"babel-runtime": "^6.26.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"fastclick": "^1.0.6",
"jsonp": "^0.2.1"
},


jsonp的封装“./src/common/js/jsonp.js”

// jsonp封装(用promise实现封装)
import originJSONP from 'jsonp'

export default function jsonp( url, data, option) {
// url拼接
url += ( url. indexOf( '?') < 0 ? '?' : '&') + param( data)
// Promise()回调函数，类似于callback，三种状态：pending(进行中)/resolve(已完成)/reject(已失败)
return new Promise(( resolve, reject) => {
originJSONP( url, option, ( err, data) => {
if (! err) {
resolve( data)
} else {
reject( err)
}
})
})
}

// 将data转换为json格式
function param( data) {
let url = ''
for ( var k in data) {
let value = data[ k] !== undefined ? data[ k] : ''
url += `& ${ k } = ${ encodeURIComponent( value) } `
}
return url ? url. substring( 1) : ''
}

jsonp使用：对其以promise方式封装，同时在/api目录下封装获取数据的方法

（1）轮播图

4.1-1数据抓取

components——recommend.vue“slide-wrapper”

api——recommend.js、config.js

js——jsonp.js

当上述文件编译成功，在开发者工具F12下的console控制台程序，会显示如下：

基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）_第8张图片

图10：qq音乐轮播图数据抓取成功界面


4.1-2：轮播图组件开发

目录base基础目录——src/base/slider/slider.vue，

slot插槽

< div class= "slider" >
< div class= "slider-group" >
< slot > slot >
div >

< div class= "dots" >

div >
div >

轮播图模块实现：

   实现方式很多，在这里借助better-scroll库实现Slider组件开发

   属性：snap——false，针对slider开发，普通列表滚动不需要配置

         snap——false 是否可以无缝循环轮播

 snapSpeed——400，轮播图切换的动画时间

4.1-2-1：slider-group（轮播图横向点击无缝滚动）

a、初始化Scroll

首先，在package.json中安装依赖，并在命令行中执行“cnpm install”

"dependencies": {
"better-scroll": "^1.4.2",
}

其次，在slider.vue组件中引入该库

import BScroll from "better-scroll"


b、计算setSliderWidth，在methods方法中，定义_setSliderWidth()

// 设置轮播宽度
_setSliderWidth() {
// 获得列表元素多少
this. children = this. $refs. sliderGroup. children

// 设置宽度/每个slider宽度均为元素的clientWidth
let width = 0
let sliderWidth = this. $refs. slider. clientWidth
for( let i= 0; i< this. children. length; i++) {
// 先获取每个子元素
let child = this. children[ i]
// import addClass方法，并传入参数
addClass( child, 'slider-item')
// 设置每个child的宽度
child. style. width = sliderWidth + 'px'
width += sliderWidth
}

// loop需要克隆2倍宽度
if( this. loop) {
width += 2* sliderWidth
}
this. $refs. sliderGroup. style. width = width + 'px'
},

c、初始化轮播图slider，methods中_initSlider()方法，此时引用a中BScroll插件

// 初始化轮播图
_initSlider() {
// 绑定DOM元素slider,options配置
this. slider = new BScroll( this. $refs. slider, {
// 只允许横向滚动，不允许纵向
scrollX: true,
scrollY: false,
momentum: false, // 惯性
snop: true, //无缝滚动
snopLoop: this. loop,
snopThreshold: 0.3,
snopSpeed: 400,
click: true
})
}

4.1-2-2：dots设置自动轮播

为了实现该功能，必须在初始化initSlider()之前初始化dos，

首先，在data()中定义一个dots对象

data() {
return {
dots: []
}
},


其次，在methods方法中定义_initDots()

// 初始化dots
_initDots() {
this. dots = new Array( this. children. length)
},

最后，在mounted钩子里调用该方法，在_initSlider()之前

// mounted钩子
mounted() {
setTimeout(() => {
this. _setSliderWidth()
this. _initDots()
this. _initSlider()
}, 20);
},

测试：当不清除定时器时，由于在自动播放autoPlay()之前，为手动播放，所以需要清除clearInteral()

// 给slider绑定scrollEnd()事件() => {}回调函数
this. slider. on( 'scrollEnd', () => {
// 表示第几个子元素
let pageIndex = this. slider. getCurrentPage(). pageX
if( this. loop) {
pageIndex -= 1
}
this. currentPageIndex = pageIndex

// 测试：由于上述代码运行只滚动一次，所以该事件scrollEnd有bug，对其添加autoPlay进行测试
if( this. autoPlay) {
// 由于在自动播放的时候，是手动播放，所以需要clear定时器
clearInterval( this. timer)
this. _play()
}
})

运行效果图如下：（注意：可以自动播放，截取的是静态图）

基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）_第9张图片

优化： 当发现在控制台上切换不同的屏幕大小的时候，界面显示出现错误，如下：

基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）_第10张图片


解析：上述bug出现的主要原因是因为_setSliderWidth()中sliderWidth出现了小问题，即window下的resize

解决办法：监听一个window下resize事件

// 优化sliderWidth宽度不一的问题
window. addEventListener( 'resize', () => {
// 当slider未初始化
if(! this. slider) {
return
}
// 判断是否有isResize(),
this. _setSliderWidth( true)
// 宽度发生变化，需要重新计算刷新以下slider
this. slider. refresh()
})


此外，在_setSliderWidth()事件，应该传入参数isResize做判断，同时执行函数时，初始下不需要isResize()，但到重新计算宽度时，就不能width*2

// 若loop自动播放为true，且不需要resize时，loop需要克隆2倍宽度
if( this. loop && ! isResize) {
width += 2* sliderWidth
}

重新编译后，会发现无论是在移动端进行测试，还是切换屏幕大小，在pc或Mac端测试，宽度均不会出现问题，

但是，当我们重新切换或者加载的时候，recommend.vue生命周期，以及相关数据均会重新加载一遍才会刷新到数据，导致体验差，

优化1：App.vue中，将router-view加一个keep-alive进行dom缓存

< keep-alive >
< router-vxew > router-view >
keep-alive >

优化2：slider.vue中，export default({})加一个destroyed()清除缓存定时器

// destroyed生命周期，当存在寄存器，元素销毁时机，清除资源
destroyed() {
clearTimeout( this. timer)
}

4.1-3：歌单列表组件开发

a、歌单数据接口分析

在这里抓取的是PC端歌单数据，地址：https://y.qq.com/portal/playlist.html

               基于Vue2.x开发的音乐播放器app（推荐界面+懒加载+axios获取后端接口实现）_第11张图片

从上述console控制台下NetWork  general下的requestUrl即为表单数据接口地址

https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg


b、实现原理

首先，定义接口获取函数。包括url以及data相关数据，在recommend.js

// 获取歌单接口数据
export function getDiscList() {
// 歌单接口url地址
const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'

// 定义表单接口数据
const data = Object. assign({}. commonParams, {
platform: 'yqq',
hostUin: 0,
needNewCode: 0,
categoryId: 10000000,
sortId: 5,
sin: 0,
ein: 29,
rnd: Math. random()
})

return jsonp( url, data, options)
}

其次，在recommend.vue组件下调用该获取接口数据函数

created() {
// 获取轮播图图片接口数据函数
this. _getRecommend(),
// 获取歌单接口数据函数
this. _getDiscList()
},

同时，在表头引入该函数

import { getRecommend, getDiscList} from 'api/recommend'

c、后端接口代理axios

  由于若使用jsonp进行数据抓取，会导致一些错误，因为qq音乐服务器端不会识别，只能在项目build目录下dev-server.js下，配置与qq音乐相同的headers——referer、host相同，这样服务器端识别完成，相当于后端代理的方法获取了后台的歌单接口数据。


  采用ajax http请求API axios库https://github.com/mzabriskie/axios

首先，package.json上写入axios，并在cmd命令行cnpm install安装依赖

"dependencies": {
"axios": "^0.17.1"
},

在build/dev-server.js中中，设置Axios后端接口代理，用于获取接口数据，再进行调取相应的api。

const axios = require( 'axios')
const app = express()

// define apiRoutes
const apiRoutes = express. Router()

// 后端接口代理
apiRoutes. get( '/getDiscList', function( req, res) {
// ajax库axios
const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
axios. get( url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req. query
}). then(( response) => {
res. json( response. data)
}). catch(( e) => {
console. log( e)
})
})

app. use( '/api', apiRoutes)


未完待续...（由于axios请求接口一直处于404失败状态，所以recommend组件结合dev.server.js配置未达到预期的效果，还需要做到后期的改善）


4.1-4：scroll滚动组件，scroll.vue

  由于scroll滚动适用于所有模块界面的滑动，所以作为一个组件进行开发，结合slot插槽进行使用

< template >
< div ref= "wrapper" >
< slot > slot >
div >
template >

  在

你可能感兴趣的:(Vue,Vue学习之旅)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • vue3中el-table中点击图片放大时，被表格覆盖 叫我小鹏呀 vue.jsjavascript前端
    问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
  • vue项目element-ui的table表格单元格合并 酋长哈哈 vue.jselementuijavascript前端
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
  • Vue中table合并单元格用法 weixin_30613343 javascriptViewUI
    地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • vue+el-table 可输入表格使用上下键进行input框切换 以对_ vue学习记录vue.jsjavascript前端
    使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
  • vue + Element UI table动态合并单元格 我家媳妇儿萌哒哒 elementUIvue.js前端javascript
    一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
  • vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.jsvue-cli3
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
  • 计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php课程设计vue.js
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2vue.jsjavascript前端
    vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。 焚木灵 node.jsvue
    可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘ 周bro vue.js前端javascriptnode.jsnpm
    node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
  • vue2实现复制,粘贴功能 周bro vue.jsjavascript前端
    一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
  • 【vite 自动配置路由】 CODER-V 前端javascriptvue.js前端软件构建
    手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • Vue3 vant组件库自动导入 不叫虎子 Vuevue.js前端javascript前端框架typescript
    实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
  • vant-element-ts一起使用存在的问题 flynn_ 问题总结vue
    由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台 网顺技术团队 成品程序项目javavue.js汽车课程设计springboot
    基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基
  • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
  • C# 开发教程-入门基础 天马3798 教程系列整理c#开发语言
    1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
  • 若依后端正常启动但是uniapp移动端提示后端接口异常 大可大可抖 uni-app
    pc端能用模拟器也能正常连接接口，手机端真机调试连不上接口解决：1.先看config.js的填自己的ip地址module.exports={//baseUrl:'https://vue.ruoyi.vip/prod-api',baseUrl:"http://192.168.101.5:8080",}2.网络环境问题（防火墙）点击属性然后选择专用
  • 好看的vue登录页面(附 源代码 背景图) 小小薛定谔 vue.jsjavascriptcss前端
    一、效果展示二、代码你好!欢迎回来登录忘记密码?注册exportdefault{name:"MedLogin",data(){return{confirm_disabled:false,loginForm:{no:'',password:''},rules:{no:[{required:true,message:'请输入账号',trigger:'blur'},{min:3,max:6,messag
  • uniapp 获取各种小程序code 灵魂清零 uniapp小程序
    各种小程序在进入小程序是都需要去获取code才能拿到基础信息，自己记录一下用uniapp开发小程序是获取微信小程序、百度小程序、头条小程序、支付宝小程序的codeVue.prototype.$global={appLogin(){returnnewPromise((resole,reject)=>{varthat=this;varwxLoginUrl=app.globalData.url+"/lo
  • 枚举的构造函数中抛出异常会怎样 bylijinnan javaenum单例
    首先从使用enum实现单例说起。 为什么要用enum来实现单例？ 这篇文章（ http://javarevisited.blogspot.sg/2012/07/why-enum-singleton-are-better-in-java.html）阐述了三个理由： 1.enum单例简单、容易，只需几行代码： public enum Singleton { INSTANCE;
  • CMake 教程 aigo C++
    转自：http://xiang.lf.blog.163.com/blog/static/127733322201481114456136/   CMake是一个跨平台的程序构建工具，比如起自己编写Makefile方便很多。 介绍：http://baike.baidu.com/view/1126160.htm 本文件不介绍CMake的基本语法，下面是篇不错的入门教程： http:
  • cvc-complex-type.2.3: Element 'beans' cannot have character Cb123456 springWebgis
      cvc-complex-type.2.3: Element 'beans' cannot have character     Line 33 in XML document from ServletContext resource [/WEB-INF/backend-servlet.xml] is i
  • jquery实例:随页面滚动条滚动而自动加载内容 120153216 jquery
    <script language="javascript"> $(function (){ var i = 4;$(window).bind("scroll", function (event){ //滚动条到网页头部的 高度，兼容ie,ff,chrome var top = document.documentElement.s
  • 将数据库中的数据转换成dbs文件 何必如此 sqldbs
    旗正规则引擎通过数据库配置器（DataBuilder）来管理数据库，无论是Oracle，还是其他主流的数据都支持，操作方式是一样的。旗正规则引擎的数据库配置器是用于编辑数据库结构信息以及管理数据库表数据，并且可以执行SQL 语句，主要功能如下。 1)数据库生成表结构信息：         主要生成数据库配置文件(.conf文
  • 在IBATIS中配置SQL语句的IN方式 357029540 ibatis
    在使用IBATIS进行SQL语句配置查询时，我们一定会遇到通过IN查询的地方，在使用IN查询时我们可以有两种方式进行配置参数：String和List。具体使用方式如下： 1.String:定义一个String的参数userIds，把这个参数传入IBATIS的sql配置文件，sql语句就可以这样写： <select id="getForms" param
  • Spring3 MVC 笔记（一） 7454103 springmvcbeanRESTJSF
             自从 MVC 这个概念提出来之后 struts1.X  struts2.X   jsf 。。。。。 这个view 层的技术一个接一个！ 都用过！不敢说哪个绝对的强悍！ 要看业务，和整体的设计！      最近公司要求开发个新系统！
  • Timer与Spring Quartz 定时执行程序 darkranger springbean工作quartz
    有时候需要定时触发某一项任务。其实在jdk1.3，java sdk就通过java.util.Timer提供相应的功能。一个简单的例子说明如何使用，很简单： 1、第一步，我们需要建立一项任务，我们的任务需要继承java.util.TimerTask package com.test; import java.text.SimpleDateFormat; import java.util.Date;
  • 大端小端转换，le32_to_cpu 和cpu_to_le32 aijuans C语言相关
    大端小端转换，le32_to_cpu 和cpu_to_le32  字节序 http://oss.org.cn/kernel-book/ldd3/ch11s04.html         小心不要假设字节序. PC 存储多字节值是低字节为先(小端为先, 因此是小端), 一些高级的平台以另一种方式(大端)
  • Nginx负载均衡配置实例详解 avords
    [导读] 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。负载均衡先来简单了解一下什么是负载均衡，单从字面上的意思来理解就可以解 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。 负载均衡 先来简单了解一下什么是负载均衡
  • 乱说的 houxinyou 框架敏捷开发软件测试
    从很久以前，大家就研究框架，开发方法，软件工程，好多！反正我是搞不明白！ 这两天看好多人研究敏捷模型，瀑布模型！也没太搞明白. 不过感觉和程序开发语言差不多， 瀑布就是顺序，敏捷就是循环. 瀑布就是需求、分析、设计、编码、测试一步一步走下来。而敏捷就是按摸块或者说迭代做个循环，第个循环中也一样是需求、分析、设计、编码、测试一步一步走下来。 也可以把软件开发理
  • 欣赏的价值——一个小故事 bijian1013 有效辅导欣赏欣赏的价值
    　　第一次参加家长会，幼儿园的老师说："您的儿子有多动症，在板凳上连三分钟都坐不了，你最好带他去医院看一看。"　　回家的路上，儿子问她老师都说了些什么，她鼻子一酸，差点流下泪来。因为全班30位小朋友，惟有他表现最差；惟有对他，老师表现出不屑，然而她还在告诉她的儿子："老师表扬你了，说宝宝原来在板凳上坐不了一分钟，现在能坐三分钟。其他妈妈都非常羡慕妈妈，因为全班只有宝宝
  • 包冲突问题的解决方法 bingyingao eclipsemavenexclusions包冲突
    包冲突是开发过程中很常见的问题： 其表现有： 1.明明在eclipse中能够索引到某个类，运行时却报出找不到类。 2.明明在eclipse中能够索引到某个类的方法，运行时却报出找不到方法。 3.类及方法都有，以正确编译成了.class文件，在本机跑的好好的，发到测试或者正式环境就 抛如下异常： java.lang.NoClassDefFoundError: Could not in
  • 【Spark七十五】Spark Streaming整合Flume-NG三之接入log4j bit1129 Stream
    先来一段废话： 实际工作中，业务系统的日志基本上是使用Log4j写入到日志文件中的，问题的关键之处在于业务日志的格式混乱，这给对日志文件中的日志进行统计分析带来了极大的困难，或者说，基本上无法进行分析，每个人写日志的习惯不同，导致日志行的格式五花八门，最后只能通过grep来查找特定的关键词缩小范围，但是在集群环境下，每个机器去grep一遍，分析一遍，这个效率如何可想之二，大好光阴都浪费在这上面了
  • sudoku solver in Haskell bookjovi sudokuhaskell
    这几天没太多的事做，想着用函数式语言来写点实用的程序，像fib和prime之类的就不想提了（就一行代码的事），写什么程序呢？在网上闲逛时发现sudoku游戏，sudoku十几年前就知道了，学生生涯时也想过用C/Java来实现个智能求解，但到最后往往没写成，主要是用C/Java写的话会很麻烦。   现在写程序，本人总是有一种思维惯性，总是想把程序写的更紧凑，更精致，代码行数最少，所以现
  • java apache ftpClient bro_feng java
    最近使用apache的ftpclient插件实现ftp下载，遇见几个问题，做如下总结。 1. 上传阻塞，一连串的上传，其中一个就阻塞了，或是用storeFile上传时返回false。查了点资料，说是FTP有主动模式和被动模式。将传出模式修改为被动模式ftp.enterLocalPassiveMode();然后就好了。 看了网上相关介绍，对主动模式和被动模式区别还是比较的模糊，不太了解被动模
  • 读《研磨设计模式》-代码笔记-工厂方法模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 工厂方法模式：使一个类的实例化延迟到子类 * 某次，我在工作不知不觉中就用到了工厂方法模式（称为模板方法模式更恰当。2012-10-29）： * 有很多不同的产品，它
  • 面试记录语 chenyu19891124 招聘
    或许真的在一个平台上成长成什么样，都必须靠自己去努力。有了好的平台让自己展示，就该好好努力。今天是自己单独一次去面试别人，感觉有点小紧张，说话有点打结。在面试完后写面试情况表，下笔真的好难，尤其是要对面试人的情况说明真的好难。 今天面试的是自己同事的同事，现在的这个同事要离职了，介绍了我现在这位同事以前的同事来面试。今天这位求职者面试的是配置管理，期初看了简历觉得应该很适合做配置管理，但是今天面
  • Fire Workflow 1.0正式版终于发布了 comsci 工作workflowGoogle
    Fire Workflow 是国内另外一款开源工作流，作者是著名的非也同志，哈哈.... 官方网站是 http://www.fireflow.org 经过大家努力,Fire Workflow 1.0正式版终于发布了 正式版主要变化: 1、增加IWorkItem.jumpToEx(...)方法，取消了当前环节和目标环节必须在同一条执行线的限制，使得自由流更加自由 2、增加IT
  • Python向脚本传参 daizj python脚本传参
    如果想对python脚本传参数，python中对应的argc, argv(c语言的命令行参数)是什么呢？ 需要模块：sys 参数个数：len(sys.argv) 脚本名：    sys.argv[0] 参数1：     sys.argv[1] 参数2：     sys.argv[
  • 管理用户分组的命令gpasswd dongwei_6688 passwd
    NAME： gpasswd - administer the /etc/group file SYNOPSIS： gpasswd group gpasswd -a user group gpasswd -d user group gpasswd -R group gpasswd -r group gpasswd [-A user,...] [-M user,...] g
  • 郝斌老师数据结构课程笔记 dcj3sjt126com 数据结构与算法
    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  • yii2 cgridview加上选择框进行操作 dcj3sjt126com GridView
    页面代码 <?=Html::beginForm(['controller/bulk'],'post');?> <?=Html::dropDownList('action','',[''=>'Mark selected as: ','c'=>'Confirmed','nc'=>'No Confirmed'],['class'=>'dropdown',])
  • linux mysql fypop linux
    enquiry mysql version in centos linux yum list installed | grep mysql yum -y remove mysql-libs.x86_64 enquiry mysql version in yum repositoryyum list | grep mysql oryum -y list mysql* install mysq
  • Scramble String hcx2013 String
    Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrings recursively. Below is one possible representation of s1 = "great":
  • 跟我学Shiro目录贴 jinnianshilongnian 跟我学shiro
    历经三个月左右时间，《跟我学Shiro》系列教程已经完结，暂时没有需要补充的内容，因此生成PDF版供大家下载。最近项目比较紧，没有时间解答一些疑问，暂时无法回复一些问题，很抱歉，不过可以加群（334194438/348194195）一起讨论问题。     ----广告-----------------------------------------------------
  • nginx日志切割并使用flume-ng收集日志 liyonghui160com
         nginx的日志文件没有rotate功能。如果你不处理，日志文件将变得越来越大，还好我们可以写一个nginx日志切割脚本来自动切割日志文件。第一步就是重命名日志文件，不用担心重命名后nginx找不到日志文件而丢失日志。在你未重新打开原名字的日志文件前，nginx还是会向你重命名的文件写日志，linux是靠文件描述符而不是文件名定位文件。第二步向nginx主
  • Oracle死锁解决方法 pda158 oracle
    　select p.spid,c.object_name,b.session_id,b.oracle_username,b.os_user_name from v$process p,v$session a, v$locked_object b,all_objects c where p.addr=a.paddr and a.process=b.process and c.object_id=b.
  • java之List排序 shiguanghui list排序
       在Java Collection Framework中定义的List实现有Vector，ArrayList和LinkedList。这些集合提供了对对象组的索引访问。他们提供了元素的添加与删除支持。然而，它们并没有内置的元素排序支持。 　　你能够使用java.util.Collections类中的sort()方法对List元素进行排序。你既可以给方法传递
  • servlet单例多线程 utopialxw 单例多线程servlet
    转自http://www.cnblogs.com/yjhrem/articles/3160864.html 和   http://blog.chinaunix.net/uid-7374279-id-3687149.html Servlet 单例多线程 Servlet如何处理多个请求访问？Servlet容器默认是采用单实例多线程的方式处理多个请求的：1.当web服务器启动的