WEB實戰：使用MERN技術棧開發專案

輕劍快馬發表於2018-09-05
Web

前言

本文介紹如何使用 MERN 技術棧開發一個前後端分離的電商專案，水平有限，不足之處，請指出，Github。

後端開發

安裝好 mongodb 並啟動, 新建一個後端專案目錄, 目錄結構如下

WEB實戰：使用MERN技術棧開發專案
當然也可以按自己的方式建立, 執行 npm init 後，安裝需要用到的庫

npm i express mongoose multer validator jsonwebtoken dotenv cors bcrypt -S

圖片上傳 multer， 驗證表單資料 validator， 配置環境變數 dotenv ， 跨域處理 cors

新建 .env 檔案，在裡面配置資料庫等引數

DB_HOST=localhost
DB_PORT=27017
DB_NAME=cake-shop
JWT_KEY=my_jwt_key
PORT=9090
HOSTNAME=http://localhost
複製程式碼

接著在 models 目錄下定義資料模型 product.js 代表產品，其他同理

// product.js
const mongoose = require('mongoose')
const Schema = mongoose.Schema

const productSchema = new Schema(
  {
    name: {
      type: String,
      required: true,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    price: {
      type: Number,
      required: true
    },
    stock: {
      type: Number,
      default: 0
    },
    imgList: {
      type: Array,
      default: ''
    },
    category: {
      type: Array
    },
    top: {
      type: Boolean,
      default: false
    },
    rate: {
      type: Number,
      default: 5.0
    },
    publish: {
      type: Boolean,
      default: false
    }
  },
  {
    timestamps: { createdAt: 'created_at', updatedAt: 'updated_at' }
  }
)

module.exports = mongoose.model('Product', productSchema)
複製程式碼

在 routes 目錄下建立 product.js 用來定義產品相關的路由，建立 index.js 將 product.js 路由匯出， 然後在 controllers 目錄下建立 product.js 用來處理產品相關的路由, 然後在入口檔案中使用即可

// routes/product.js
const express = require('express')
const router = express.Router()
const auth = require('../middleware/auth')
const controller = require('../controllers/product')

router.get('/', controller.getAllProducts)
router.get('/top', controller.getTopProducts)
router.get('/recommend', controller.getRecommendProducts)
router.get('/detail/:productId', controller.getProductDetail)
router.get('/:sort', controller.getProducts)
router.post('/', controller.addProduct)

router
  .route('/:productId')
  .put(auth, controller.updateProduct)
  .delete(auth, controller.deleteProduct)

module.exports = router

複製程式碼
// index.js
const routes = require('./routes')
.....
app.use('/api/product', routes.product)
複製程式碼

在 controller 裡面編寫路由對應的邏輯程式碼，用 Postman 將程式碼邏輯跑通，使用者註冊時要對欄位進行驗證，以及需要對使用者密碼加密，使用者登入時要將 jsonwentoken 生成的token 返回給前端

// controllers/user.js
// 註冊
async function signUp(req, res, next) {
  let { name, email, password } = req.body

  if (!isVerifiedField(name)) {
    return res.status(400).json({ success: false, message: '請輸入字元長度大於4的使用者名稱' })
  }

  if (!isVerifiedEmail(email)) {
    return res.status(400).json({ success: false, message: '請輸入正確的郵箱地址' })
  }

  if (!isVerifiedField(password)) {
    return res.status(400).json({ success: false, message: '請設定長度不小於4個字元的密碼' })
  }

  const oldUser = await User.findOne({ email }).exec() // 檢驗使用者是否已存在

  if (oldUser !== null) {
    return res.status(409).json({ success: false, message: '使用者已存在' })
  }

  password = await bcrypt.hash(password, 10)  // 對使用者密碼加密

  const newUser = new User({ name, email, password })

  newUser
    .save()
    .then(result => {
      return res.status(201).json({ success: true, result })
    })
    .catch(error => {
      return res.status(500).json({ success: false, error })
    })
}
// 登入
async function login(req, res, next) {
  const { name, email, password } = req.body

  if (name) {
    checkField({ name })
  }

  if (email) {
    checkField({ email })
  }

  async function checkField(field) {
    const user = await User.findOne(field).exec()

    if (user === null) {
      return res.status(404).json({ success: false, message: '使用者不存在' })
    }

    const isMatch = await bcrypt.compare(password, user.password)

    if (isMatch) {
      const token = jwt.sign({ field, id: user._id }, process.env.JWT_KEY) // 生成token

      return res.status(200).json({ success: true, message: '登入成功', token }) // 返回token
    } else {
      return res.status(401).json({ success: false, message: '密碼錯誤' })
    }
  }
}
複製程式碼

管理後臺

使用 create-react-app 建立專案，使用 yarn 安裝需要的依賴包

npx create-react-app you-project

yarn add antd react-router-dom axios

根據 create-react-app 的 User Guide 配置 CSS 前處理器等

建立專案目錄結構

WEB實戰：使用MERN技術棧開發專案

配置 axios

import axios from 'axios'

const token = localStorage.getItem('CAKE_SHOP_AUTH_TOKEN')

const Request = axios.create({
  baseURL: 'http://localhost:9090/api',
  timeout: 5000,
  headers: {
    authorization: token ? token : '' // 如果有token就在請求headers裡面帶上
  }
})

export default Request

複製程式碼

在 pages 目錄下建立管理員註冊，登入等頁面，使用者登入後把後端返回的token放到 localStorage 裡面，然後跳轉到工作臺首頁

// pages/Login

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Layout, Form, Icon, Input, Button, Checkbox, message as Message } from 'antd'

import '../account.css'
import { ManagerContext } from '../../store/manager'
import ManagerService from '../../services/manager'
import { CAKE_SHOP_AUTH_TOKEN, CAKE_SHOP_USER_INFO } from '../../constant'

const { Item } = Form
const { Content, Footer } = Layout

class Login extends Component {
  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFields(async (err, values) => {
      if (!err) {
        const { name, password } = values

        ManagerService.login(name, password)  // 請求登入介面
          .then(res => {
            const { history, login } = this.props // history 物件來自於 react-router-dom
            const { message, token, manager } = res.data

            Message.success(message)
            localStorage.setItem(CAKE_SHOP_AUTH_TOKEN, `Bearer ${token}`)
            localStorage.setItem(CAKE_SHOP_USER_INFO, JSON.stringify(manager))
            login(manager)
            history.push('/dashboard')
          })
          .catch(error => {
            const { data } = error.response

            Message.error(data.message)
          })
      }
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form

    return (
      <ManagerContext.Consumer>
        {login => (
          <Layout className="account" login={login}>
            <Content className="account__content">
              <h1 className="account__title">店鋪管理系統</h1>
              <sub className="account__sub-title">登入</sub>
              <Form className="account__form" onSubmit={this.handleSubmit}>
                <Item>
                  {getFieldDecorator('name', {
                    rules: [{ required: true, message: '請輸入你的使用者名稱!' }]
                  })(
                    <Input
                      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      placeholder="Username admin"
                    />
                  )}
                </Item>
                <Item>
                  {getFieldDecorator('password', {
                    rules: [{ required: true, message: '請輸入你的密碼!' }]
                  })(
                    <Input
                      prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      type="password"
                      placeholder="Password admin"
                    />
                  )}
                </Item>
                <Item>
                  <Button type="primary" htmlType="submit" block>
                    登入
                  </Button>
                </Item>
                <Item>
                  {getFieldDecorator('remember', {
                    valuePropName: 'checked',
                    initialValue: true
                  })(<Checkbox>記住我</Checkbox>)}
                </Item>
              </Form>
            </Content>
            <Footer className="account__footer">
              <a
                className="account__link"
                href="https://xrr2016.github/io"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Icon type="github" />
              </a>
              <a className="account__link" href="mailto:xiaoranran1993@outlook.com">
                <Icon type="mail" />
              </a>
            </Footer>
          </Layout>
        )}
      </ManagerContext.Consumer>
    )
  }
}

export default withRouter(Form.create()(Login))

複製程式碼

在 routes 目錄下建立工作臺裡面的子路由頁面，編寫對應邏輯, 處理不同的業務, 最後在入口檔案中定義 react-router-dom 的路由

WEB實戰：使用MERN技術棧開發專案

前端頁面

同樣使用 create-react-app 建立專案，使用 yarn 安裝需要的依賴包

npx create-react-app you-project

yarn add antd-mobile react-router-dom axios

建立專案目錄結構

WEB實戰：使用MERN技術棧開發專案

這裡的邏輯跟管理後臺主要的區別在於請求的資料介面不同，以及頁面的UI不同，具體實現，UI互動等按個人而定。

原始碼地址

部署

功能開發完畢後，使用 yanr build 將前端以及管理後臺專案打包，將程式碼傳到伺服器上，配置不同的域名，使用 nginx 進行反向代理，防止重新整理瀏覽器後404。

location / {
  try_files $uri $uri/ /index.html;
}
複製程式碼

相關文章