從零搭建一個全棧項目（一）—— 基礎構建

1、項目介紹：

這是徹底從零開始搭建的博客類全棧項目，含有登陸註冊、發佈查看博客等基礎功能，其目的主要是爲了體驗一個項目從零開始開發的總體流程。

2、項目技術棧：

html、css、js + webpack + node + mysql 等。（後面可能會使用vue/react + express/koa等對項目進行優化）
目前已經實現的沒有使用其餘先後端框架，也主要是爲了更好的學習和體驗徹底從零開發的過程，後面也會不斷優化代碼，也會使用一些主流的框架對代碼進行重構，體驗不一樣框架下開發的優缺點，同時也熟悉了不一樣框架的使用。

3、項目構建

接下來就開始正式進入到項目的搭建。首先，npm初始化一個項目 node-blog, 在項目中新建兩個文件夾：pages (前端相關頁面)、server(服務端相關代碼)。
那麼下面首先要作的就是要將先後端的代碼運行起來：
服務端代碼運行相對簡單一些，直接使用node中的http模塊啓動一個服務：

/server/bin/www

#!/usr/bin/env node
const http = require('http')

const PORT = 3000
const serverHandle = require('../app')

const server = http.createServer(serverHandle)
server.listen(PORT, () => {
  console.log(`listen at localhost:${PORT}`)
})

複製代碼

如今已經在3000端口啓動了咱們的服務，還須要運行前端代碼，因爲當時在前端頁面搭建的過程當中考慮到後面可能會有一些可複用的js代碼，因此並無在一個html下直接寫js，而是每一個頁面單獨新建了一個文件夾，文件夾中再分別新建index.html、index.js、index.css三個文件，這樣一些公用的js方法也能夠直接經過import進行引入，同時使用一些額外的npm包也會比較方便。

那麼如今須要運行起咱們的前端代碼，就須要使用webpack進行構建，使用webpack的devServer 將咱們的前端代碼運行在 8080端口，下面是webpack的一些基礎配置（目前也沒有作任何webpack的優化，只是簡單實現了一個多頁面的構建）：

/build/webpack.config.js

const webpack = require('webpack')
const path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: {
    blog: './pages/blog/index.js',
    home: './pages/home/index.js',
    login: './pages/login/index.js',
    register: './pages/register/index.js'
  },
  mode: 'development',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'js/[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './pages/blog/index.html',
      filename: 'html/blog.html',
      chunks: ['blog']
    }),
    new HtmlWebpackPlugin({
      template: './pages/login/index.html',
      filename: 'html/login.html',
      chunks: ['login']
    }),
    new HtmlWebpackPlugin({
      template: './pages/home/index.html',
      filename: 'html/home.html',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      template: './pages/register/index.html',
      filename: 'html/register.html',
      chunks: ['register']
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '/'
            }
          },
          'css-loader'
        ]
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, '../dist'),
    historyApiFallback: true,
    port: 8080,
    inline: true,
    hot: true,
    host: 'localhost',
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
}

複製代碼

這個簡單的webpack配置後，能夠在 package.json 中設置 scripts

"scripts": {
    "build": "webpack --config ./build/webpack.config.js",
    "dev": "webpack-dev-server --config ./build/webpack.config.js --hot",
    "server": "cross-env NODE_ENV=dev nodemon ./server/bin/www",
    "start": "npm run server & npm run dev"
  }
複製代碼

其中, npm run build 將會對前端代碼進行打包成一個多頁面的項目； npm run dev 則是使用webpack中devServer啓動前端項目，啓動成功後在瀏覽器輸入 http://localhost:8080/html/login.html 若是能夠展現出對應login頁面的內容，證實啓動成功，此時咱們項目的基本搭建已經完成。

4、本章總結

本章介紹了一些項目要作的幾個功能和一些後期改進計劃，還有就是簡單的構建了項目的結構：

1. 前端的pages目錄，pages中新建了項目須要的頁面文件夾，每一個頁面對應的文件夾下又分爲了index.html、index.js、index.css三個文件用來寫咱們頁面中用到的業務代碼；
2. 後端的server目錄，用於寫後端相關的邏輯代碼；
3. 配置了基礎的webpack，能在80端口運行前端代碼，看到頁面內容；
4. 使用node啓動後端服務。

下一章主要內容:
1.後端書寫相關接口（先寫一個接口進行測試）;
2.後端鏈接mysql數據庫，及簡單sql語句書寫；
3.前端經過axios調用後端接口獲取數據;

5、最後

GitHub地址：戳這裏

本項目僅爲學習交流使用，若是有小夥伴有更好的建議歡迎提出來你們一塊兒討論，另外感興趣的小夥伴就點個star吧！ ^_^