jchappytime/tc-music

写着玩

tc-music's Issues

第三个轮播组件实现

修改项目配置文件：teconfig, eslint, .prettierrc等

检查package.json文件并根据项目实际情况增减依赖包

{
"name": "Music-Vue",
"version": "1.0.0",
"description": "xxx",
"author": "Jessica",
"private": false,
"scripts": {
"dev": "cross-env QUICK_MODE=true node server",
"lint": "eslint .",
"start": "cross-env NODE_ENV=production node server",
"build": "rimraf dist && yarn run build:client && yarn run build:server",
"build:client": "cross-env NODE_ENV=production QUICK_MODE=true webpack --config build/webpack.client.config.js --progress --hide-modules",
"build:server": "cross-env NODE_ENV=production QUICK_MODE=true webpack --config build/webpack.server.config.js --progress --hide-modules",
"test": "jest",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch",
"package": "rimraf release && yarn run build && gulp && (cd release && yarn install --prod && node-prune && tar cfz package.tar.gz * && mkdir package && mv package.tar.gz package)"
},
"jest": {
"moduleNameMapper": {
"src/components/([^\\.])$": "/src/components/$1.vue",
"^vue$": "vue/dist/vue.common.js",
"@/(.)$": "/src/$1",
"src/([^\\.])$": "/src/$1.vue",
"logger": "/src/logger/logger-client.ts",
"create-api": "./create-api-client.ts"
},
"snapshotSerializers": [
"/jest/htmlSnapshotBeautifier.js"
],
"transform": {
".\.vue$": "vue-jest",
".(ts|tsx)": "ts-jest",
".": "babel-jest"
},
"transformIgnorePatterns": [
"/node_modules/(?!(vue-echarts)/)"
],
"testRegex": "(/tests/.|\.(test|spec))\.(ts|js)$",
"moduleFileExtensions": [
"ts",
"js"
],
"coverageReporters": [
"text",
"json",
"lcov",
"cobertura"
],
"testResultsProcessor": "./node_modules/jest-junit"
},
"jest-junit": {
"suiteName": "jest tests",
"output": "./junit.xml",
"classNameTemplate": "{classname}-{title}",
"titleTemplate": "{classname}-{title}"
},
"husky": {
"hooks": {
"pre-commit": "yarn lint",
"pre-push": "yarn test"
}
},
"engines": {
"node": ">=6.0",
"npm": ">=3.0"
},
"dependencies": {
"async": "2.5.0",
"autoprefixer": "7.1.3",
"axios": "0.16.2",
"babel-cli": "6.26.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-stage-0": "6.24.1",
"compression": "1.7.0",
"cookie-parser": "1.4.3",
"core-js": "^3.2.1",
"cross-env": "^7.0.2",
"dont-sniff-mimetype": "^1.0.0",
"es6-promise": "4.1.1",
"express": "^4.16.3",
"express-request-language": "1.1.12",
"file-loader": "^6.0.0",
"frameguard": "^3.0.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"hbs": "4.0.1",
"helmet-csp": "^2.7.0",
"hide-powered-by": "^1.0.0",
"hsts": "^2.1.0",
"http-proxy-middleware": "0.17.4",
"jquery": "^3.2.1",
"lodash": "4.17.14",
"mini-css-extract-plugin": "^0.4.0",
"moment": "^2.27.0",
"morgan": "1.8.2",
"ncp-vue-framework": "^0.0.11-alpha",
"node-prune": "^1.0.2",
"pm2": "^2.7.2",
"pmx": "^1.5.4",
"postcss-loader": "^2.1.5",
"prettier": "^2.0.5",
"raw-body": "2.3.0",
"serve-favicon": "^2.5.0",
"smoothscroll-polyfill": "^0.4.4",
"uuid": "^3.3.2",
"vue": "^2.5.13",
"vue-awesome-swiper": "^4.1.1",
"vue-class-component": "^6.1.2",
"vue-click-outside": "^1.0.7",
"vue-echarts": "^2.4.0",
"vue-i18n": "^7.4.0",
"vue-meta": "^2.4.0",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.5.13",
"vue-style-loader": "^4.1.0",
"vuedraggable": "^2.23.2",
"vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0",
"webpack": "^4.12.0",
"webpack-merge": "^4.1.2",
"winston": "2.3.1",
"winston-daily-rotate-file": "1.4.6",
"winston-nelo2": "^3.1.2",
"x-xss-protection": "^1.0.0"
},
"devDependencies": {
"@types/axios": "^0.14.0",
"@types/jest": "^22.2.3",
"@types/node": "^9.3.0",
"@vue/server-test-utils": "1.0.0-beta.29",
"@vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^8.1.0",
"babel-jest": "^20.0.3",
"babel-loader": "^7.1.4",
"css-loader": "^0.28.11",
"del": "^3.0.0",
"eslint": "^4.14.0",
"eslint-config-ncloud": "^1.2.0",
"eslint-loader": "^2.0.0",
"fork-ts-checker-webpack-plugin": "^0.4.2",
"gulp": "^4.0.0",
"gulp-rev": "8.0.0",
"gulp-rev-collector": "1.2.2",
"husky": "^4.2.5",
"jest": "^23.0.1",
"jest-junit": "^4.0.0",
"js-beautify": "1.6.14",
"less": "^2.7.2",
"less-loader": "^4.1.0",
"memory-fs": "0.4.1",
"ncp-ui-kit": "^1.90.0",
"rimraf": "^2.6.1",
"run-sequence": "^2.2.1",
"swiper": "4.0.7",
"ts-jest": "^22.4.6",
"ts-loader": "^4.4.1",
"typescript": "^3.0.0",
"url-loader": "^1.0.1",
"vue-jest": "^3.0.5",
"vue-loader": "^15.0.0",
"vue-template-compiler": "^2.5.13",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.0.8",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.22.2",
"webpack-node-externals": "^1.7.2"
}
}

配置typescript并使用

webpack文件配置文件-优化配置

1.优化配置

修改切换语言按钮

以开关的方式切换

点击菜单实现选中样式

修改第二个轮播组件展示的样式

增加“我的VIP”页面

首页样式修改，不同部分颜色设置不同

登录框使用二维码登录

增加“我的”页面，包含：我的听歌记录、我创建的歌单、日期选择等等

• 1.“我的”即“我的音乐页面”；
• 2.我的听歌记录；
• 3.我创建的歌单；
• 4.日期选择；

VSCode设置：参照如下地址配置

https://www.cnblogs.com/jianguo221/p/13041627.html

项目中目前为止的所有中文国际化

relate #61

轮播组件调整

• 1.调整每页展示的数量: 4个；
• 2.展示图片采用CSS设置背景图的方式；
• 3.整个轮播组件宽度调整为1100px。

头部：不采用el-tabs形式，使用div+css效果

5个常见且非常好用的vue.js库

原文地址：https://medium.com/better-programming/top-vue-libraries-for-your-next-app-af10de6c2b74
中文地址：https://juejin.im/post/6890135726647296014

使用vue-treeselect在项目中实现树形下拉选择

new Component: tree-menu

TreeMenu.vue

{{ emptyText }}

<script> import { chain, forEach, filter } from 'lodash'; import VueDraggable from 'vuedraggable'; import TreeNode from './TreeNode.vue'; const prefixClass = 'n-tree'; export default { name: 'n-tree', components: { VueDraggable, TreeNode, }, provide() { return { TreeInstance: this }; }, props: { data: { type: Array, default: () => [], }, emptyText: { type: String, default: 'No data' }, childrenKey: { type: String, default: 'children', }, // TODO loadData: { type: Function, }, // TODO render: { type: Function, }, draggable: { type: Boolean, default: false, }, offset: { type: [String,Number], default: 15, }, expandAll: { type: Boolean, default: false, }, }, data() { return { nodeTreeData: this.data, flatStateTree: [], }; }, computed: { prefixClass() { return prefixClass; }, }, watch: { data: { deep: true, handler(data) { this.nodeTreeData = data; this.flatStateTree = this.compileStateTree(); }, }, }, methods: { compileStateTree() { let keyCounter = 0; const childrenKey = this.childrenKey; const flatStateTree = []; function flattenChildren(node, parent) { node.nodeKey = keyCounter++; flatStateTree[node.nodeKey] = { node: node, nodeKey: node.nodeKey }; if (typeof parent != 'undefined') { flatStateTree[node.nodeKey].parent = parent.nodeKey; flatStateTree[parent.nodeKey][childrenKey].push(node.nodeKey); } if (node[childrenKey]) { flatStateTree[node.nodeKey][childrenKey] = []; node[childrenKey].forEach((child) => flattenChildren(child, node) ); } else { node[childrenKey] = []; } } this.nodeTreeData.forEach((rootNode) => { flattenChildren(rootNode); }); return flatStateTree; }, handleSelected(nodeKey) { const node = this.flatStateTree[nodeKey].node; chain(this.flatStateTree) .filter((obj) => obj.node.selected) .forEach((obj) => this.$set(obj.node, 'selected', false)) .value(); this.$set(node, 'selected', true); this.$emit('on-select', node); }, handleToggleExpand(node) { this.$emit('on-toggle', node); }, }, created() { this.flatStateTree = this.compileStateTree(); }, }; </script> <style lang="less"> @import '../../less/variable.less'; @import './index.less'; </style>

TreeNode.vue

<div
:class="itemClasses"
@click="handleSelect"
:style="{ paddingLeft: ${paddingLeft}px }"
>
<span :class="${prefixClass}-arrow" @click.stop="handleExpand">




{{ data.title }}

<script> import VueDraggable from 'vuedraggable'; import NBtn from '@/components/NBtn'; import NIcon from '@/components/NIcon'; const prefixClass = 'n-tree-item'; export default { name: 'TreeNode', components: { VueDraggable, NBtn, NIcon, }, inheritAttrs: false, inject: ['TreeInstance'], props: { data: { type: Object, default: () => ({}), }, childrenKey: { type: String, default: 'children', }, draggable: { type: Boolean, default: false, }, padding: { type: [String, Number], default: 0, }, offset: { type: [String, Number], default: 15, }, expandAll: { type: Boolean, default: false, }, }, computed: { paddingLeft() { return parseInt(this.padding) + parseInt(this.offset); }, prefixClass() { return prefixClass; }, itemClasses() { return [ prefixClass, { [`${prefixClass}-expand`]: this.data.expand, [`${prefixClass}-selected`]: this.data.selected, }, ]; }, children() { return this.data[this.childrenKey]; }, showArrow() { return this.data[this.childrenKey] && this.data[this.childrenKey].length; }, }, methods: { handleExpand() { const item = this.data; const children = item[this.childrenKey]; if (item.disabled || !children || !children.length) return; this.$set(item, 'expand', !item.expand); this.$emit('toggle-expand', item); }, handleSelect() { if (this.data.disabled) return; this.$emit('on-selected', this.data.nodeKey); }, }, created() { const children = this.data[this.childrenKey]; if (this.expandAll && children && children.length) { this.$set(this.data, 'expand', true); } }, }; </script>

index.less
@prefix-class: ~'n-tree';
@selected: #f0f9ff;

.@{prefix-class} {
position: relative;
border: 1px solid @Colors[line];
border-radius: 4px;
overflow: hidden;
background: @Colors[white];

ul {
list-style: none;
margin: 0;
padding: 0;

li {
  list-style: none;
  margin: 0;
  white-space: nowrap;
  outline: none;
  box-sizing: border-box;
}

}

ul {
margin: 0 0 -1px 0;
}

&-item {
width: 100%;
padding: 12px 0;
font-size: 13px;
font-weight: normal;
color: #222;
box-sizing: border-box;
cursor: pointer;
border-bottom: 1px solid @Colors[line];

&:hover {
  background: @selected;
}

&-arrow {
  .n-btn-only-icon.n-btn-small {
    width: 20px;
    height: 20px;
  }
  .n-icon {
    transform: rotate(-90deg);
  }
}

&-title {
  vertical-align: middle;
}

&-expand {
  .@{prefix-class}-item-arrow .n-icon {
    transform: rotate(0);
  }
}
&-selected {
  background: @selected;
  .@{prefix-class}-item-title {
    font-weight: 600;
  }
}

}
&-empty-text {
padding: 20px;
display: block;
text-align: center;
}
}

增加第二个页面（歌手）的轮播组件

使用假数据即可

更新swiper数据，增加使用lodash功能

调整tabs的位置，使之居中展示

项目中使用lodash

充分利用lodash中的函数提供的便利

第二个轮播组件样式修改

主页开发：参照QQ音乐PC版结合实际需要进行

参照网址：https://y.qq.com/

今日需要完成如下页面中的首页：

使用Swiper轮播组件进行首页歌手/歌曲推送的轮播功能

配置eslintrc.js文件

{
“extends”: ["ncloud"],
"env": {
"browser": true,
"node": true,
"es6": true,
},
"parser": "babel-eslint",
"rules": {
"linebreak-style": 0,
}
}

使用html实现复杂表格

横跨两列的单元格：

表头1	表头2	表头3	表头4	表头5
1	1	1	1	3
		4	5	7
		2	4	5

普通表格+复杂表格组件化

确认框公共组件增加

调整首页Swiper样式

VSCode黑

设置在项目中使用less

首页位置调整

修改头部菜单展示形式

.nav-wrap {
margin-top: 12px;
font-size: 16px;
letter-spacing: 0 !important;
.input-group.dropdown:hover {
.dropdown-menu.dropdown-menu-scale {
visibility: visible;
opacity: 1;
transform: scale(1) translateY(0%);
transition-delay: 0s, 0s, 0.4s;
pointer-events: auto;
}
.select-icon {
transform: rotate(180deg);
}
}
.dropdown-menu.dropdown-menu-scale {
margin-top: 0;
background-color: transparent;
padding: 0;
border: none;
.dropdown-wrap {
margin-top: 6px;
padding: 12px 5px;
border-color: @c-nav-border;
background-color: @c-white;
border-radius: 0.25rem;
}
}
ul {
list-style-type: none;
margin: auto;
text-align: center;
display: flex;
}
li {
display: flex;
margin-right: auto;
.input-group.dropdown .form-control {
font-size: 15px;
}
&:last-child {
margin-right: 0px;
}
}
}

• {{ menu.menuName }}
  {{ menu.menuName }}

  {{ subMenu.menuName }}

首页样式调整

VIP路由跳转问题修改

设置vscode的settings.json文件，使代码风格保持一致

{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"editor.multiCursorModifier": "alt",
"editor.tabSize": 2,
"eslint.options": {
"configFile": "./.eslintrc"
},
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 10000,
"files.insertFinalNewline": true,
"files.trimTrailingWhitespace": true,
"files.trimFinalNewlines": true,
"html.format.enable": false,
"javascript.implicitProjectConfig.checkJs": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"prettier.printWidth": 120,
"prettier.tabWidth": 2,
"prettier.useTabs": false,
"prettier.proseWrap": "preserve",
"prettier.singleQuote": true,
"prettier.trailingComma": "all",
"prettier.arrowParens": "avoid",
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 120
},
"prettyhtml": {
"printWidth": 120
}
}
}

SPA及SSR的Swiper分别实现

Swiper针对SPA和SSR是两种不同的实现方式

1. 实现SPA方式

2. 实现SSR方式

可参考如下网址：
need check swiper version, vue-awesome-slider version, and import method.
ref https://github.com/surmon-china/vue-awesome-swiper#local-registration

https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3#ssr
SSR example code in https://github.com/surmon-china/vue-awesome-swiper#example

首页展示需要重新设计：Header+Content+Footer

设计合适的高度

设置点击就选中样式

增加eslint.js文件

footer部分增加内容

webpack配置文件

1. 增加webpack配置；
2. 暂不考虑优化问题

增加歌手介绍页-TaylorSwift

丰富VIP页面，如：增加开通VIP功能

实现下拉框功能（下拉展示样式多样化）

增加i18n功能

#57

用户登录框内容增加

头部：增加国际化语言选项

图标修改：主logo更改