Skip to content

Commit 37c79dc

Browse files
wurenzhinanwurenzhinan
committed
second
1 parent 11a6575 commit 37c79dc

File tree

17 files changed

+579
-281
lines changed

17 files changed

+579
-281
lines changed

‎config/webpack.config.js

+222-195
Large diffs are not rendered by default.

‎package.json

+106-6
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,68 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@babel/core": "^7.16.0",
7+
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
8+
"@svgr/webpack": "^5.5.0",
69
"@testing-library/jest-dom": "^5.16.5",
710
"@testing-library/react": "^13.3.0",
811
"@testing-library/user-event": "^13.5.0",
912
"antd": "^4.22.6",
1013
"axios": "^0.27.2",
14+
"babel-jest": "^27.4.2",
15+
"babel-loader": "^8.2.3",
16+
"babel-plugin-named-asset-import": "^0.3.8",
17+
"babel-preset-react-app": "^10.0.1",
18+
"bfj": "^7.0.2",
19+
"browserslist": "^4.18.1",
20+
"camelcase": "^6.2.1",
21+
"case-sensitive-paths-webpack-plugin": "^2.4.0",
22+
"css-loader": "^6.5.1",
23+
"css-minimizer-webpack-plugin": "^3.2.0",
24+
"dotenv": "^10.0.0",
25+
"dotenv-expand": "^5.1.0",
26+
"eslint": "^8.3.0",
27+
"eslint-config-react-app": "^7.0.1",
28+
"eslint-webpack-plugin": "^3.1.1",
29+
"file-loader": "^6.2.0",
30+
"fs-extra": "^10.0.0",
31+
"html-webpack-plugin": "^5.5.0",
32+
"identity-obj-proxy": "^3.0.0",
33+
"jest": "^27.4.3",
34+
"jest-resolve": "^27.4.2",
35+
"jest-watch-typeahead": "^1.0.0",
36+
"mini-css-extract-plugin": "^2.4.5",
37+
"postcss": "^8.4.4",
38+
"postcss-flexbugs-fixes": "^5.0.2",
39+
"postcss-loader": "^6.2.1",
40+
"postcss-normalize": "^10.0.1",
41+
"postcss-preset-env": "^7.0.1",
42+
"prompts": "^2.4.2",
1143
"react": "^18.2.0",
44+
"react-app-polyfill": "^3.0.0",
45+
"react-dev-utils": "^12.0.1",
1246
"react-dom": "^18.2.0",
13-
"react-scripts": "5.0.1",
47+
"react-refresh": "^0.11.0",
48+
"react-router-dom": "^6.3.0",
49+
"resolve": "^1.20.0",
50+
"resolve-url-loader": "^4.0.0",
51+
"sass-loader": "^12.3.0",
52+
"semver": "^7.3.5",
53+
"source-map-loader": "^3.0.0",
54+
"style-loader": "^3.3.1",
55+
"tailwindcss": "^3.0.2",
56+
"terser-webpack-plugin": "^5.2.5",
1457
"uuid": "^8.3.2",
15-
"web-vitals": "^2.1.4"
58+
"web-vitals": "^2.1.4",
59+
"webpack": "^5.64.4",
60+
"webpack-dev-server": "^4.6.0",
61+
"webpack-manifest-plugin": "^4.0.2",
62+
"workbox-webpack-plugin": "^6.4.1"
1663
},
1764
"scripts": {
18-
"start": "react-scripts start",
19-
"build": "react-scripts build",
20-
"test": "react-scripts test",
21-
"eject": "react-scripts eject"
65+
"start": "node scripts/start.js",
66+
"build": "node scripts/build.js",
67+
"test": "node scripts/test.js"
2268
},
2369
"eslintConfig": {
2470
"extends": [
@@ -41,5 +87,59 @@
4187
"devDependencies": {
4288
"postcss-loader": "^7.0.1",
4389
"postcss-px-to-viewport": "^1.1.1"
90+
},
91+
"jest": {
92+
"roots": [
93+
"<rootDir>/src"
94+
],
95+
"collectCoverageFrom": [
96+
"src/**/*.{js,jsx,ts,tsx}",
97+
"!src/**/*.d.ts"
98+
],
99+
"setupFiles": [
100+
"react-app-polyfill/jsdom"
101+
],
102+
"setupFilesAfterEnv": [],
103+
"testMatch": [
104+
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
105+
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
106+
],
107+
"testEnvironment": "jsdom",
108+
"transform": {
109+
"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
110+
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
111+
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
112+
},
113+
"transformIgnorePatterns": [
114+
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
115+
"^.+\\.module\\.(css|sass|scss)$"
116+
],
117+
"modulePaths": [],
118+
"moduleNameMapper": {
119+
"^react-native$": "react-native-web",
120+
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
121+
},
122+
"moduleFileExtensions": [
123+
"web.js",
124+
"js",
125+
"web.ts",
126+
"ts",
127+
"web.tsx",
128+
"tsx",
129+
"json",
130+
"web.jsx",
131+
"jsx",
132+
"node"
133+
],
134+
"watchPlugins": [
135+
"jest-watch-typeahead/filename",
136+
"jest-watch-typeahead/testname"
137+
],
138+
"resetMocks": true
139+
},
140+
"babel": {
141+
"presets": [
142+
"react-app"
143+
]
44144
}
45145
}

‎src/App.js

+20-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,30 @@
11
import './App.css'
22
import Home from './pages/Home/Home'
3+
import { BrowserRouter, Route, Routes } from 'react-router-dom'
4+
import AllSearch from './pages/Search'
5+
import Go from "./components/go"
6+
import Phb from './components/paihangbang'
7+
import Per from './pages/Per'
8+
39

410

511

612
function App () {
713
return (
8-
<div className="App">
9-
<Home />
10-
</div>
14+
<BrowserRouter>
15+
<div className="App">
16+
<Routes>
17+
<Route path="/" element={<Home />}></Route>
18+
<Route path="/search" element={<AllSearch />} ></Route>
19+
<Route path='/19723756' element={<Phb id="19723756" />}></Route>
20+
<Route path='/3779629' element={<Phb id="3779629" />}></Route>
21+
<Route path='/2884035' element={<Phb id="2884035" />}></Route>
22+
<Route path='/3778678' element={<Phb id="3778678" />}></Route>
23+
<Route path='/per' element={<Per id="1970559930" />}></Route>
24+
</Routes>
25+
<Go />
26+
</div>
27+
</BrowserRouter>
1128
)
1229
}
1330

‎src/Track/indec.css

Whitespace-only changes.

‎src/Track/index.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { useEffect, useState } from 'react'
2+
3+
4+
function Track () {
5+
useEffect(() => {
6+
const loadList = async () => {
7+
const res = await http.get('/playlist/track/all?id')
8+
console.log(res)
9+
}
10+
loadList()
11+
}, [])
12+
return (
13+
<>
14+
123
15+
</>
16+
)
17+
}
18+
19+
export default Track

‎src/components/go/index.css

Whitespace-only changes.

‎src/components/go/index.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {
2+
HomeOutlined,
3+
LeftOutlined
4+
} from '@ant-design/icons'
5+
import { Space } from 'antd'
6+
import React from 'react'
7+
import { useNavigate } from 'react-router-dom'
8+
9+
function Go () {
10+
const navigate = useNavigate()
11+
//前进
12+
const forward = () => {
13+
navigate(1)
14+
}
15+
const goHome = () => {
16+
navigate('/')
17+
}
18+
return (
19+
<Space>
20+
<LeftOutlined onClick={forward} />
21+
<HomeOutlined onClick={goHome} />
22+
</Space>
23+
)
24+
}
25+
26+
export default Go

‎src/components/paihangbang/index.css

Whitespace-only changes.

‎src/components/paihangbang/index.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useEffect } from "react"
2+
import { http } from '../../utils/http'
3+
4+
5+
6+
function Phb (id) {
7+
useEffect(() => {
8+
const loadList = async () => {
9+
10+
const res = await http.get(`/playlist/detail?id=${id}`)
11+
console.log(res)
12+
}
13+
loadList()
14+
}, [])
15+
return (
16+
<>
17+
18+
</>
19+
)
20+
}
21+
22+
export default Phb

‎src/pages/Home/Home.js

+14-14
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
11
import { useEffect, useState } from 'react'
2-
import React from 'react'
32
import { http } from '../../utils/http'
4-
import { Input } from 'antd'
53
import './Home.css'
64
import { v4 as uuidv4 } from 'uuid'
7-
5+
import { Input } from 'antd'
6+
import React from 'react'
7+
import { useNavigate } from 'react-router-dom'
8+
import Phb from '../../components/paihangbang'
89

910
const { Search } = Input
10-
const onSearch = (value) => console.log(value)
1111
function Home () {
12-
const [search, setSearch] = useState()
13-
// useEffect(() => {
14-
// const loadList = async () => {
15-
// const res = await http.get('/search/hot/detail')
16-
// setSearch(res.data)
17-
// }
18-
// loadList()
19-
// }, [])
12+
const navigate = useNavigate()
13+
const onFocus = () => {
14+
navigate('/search')
15+
}
2016
const [all, setAll] = useState([])
2117
useEffect(() => {
2218
const loadList = async () => {
@@ -26,22 +22,26 @@ function Home () {
2622
}
2723
loadList()
2824
}, [])
25+
//push跳转 以params参数为例，navigate默认开启push模式
26+
const pushShow = (id) => {
27+
navigate(`/${id}`)
28+
}
2929
return (
3030
<>
3131
<div className="nav">
3232
<h2>网易云音乐</h2>
3333
<Search
3434
placeholder="搜索歌曲"
3535
allowClear
36-
onSearch={onSearch}
36+
onFocus={onFocus}
3737
style={{
3838
width: "100%",
3939
}}
4040
/>
4141
</div>
4242
<div className='paihang'>
4343
{all.map(item => (
44-
<div className='paihang-item' key={uuidv4()}>
44+
<div className='paihang-item' key={uuidv4()} onClick={() => pushShow(item.id)}>
4545
<img
4646
src={item.coverImgUrl} alt="" style={{ witdh: "12vw", height: "12vh" }} />
4747
<p>{item.updateFrequency}</p>

‎src/pages/Per/index.css

Whitespace-only changes.

‎src/pages/Per/index.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { useEffect } from "react"
2+
import { http } from "../../utils/http"
3+
4+
5+
6+
7+
function Per (id) {
8+
useEffect(() => {
9+
const loadList = async () => {
10+
const res = await http.get(`/related/playlist?id=${id}`)
11+
console.log(res)
12+
}
13+
loadList()
14+
}, [])
15+
}
16+
17+
export default Per

‎src/pages/SFirst/index.css

Whitespace-only changes.

‎src/pages/SFirst/index.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
3+
4+
// function SFirst () {
5+
// return (
6+
// <div className="body">
7+
// <div className="history"></div>
8+
// <div className="bangdan">
9+
// <p>热搜榜</p>
10+
// <ol>
11+
// {search.map(item => (
12+
// <li style={{ listStyleType: "none" }} key={search.indexOf(item)}>
13+
// <span>{`${search.indexOf(item) + 1} `}</span>
14+
// <span><p>{item.searchWord}</p><p>{item.content}</p></span>
15+
// <span>{item.score}</span>
16+
// </li>
17+
// ))}
18+
// </ol>
19+
// </div>
20+
// </div>
21+
// )
22+
// }
23+
// export default SFirst

‎src/pages/Search/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
li {
2+
list-style: none;
3+
}

0 commit comments

Comments
 (0)