Skip to content

Commit c909e8c

Browse files
authored
feat: 完成登录注册和首页 (#7)
* feat: 完成登录注册和首页 * feat: 完成 Tab 组件 * fix: 删除多余的 activeIndex * feat: logo 替换 * fix: 找到 swiper 问题并修复 * feat: 解决 swiper 问题, swiper.update
1 parent 655a706 commit c909e8c

File tree

35 files changed

+689
-105
lines changed

35 files changed

+689
-105
lines changed

.vscode/settings.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"typescriptreact"
1717
],
1818
"cSpell.words": [
19+
"Swiper",
1920
"Vercel",
2021
"douyin",
2122
"gitee",

backend/src/action/UserAction.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
/* eslint-disable @typescript-eslint/promise-function-async */
22
import { User } from 'models'
3-
import Omit from 'omit.js'
43

54
/**
65
* 添加用户
76
* @param { User } user
87
*/
9-
const Create = async (user: Omit<User, 'id'>) => {
10-
return Omit(await user.save(), ['password'])
8+
const Create = async (user: User) => {
9+
return await user.save()
1110
}
1211

1312
/**

backend/src/database/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ const sequelize = new Sequelize(database, user, password, {
1111
})
1212

1313
const init = async () => {
14-
await sequelize.sync({ alter: isDev })
15-
console.log('All models were synchronized successfully.')
14+
// await sequelize.sync({ alter: isDev })
15+
// console.log('All models were synchronized successfully.')
1616
}
1717
export { init }
1818
export default sequelize

backend/src/models/User.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export enum Gender {
88
}
99

1010
class User extends Model {
11-
public id!: number
11+
public id!: number | null
1212
public username!: string
1313
public password!: string
1414
public profile?: string

backend/src/service/UserService.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,12 @@ const Register = async (user: User): Promise<Restful> => {
1919
user.password = md5Crypto(user.password)
2020

2121
// 去除前端可能给的多余ID(自增字段)
22-
const registeredUser = await Action.Create(Omit(user, ['id']))
22+
user.id = null
23+
const registeredUser = await Action.Create(user)
2324
return new Restful(
2425
CodeDictionary.SUCCESS,
2526
'注册成功',
26-
registeredUser.toJSON(),
27+
Omit(registeredUser.toJSON() as any, ['password']),
2728
)
2829
} catch (e) {
2930
return new Restful(
@@ -48,7 +49,7 @@ const Login = async (username: string, password: string): Promise<Restful> => {
4849
return new Restful(
4950
CodeDictionary.SUCCESS,
5051
'登陆成功',
51-
Omit(existedUser, ['password']).toJSON(),
52+
Omit(existedUser.toJSON() as any, ['password']),
5253
)
5354
}
5455
return new Restful(CodeDictionary.LOGIN_ERROR, '账号或密码错误')

frontend/config/webpack.config.js

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
1818
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin')
1919
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
2020
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
21-
const ESLintPlugin = require('eslint-webpack-plugin')
21+
// const ESLintPlugin = require('eslint-webpack-plugin')
2222
const paths = require('./paths')
2323
const modules = require('./modules')
2424
const getClientEnvironment = require('./env')
@@ -727,25 +727,25 @@ module.exports = function (webpackEnv) {
727727
// The formatter is invoked directly in WebpackDevServerUtils during development
728728
formatter: isEnvProduction ? typescriptFormatter : undefined,
729729
}),
730-
new ESLintPlugin({
731-
// Plugin options
732-
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
733-
formatter: require.resolve('react-dev-utils/eslintFormatter'),
734-
eslintPath: require.resolve('eslint'),
735-
context: paths.appSrc,
736-
cache: true,
737-
// ESLint class options
738-
cwd: paths.appPath,
739-
resolvePluginsRelativeTo: __dirname,
740-
baseConfig: {
741-
extends: [require.resolve('eslint-config-react-app/base')],
742-
rules: {
743-
...(!hasJsxRuntime && {
744-
'react/react-in-jsx-scope': 'error',
745-
}),
746-
},
747-
},
748-
}),
730+
// new ESLintPlugin({
731+
// // Plugin options
732+
// extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
733+
// formatter: require.resolve('react-dev-utils/eslintFormatter'),
734+
// eslintPath: require.resolve('eslint'),
735+
// context: paths.appSrc,
736+
// cache: true,
737+
// // ESLint class options
738+
// cwd: paths.appPath,
739+
// resolvePluginsRelativeTo: __dirname,
740+
// baseConfig: {
741+
// extends: [require.resolve('eslint-config-react-app/base')],
742+
// rules: {
743+
// ...(!hasJsxRuntime && {
744+
// 'react/react-in-jsx-scope': 'error',
745+
// }),
746+
// },
747+
// },
748+
// }),
749749
].filter(Boolean),
750750
// Some libraries import Node modules but don't use them in the browser.
751751
// Tell webpack to provide empty mocks for them so importing them works.

frontend/package-lock.json

Lines changed: 35 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

frontend/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"dependencies": {
1414
"@rematch/core": "^2.0.0-next.10",
1515
"@rematch/immer": "^2.0.0-next.10",
16+
"@rematch/select": "^3.0.0-next.10",
1617
"axios": "^0.21.1",
1718
"classnames": "^2.2.6",
1819
"hls.js": "^0.14.17",
@@ -24,7 +25,8 @@
2425
"react-refresh": "^0.8.3",
2526
"react-router-dom": "^5.2.0",
2627
"react-use": "^17.1.0",
27-
"redux": "^4.0.5"
28+
"redux": "^4.0.5",
29+
"swiper": "^6.4.11"
2830
},
2931
"devDependencies": {
3032
"@babel/core": "7.12.3",

frontend/public/favicon.ico

416 Bytes
Binary file not shown.

frontend/public/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
name="description"
1010
content="Web site created using create-react-app"
1111
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1312
<!--
1413
manifest.json provides metadata used when your web app is installed on a
1514
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +23,7 @@
2423
work correctly both with client-side routing and a non-root public URL.
2524
Learn how to configure a non-root public URL by running `npm run build`.
2625
-->
27-
<title>React App</title>
26+
<title>我和我的抖音 - 第 7 组</title>
2827
</head>
2928
<body>
3029
<noscript>You need to enable JavaScript to run this app.</noscript>

frontend/public/logo192.png

-5.22 KB
Binary file not shown.

frontend/public/logo512.png

-9.44 KB
Binary file not shown.

frontend/public/manifest.json

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,6 @@
66
"src": "favicon.ico",
77
"sizes": "64x64 32x32 24x24 16x16",
88
"type": "image/x-icon"
9-
},
10-
{
11-
"src": "logo192.png",
12-
"type": "image/png",
13-
"sizes": "192x192"
14-
},
15-
{
16-
"src": "logo512.png",
17-
"type": "image/png",
18-
"sizes": "512x512"
199
}
2010
],
2111
"start_url": ".",

frontend/src/App.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react'
22
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
33
import { RouteConfig, routes } from './routes'
4+
import { Tabs } from './tabs'
45

56
const App = (): JSX.Element => {
67
return (
@@ -11,9 +12,10 @@ const App = (): JSX.Element => {
1112
<div className="App">
1213
<Switch>
1314
{routes.map((route, i) => (
14-
<RouteWithSubRoutes key={i} {...route} />
15+
<RouteWithSubRoutes key={route.path} {...route} />
1516
))}
1617
</Switch>
18+
<Tabs />
1719
</div>
1820
</Router>
1921
)
@@ -25,9 +27,9 @@ const App = (): JSX.Element => {
2527
const RouteWithSubRoutes = (route: RouteConfig): JSX.Element => {
2628
return (
2729
<Route
30+
{...route.routeProps}
2831
path={route.path}
2932
render={(props: any) => (
30-
// pass the sub-routes down to keep nesting
3133
<route.component {...props} routes={route.routes} />
3234
)}
3335
/>

frontend/src/components/BDPlayer/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const BDPlayer: React.FC<BDPlayerProps> = ({
4141
} catch (err) {
4242
// Auto-play was prevented
4343
// Show paused UI
44-
console.error('播放失败', err)
44+
console.log('播放失败', err)
4545
}
4646
setLoading(false)
4747
}
@@ -148,6 +148,8 @@ export const BDPlayer: React.FC<BDPlayerProps> = ({
148148
className="bd-player-progress-seek"
149149
max={Math.floor(videoDuration)}
150150
onChange={(evt) => {
151+
if (!active) return
152+
151153
setCurrentTime(videoRef.current?.currentTime || 0)
152154
if (videoRef.current) {
153155
videoRef.current.currentTime = parseInt(

frontend/src/containers/Demo/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import React, { FC } from 'react'
22
import { connect } from 'react-redux'
33
import { RouteComponentProps, withRouter } from 'react-router-dom'
4-
import { Dispatch, RootState } from '@/store'
4+
import { RootDispatch, RootState } from '@/store'
55
import './index.less'
66

77
const mapState = (state: RootState) => ({
88
state: state.demo,
99
})
10-
const mapDispatch = (dispatch: Dispatch) => ({
10+
const mapDispatch = (dispatch: RootDispatch) => ({
1111
dispatch: dispatch.demo,
1212
})
13-
export type HomeProps = ReturnType<typeof mapState> &
13+
export type DemoProps = ReturnType<typeof mapState> &
1414
ReturnType<typeof mapDispatch> &
1515
RouteComponentProps
1616

17-
const Demo: FC<HomeProps> = ({ state, dispatch, history }) => {
17+
const Demo: FC<DemoProps> = ({ state, dispatch, history }) => {
1818
return (
1919
<div className="demo">
2020
<div className="demo-route">当前路由:{history.location.pathname}</div>

frontend/src/containers/Demo/model.ts

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,32 @@
11
import { createModel } from '@rematch/core'
22
import { RootModel } from '@/models'
3-
import { AxiosResponse } from 'axios'
43
import { request } from '@/utils'
5-
export interface HomeState {
4+
import { LoggedInUser } from '@/utils/request/user'
5+
export interface DemoState {
66
count: number
77
players: PlayerModel[]
88
testAPTResult: any
99
}
1010

11-
export const defaultHomeState: HomeState = {
11+
export const defaultDemoState: DemoState = {
1212
count: 0,
1313
players: [],
1414
testAPTResult: null,
1515
}
1616

1717
export const demo = createModel<RootModel>()({
18-
state: defaultHomeState,
18+
state: defaultDemoState,
1919
reducers: {
2020
// 直接修改 state 的 demo
21-
SET_COUNT: (state: HomeState, newCount: number) => {
21+
SET_COUNT: (state: DemoState, newCount: number) => {
2222
state.count = newCount
2323
return state
2424
},
25-
SET_PLAYERS: (state: HomeState, players: PlayerModel[]) => {
25+
SET_PLAYERS: (state: DemoState, players: PlayerModel[]) => {
2626
state.players = players
2727
return state
2828
},
29-
SET_testAPTResult: (
30-
state: HomeState,
31-
testAPTResult: AxiosResponse<any>,
32-
) => {
29+
SET_testAPTResult: (state: DemoState, testAPTResult: LoggedInUser) => {
3330
state.testAPTResult = testAPTResult
3431
return state
3532
},
@@ -50,7 +47,7 @@ export const demo = createModel<RootModel>()({
5047
username: 'testName',
5148
password: '123456',
5249
})
53-
demo.SET_testAPTResult(res)
50+
if (res) demo.SET_testAPTResult(res)
5451
},
5552
}
5653
},
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import '@/static/less/reset.less';
2+
3+
.bd7-home {
4+
width: 100%;
5+
height: 0;
6+
flex-grow: 1;
7+
.swiper-container {
8+
width: 100%;
9+
height: 100%;
10+
}
11+
}

0 commit comments

Comments
 (0)