# multilingual_shop

**Repository Path**: iiiboy/multilingual_shop

## Basic Information

- **Project Name**: multilingual_shop
- **Description**: 多语言电商平台前端部分,使用react+react-bootstrap进行设计开发,使用axios进行数据请求,使用redux,redux-saga进行公共数据管理,react-router进行路由管理.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-10
- **Last Updated**: 2021-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 多语言电商项目(毕业设计)react实现

## 1. 使用到的技术栈

react,node,koa

## 2. 创建项目,搭建环境

1. 使用`npx create-react-app project`创建react项目

2. 使用react-bootstrap作为ui框架,并且在<https://bootswatch.com/>上下载bootstrap主题,然后使用`yarn add react-bootstrap`安装依赖

3. 因为react项目默认为sass,但是我更习惯用less,所以需要配置less环境:`yarn add less less-loader react-app-rewired customize-cra -D`
   安装对应依赖,然后再src目录下创建config-overrides.js进行配置,注意:
   如果配置完成还是报错,可能是less-loader版本出现问题,可以删除当前版本的less-loader,然后`yarn add less-loader@5.0.0 -D`

<!-- 4. 多语言项目使用react-i18next进行完成 ,并且再src目录下创建locales文件夹,存放多语言json
参考网址:<https://www.jianshu.com/p/2f8d6e0b4adb>,<https://www.cnblogs.com/jserhub/p/12651376.html> -->

4. 因为react-i18next使用比较复杂,没有相应中文文档,而且教程较少
   下面换到react-intl-universal这个库由阿里开发,主要参考<https://segmentfault.com/a/1190000019576048>

```jsx
import React, { Component } from 'react'
import Routes from './routes/Routes'
// ! 这里将intl的初始化放到App组件里面来进行  经过实测这样还是会遇到intl.get()为空的情况
import intl from 'react-intl-universal'
import resource from './locales/resource'
import './plugins/font-awesome'
import './plugins/axios'

// 可以借助intl.determineLocale获取当前浏览器的语言环境设置初始化的语言环境
// 这个函数会返回字符串 就是当前获取到的环境
const lng = intl.determineLocale({
  // 但是这里建议不要使用localStorage来更改当前页面语言环境
  // 因为当你修改localStorage的lang字段之后没有刷新页面 是不会更改语言的 所以使用 url 或者cookie
  // localStorageLocaleKey:'lang', // 这个用于从localStorage中确定语言环境,寻找 lang 这个键名
  // *注意 当这里声明了但是匹配不上时 会默认为当前浏览器的语言环境 也就是 navigator.language
  urlLocaleKey: 'lang',
  localStorageLocaleKey: 'lang',
  fallbackLocale: 'zh-CN' // 当所有的匹配不上时就使用这个备用的
})

class App extends Component {
  // 这里很重要 在没有constructor时 将state写在最前面就相当于 在constructor里面写state
  // isDone用于判断intl是否初始化完成
  state = { isDone: false }

  componentDidMount () {
    // 组件挂载完成后进行初始化intl
    this.loadLocales()
  }

  // 这里是intl用于初始化的函数
  loadLocales = () => {
    intl.init({
      currentLocale: lng,
      fallbackLocale: 'zh_CN',
      locales: resource
    }).then(() => {
      // 这里时初始化完成后触发
      this.setState({ isDone: true })
    })
  }

  render () {
    return (
      // !第一次挂载时 因为isDone为false 所以并没有挂载渲染Routes  当初始化完成时才进行渲染
      // !这样其实很重要,保证了一下所有的组件所处的环境都是intl渲染完成后的   不然的话 会遇到 intl.get()获取到空的情况
      // !!!经过实测 这样还是会遇到intl.get()为空的情况 目前没有好的方法
      // !只能在componentDidMount()进行定义 或者在 render() 中进行定义
      // !好像还有一种方法  但是对于我目前的情况 不是很适用 https://blog.csdn.net/chenqk_123/article/details/102858073
      this.state.isDone && <Routes />
    )
  }
}

export default App

```

<!-- ## 3. 完成多语言配置   到现在为止 对多语言的配置还是一知半解的

1. 在src中新建locales文件夹

2. 新建多语言的js文件,比如zh.js,en.js,因为一种文件可能有多个命名空间 并且创建一个resource.js将它们集中导出

3. 在src文件夹下新建i18n.js文件,并进行配置,这是react-i18next官方文档的配置,但是是英文文档看不懂...

```js
import i18n from 'i18next'
// 这个插件可以用于在public文件夹下创建对应的语言文件夹比如zh,en,并且在文件夹下添加translation.json文件 这个文件是i18n的默认命名空间  如果没有这个命名空间 是无法支持多语言的
import XHR from 'i18next-xhr-backend';
// 这个插件支持从后台请求 
import BackendAdapter from 'i18next-multiload-backend-adapter';
import { initReactI18next } from 'react-i18next'
// 通过浏览器语言设置初始语言 这是i18n的一个插件
import LanguageDetector from 'i18next-browser-languagedetector';
// import resource from './locales/resource'

i18n
// 这里都是启动插件
  .use(BackendAdapter)
  .use(XHR)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    // 这里是备选的语言环境
    fallbackLng: 'en',
    // 这里应该是初始的语言环境 为浏览器当前的语言环境
    lng: navigator.language,
    debug: true,
    preload: navigator.languages,
    // 这个是语言包,也就是在src/locales下的语言  注意en.js,zh.js里面也需要命名空间 但是命名空间可以自定义   所以需要后台请求的数据就可以从这里
    resources:resource,
    interpolation: {
      escapeValue: false // 这里对于react来说并不需要
    },
    // 这里不懂
    backend: {
      backend: XHR,
      allowMultiLoading: true,
      // learn more: https://github.com/i18next/i18next-xhr-backend
      backendOption: {
        loadPath: function (lngs, namespaces) {
          console.log(lngs, namespaces);
          return 'https://my-json-server.typicode.com/TserHub/Json/qinwm?lng={{lng}}&ns={{ns}}';
        },
        addPath:
          'https://my-json-server.typicode.com/TserHub/Json/qinwm?lng={{lng}}&ns={{ns}}'
      }
    }
  })

export default i18n
```

4. 在总的index.js文件中引入i18n.js

5. 需要使用多语言支持的组件中进行引入 下面实在app.js种进行的例子

```jsx
import React, { Suspense,Component } from 'react';
import { useTranslation,withTranslation,Translation } from 'react-i18next'

// 注意需要多语言支持的话 都会使用到 t 而且形式都为: {t('')}

// 这是第一种方式 hook方式 可以直接在function组件中使用 
// 与useState差不多的使用方法  可以获得 t 方法和 i18n 对象  useTranslation 可以传入参数
// 官方文档上也说到了 可以指定命名空间,指定命名空间后就只会在指定的命名空间中寻找
// *1. t方法渲染需要多语言支持的文案
// *2. i18n 对象里面又很多方法 可以使用 i18n.changeLanguage()修改当前的语言环境
// *可以通过 i18n.language知道当前的语言环境
function MyComponent() {
  // const { t, i18n } = useTranslation();
  const [t,i18n] = useTranslation();

  const handle= ()=>{
    console.log(i18n)
    if(i18n.language==='zh'){
      i18n.changeLanguage('en')
    }else i18n.changeLanguage('zh')
    
  }

  return <h1 onClick={handle}>{t('welcome')}</h1>
}

// 第二种方式:对于class组件可以使用 withTranslation 这个高阶组件添加t到props  这个高阶组件的使用方式
// 与connect类似:withTranslation()(Test1) 第一个()中传入的参数与 useTranslation()中传入参数一样
class Test1 extends Component{
  render(){
    // const {t} =useTranslation() // 这里使用的话会报错 hook形式不能再class组件中使用
    const {t} =this.props
    return (
      <h3>{t('welcome')}</h3>
    )
  }
}

// 第三种方式 引入Translation 组件 然后使用组件包裹
function Test3 (){
  return (
    <Translation>
      {
        (t,{i18n})=>{
          console.log(i18n)
          return (
            <p>{t('welcome')}</p>
          )
        }
      }
    </Translation>
  )
}

const Test2 = withTranslation()(Test1)

function App() {

  const {t,i18n} = useTranslation

  // 这里是注册全局的方法 
  React.translate=t
  React.i18n=i18n

  return (
    // 这里的Suspense 渲染那些需要一定时间加载的组件 比如需要进行网络请求后渲染的组件  在网络请求完成前会渲染fallback的值
    <Suspense fallback="<div>loading</div>">
      <MyComponent></MyComponent>
      <Test2/>
      <Test3/>
    </Suspense>
  );
}

export default App;

``` -->

## 3. 需要先移除之前的库 然后进行配置

## 4. 在项目中使用font-awesome

参考这个网址: <https://blog.csdn.net/wuqingdeqing/article/details/94459447>

官方文档:<https://fontawesome.com/how-to-use/on-the-web/using-with/react>

1.

使用 `yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons`
安装这么多依赖

2. 这样进行使用

```jsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons';

<FontAwesomeIcon icon = {faQuestionCircle} />
```

3. 像上面那样每个组件太麻烦了 我们可以将一些使用比较多的icon注册到全局

   3.1 src下创建plugins文件夹

   3.2 在plugins文件夹下创建font-awesome.js文件,并且进行配置

   ```js
   import { library } from '@fortawesome/fontawesome-svg-core'
   import { fab } from '@fortawesome/free-brands-svg-icons'
   import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'
   // 这个library 就相当于是全局 add就是添加到全局
   // 接下来我们就可以之直接 这样使用 <FontAwesomeIcon icon="coffee" >  注意使用这种方式要去掉'fa'
   library.add(fab, faCheckSquare, faCoffee)
   ```

   3.3 在app.js下进行导入  `import './plugins/font-awesome'`

## 5. react-bootstrap进行表单验证

1. react-bootstrap 可以使用constraint validation API 进行表单验证 这个api相当于是H5的新特性,可以直接通过html5,js进行一些 简单的表单验证
   参考网址:<https://blog.csdn.net/weixin_44024159/article/details/103850312>
   参考网址:<https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation>
   主要的验证规则:
   1.1 pattern 正则匹配 1.2 min 最小值 1.3 max 最大值 1.4 required 是否必需 1.5 step 暂时没有看懂 后面可以理解一下 1.6 maxlength最大长度 1.7
   minlength最小长度

```jsx
// 因为是原生的api所以可以直接使用 具体的可以看react-bootstrap官网
import React from 'react'

class Example extends React.Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  onSubmit = (event) => {
    const form = event.currentTarget
    if (form.checkValidity() === false) {
      event.preventDefault()
    }
    this.setState({}, () => {
      console.log(this.state)
    })
  }

  render () {
    return (
      <Form noValidate validation onSubmit = {this.onSubmit}>
        <Form.Control required maxlength = {6} />
      </Form>
    )
  }
}

```

2. 如果使用validation API无法满足需求的话 还可以使用react-formal,formik配合yup进行验证,react-bootstrap中有formik进行验证

```jsx
// 注意引入formik的方式
import { Formik } from 'formik'
// 引入yup的方式
import * as yup from 'yup'
import React, { Component } from 'react'

const schema = yup.object().shape({
  email: yup.string().required('请输入邮箱!'),
  password: yup.string().required('请输入密码!')
})

class Login extends Component {
  render () {
    return (
      <>
        {/*
           * 注意这里的使用方法 Formik 组件只是 formik依赖的一个组件 还有其他的可以去官方文档看
           * Formik 有很多属性可以看源码
        */}
        <Formik
          // 这里相当于是验证规则
          validationSchema = {schema}
          // 提交的函数
          onSubmit = {this.submit}
          // 这里是初始化的值
          initialValues = {{
            email: '1991525233@qq.com',
            password: '361230312.,'
          }}
          initialTouched = {{ password: '请输入长度为6~20的密码' }}
        >
          {
            ({
              handleSubmit, handleChange, handleBlur,
              // 这里就相当于是上面Formik的initialValues
              values,
              // 默认的字段信息 用于做提示
              touched,
              // 是否全部通过验证
              isValid,
              // 没有通过验证
              errors
            }) => {
              return (
                <Form noValidate
                      onSubmit = {handleSubmit}>
                  <Form.Group>
                    <InputGroup hasValidation>
                      <InputGroup.Prepend>
                        <InputGroup.Text id = "email">
                          <FontAwesomeIcon icon = "user-circle" />
                        </InputGroup.Text>
                      </InputGroup.Prepend>
                      <FormControl
                        type = "email"
                        name = {'email'}
                        value = {values.email}
                        placeholder = "enter email"
                        aria-describedby = "email"
                        onChange = {handleChange}
                        // isValid 这个属性是通过验证时显示的
                        // isValid = {touched.email && !errors.email}
                        // isInvalid 这个属性时验证失败时显示的  这里两次取反只是为了将它转换为Boolean形式不是多此一举
                        isInvalid = {!!errors.email}
                      />
                      <FormControl.Feedback type = {'invalid'}>
                        {errors.email}
                      </FormControl.Feedback>
                    </InputGroup>
                  </Form.Group>
                  <Form.Group>
                    <InputGroup hasValidation>
                      <InputGroup.Prepend>
                        <InputGroup.Text id = "basic-addon2">
                          <FontAwesomeIcon icon = "lock" />
                        </InputGroup.Text>
                      </InputGroup.Prepend>
                      <FormControl
                        name = {'password'}
                        value = {values.password}
                        onChange = {handleChange}
                        isInvalid = {!!errors.password}
                        type = "password"
                        placeholder = "enter password"
                        aria-describedby = "basic-addon2"
                      />
                      <FormControl.Feedback type = {'invalid'}>
                        {errors.password}
                      </FormControl.Feedback>
                    </InputGroup>
                    <Form.Text>
                      {touched.password}
                    </Form.Text>
                  </Form.Group>
                  <Form.Group>
                    <Button style = {{ width: '100%' }}
                            type = "submit">
                      {intl.get('log in')}</Button>
                  </Form.Group>
                  <Form.Group>
                    <Button style = {{ width: '100%' }}
                            variant = "info">{intl.get(
                      'register')}</Button>
                  </Form.Group>
                </Form>
              )
            }
          }
        </Formik>
      </>
    )
  }
}
```

## 6. 创建store存储用户信息

1. 获取用户信息的话需要进行网络请求,这里使用的是axios进行网络请求的,在plugins/axios.js对axios进行了一些默认的配置,
   然后又在services里对get,post,put,delete请求方法进行了封装,就可以直接引入services/http.js里的方法进行网络请求了, 而且后面还可以在http.js文件中进行集中的错误处理

2. 网络请求这方面完成后,还需要创建store用于存储用户信息 其他的没什么好说的,主要是redux处理异步的情况,我选择使用redux-saga 看之前的笔记就在lesson_05_saga redux-saga
   官方网址:<https://redux-saga.js.org/docs/api/>

3. 使用saga的步骤 同时还有启动redux-devtools

```js
import { createStore, combineReducers, applyMiddleware } from 'redux'
// 这个用于启动redux-devtools  便于浏览器redux工具的配合
// 参考网址 https://www.npmjs.com/package/redux-devtools-extension
import { composeWithDevTools } from 'redux-devtools-extension'
// 1. 导入创建saga中间件的函数
import createSagaMiddleware from 'redux-saga'
// 2. 导入对应的generator函数
import { userSaga } from '../sagas/userSaga'
import { user } from './reducers/user'

// 注意使用saga的步骤
// 3. 创建saga中间件
const sagaMiddleware = createSagaMiddleware()

const store = createStore(
  combineReducers({
    user
  }),
  // 4. 使用saga中间件  注意redux-devtools同时还需要监听中间件 所以这里使用这个函数包裹中间件
  composeWithDevTools(applyMiddleware(sagaMiddleware))
)
// 5. 使用generator函数
sagaMiddleware.run(userSaga)

export default store
```

4. 开始正确使用redux-saga 4.1 saga是用于处理redux的,所以需要先创建store,reducer,actions等一系列操作,创建完成后,在页面中使用connect连接组件,注入dispatch 4.2
   在页面中就可以使用dispatch来触发saga 下面是saga的基础写法

```js
   import {
  takeEvery,// 用于监听
  call,// 用于异步请求
  put,// 相当于原生dispatch用于分发
  select// 用于获取当前state
} from 'redux-saga/effects'
import { LOGIN_USER, UPDATE_USER } from '../constants/user'
// 注意这里的loginUser是这样的 export const loginUser = () => httpGet({ url: '/user/current' }) 所以下面call时不用传入参数

import { loginUser } from '../actions/userActions'

// 创建并导出generator函数
export function * userSaga () {
  console.log('redux-saga创建成功')
  // !注意这里哦  !!! 这里监听的type  前往不要与分发的type一样  如果一样了 就会一直dispatch 然后一直监听触发
  // !陷入死循环
  yield takeEvery(LOGIN_USER, function * (...aru) {
    // 这里的loginUser这个函数不用传入参数  如果需要传参的话 就直接在后面添加参数就是了 与改变this指向的call一样的传参方式
    const [res] = yield call(loginUser)
    if (res) {
      // !这里分发的type 前往不要和分发的type一样
      yield  put({ type: UPDATE_USER, payload: res.data.data })
    }
    // * 注意 这里的返回值好像是下一个yield的参数, 但是这里使用的是一个函数 应该不一样
    return '登陆成功'
  })
}
```

# 7. 使用redux-persist让redux持久化

redux-persist的npm网址:<https://www.npmjs.com/package/redux-persist>
这个网上一找一大推的教程

## 8. 去掉input为number时的上下箭头

```css
input[type=number] {
    -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}  
```

## 9. react ref的所有注册方式

<https://blog.csdn.net/xiapi3/article/details/106342127/>

## 10. react遍历生成ref

<https://segmentfault.com/q/1010000019141634>