search

MrZWH / MrZWHblog

https://mrzwh.github.io/
2 stars 1 forks source link

从零打造企业级电商后台管理系统 #28

Open MrZWH opened 5 years ago

MrZWH commented 5 years ago

dns-prefetch

<link rel="dns-prefetch" href="">

session

前端框架分析

what： 框：指的是约束 架：支撑 框架会控制我们书写代码时各个部分的结构，以及它们之间的依赖关系和交互流程，简单点说就是按照框架的要求来写业务，而与业务无关的内容由框架完成，从而提高开发能力和开发效率。框架发展到后来会变得不那么单纯，随着框架的发展会出现很多插件和工具，这些一起形成了框架的生态系统。

why： 随着业务越来越复杂，很多时候原生 js 开发已经搞不定了，这个可能不是技术上的，也可能是成本开发效率或者是团队合作效率上的问题。

How：

前端框架要解决的问题

传统的原生开发方式的不足

框架开发的不足

MrZWH commented 5 years ago

控制访问 /login 与主页面的路由

<Router>
  <Switch>
    <Route path="/login" component={Login}/>
    <Route path="/" render={props => (
      <Layout>
        <Switch>
          <Route exact path="/" component={Login}/>
          <Route path="/product" component={Login}/>
          <Route path="/product-category" component={Login}/>
        </Switch>
      </Layout>
    )}/>
  </Switch>
</Router>

表单绑定一个 onChange 事件

onInputChange(e) {
  let inputValue = e.target.value,
      inputName = e.target.name;
  this.setState({
    [inputName]: inputValue
  })
}

强制跳转登录页需做 redirect

window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);

// 获取 URL 参数
getUrlParam(name) {
  // param=123&param1=345
  let queryString = window.location.search.split('?')[1] || '';
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  let result = queryString.match(reg)
  // result: ['param=123', '', '123', '&']
  return result ? decodeURIComponent(result[2]) : null
}

封装 localStorage

setStorage(name, data) {
  let dataType = typeof data;

  if (dataType === 'object') {
    window.localStorage.setItem(name, JSON.stringify(data))
  } else if (['number', 'string', 'boolean'].indexOf(dataType)) {
    window.localStorage.setItem(name, data)
  } else {
    alert('该类型不能用于本地存储')
  }
}

将时间戳格式化

new Date(time).toLocaleString()

分路由的配置

按顺序删除图片

onImageDelete(e) {
  let index = parseInt(e.target.getAttribute('index')),
      subImages = this.state.subImages;
  subImages.splice(index, 1);
  this.setState({
    subImages
  })
}

富文本组件

simditor
如何将依赖 jQuery 的组件改造成 React 的组件：

import React from 'react';
import Simditor from 'simditor';
import 'simditor/styles/simditor.scss';

export default class RichEditor extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.loadEditor();
  }

  loadEditor() {
    let element = this.refs['textarea']
    this.simditor = new Simditor({
      textarea: $(element),
      defaultValue: this.props.placeholder || '请输入内容',
      upload: {
        url: '/manage/product/richtext_img_upload.do',
        defaultImage: '',
        fileKey: 'upload_file'
      }
    });
    this.bindEditorEvent();
  }

  bindEditorEvent() {
    this.simditor.on('valuechanged', e => {
      this.props.onVlaueChange(this.simditor.getValue());
    })
  }

  render() {
    return (
      <div className="rich-editor">
        <textarea ref="textarea"></textarea>
      </div>
    )
  }
}

项目上线

MrZWH commented 5 years ago

项目上线

生产环境配置

代码发布

自动化发布脚本

# fe-deploy.sh
#!/bin/sh

GIT_HOME=/developer/git-repository
DEST_PATH=/product/front/

if [ ! -n "$1"];
then
  echo -e "Please input a project name! You can input as follows:"
  echo -e "./fe-deploy.sh admin-v2-fe"
  exit
fi

if [ $1 = "admin-v2-fe"];
then
  echo -e "-------Enter Project------"
  cd $GIT_HOME$1
else
  echo -e "Invalid Project Name"
  exit
fi

#clear dist
echo -e "-------Clean Dist------"
rm -rf ./dist

echo -e "-------Git Pull------"
git pull

echo -e "-------Yarn Install------"
yarn

echo -e "-------Yarn Run Dist------"
yarn run dist

if [ -d "./dist" ];
then
  echo -e "-------clean Dest------"
  rm -rf $DEST_PATH/dist

  echo -e "-------copy Dest------"
  cp -R ./dist $DEST_PATH/$1/

  echo -e "-------Deploy Success------"
then
  echo -e "-------Deploy Fail------"
fi

将此文件放到 developer 目录下，并更改权限: chmod 775 fe-deploy.sh, ./fe-deploy.sh

nginx 和域名配置

adminv2.jianliwu.com.conf

server {
  listen 80;
  server_name adminv2.jianliwu.com;
  access_log /etc/nginx/logs/access.log combined;
  index index.html index.jsp index.php

  location = / {
    root /product/front/admin-v2-fe/dist;
    index index.html;
  }

  location ~ .*\.html$ {
    root /product/front/admin-v2-fe/dist;
    index index.html;
  }

  location ~ .*\.do$ {
    proxy_pass http://admintest.happymmall.com;
  }

  location / {
    try_files $uri $uri/ /index.html;
  }
}

s.jianliwu.com.conf

server {
  listen 80;
  server_name s.jianliwu.com;
  access_log /etc/nginx/logs/access.log combined;
  index index.html index.jsp index.php

  location ~ /admin-v2-fe/dist/view/* {
    deny all;
  }

  location / {
    root /product/front/;
    add_header Access-Control-Allow-Origin '*';
  }
}