博客管理系统开发 -- 准备工作

一、前端开发环境

1、开发环境

windows 10操作系统；
Node.js v10.16.0；
webstorm 2019.3.4 x64；

2、前端技术栈

react v16.9 hooks + redux + react-router4；
antd；
marked hightlight.js；
webpach打包优化；
axios封装；

二、前端知识回顾

1、基础学习

如果没有接触过react的话，推荐先学习一下react基础知识：

1、react的入门教学视频入口：React 入门教程（开发文档）；

2、官方教程入口：入门教程: 认识 React；

3、redux教程：从零实现一个 redux；

2、命名规范

html标签：小写字符开始；

自定义React组件：大写字符开始；

其它变量、方法：函数驼峰命名法；

文件夹、文件命名：全部小写，中间使用-分割，如data-assets；

三、npm使用

1、npm介绍

npm是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从npm服务器下载别人编写的第三方包到本地使用；
允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用；
允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用；

由于新版的Node.js已经集成了npm，所以npm也一并安装好了。同样可以通过输入如下命令来测试是否成功安装。命令如下，出现版本提示表示安装成功:

npm -v

2、npm使用

如果你安装的是旧版本的 npm，可以很容易得通过 npm 命令来升级，命令如下：

npm install npm -g

由于npm安装较慢，我们可以使用淘宝镜像的命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

npm 安装 Node.js 模块语法格式如下：

npm install <Module Name>

以下实例，我们使用 npm 命令安装常用的 Node.js web框架模块 express:

npm install express

安装好之后，express 包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require('express') 的方式就好，无需指定第三方包路径。

var express = require('express');

3、全局安装与本地安装

npm 的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已，比如：

npm install express          # 本地安装
npm install express -g      # 全局安装

本地安装

将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录；
可以通过 require() 来引入本地安装的包；

全局安装

将安装包放在 node 的安装目录(自己指定的，默认实在C盘的)
可以直接在命令行里使用；

查看安装信息

你可以使用以下命令来查看所有全局安装的模块：

npm list -g

4、使用 package.json

package.json 位于模块的目录下，用于定义包的属性。接下来让我们来看下 express 包的 package.json 文件，位于 node_modules/express/package.json 内容：

{
  "name": "express",
  "description": "Fast, unopinionated, minimalist web framework",
  "version": "4.13.3",
  "author": {
    "name": "TJ Holowaychuk",
    "email": "tj@vision-media.ca"
  },
  "contributors": [
    {
      "name": "Aaron Heckmann",
      "email": "aaron.heckmann+github@gmail.com"
    },
    {
      "name": "Ciaran Jessup",
      "email": "ciaranj@gmail.com"
    },
    {
      "name": "Douglas Christopher Wilson",
      "email": "doug@somethingdoug.com"
    },
    {
      "name": "Guillermo Rauch",
      "email": "rauchg@gmail.com"
    },
    {
      "name": "Jonathan Ong",
      "email": "me@jongleberry.com"
    },
    {
      "name": "Roman Shtylman",
      "email": "shtylman+expressjs@gmail.com"
    },
    {
      "name": "Young Jae Sim",
      "email": "hanul@hanul.me"
    }
  ],
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/strongloop/express.git"
  },
  "homepage": "http://expressjs.com/",
  "keywords": [
    "express",
    "framework",
    "sinatra",
    "web",
    "rest",
    "restful",
    "router",
    "app",
    "api"
  ],
  "dependencies": {
    "accepts": "~1.2.12",
    "array-flatten": "1.1.1",
    "content-disposition": "0.5.0",
    "content-type": "~1.0.1",
    "cookie": "0.1.3",
    "cookie-signature": "1.0.6",
    "debug": "~2.2.0",
    "depd": "~1.0.1",
    "escape-html": "1.0.2",
    "etag": "~1.7.0",
    "finalhandler": "0.4.0",
    "fresh": "0.3.0",
    "merge-descriptors": "1.0.0",
    "methods": "~1.1.1",
    "on-finished": "~2.3.0",
    "parseurl": "~1.3.0",
    "path-to-regexp": "0.1.7",
    "proxy-addr": "~1.0.8",
    "qs": "4.0.0",
    "range-parser": "~1.0.2",
    "send": "0.13.0",
    "serve-static": "~1.10.0",
    "type-is": "~1.6.6",
    "utils-merge": "1.0.0",
    "vary": "~1.0.1"
  },
  "devDependencies": {
    "after": "0.8.1",
    "ejs": "2.3.3",
    "istanbul": "0.3.17",
    "marked": "0.3.5",
    "mocha": "2.2.5",
    "should": "7.0.2",
    "supertest": "1.0.1",
    "body-parser": "~1.13.3",
    "connect-redis": "~2.4.1",
    "cookie-parser": "~1.3.5",
    "cookie-session": "~1.2.0",
    "express-session": "~1.11.3",
    "jade": "~1.11.0",
    "method-override": "~2.3.5",
    "morgan": "~1.6.1",
    "multiparty": "~4.1.2",
    "vhost": "~3.0.1"
  },
  "engines": {
    "node": ">= 0.10.0"
  },
  "files": [
    "LICENSE",
    "History.md",
    "Readme.md",
    "index.js",
    "lib/"
  ],
  "scripts": {
    "test": "mocha --require test/support/env --reporter spec --bail --check-leaks test/ test/acceptance/",
    "test-ci": "istanbul cover node_modules/mocha/bin/_mocha --report lcovonly -- --require test/support/env --reporter spec --check-leaks test/ test/acceptance/",
    "test-cov": "istanbul cover node_modules/mocha/bin/_mocha -- --require test/support/env --reporter dot --check-leaks test/ test/acceptance/",
    "test-tap": "mocha --require test/support/env --reporter tap --check-leaks test/ test/acceptance/"
  },
  "gitHead": "ef7ad681b245fba023843ce94f6bcb8e275bbb8e",
  "bugs": {
    "url": "https://github.com/strongloop/express/issues"
  },
  "_id": "express@4.13.3",
  "_shasum": "ddb2f1fb4502bf33598d2b032b037960ca6c80a3",
  "_from": "express@*",
  "_npmVersion": "1.4.28",
  "_npmUser": {
    "name": "dougwilson",
    "email": "doug@somethingdoug.com"
  },
  "maintainers": [
    {
      "name": "tjholowaychuk",
      "email": "tj@vision-media.ca"
    },
    {
      "name": "jongleberry",
      "email": "jonathanrichardong@gmail.com"
    },
    {
      "name": "dougwilson",
      "email": "doug@somethingdoug.com"
    },
    {
      "name": "rfeng",
      "email": "enjoyjava@gmail.com"
    },
    {
      "name": "aredridel",
      "email": "aredridel@dinhe.net"
    },
    {
      "name": "strongloop",
      "email": "callback@strongloop.com"
    },
    {
      "name": "defunctzombie",
      "email": "shtylman@gmail.com"
    }
  ],
  "dist": {
    "shasum": "ddb2f1fb4502bf33598d2b032b037960ca6c80a3",
    "tarball": "http://registry.npmjs.org/express/-/express-4.13.3.tgz"
  },
  "directories": {},
  "_resolved": "https://registry.npmjs.org/express/-/express-4.13.3.tgz",
  "readme": "ERROR: No README data found!"
}

View Code

Package.json 属性说明

name - 包名；
version - 包的版本号；
description - 包的描述；
homepage - 包的官网 url ；
author - 包的作者姓名；
contributors - 包的其他贡献者姓名；
dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下；
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上；
main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js；
keywords - 关键字；

5、卸载模块

我们可以使用以下命令来卸载 Node.js 模块：

npm uninstall express

6、更新模块

我们可以使用以下命令更新模块：

npm update express

7、搜索模块

使用以下来搜索模块，会打开浏览器查看存在的模块版本：

npm search express

四、快速构建React开发环境

1、全局安装create-react-app脚手架工具

cnpm install -g create-react-app

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。 create-react-app 自动创建的项目是基于 Webpack + ES6 。

2、创建新的react项目

create-react-app react-blog-zy

此时会在当前工作路径创建一个文件夹react-blog-zy：

node_modules：用于存放项目的依赖包，也就是构建这个React项目可能会用到的工具；
public：文件夹中是 index.html存放目录，也就是React根页面的所在地；
src：中用于存放js文件，也就是项目开发中的主要区域；
package.json：用于记录项目信息，以及外部依赖包的导入信息等；

跳转到新建项目目录下：

cd react-blog-zy

运行项目：

npm start

可以看到项目启动成功，打开网页 http://localhost:3000：

3、运行nom run eject

使用npm run eject 可以看到webpack.config配置信息，此时会多出两个文件夹：

config文件夹：

env.js ：处理.env环境变量配置文件；
path.js：提供各种路径；
webpack.config.js： webpack配置文件；
webpackDevServer.config.js：测试服务器配置文件；

scripts文件夹：

build.js：打包脚本；
start.js：启动脚本；
test.js：测试脚本；、

4、项目结构调整

删除src、public目录下所有文件：

1、在public下新建index.html文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>zy的博客</title>

    <!-- SEO -->
    <meta name="keywords" content="zy的博客">
    <meta name="keywords" content="zy">
    <meta name="description" content="前端开发爱好者">
    <meta property="og:type" content="website">
    <meta property="og:title" content="zy的博客">
    <meta property="og:url" content="https://www.cnblogs.com/zyly/">
    <meta property="og:site_name" content="zy的博客">
    <meta property="og:description" content="前端开发爱好者">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="zy的博客">
    <meta name="twitter:description" content="前端开发爱好者">

    <!-- 禁用 移动端缩放 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    <!-- md 代码高亮 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>

  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

2、在public下新建favicon.ico文件：

该文件就是一个icn图标；

3、在public下新建manifest.json文件：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

4、在src下新建App.js文件：

import React from 'react';

export default function App(props){
    return (
        <div>
            <h1>{props.title}</h1>
        </div>
    )
}

5、在src下新建index.js文件：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
    <App title='博客'/>,
    document.getElementById('root')
)

// 热加载
if (module.hot) {
    module.hot.accept('./App', () => {
        ReactDOM.render(<App title='博客'/>, document.getElementById('root'))
    })
}

该文件也是该项目的默认入口文件，我们可以在webpack.config.js文件中看到：

// These are the "entry points" to our application.
    // This means they will be the "root" imports that are included in JS bundle.
    entry: [
      // Include an alternative client for WebpackDevServer. A client's job is to
      // connect to WebpackDevServer by a socket and get notified about changes.
      // When you save a file, the client will either apply hot updates (in case
      // of CSS changes), or refresh the page (in case of JS changes). When you
      // make a syntax error, this client will display a syntax error overlay.
      // Note: instead of the default WebpackDevServer client, we use a custom one
      // to bring better experience for Create React App users. You can replace
      // the line below with these two lines if you prefer the stock client:
      // require.resolve('webpack-dev-server/client') + '?/',
      // require.resolve('webpack/hot/dev-server'),
      isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
      // Finally, this is your app's code:
      paths.appIndexJs
      // We include the app code last so that if there is a runtime error during
      // initialization, it doesn't blow up the WebpackDevServer client, and
      // changing JS code would still trigger a refresh.
    ].filter(Boolean),