珠峰培训，专注前端

一、用户中心

  • src/container/Profile.js
  1. import React, { Component } from 'react'
  2. import bg from '../../images/login_bg.png'
  3. import profile from '../../images/profile.png'
  5. import './index.less'
  7. import { Link } from 'react-router-dom'
  9. import { connect } from 'react-redux'
  11. import actions from '../../store/actions/session'
  13. class Profile extends Component {
  14.     componentDidMount () {
  15.         this.props.toValidate()
  16.     }
  17.   render () {
  18.     return (  <div className='profile'>
  19.         <div className="profile-bg">
  20.             <img src={bg} alt=""/>
  21.             <div className="avatar">
  22.                 <img src={profile} alt=""/>
  23.             </div>
  24.             {
  25.                 this.props.user
  26.                     ? <a className='btn'>{this.props.user.username}</a>
  27.                     : <Link className='btn' to='/login'>登录</Link>
  28.             }
  29.         </div>
  30.     </div>)
  31.   }
  32. }
  33. export default connect(state => ({...state.session}), actions)(Profile)
  • /Profile/index.css
  1. .profile {
  2.     width: 100%;
  3.     .profile-bg {
  4.         position: relative;
  5.         width: 100%;
  6.         img {
  7.             width: 100%;
  8.         }
  9.     }
  10.     .avatar {
  11.         position: absolute;
  12.         top: 35%;
  13.         width: 60px;
  14.         height: 60px;
  15.         left: 50%;
  16.         margin-left: -30px;
  18.         img {
  19.             width: 100%;
  20.             height: 100%;
  21.         }
  22.     }
  23.     .btn {
  24.         position: absolute;
  25.         bottom: 20%;
  26.         left: 50%;
  27.         margin-left: -60px;
  28.         background: #fff;
  29.         color: #239aea;
  30.         width: 120px;
  31.         height: 25px;
  32.         line-height: 25px;
  33.         border-radius: 5px;
  34.         text-align: center;
  35.     }
  36. }
  • src/container/Login.js
  1. import React, { Component } from 'react'
  2. import './index.less'
  3. import Header from "../../component/Header/Header";
  5. import { Link } from 'react-router-dom'
  7. import { connect } from 'react-redux'
  8. import actions from "../../store/actions/session";
  10. import Alert from '../../component/Aleart/Alert'
  12. class Login extends Component {
  13.     login = () => {
  14.         this.props.toLogin({
  15.             username: this.username.value,
  16.             password: this.password.value
  17.         }, this.props.history.push)
  18.     }
  19.   render () {
  20.     return (<div className='login'>
  21.         <Header title='登录' />
  22.         <ul className='container'>
  23.             <li><input type="text" ref={(el) => this.username = el}/></li>
  24.             <li><input type="text" ref={(el) => this.password = el}/></li>
  25.             <li><Link to='/reg'>前往注册</Link></li>
  26.             <li><button onClick={this.login}>登录</button></li>
  27.             <li>
  28.                 <Alert />
  29.             </li>
  30.         </ul>
  31.     </div>)
  32.   }
  33. }
  35. export default connect(state => ({...state.session}), actions)(Login)
  • Login/index.less
  1. .login {
  2.     position: absolute;
  3.     top: 0;
  4.     left: 0;
  5.     right: 0;
  6.     bottom: 0;
  7.     background: #fff;
  8.     z-index: 100;
  10.     ul {
  11.         li {
  12.             input {
  13.                 margin-top: 20px;
  14.                 width: 100%;
  15.                 height: 35px;
  16.                 border-radius: 5px;
  17.                 box-shadow: none;
  18.                 outline: none;
  19.                 border: 1px solid #eee;
  20.                 -webkit-appearance: none;
  21.             }
  23.             a {
  24.                 display: block;
  25.                 margin-top: 20px;
  26.                 color: #239aea;
  27.             }
  29.             button {
  30.                 margin-top: 20px;
  31.                 -webkit-appearance: none;
  32.                 background: #239aea;
  33.                 color: #fff;
  34.                 width: 100%;
  35.                 height: 35px;
  36.                 text-align: center;
  37.                 line-height: 35px;
  38.                 border: none;
  39.                 outline: none;
  40.                 border-radius: 5px;
  41.             }
  42.         }
  43.     }
  44. }
  • src/container/Reg/Reg.js
  1. import React, { Component } from 'react'
  2. import './index.less'
  3. import Header from "../../component/Header/Header";
  5. import { connect } from 'react-redux'
  6. import actions from "../../store/actions/session";
  8. import Alert from '../../component/Aleart/Alert'
  10. class Reg extends Component {
  11.     reg = () => {
  12.         this.props.toReg({
  13.             username: this.username.value,
  14.             password: this.password.value
  15.         }, this.props.history.push)
  16.     }
  17.   render () {
  18.     return (<div className='login'>
  19.         <Header title='注册' />
  20.         <ul className='container'>
  21.             <li><input type="text" ref={(el) => {this.username = el}}/></li>
  22.             <li><input type="text" ref={(el) => {this.password = el}}/></li>
  23.             <li><button onClick={this.reg}>注册</button></li>
  24.             <li><Alert /></li>
  25.         </ul>
  26.     </div>)
  27.   }
  28. }
  30. export default connect(state => ({...state.session}), actions)(Reg)
  • Reg/index.less
  1. .login {
  2.     position: absolute;
  3.     top: 0;
  4.     left: 0;
  5.     right: 0;
  6.     bottom: 0;
  7.     background: #fff;
  8.     z-index: 100;
  10.     ul {
  11.         li {
  12.             input {
  13.                 margin-top: 20px;
  14.                 width: 100%;
  15.                 height: 35px;
  16.                 border-radius: 5px;
  17.                 box-shadow: none;
  18.                 outline: none;
  19.                 border: 1px solid #eee;
  20.                 -webkit-appearance: none;
  21.             }
  23.             a {
  24.                 display: block;
  25.                 margin-top: 20px;
  26.                 color: #239aea;
  27.             }
  29.             button {
  30.                 margin-top: 20px;
  31.                 -webkit-appearance: none;
  32.                 background: #239aea;
  33.                 color: #fff;
  34.                 width: 100%;
  35.                 height: 35px;
  36.                 text-align: center;
  37.                 line-height: 35px;
  38.                 border: none;
  39.                 outline: none;
  40.                 border-radius: 5px;
  41.             }
  42.         }
  43.     }
  44. }

二、STORE

  • store/reducer/session.js
  1. import * as Types from '../action-types'
  3. let initState = {
  4.     msg: '',
  5.     err: 0,
  6.     user: null
  7. }
  10. function reducer(state = initState, action) {
  11.     switch (action.type) {
  12.         case Types.SET_USER_INFO:
  13.             return {...action.payload}
  15.     }
  16.     return state
  17. }
  20. export default reducer

三、server/package.json

  1. {
  2.   "name": "ketang-server",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "keywords": [],
  10.   "author": "",
  11.   "license": "ISC",
  12.   "dependencies": {
  13.     "body-parser": "^1.19.0",
  14.     "express": "^4.17.1",
  15.     "express-session": "^1.16.2"
  16.   }
  17. }

四、server/server.js

  1. let express = require('express')
  2. let bodyParser = require('body-parser')
  3. let session = require('express-session')
  5. let fs = require('fs')
  7. let app = express()
  9. app.use(express.static(__dirname))
  11. app.use(bodyParser.json())
  13. app.use(session({
  14.     resave: true, // 保存 cookie
  15.     saveUninitialized: true, // 保存未初始化的 session
  16.     secret: 'zfpx' // 秘钥
  17. }))
  19. // CORS 跨域资源共享
  20. app.use(function (req, res, next) {
  21.     // res.header('Access-Control-Allow-Origin', '*')
  22.     res.header('Access-Control-Allow-Origin', 'http://localhost:8080')
  23.     res.header('Access-Control-Allow-Credentials', true)
  25.     res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Request-With');
  26.     res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
  27.     res.header('X-Powered-By', '3.2.1')
  28.     if (req.method.toUpperCase() === 'OPTIONS') {
  29.         // 让 options 快速返回
  30.         res.send(200)
  31.     } else {
  32.         next()
  33.     }
  34. })
  36. let sliders = require('./database/sliders')
  37. let lessonsDir = __dirname + '/database/lessons.json'
  38. let jdb = (path) => JSON.parse(fs.readFileSync(path, 'utf8'))
  39. app.get('/api/sliders', (req, res) => {
  40.     res.send(sliders)
  41. })
  43. app.get('/api/lessons', (req, res) => {
  44.     // limit
  45.     // offset
  46.     // 1
  47.     let {limit, offset, type} = req.query
  48.     limit = +limit
  49.     offset = +offset
  51.     let start = offset
  52.     let end = offset + limit
  54.     let data = jdb(lessonsDir)
  55.     let list = data.filter((item, index) => item.type === type)
  56.     list = list.slice(start, end)
  57.     // 判断是否有更多
  58.     let hasMore = true
  59.     hasMore = limit * offset < data.length
  60.     setTimeout(() => {
  61.         res.send({
  62.             hasMore,
  63.             list
  64.         })
  65.     }, 2000)
  68. })
  71. let users = [] // 保存所有的用户
  73. let obj = {
  74.     msg: '',
  75.     code: 0,
  76.     user: {}
  77. }
  78. app.post('/api/login', (req, res) => {
  79.     let {username, password} = req.body
  80.     let isExist = users.find(i => i.username === username)
  81.     if (isExist) {
  82.         req.session.user = req.body
  83.         console.log(users)
  84.         res.send({
  85.             code: 0,
  86.             user: isExist,
  87.             msg: 'ok'
  88.         })
  89.     } else {
  90.         res.send({
  91.             code: -1,
  92.             user: null,
  93.             msg: '用户名或者密码错误'
  94.         })
  95.     }
  96. })
  98. app.post('/api/reg', (req, res) => {
  99.     let {username, password} = req.body
  100.     console.log(users)
  101.     let isExist = users.find(i => i.username === username)
  102.     if (isExist) {
  103.         res.send({
  104.             code: 1,
  105.             msg: '该用户名已经被注册',
  106.             user: null
  107.         })
  108.     } else {
  109.         users.push({
  110.             username,
  111.             password
  112.         })
  113.         res.send({
  114.             code: 0,
  115.             msg: 'ok',
  116.             user: {
  117.                 username,
  118.                 password
  119.             }
  120.         })
  121.     }
  122. })
  124. // 使用 session 持久化登录状态
  125. app.get('/api/validate', (req, res) => {
  126.     if (req.session.user) {
  127.         res.send({
  128.             msg: 'ok',
  129.             code: 0,
  130.             user: req.session.user
  131.         })
  132.     } else {
  133.         res.send({
  134.             msg: '用户未登录',
  135.             code: -1,
  136.             user: null
  137.         })
  138.     }
  139. })
  141. app.listen(3000, () => console.log('port 3000 is on'))

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】