皮蛋很白

React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 02 登录注册

创建导航菜单

// src\components\core\Navigation.tsx
import { Menu } from 'antd'
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { RouterState } from 'connected-react-router'

// 判断选中类名的钩子函数
function useActive(currentPath: string, path: string): string {
  return currentPath === path ? 'ant-menu-item-selected' : ''
}

const Navigation = () => {
  const router = useSelector<AppState, RouterState>(state => state.router)
  const pathname = router.location.pathname

  const isHome = useActive(pathname, '/')
  const isShop = useActive(pathname, '/shop')

  return (
    <Menu mode="horizontal" selectable={false}>
      <Menu.Item className={isHome}>
        <Link to="/">首页</Link>
      </Menu.Item>
      <Menu.Item className={isShop}>
        <Link to="/shop">商城</Link>
      </Menu.Item>
    </Menu>
  )
}

export default Navigation

// src\components\core\Layout.tsx
import React, { FC } from 'react'
import Navigation from './Navigation'

// 定义 Layout 组件参数类型的接口
interface Props {
  children: React.ReactNode
}

// FC 表示函数型组件类型
const Layout: FC<Props> = ({ children }) => {
  return (
    <div>
      <Navigation></Navigation>
      <div style={{ width: '85%', minWidth: '980px', margin: '0 auto' }}>{children}</div>
    </div>
  )
}

export default Layout

创建页头

页头组件

// src\components\core\Layout.tsx
import { PageHeader } from 'antd'
import React, { FC } from 'react'
import Navigation from './Navigation'

// 定义 Layout 组件参数类型的接口
interface Props {
  children: React.ReactNode
  title: string
  subTitle: string
}

// FC 表示函数型组件类型
const Layout: FC<Props> = ({ children, title, subTitle }) => {
  return (
    <div>
      <Navigation></Navigation>
      <PageHeader className="jumbotron" title={title} subTitle={subTitle} />
      <div style={{ width: '85%', minWidth: '980px', margin: '0 auto' }}>{children}</div>
    </div>
  )
}

export default Layout

页头样式

/* src\style.css */
.jumbotron {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
  margin-bottom: 25px;
}

.jumbotron span {
  color: #fff;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

引入样式表

// src\index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'
import './style.css'
import Routes from './Routes'
import { Provider } from 'react-redux'
import store, { history } from './store'
import { ConnectedRouter } from 'connected-react-router'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Routes />
      </ConnectedRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

页面组件传递 title 和 subTitle

// src\components\core\Home.tsx
import { useSelector } from 'react-redux'
import Layout from './Layout'

const Home = () => {
  const state = useSelector(state => state)
  return (
    <Layout title="RM商城" subTitle="优享品质 惊喜价格">
      Home {JSON.stringify(state)}
    </Layout>
  )
}

export default Home

// src\components\core\Shop.tsx
import { useSelector } from 'react-redux'
import Layout from './Layout'

const Shop = () => {
  const state = useSelector(state => state)
  return (
    <Layout title="RM商城" subTitle="挑选你喜欢的商品把">
      Shop {JSON.stringify(state)}
    </Layout>
  )
}

export default Shop

构建注册和登录表单

注册页面组件

// src\components\core\Signup.tsx
import Layout from './Layout'
import { Button, Form, Input } from 'antd'

const Signup = () => {
  return (
    <Layout title="注册" subTitle="还没有账号？注册一个吧">
      <Form>
        <Form.Item name="name" label="昵称">
          <Input />
        </Form.Item>
        <Form.Item name="password" label="密码">
          <Input.Password />
        </Form.Item>
        <Form.Item name="email" label="邮箱">
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            注册
          </Button>
        </Form.Item>
      </Form>
    </Layout>
  )
}

export default Signup

登录页面组件

// src\components\core\Signin.tsx
import Layout from './Layout'
import { Button, Form, Input } from 'antd'

const Signin = () => {
  return (
    <Layout title="登录" subTitle="">
      <Form>
        <Form.Item name="email" label="邮箱">
          <Input />
        </Form.Item>
        <Form.Item name="password" label="密码">
          <Input.Password />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </Layout>
  )
}

export default Signin

配置路由

// src\Routes.tsx
import { HashRouter, Route, Switch } from 'react-router-dom'
import Home from './components/core/Home'
import Shop from './components/core/Shop'
import Signin from './components/core/Signin'
import Signup from './components/core/Signup'

const Routes = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/shop" component={Shop} />
        <Route path="/signin" component={Signin} />
        <Route path="/signup" component={Signup} />
      </Switch>
    </HashRouter>
  )
}

export default Routes

配置导航菜单

// src\components\core\Navigation.tsx
import { Menu } from 'antd'
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { RouterState } from 'connected-react-router'

// 判断选中类名的钩子函数
function useActive(currentPath: string, path: string): string {
  return currentPath === path ? 'ant-menu-item-selected' : ''
}

const Navigation = () => {
  const router = useSelector<AppState, RouterState>(state => state.router)
  const pathname = router.location.pathname

  const isHome = useActive(pathname, '/')
  const isShop = useActive(pathname, '/shop')
  const isSignin = useActive(pathname, '/signin')
  const isSignup = useActive(pathname, '/signup')

  return (
    <Menu mode="horizontal" selectable={false}>
      <Menu.Item className={isHome}>
        <Link to="/">首页</Link>
      </Menu.Item>
      <Menu.Item className={isShop}>
        <Link to="/shop">商城</Link>
      </Menu.Item>
      <Menu.Item className={isSignin}>
        <Link to="/signin">登录</Link>
      </Menu.Item>
      <Menu.Item className={isSignup}>
        <Link to="/signup">注册</Link>
      </Menu.Item>
    </Menu>
  )
}

export default Navigation

实现注册的 Redux 流程

和注册相关的 action

// src\store\actions\auth.action.ts
// action.type 常量
export const SIGNUP = 'SIGNUP' // 发送注册请求
export const SIGNUP_SUCCESS = 'SIGNUP_SUCCESS' // 注册成功
export const SIGNUP_FAIL = 'SIGNUP_FAIL' // 注册失败

// action.payload 接口类型
export interface SignupPayload {
  email: string
  name: string
  password: string
}

// action 对象接口类型
export interface SignupAction {
  type: typeof SIGNUP
  payload: SignupPayload
}
export interface SignupSuccessAction {
  type: typeof SIGNUP_SUCCESS
}
export interface SignupFailAction {
  type: typeof SIGNUP_FAIL
  message: string
}

// actionCreator
export const signup = (payload: SignupPayload): SignupAction => ({
  type: SIGNUP,
  payload
})
export const signupSuccess = (): SignupSuccessAction => ({
  type: SIGNUP_SUCCESS
})
export const signupFail = (message: string): SignupFailAction => ({
  type: SIGNUP_FAIL,
  message
})

// action 的联合类型
export type AuthUnionType = SignupAction | SignupSuccessAction | SignupFailAction

定义 reducer

// src\store\reducers\auth.reducer.ts
import { AuthUnionType, SIGNUP, SIGNUP_FAIL, SIGNUP_SUCCESS } from '../actions/auth.action'

// state 接口类型
export interface AuthState {
  signup: {
    loaded: boolean
    success: boolean
    message: string
  }
}

// state 默认值
const initialState: AuthState = {
  signup: {
    loaded: false, // 注册请求是否结束
    success: false, // 注册是否成功
    message: '' // 注册失败提示
  }
}

export default function authReducer(state = initialState, action: AuthUnionType) {
  switch (action.type) {
    // 发送注册请求
    case SIGNUP:
      return {
        ...state,
        signup: {
          loaded: false,
          success: false
        }
      }
    // 注册成功
    case SIGNUP_SUCCESS:
      return {
        ...state,
        signup: {
          loaded: true,
          success: true
        }
      }
    // 注册失败
    case SIGNUP_FAIL:
      return {
        ...state,
        signup: {
          loaded: true,
          success: false,
          message: action.message
        }
      }
    default:
      return state
  }
}

// src\store\reducers\index.ts
import { connectRouter, RouterState } from 'connected-react-router'
import { History } from 'history'
import { combineReducers } from 'redux'
import authReducer, { AuthState } from './auth.reducer'
// import testReducer from './test.reducer'

// 定义一个包含 router 的 store 类型接口 供外部使用
export interface AppState {
  router: RouterState
  auth: AuthState
}

const createRootReducer = (history: History) =>
  combineReducers({
    // test: testReducer,
    router: connectRouter(history),
    auth: authReducer
  })

export default createRootReducer

定义 saga 接收请求

// src\store\sagas\auth.saga.ts
import axios from 'axios'
import { takeEvery, put } from 'redux-saga/effects'
import { API } from '../../config'
import { SIGNUP, SignupAction, signupFail, signupSuccess } from '../actions/auth.action'

function* handleSignup(action: SignupAction) {
  try {
    const response = yield axios.post(`${API}/signup`, action.payload)
    yield put(signupSuccess())
  } catch (error) {
    yield put(signupFail(error.response.data.errors[0]))
  }
}

export default function* authSaga() {
  yield takeEvery(SIGNUP, handleSignup)
}

// src\store\sagas\index.ts
import { all } from 'redux-saga/effects'
import authSaga from './auth.saga'

export default function* rootSaga() {
  yield all([authSaga()])
}

// src\store\index.ts
import { applyMiddleware, createStore } from 'redux'
import createRootReducer from './reducers'
import { createHashHistory } from 'history'
import { routerMiddleware } from 'connected-react-router'
import { composeWithDevTools } from 'redux-devtools-extension'
import createSagaMiddleware from '@redux-saga/core'
import rootSaga from './sagas'

export const history = createHashHistory()

const sagaMiddleware = createSagaMiddleware()

const store = createStore(
  createRootReducer(history),
  composeWithDevTools(applyMiddleware(routerMiddleware(history), sagaMiddleware))
)

sagaMiddleware.run(rootSaga)

export default store

修改页面组件

// src\components\core\Signup.tsx
import Layout from './Layout'
import { Button, Form, Input } from 'antd'
import { signup, SignupPayload } from '../../store/actions/auth.action'
import { useDispatch } from 'react-redux'

const Signup = () => {
  // 获取 dispatch 方法
  const dispatch = useDispatch()

  // 注册表单提交
  const onFinish = (value: SignupPayload) => {
    // 发送注册请求
    dispatch(signup(value))
  }

  return (
    <Layout title="注册" subTitle="还没有账号？注册一个吧">
      <Form onFinish={onFinish}>
        <Form.Item name="name" label="昵称">
          <Input />
        </Form.Item>
        <Form.Item name="password" label="密码">
          <Input.Password />
        </Form.Item>
        <Form.Item name="email" label="邮箱">
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            注册
          </Button>
        </Form.Item>
      </Form>
    </Layout>
  )
}

export default Signup

处理注册结果

实现内容

注册成功清空表单
注册成功显示成功的提示信息
注册失败显示失败的提示信息
离开页面之前重置状态
- 注册状态如果未重置，返回该页面仍然会显示注册结果和提示

刷新表单和显示提示信息

// src\components\core\Signup.tsx
import Layout from './Layout'
import { Button, Form, Input, Result } from 'antd'
import { signup, SignupPayload } from '../../store/actions/auth.action'
import { useDispatch, useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { AuthState } from '../../store/reducers/auth.reducer'
import { useEffect } from 'react'
import { Link } from 'react-router-dom'

const Signup = () => {
  // 获取 dispatch 方法
  const dispatch = useDispatch()

  // 获取注册结果
  const auth = useSelector<AppState, AuthState>(state => state.auth)

  // 创建表单数据域
  // 用于绑定到 Form 组件上操作表单
  const [form] = Form.useForm()

  // 注册表单提交
  const onFinish = (value: SignupPayload) => {
    // 发送注册请求
    dispatch(signup(value))
  }

  // 监听状态
  useEffect(() => {
    // 1. 注册成功 清空表单
    if (auth.signup.loaded && auth.signup.success) {
      form.resetFields()
    }
  }, [auth])

  // 2. 注册成功 显示成功的提示信息
  const showSuccess = () => {
    if (auth.signup.loaded && auth.signup.success) {
      return (
        <Result
          status="success"
          title="注册成功"
          extra={[
            <Button type="primary">
              <Link to="/signin">登录</Link>
            </Button>
          ]}
        />
      )
    }
  }

  // 3. 注册失败 显示失败的提示信息
  const showError = () => {
    if (auth.signup.loaded && !auth.signup.success) {
      return <Result status="warning" title="注册失败" subTitle={auth.signup.message} />
    }
  }

  // 4. 离开页面之前 重置页面状态
  useEffect(() => {
    // 离开页面时会执行这个方法
    return () => {
      // 稍后写
    }
  }, [])

  // 注册表单
  const signupForm = () => (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="name" label="昵称">
        <Input />
      </Form.Item>
      <Form.Item name="password" label="密码">
        <Input.Password />
      </Form.Item>
      <Form.Item name="email" label="邮箱">
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          注册
        </Button>
      </Form.Item>
    </Form>
  )

  return (
    <Layout title="注册" subTitle="还没有账号？注册一个吧">
      {showSuccess()}
      {showError()}
      {signupForm()}
    </Layout>
  )
}

export default Signup

重置注册状态

定义 action

// src\store\actions\auth.action.ts
// action.type 常量
export const SIGNUP = 'SIGNUP' // 发送注册请求
export const SIGNUP_SUCCESS = 'SIGNUP_SUCCESS' // 注册成功
export const SIGNUP_FAIL = 'SIGNUP_FAIL' // 注册失败
export const RESET_SIGNUP = 'RESET_SIGNUP' // 重置注册状态

// action.payload 接口类型
export interface SignupPayload {
  email: string
  name: string
  password: string
}

// action 对象接口类型
export interface SignupAction {
  type: typeof SIGNUP
  payload: SignupPayload
}
export interface SignupSuccessAction {
  type: typeof SIGNUP_SUCCESS
}
export interface SignupFailAction {
  type: typeof SIGNUP_FAIL
  message: string
}
export interface ResetSignupAction {
  type: typeof RESET_SIGNUP
}

// actionCreator
export const signup = (payload: SignupPayload): SignupAction => ({
  type: SIGNUP,
  payload
})
export const signupSuccess = (): SignupSuccessAction => ({
  type: SIGNUP_SUCCESS
})
export const signupFail = (message: string): SignupFailAction => ({
  type: SIGNUP_FAIL,
  message
})
export const resetSignup = (): ResetSignupAction => ({
  type: RESET_SIGNUP
})

// action 的联合类型
export type AuthUnionType = SignupAction | SignupSuccessAction | SignupFailAction | ResetSignupAction

定义 reducer

// src\store\reducers\auth.reducer.ts
import { AuthUnionType, RESET_SIGNUP, SIGNUP, SIGNUP_FAIL, SIGNUP_SUCCESS } from '../actions/auth.action'

// state 接口类型
export interface AuthState {
  signup: {
    loaded: boolean
    success: boolean
    message: string
  }
}

// state 默认值
const initialState: AuthState = {
  signup: {
    loaded: false, // 注册请求是否结束
    success: false, // 注册是否成功
    message: '' // 注册失败提示
  }
}

export default function authReducer(state = initialState, action: AuthUnionType) {
  switch (action.type) {
    // 发送注册请求
    case SIGNUP:
      return {
        ...state,
        signup: {
          loaded: false,
          success: false
        }
      }
    // 注册成功
    case SIGNUP_SUCCESS:
      return {
        ...state,
        signup: {
          loaded: true,
          success: true
        }
      }
    // 注册失败
    case SIGNUP_FAIL:
      return {
        ...state,
        signup: {
          loaded: true,
          success: false,
          message: action.message
        }
      }
    // 重置注册状态
    case RESET_SIGNUP:
      return {
        ...state,
        signup: {
          loaded: false,
          success: false,
          message: ''
        }
      }
    default:
      return state
  }
}

执行重置操作

// src\components\core\Signup.tsx
import Layout from './Layout'
import { Button, Form, Input, Result } from 'antd'
import { resetSignup, signup, SignupPayload } from '../../store/actions/auth.action'
import { useDispatch, useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { AuthState } from '../../store/reducers/auth.reducer'
import { useEffect } from 'react'
import { Link } from 'react-router-dom'

const Signup = () => {
  // 获取 dispatch 方法
  const dispatch = useDispatch()

  // 获取注册结果
  const auth = useSelector<AppState, AuthState>(state => state.auth)

  // 创建表单数据域
  // 用于绑定到 Form 组件上操作表单
  const [form] = Form.useForm()

  // 注册表单提交
  const onFinish = (value: SignupPayload) => {
    // 发送注册请求
    dispatch(signup(value))
  }

  // 监听状态
  useEffect(() => {
    // 1. 注册成功 清空表单
    if (auth.signup.loaded && auth.signup.success) {
      form.resetFields()
    }
  }, [auth])

  // 2. 注册成功 显示成功的提示信息
  const showSuccess = () => {
    if (auth.signup.loaded && auth.signup.success) {
      return (
        <Result
          status="success"
          title="注册成功"
          extra={[
            <Button type="primary">
              <Link to="/signin">登录</Link>
            </Button>
          ]}
        />
      )
    }
  }

  // 3. 注册失败 显示失败的提示信息
  const showError = () => {
    if (auth.signup.loaded && !auth.signup.success) {
      return <Result status="warning" title="注册失败" subTitle={auth.signup.message} />
    }
  }

  // 4. 离开页面之前 重置页面状态
  useEffect(() => {
    // 离开页面时会执行这个方法
    return () => {
      dispatch(resetSignup())
    }
  }, [])

  // 注册表单
  const signupForm = () => (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="name" label="昵称">
        <Input />
      </Form.Item>
      <Form.Item name="password" label="密码">
        <Input.Password />
      </Form.Item>
      <Form.Item name="email" label="邮箱">
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          注册
        </Button>
      </Form.Item>
    </Form>
  )

  return (
    <Layout title="注册" subTitle="还没有账号？注册一个吧">
      {showSuccess()}
      {showError()}
      {signupForm()}
    </Layout>
  )
}

export default Signup

实现登录的 Redux 流程

和登录相关的 action

// src\store\actions\auth.action.ts

/**
 * 注册
 */

...

/**
 * 登录
 */

export const SIGNIN = 'SIGNIN' // 发送登录请求
export const SIGNIN_SUCCESS = 'SIGNIN_SUCCESS' // 登录成功
export const SIGNIN_FAIL = 'SIGNIN_FAIL' // 登录失败

export interface SigninPayload {
  email: string
  password: string
}

export interface SigninAction {
  type: typeof SIGNIN
  payload: SigninPayload
}

export interface SigninSuccessAction {
  type: typeof SIGNIN_SUCCESS
}

export interface SigninFailAction {
  type: typeof SIGNIN_FAIL
  message: string
}

export const signin = (payload: SigninPayload): SigninAction => ({
  type: SIGNIN,
  payload
})

export const signinSuccess = (): SigninSuccessAction => ({
  type: SIGNIN_SUCCESS
})

export const signinFail = (message: string): SigninFailAction => ({
  type: SIGNIN_FAIL,
  message
})

// action 的联合类型
export type AuthUnionType =
  | SignupAction
  | SignupSuccessAction
  | SignupFailAction
  | ResetSignupAction
  | SigninAction
  | SigninSuccessAction
  | SigninFailAction

定义 reducer

// src\store\reducers\auth.reducer.ts
import {
  AuthUnionType,
  RESET_SIGNUP,
  SIGNIN,
  SIGNIN_FAIL,
  SIGNIN_SUCCESS,
  SIGNUP,
  SIGNUP_FAIL,
  SIGNUP_SUCCESS
} from '../actions/auth.action'

// state 接口类型
export interface AuthState {
  signup: {
    loaded: boolean
    success: boolean
    message: string
  }
  signin: {
    loaded: boolean
    success: boolean
    message: string
  }
}

// state 默认值
const initialState: AuthState = {
  signup: {
    loaded: false, // 注册请求是否结束
    success: false, // 注册是否成功
    message: '' // 注册失败提示
  },
  signin: {
    loaded: false, // 登录请求是否结束
    success: false, // 登录是否成功
    message: '' // 登录失败提示
  }
}

export default function authReducer(state = initialState, action: AuthUnionType) {
  switch (action.type) {
    ...
    
    // 发送登录请求
    case SIGNIN:
      return {
        ...state,
        signin: {
          loaded: false,
          success: false,
          message: ''
        }
      }
    // 登录成功
    case SIGNIN_SUCCESS:
      return {
        ...state,
        signin: {
          loaded: true,
          success: true,
          message: ''
        }
      }
    // 登录失败
    case SIGNIN_FAIL:
      return {
        ...state,
        signin: {
          loaded: true,
          success: false,
          message: action.message
        }
      }
    default:
      return state
  }
}

定义 sage 接收请求

// src\store\sagas\auth.saga.ts
import axios, { AxiosResponse } from 'axios'
import { takeEvery, put } from 'redux-saga/effects'
import { API } from '../../config'
import {
  SIGNIN,
  SigninAction,
  signinFail,
  signinSuccess,
  SIGNUP,
  SignupAction,
  signupFail,
  signupSuccess
} from '../actions/auth.action'

function* handleSignup(action: SignupAction) {
  try {
    yield axios.post(`${API}/signup`, action.payload)
    yield put(signupSuccess())
  } catch (error) {
    yield put(signupFail(error.response.data.errors[0]))
  }
}

function* handleSignin(action: SigninAction) {
  try {
    const response: AxiosResponse = yield axios.post(`${API}/signin`, action.payload)

    // 存储令牌
    localStorage.setItem('jwt', JSON.stringify(response.data))

    yield put(signinSuccess())
  } catch (error) {
    yield put(signinFail(error.response.data.errors[0]))
  }
}

export default function* authSaga() {
  // 注册
  yield takeEvery(SIGNUP, handleSignup)
  // 登录
  yield takeEvery(SIGNIN, handleSignin)
}

修改页面组件

// src\components\core\Signin.tsx
import Layout from './Layout'
import { Button, Form, Input } from 'antd'
import { signin, SigninPayload } from '../../store/actions/auth.action'
import { useDispatch } from 'react-redux'

const Signin = () => {
  // 获取 dispatch
  const dispatch = useDispatch()

  const onFinish = (value: SigninPayload) => {
    dispatch(signin(value))
  }

  return (
    <Layout title="登录" subTitle="">
      <Form onFinish={onFinish}>
        <Form.Item name="email" label="邮箱">
          <Input />
        </Form.Item>
        <Form.Item name="password" label="密码">
          <Input.Password />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </Layout>
  )
}

export default Signin

处理登录结果

实现内容

获取登录结果
登录失败显示错误信息
登录成功根据角色跳转到对应的管理页面
处理导航链接
- 已登录
- 隐藏[登录，注册]
- 显示[dashboard]

获取登录结果和显示失败信息

// src\components\core\Signin.tsx
import Layout from './Layout'
import { Button, Form, Input, Result } from 'antd'
import { signin, SigninPayload } from '../../store/actions/auth.action'
import { useDispatch, useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { AuthState } from '../../store/reducers/auth.reducer'

const Signin = () => {
  // 获取 dispatch
  const dispatch = useDispatch()

  const onFinish = (value: SigninPayload) => {
    dispatch(signin(value))
  }

  // 1. 获取登录结果
  const auth = useSelector<AppState, AuthState>(state => state.auth)
  // 2. 登录失败 显示错误信息
  const showError = () => {
    if (auth.signin.loaded && !auth.signin.success) {
      return <Result status="warning" title="登录失败" subTitle={auth.signin.message} />
    }
  }
  // 3. 登录成功 根据角色跳转到对应的管理页面
  // 4. 处理导航链接: 已登录 隐藏[登录，注册] 显示[dashboard]

  // 登录表单
  const singinForm = () => (
    <Form onFinish={onFinish}>
      <Form.Item name="email" label="邮箱">
        <Input />
      </Form.Item>
      <Form.Item name="password" label="密码">
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
  )

  return (
    <Layout title="登录" subTitle="">
      {showError()}
      {singinForm()}
    </Layout>
  )
}

export default Signin

登录成功跳转管理页面

定义一个判断是否登录的方法

首先定义一个 User 接口和 Jwt 接口便于其它地方使用：

// src\store\models\auth.ts
export interface User {
  _id: string
  name: string
  email: string
  role: number
}

export interface Jwt {
  token: string
  user: User
}

定义判断方法：

// src\helpers\auth.ts
import { Jwt } from '../store/models/auth'

// 是否登录
export function isAuth(): boolean | Jwt {
  const jwt = localStorage.getItem('jwt')
  if (jwt) {
    return JSON.parse(jwt)
  }

  return false
}

跳转页面

// src\components\core\Signin.tsx
import Layout from './Layout'
import { Button, Form, Input, Result } from 'antd'
import { signin, SigninPayload } from '../../store/actions/auth.action'
import { useDispatch, useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { AuthState } from '../../store/reducers/auth.reducer'
import { isAuth } from '../../helpers/auth'
import { Jwt } from '../../store/models/auth'
import { Redirect } from 'react-router-dom'

const Signin = () => {
  // 获取 dispatch
  const dispatch = useDispatch()

  const onFinish = (value: SigninPayload) => {
    dispatch(signin(value))
  }

  // 1. 获取登录结果
  const auth = useSelector<AppState, AuthState>(state => state.auth)
  // 2. 登录失败 显示错误信息
  const showError = () => {
    if (auth.signin.loaded && !auth.signin.success) {
      return <Result status="warning" title="登录失败" subTitle={auth.signin.message} />
    }
  }
  // 3. 登录成功 根据角色跳转到对应的管理页面
  const redirectToDashboard = () => {
    const auth = isAuth()
    if (auth) {
      const {
        user: { role }
      } = auth as Jwt

      if (role === 0) {
        // 普通用户
        return <Redirect to="/user/dashboard" />
      } else {
        // 管理员
        return <Redirect to="/admin/dashboard" />
      }
    }
  }
  // 4. 处理导航链接: 已登录 隐藏[登录，注册] 显示[dashboard]

  // 登录表单
  const singinForm = () => (
    <Form onFinish={onFinish}>
      <Form.Item name="email" label="邮箱">
        <Input />
      </Form.Item>
      <Form.Item name="password" label="密码">
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
  )

  return (
    <Layout title="登录" subTitle="">
      {showError()}
      {redirectToDashboard()}
      {singinForm()}
    </Layout>
  )
}

export default Signin

处理导航链接

// src\components\core\Navigation.tsx
import { Menu } from 'antd'
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { RouterState } from 'connected-react-router'
import { isAuth } from '../../helpers/auth'
import { Jwt } from '../../store/models/auth'

// 判断选中类名的钩子函数
function useActive(currentPath: string, path: string): string {
  return currentPath === path ? 'ant-menu-item-selected' : ''
}

const Navigation = () => {
  const router = useSelector<AppState, RouterState>(state => state.router)
  const pathname = router.location.pathname

  const isHome = useActive(pathname, '/')
  const isShop = useActive(pathname, '/shop')
  const isSignin = useActive(pathname, '/signin')
  const isSignup = useActive(pathname, '/signup')
  const isDashboard = useActive(pathname, getDashboardUrl())

  function getDashboardUrl() {
    let url = '/user/dashboard'
    if (isAuth()) {
      const {
        user: { role }
      } = isAuth() as Jwt

      if (role === 1) {
        url = '/admin/dashboard'
      }
    }

    return url
  }

  return (
    <Menu mode="horizontal" selectable={false}>
      <Menu.Item className={isHome}>
        <Link to="/">首页</Link>
      </Menu.Item>
      <Menu.Item className={isShop}>
        <Link to="/shop">商城</Link>
      </Menu.Item>
      {!isAuth() && (
        <>
          <Menu.Item className={isSignin}>
            <Link to="/signin">登录</Link>
          </Menu.Item>
          <Menu.Item className={isSignup}>
            <Link to="/signup">注册</Link>
          </Menu.Item>
        </>
      )}
      {isAuth() && (
        <Menu.Item className={isDashboard}>
          <Link to={getDashboardUrl()}>dashboard</Link>
        </Menu.Item>
      )}
    </Menu>
  )
}

export default Navigation

创建 Dashboard 用户管理页面

创建普通用户管理页面

// src\components\admin\Dashboard.tsx
import Layout from '../core/Layout'

const Dashboard = () => {
  return (
    <Layout title="用户 dashboard" subTitle="">
      Dashboard
    </Layout>
  )
}

export default Dashboard

配置路由

// src\Routes.tsx
import { HashRouter, Route, Switch } from 'react-router-dom'
import Dashboard from './components/admin/Dashboard'
import Home from './components/core/Home'
import Shop from './components/core/Shop'
import Signin from './components/core/Signin'
import Signup from './components/core/Signup'

const Routes = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/shop" component={Shop} />
        <Route path="/signin" component={Signin} />
        <Route path="/signup" component={Signup} />
        <Route path="/user/dashboard" component={Dashboard} />
      </Switch>
    </HashRouter>
  )
}

export default Routes

创建受保护的路由

dashboard 页面需要登陆后才能访问，要添加访问权限。

创建一个受保护的路由组件，限制只有登录后才能访问的页面：

// src\components\admin\PrivateRoute.tsx
import { Redirect, Route, RouteProps } from 'react-router-dom'
import { FC } from 'react'
import { isAuth } from '../../helpers/auth'

interface PrivateRouteProps extends RouteProps {
  component: React.ComponentType<any>
}

const PrivateRoute: FC<PrivateRouteProps> = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props => {
        const auth = isAuth()
        if (auth) {
          return <Component {...props} />
        }

        return <Redirect to="/signin" />
      }}
    />
  )
}

export default PrivateRoute

替换原来的路由：

// src\Routes.tsx
import { HashRouter, Route, Switch } from 'react-router-dom'
import Dashboard from './components/admin/Dashboard'
import PrivateRoute from './components/admin/PrivateRoute'
import Home from './components/core/Home'
import Shop from './components/core/Shop'
import Signin from './components/core/Signin'
import Signup from './components/core/Signup'

const Routes = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/shop" component={Shop} />
        <Route path="/signin" component={Signin} />
        <Route path="/signup" component={Signup} />
        <PrivateRoute path="/user/dashboard" component={Dashboard} />
      </Switch>
    </HashRouter>
  )
}

export default Routes

创建管理员管理页面

// src\components\admin\AdminDashboard.tsx
import Layout from '../core/Layout'

const AdminDashboard = () => {
  return (
    <Layout title="管理员 dashboard" subTitle="">
      Dashboard
    </Layout>
  )
}

export default AdminDashboard

创建管理员身份判断路由

// src\components\admin\AdminRoute.tsx
import { Redirect, Route, RouteProps } from 'react-router-dom'
import { FC } from 'react'
import { isAuth } from '../../helpers/auth'
import { Jwt } from '../../store/models/auth'

interface PrivateRouteProps extends RouteProps {
  component: React.ComponentType<any>
}

const AdminRoute: FC<PrivateRouteProps> = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props => {
        const auth = isAuth() as Jwt
        if (auth && auth.user.role === 1) {
          return <Component {...props} />
        }

        return <Redirect to="/signin" />
      }}
    />
  )
}

export default AdminRoute

配置管理员管理页面路由

// src\Routes.tsx
import { HashRouter, Route, Switch } from 'react-router-dom'
import AdminDashboard from './components/admin/AdminDashboard'
import AdminRoute from './components/admin/AdminRoute'
import Dashboard from './components/admin/Dashboard'
import PrivateRoute from './components/admin/PrivateRoute'
import Home from './components/core/Home'
import Shop from './components/core/Shop'
import Signin from './components/core/Signin'
import Signup from './components/core/Signup'

const Routes = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/shop" component={Shop} />
        <Route path="/signin" component={Signin} />
        <Route path="/signup" component={Signup} />
        <PrivateRoute path="/user/dashboard" component={Dashboard} />
        <AdminRoute path="/admin/dashboard" component={AdminDashboard} />
      </Switch>
    </HashRouter>
  )
}

export default Routes

完善管理员 Dashboard 页面

// src\components\admin\AdminDashboard.tsx
import { Col, Descriptions, Menu, Row, Typography } from 'antd'
import { Link } from 'react-router-dom'
import Layout from '../core/Layout'
import { ShoppingCartOutlined, UserOutlined, OrderedListOutlined } from '@ant-design/icons'
import { Jwt } from '../../store/models/auth'
import { isAuth } from '../../helpers/auth'

const { Title } = Typography

const AdminDashboard = () => {
  const {
    user: { name, email }
  } = isAuth() as Jwt

  const adminLinks = () => (
    <>
      <Title level={5}>管理员链接</Title>
      <Menu style={{ borderRight: 0 }}>
        <Menu.Item>
          <ShoppingCartOutlined style={{ marginRight: '5px' }} />
          <Link to="">添加分类</Link>
        </Menu.Item>
        <Menu.Item>
          <UserOutlined style={{ marginRight: '5px' }} />
          <Link to="">添加产品</Link>
        </Menu.Item>
        <Menu.Item>
          <OrderedListOutlined style={{ marginRight: '5px' }} />
          <Link to="">订单列表</Link>
        </Menu.Item>
      </Menu>
    </>
  )

  const adminInfo = () => (
    <Descriptions title="管理员信息" bordered>
      <Descriptions.Item label="昵称">{name}</Descriptions.Item>
      <Descriptions.Item label="邮箱">{email}</Descriptions.Item>
      <Descriptions.Item label="角色">管理员</Descriptions.Item>
    </Descriptions>
  )

  return (
    <Layout title="管理员 dashboard" subTitle="">
      <Row>
        <Col span="4">{adminLinks()}</Col>
        <Col span="20">{adminInfo()}</Col>
      </Row>
    </Layout>
  )
}

export default AdminDashboard

你可能感兴趣的:(实战,typescript,react.js)

Python数据分析与可视化实战指南 William数据分析 python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
Python教程：一文了解使用Python处理XPath 旦莫 Python进阶 python 开发语言
目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
《Python数据分析实战终极指南》 xjt921122 python 数据分析开发语言
对于分析师来说，大家在学习Python数据分析的路上，多多少少都遇到过很多大坑**，有关于技能和思维的**：Excel已经没办法处理现有的数据量了，应该学Python吗？找了一大堆Python和Pandas的资料来学习，为什么自己动手就懵了？跟着比赛类公开数据分析案例练了很久，为什么当自己面对数据需求还是只会数据处理而没有分析思路？学了对比、细分、聚类分析，也会用PEST、波特五力这类分析法，为啥
Python实现简单的机器学习算法 master_chenchengg python python 办公效率 python开发 IT
Python实现简单的机器学习算法开篇：初探机器学习的奇妙之旅搭建环境：一切从安装开始必备工具箱第一步：安装Anaconda和JupyterNotebook小贴士：如何配置Python环境变量算法初体验：从零开始的Python机器学习线性回归：让数据说话数据准备：从哪里找数据编码实战：Python实现线性回归模型评估：如何判断模型好坏逻辑回归：从分类开始理论入门：什么是逻辑回归代码实现：使用skl
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
WebMagic：强大的Java爬虫框架解析与实战 Aaron_945 Java java 爬虫开发语言
文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
GenVisR 基因组数据可视化实战(三) 11的雾
3.genCov画每个突变位点附件的coverage，跟igv有点相似。这个操作起来很复杂，但是图还是挺有用的。可以考虑。由于我的referencegenomebuild是hg38BiocManager::install(c("TxDb.Hsapiens.UCSC.hg38.knownGene","BSgenome.Hsapiens.UCSC.hg38"))library(TxDb.Hsapien
python爬取微信小程序数据,python爬取小程序数据 2301_81900439 前端
大家好，小编来为大家解答以下问题，python爬取微信小程序数据，python爬取小程序数据，现在让我们一起来看看吧！Python爬虫系列之微信小程序实战基于Scrapy爬虫框架实现对微信小程序数据的爬取首先，你得需要安装抓包工具，这里推荐使用Charles，至于怎么使用后期有时间我会出一个事例最重要的步骤之一就是分析接口，理清楚每一个接口功能，然后连接起来形成接口串思路,再通过Spider的回调
HarmonyOS开发实战（ Beta5.0）搜索框热搜词自动切换让开，我要吃人了 OpenHarmony HarmonyOS 鸿蒙开发 harmonyos 华为鸿蒙移动开发鸿蒙系统前端开发语言
鸿蒙HarmonyOS开发往期必看：HarmonyOSNEXT应用开发性能实践总结最新版！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）介绍本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。效果图预览使用说明页面顶部搜索框内热搜词条自动切换，编辑搜索框时自动隐藏。实现思路使用TextInput实现搜索框TextInput({te
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端 vue.js javascript
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
【从问题中去学习k8s】k8s中的常见面试题（夯实理论基础）（二十八）向往风的男子 k8s 学习 kubernetes 容器
本站以分享各种运维经验和运维所需要的技能为主《python零基础入门》：python零基础入门学习《python运维脚本》：python运维脚本实践《shell》：shell学习《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战《k8》从问题中去学习k8s《docker学习》暂未更新《ceph学习》ceph日常问题解决分享《日志收集》ELK+各种中间件《运维日常》
阿里巴巴商品搜索API返回值实战解析 weixin_43841111 api java 前端 javascript
在解析阿里巴巴中国站商品搜索API返回值并进行实战时，可以从以下几个方面入手：一、了解API返回值的结构基本信息返回值通常包含商品的标题、价格、库存、图片链接等基本信息。这些信息对于了解商品的概况非常重要。例如，商品标题可以让你快速了解商品的名称和特点，价格信息可以帮助你进行价格比较和成本核算。详细描述可能包括商品的详细描述、规格参数、使用方法等。这些信息对于深入了解商品的特性和功能非常有帮助。比
vant-element-ts一起使用存在的问题 flynn_ 问题总结 vue
由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
李笑来 6 你到底有没有资本+7什么是落后盛大米
6你到底有没有资本摘要不能够心平气和地被判上无期徒刑的资本，就别假装资本混迹江湖了。投资知识，经验，智慧，几乎只能从实战中获得————书上写的，牛人讲的，都跟你没关系，因为只有那些东西在你骨子里生根之后再发芽且不夭折而后还要等上很久才会茁壮甚至茂盛。。。。直接将年收入的10%-20%判死刑是最简单，最直接，最粗暴最有效的操作方式。投资，尤其是“好的投资”，一定是“舍我其谁”的活动。关于资本的思考，
基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台网顺技术团队成品程序项目 java vue.js 汽车课程设计 spring boot
基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基
跟剽悍一只猫学习收获之成为领域专家财务自由的社群运营人苏宝
001找到这个领域内权威的书籍。002按照书的脉络（章节目录）记录书中的重要内容（对自己认知系统造成冲击的，以前没有学过的，觉得有用的，暂时还不太理解的）记录下来。003读完第一遍以后，接着读第二遍。这一遍记录书里对你有用的方法论，并尝试依据这些方法论实战。004再读一遍，这一遍记录尝试梳理整个书的认知框架和内在逻辑。005之后，可以多朗读几遍全书。你会发现，你对这些知识的理解会越来越全面，越有深
Python OpenCV图像处理：从基础到高级的全方位指南极客代码玩转Python 开发语言 python opencv 图像处理计算机视觉
目录第一部分：PythonOpenCV图像处理基础1.1OpenCV简介1.2PythonOpenCV安装1.3实战案例：图像显示与保存1.4注意事项第二部分：PythonOpenCV图像处理高级技巧2.1图像变换2.2图像增强2.3图像复原第三部分：PythonOpenCV图像处理实战项目3.1图像滤波3.2图像分割3.3图像特征提取第四部分：PythonOpenCV图像处理注意事项与优化策略4
分享一个基于python的电子书数据采集与可视化分析 hadoop电子书数据分析与推荐系统 spark大数据毕设项目（源码、调试、LW、开题、PPT) 计算机源码社 Python项目大数据大数据 python hadoop 计算机毕业设计选题计算机毕业设计源码数据分析 spark毕设
作者：计算机源码社个人简介：本人八年开发经验，擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等，大家有这一块的问题可以一起交流！学习资料、程序开发、技术解答、文档报告如需要源码，可以扫取文章下方二维码联系咨询Java项目微信小程序项目Android项目Python项目PHP项目ASP.NET项目Node.js项目选题推荐项目实战|p
增长黑客和最小可复制的内核爱思考的糖
五段-增长黑客的三大步骤生活就像逆水行舟，加入你不能加速，现实中最好的情况，你也就处在一种原地打转的状况。增长，就像一辆车里的加速器。围棋爱好者，水平一直没有进步的原因。是因为没有找到提高下棋水平的增长模式有三个办法可以提高：做死活题，练习做关键决策的能力；打谱，复盘经典案例；找AI陪练。增长黑客的三个实战步骤：第一步，假设：建立最小闭环。从笨办法开始，不怕犯错，代价并不高，你可以勇敢尝试。想知道
复盘赵建庄
行动后反思，AAR（AfterActionReview），是知识管理的一种工具，起源于美国陆军的作战方法，强调在每次行动后进行及时反思、总结和改进。《复盘》一书其实就是这种方法的具体应用，名字不同，然而实质相同。相比AAR这样的说法，复盘更简洁，容易被国人接受，而且，书中给出了非常详细的步骤，有较强的指导意义和实战性，AAR的六步法，说的比较简单，有人可以悟，结合实际业务演变出各种变化，大多数人可
题解 | #完全数计算#不知道为什么没超时的暴力解法 huaxinjiayou java
兄弟们，坚持就是胜利啊，找工作从去年秋招就开始找，到五月底才收到第一个offer星环的，然后六月初t咋六月了还有面试啊，有兄弟了解这个部门吗面完了家人们，纯纯kpi啊，上来就是一道题是打印多个字符串的华为接头人话术指南：欲投华为，必看此贴!引流华为招聘提前批【奖】这个夏天，和牛牛一起打卡刷题~Java面试实战项目25届本科找暑期实习的历程飞猪旅行运营岗面经百度视觉算法一面面经感谢牛友们，腾子pcg
全自动解密解码神器 — Ciphey K'illCode python_模块 python vscode
Ciphey是一个使用自然语言处理和人工智能的全自动解密/解码/破解工具。简单地来讲，你只需要输入加密文本，它就能给你返回解密文本。就是这么牛逼。有了Ciphey，你根本不需要知道你的密文是哪种类型的加密，你只知道它是加密的，那么Ciphey就能在3秒甚至更短的时间内给你解密，返回你想要的大部分密文的答案。下面就给大家介绍Ciphey的实战使用教程。1.准备开始之前，你要确保Python和pip已
【编译原理】方舟编译技术课程 — 词法分析 CSU_THU_SUT 编译原理编译器编译原理 llvm
打开目录阅读更佳参考视频：方舟·编译技术入门与实战以及西交冯博琴老师的相关视频编译的过程包括词法分析（分析程序符号）、语法分析（分析语法单位）、中间代码生成、代码优化和目标代码生成。一、编译过程各部分的任务（1）词法分析：输入源程序，扫描分解源程序字符串，识别五类符号，包括定义符、标识符、运算符、界符和常数，转为单词符号。（2）语法分析：在词法分析基础上，将单词符号转为语法单位（如短句、子句、句子
python logging使用_Python实战之logging模块使用详解 weixin_39548832 python logging使用
用Python写代码的时候，在想看的地方写个printxx就能在控制台上显示打印信息，这样子就能知道它是什么了，但是当我需要看大量的地方或者在一个文件中查看的时候，这时候print就不大方便了，所以Python引入了logging模块来记录我想要的信息。print也可以输入日志，logging相对print来说更好控制输出在哪个地方，怎么输出及控制消息级别来过滤掉那些不需要的信息。1、日志级别im
终于搞懂TS中的泛型啦! | typescript 入门指南 04 程序员王天 TypeScript实践指南前端 javascript typescript
大家好，我是王天~今天分享的是《ts入门指南》系列中第四篇，主要讲解ts中的泛型应用泛型在ts中是比较重要的概念，我花挺长时间才搞明白，整理输出这篇文章，希望能帮助到大家~《ts入门指南》系列，点击下方蓝色字体即可访问TsvsJs谁适合前端开发？|TypeScript入门指南01详解tsconfig.json配置文件|TypeScript入门指南02必学！TypeScript语法类型基础|Type
Open Feign 实战笔记自强-X spring-cloud java spring 微服务 ribbon spring cloud
OpenFeign笔记概念声明式的web服务客户端。使用接口加注解的形式编程。它是对RestTemplate和ribbon做了进一步封装。Feign已经停更，OpenFeign是在Feign的基础上又做了进一步的封装。Feign：Feign是SpringCloud组件中的一个轻量级RESTful的HTTP服务客户端Feign内置了Ribbon，用来做客户端负载均衡，去调用服务注册中心的服务。Fei
大胆猜！主持人大赛第二阶段，谁最有望夺冠童说家
看完第六期又再次刷新了小编的认知，简直太过瘾了。选手们的实力就不用说了，光出题嘉宾的阵容就够人惊叹了，甚至连央视boys在这一期都合体了。好不容易熬到了上周六，可是第七期节目却因为节目编排的原因停更了，小编只好再刷遍第六期过足眼瘾啦！来源于主持人大赛第二赛段的“经典节目实战”难度提高了不少，央视的十档经典节目在场上被参赛选手重新演绎，不仅考验选手对相关内容的把握能力，对事物的分析、提炼和概括表述能
Mall4j商城实战 - 部署 canal 数据库增量日志解析 yueerba126 Mall4j商城实战数据库 spring cloud 微服务架构
Canal简介Canal是基于MySQL数据库增量日志解析的工具，主要用于增量数据的订阅和消费。Canal主要用途基于MySQL数据库增量日志解析详细功能：实时解析MySQL的二进制日志（Binlog）。捕获数据库中的所有增量变更，如插入、更新和删除操作。使用场景：适用于实时监控数据库变化的应用，比如数据复制、数据备份或实时数据分析等。提供增量数据订阅和消费服务
网上商城项目总结报告 WEB前端程序贵前端
网上商城项目总结报告1：掌握的知识通过网上商城这个实战项目的开发，不仅了解到了一个项目的业务逻辑，而且掌握了实现相关业务功能的方法。通过这个实战项目，了解到了模块化开发项目的基础结构的搭建，以及项目文件的管理方式。通过这个实战项目，运用封装的接口api文档实现了客户端服务器之间的交互知识。通过封装的axios实例对象与方法，向服务器请求数据，然后渲染页面。通过运用localStorage本地储存的
Java并发编程-AQS详解及案例实战（上篇）猿与禅 Java技术栈源码分析 java AQS 并发编程原理
文章目录AQS概述AQS的核心概念AQS的工作原理AQS的灵活性使用场景使用指南使用示例AQS的本质:为啥叫做异步队列同步器AQS的核心机制“异步队列”的含义“同步器”的含义总结加锁失败的时候如何借助AQS异步入队阻塞等待AQS的锁队列加锁失败时的处理流程异步入队的机制总结ReentractLock如何设置公平锁策略以及原理设置公平锁策略公平锁的运作原理尝试获取锁释放锁性能与公平性的权衡tryLo
SAX解析xml文件小猪猪08 xml
1.创建SAXParserFactory实例 2.通过SAXParserFactory对象获取SAXParser实例 3.创建一个类SAXParserHander继续DefaultHandler，并且实例化这个类 4.SAXParser实例的parse来获取文件 public static void main(String[] args) { //
为什么mysql里的ibdata1文件不断的增长？ brotherlamp linux linux运维 linux资料 linux视频 linux运维自学
我们在 Percona 支持栏目经常收到关于 MySQL 的 ibdata1 文件的这个问题。当监控服务器发送一个关于 MySQL 服务器存储的报警时，恐慌就开始了 —— 就是说磁盘快要满了。一番调查后你意识到大多数地盘空间被 InnoDB 的共享表空间 ibdata1 使用。而你已经启用了 innodbfileper_table，所以问题是： ibdata1存了什么？当你启用了 i
Quartz-quartz.properties配置 eksliang quartz
其实Quartz JAR文件的org.quartz包下就包含了一个quartz.properties属性配置文件并提供了默认设置。如果需要调整默认配置，可以在类路径下建立一个新的quartz.properties，它将自动被Quartz加载并覆盖默认的设置。下面是这些默认值的解释 #-----集群的配置 org.quartz.scheduler.instanceName =
informatica session的使用 18289753290 workflow session log Informatica
如果希望workflow存储最近20次的log，在session里的Config Object设置，log options做配置，save session log :sessions run ;savesessio log for these runs:20 session下面的source 里面有个tracing
Scrapy抓取网页时出现CRC check failed 0x471e6e9a != 0x7c07b839L的错误酷的飞上天空 scrapy
Scrapy版本0.14.4 出现问题现象： ERROR: Error downloading <GET http://xxxxx CRC check failed 解决方法 1.设置网络请求时的header中的属性'Accept-Encoding': '*;q=0' 明确表示不支持任何形式的压缩格式，避免程序的解压
java Swing小集锦永夜-极光 java swing
1.关闭窗体弹出确认对话框 1.1 this.setDefaultCloseOperation (JFrame.DO_NOTHING_ON_CLOSE); 1.2 this.addWindowListener ( new WindowAdapter () { public void windo
强制删除.svn文件夹随便小屋 java
在windows上，从别处复制的项目中可能带有.svn文件夹，手动删除太麻烦，并且每个文件夹下都有。所以写了个程序进行删除。因为.svn文件夹在windows上是只读的，所以用File中的delete()和deleteOnExist()方法都不能将其删除，所以只能采用windows命令方式进行删除
GET和POST有什么区别？及为什么网上的多数答案都是错的。 aijuans get post
如果有人问你，GET和POST，有什么区别？你会如何回答？我的经历前几天有人问我这个问题。我说GET是用于获取数据的，POST，一般用于将数据发给服务器之用。这个答案好像并不是他想要的。于是他继续追问有没有别的区别？我说这就是个名字而已，如果服务器支持，他完全可以把G
谈谈新浪微博背后的那些算法 aoyouzi 谈谈新浪微博背后的那些算法
本文对微博中常见的问题的对应算法进行了简单的介绍，在实际应用中的算法比介绍的要复杂的多。当然，本文覆盖的主题并不全，比如好友推荐、热点跟踪等就没有涉及到。但古人云“窥一斑而见全豹”，希望本文的介绍能帮助大家更好的理解微博这样的社交网络应用。微博是一个很多人都在用的社交应用。天天刷微博的人每天都会进行着这样几个操作：原创、转发、回复、阅读、关注、@等。其中，前四个是针对短博文，最后的关注和@则针
Connection reset 连接被重置的解决方法百合不是茶 java 字符流连接被重置
流是java的核心部分,,昨天在做android服务器连接服务器的时候出了问题,就将代码放到java中执行,结果还是一样连接被重置被重置的代码如下; 客户端代码; package 通信软件服务器; import java.io.BufferedWriter; import java.io.OutputStream; import java.io.O
web.xml配置详解之filter bijian1013 java web.xml filter
一.定义 <filter> <filter-name>encodingfilter</filter-name> <filter-class>com.my.app.EncodingFilter</filter-class> <init-param> <param-name>encoding<
Heritrix Bill_chen 多线程 xml 算法制造配置管理
作为纯Java语言开发的、功能强大的网络爬虫Heritrix，其功能极其强大，且扩展性良好，深受热爱搜索技术的盆友们的喜爱，但它配置较为复杂，且源码不好理解，最近又使劲看了下，结合自己的学习和理解，跟大家分享Heritrix的点点滴滴。 Heritrix的下载（http://sourceforge.net/projects/archive-crawler/）安装、配置，就不罗嗦了，可以自己找找资
【Zookeeper】FAQ bit1129 zookeeper
1.脱离IDE，运行简单的Java客户端程序 #ZkClient是简单的Zookeeper~$ java -cp "./:zookeeper-3.4.6.jar:./lib/*" ZKClient 1. Zookeeper是的Watcher回调是同步操作，需要添加异步处理的代码 2. 如果Zookeeper集群跨越多个机房，那么Leader/
The user specified as a definer ('aaa'@'localhost') does not exist 白糖_ localhost
今天遇到一个客户BUG，当前的jdbc连接用户是root，然后部分删除操作都会报下面这个错误：The user specified as a definer ('aaa'@'localhost') does not exist 最后找原因发现删除操作做了触发器，而触发器里面有这样一句 /*!50017 DEFINER = ''aaa@'localhost' */ 原来最初
javascript中showModelDialog刷新父页面 bozch JavaScript 刷新父页面 showModalDialog
在页面中使用showModalDialog打开模式子页面窗口的时候，如果想在子页面中操作父页面中的某个节点，可以通过如下的进行： window.showModalDialog('url',self,‘status...’); // 首先中间参数使用self 在子页面使用w
编程之美-买书折扣 bylijinnan 编程之美
import java.util.Arrays; public class BookDiscount { /**编程之美买书折扣书上的贪心算法的分析很有意思，我看了半天看不懂，结果作者说，贪心算法在这个问题上是不适用的。。下面用动态规划实现。哈利波特这本书一共有五卷，每卷都是8欧元，如果读者一次购买不同的两卷可扣除5%的折扣，三卷10%，四卷20%，五卷
关于struts2.3.4项目跨站执行脚本以及远程执行漏洞修复概要 chenbowen00 struts WEB安全
因为近期负责的几个银行系统软件，需要交付客户，因此客户专门请了安全公司对系统进行了安全评测，结果发现了诸如跨站执行脚本，远程执行漏洞以及弱口令等问题。下面记录下本次解决的过程以便后续 1、首先从最简单的开始处理，服务器的弱口令问题，首先根据安全工具提供的测试描述中发现应用服务器中存在一个匿名用户，默认是不需要密码的，经过分析发现服务器使用了FTP协议，而使用ftp协议默认会产生一个匿名用
[电力与暖气]煤炭燃烧与电力加温 comsci
在宇宙中,用贝塔射线观测地球某个部分,看上去,好像一个个马蜂窝,又像珊瑚礁一样,原来是某个国家的采煤区..... 不过,这个采煤区的煤炭看来是要用完了.....那么依赖将起燃烧并取暖的城市,在极度严寒的季节中...该怎么办呢? &nbs
oracle O7_DICTIONARY_ACCESSIBILITY参数 daizj oracle
O7_DICTIONARY_ACCESSIBILITY参数控制对数据字典的访问.设置为true,如果用户被授予了如select any table等any table权限,用户即使不是dba或sysdba用户也可以访问数据字典.在9i及以上版本默认为false,8i及以前版本默认为true.如果设置为true就可能会带来安全上的一些问题.这也就为什么O7_DICTIONARY_ACCESSIBIL
比较全面的MySQL优化参考 dengkane mysql
本文整理了一些MySQL的通用优化方法，做个简单的总结分享，旨在帮助那些没有专职MySQL DBA的企业做好基本的优化工作，至于具体的SQL优化，大部分通过加适当的索引即可达到效果，更复杂的就需要具体分析了，可以参考本站的一些优化案例或者联系我，下方有我的联系方式。这是上篇。 1、硬件层相关优化 1.1、CPU相关在服务器的BIOS设置中，可
C语言homework2，有一个逆序打印数字的小算法 dcj3sjt126com c
#h1# 0、完成课堂例子 1、将一个四位数逆序打印 1234 ==> 4321 实现方法一： # include <stdio.h> int main(void) { int i = 1234; int one = i%10; int two = i / 10 % 10; int three = i / 100 % 10;
apacheBench对网站进行压力测试 dcj3sjt126com apachebench
ab 的全称是 ApacheBench ，是 Apache 附带的一个小工具，专门用于 HTTP Server 的 benchmark testing ，可以同时模拟多个并发请求。前段时间看到公司的开发人员也在用它作一些测试，看起来也不错，很简单，也很容易使用，所以今天花一点时间看了一下。通过下面的一个简单的例子和注释，相信大家可以更容易理解这个工具的使用。
2种办法让HashMap线程安全 flyfoxs java jdk jni
多线程之--2种办法让HashMap线程安全多线程之--synchronized 和reentrantlock的优缺点多线程之--2种JAVA乐观锁的比较( NonfairSync VS. FairSync) HashMap不是线程安全的,往往在写程序时需要通过一些方法来回避.其实JDK原生的提供了2种方法让HashMap支持线程安全.
Spring Security（04）——认证简介 234390216 Spring Security 认证过程
认证简介目录 1.1 认证过程 1.2 Web应用的认证过程 1.2.1 ExceptionTranslationFilter 1.2.2 在request之间共享SecurityContext 1
Java 位运算 Javahuhui java 位运算
// 左移( << ) 低位补0 // 0000 0000 0000 0000 0000 0000 0000 0110 然后左移2位后，低位补0： // 0000 0000 0000 0000 0000 0000 0001 1000 System.out.println(6 << 2);// 运行结果是24 // 右移( >> ) 高位补"
mysql免安装版配置 ldzyz007 mysql
1、my-small.ini是为了小型数据库而设计的。不应该把这个模型用于含有一些常用项目的数据库。 2、my-medium.ini是为中等规模的数据库而设计的。如果你正在企业中使用RHEL,可能会比这个操作系统的最小RAM需求(256MB)明显多得多的物理内存。由此可见，如果有那么多RAM内存可以使用，自然可以在同一台机器上运行其它服务。 3、my-large.ini是为专用于一个SQL数据
MFC和ado数据库使用时遇到的问题你不认识的休道人 sql C++mfc
=================================================================== 第一个 =================================================================== try{ CString sql; sql.Format("select * from p
表单重复提交Double Submits rensanning double
可能发生的场景： *多次点击提交按钮 *刷新页面 *点击浏览器回退按钮 *直接访问收藏夹中的地址 *重复发送HTTP请求（Ajax）（1）点击按钮后disable该按钮一会儿，这样能避免急躁的用户频繁点击按钮。这种方法确实有些粗暴，友好一点的可以把按钮的文字变一下做个提示，比如Bootstrap的做法： http://getbootstrap.co
Java String 十大常见问题 tomcat_oracle java 正则表达式
　1.字符串比较，使用“==”还是equals()? 　　"=="判断两个引用的是不是同一个内存地址(同一个物理对象)。　　equals()判断两个字符串的值是否相等。　　除非你想判断两个string引用是否同一个对象，否则应该总是使用equals()方法。　　如果你了解字符串的驻留(String Interning)则会更好地理解这个问题。　　
SpringMVC 登陆拦截器实现登陆控制 xp9802 springMVC
思路，先登陆后，将登陆信息存储在session中，然后通过拦截器，对系统中的页面和资源进行访问拦截，同时对于登陆本身相关的页面和资源不拦截。实现方法： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23