WEB實戰：使用MERN技術棧開發項目

時間 2019-11-17

標籤 web 實戰使用 mern 技術開發項目欄目 HTML 简体版

原文原文鏈接

前言

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

後端開發

安裝好 mongodb 並啓動, 新建一個後端項目目錄, 目錄結構以下 css

固然也能夠按本身的方式創建, 執行 npm init 後，安裝須要用到的庫

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

圖片上傳 multer，驗證表單數據 validator，配置環境變量 dotenv ，跨域處理 cors前端

新建 .env 文件，在裏面配置數據庫等參數java

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

接着在 models 目錄下定義數據模型 product.js 表明產品，其餘同理react

// 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 用來處理產品相關的路由, 而後在入口文件中使用便可ios

// 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 返回給前端nginx

// 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 安裝須要的依賴包git

npx create-react-app you-projectgithub

yarn add antd react-router-dom axios

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

創建項目目錄結構

配置 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 的路由

前端頁面

一樣使用 create-react-app 創建項目，使用 yarn 安裝須要的依賴包

npx create-react-app you-project

yarn add antd-mobile react-router-dom axios

創建項目目錄結構

這裏的邏輯跟管理後臺主要的區別在於請求的數據接口不一樣，以及頁面的UI不一樣，具體實現，UI交互等按我的而定。

源碼地址

部署

功能開發完畢後，使用 yanr build 將前端以及管理後臺項目打包，將代碼傳到服務器上，配置不一樣的域名，使用 nginx 進行反向代理，防止刷新瀏覽器後404。

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。