从零搭建一个全栈项目（一）—— 基础构建

一、项目介绍：

这是完全从零开始搭建的博客类全栈项目，含有登录注册、发布查看博客等基础功能，其目的主要是为了体验一个项目从零开始开发的整体流程。

二、项目技术栈：

html、css、js + webpack + node + mysql 等。（后面可能会使用vue/react + express/koa等对项目进行优化）
目前已经实现的没有使用其他前后端框架，也主要是为了更好的学习和体验完全从零开发的过程，后面也会不断优化代码，也会使用一些主流的框架对代码进行重构，体验不同框架下开发的优缺点，同时也熟悉了不同框架的使用。

三、项目构建

接下来就开始正式进入到项目的搭建。首先，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页面的内容，证明启动成功，此时我们项目的基本搭建已经完成。

四、本章总结

本章介绍了一些项目要做的几个功能和一些后期改进计划，还有就是简单的构建了项目的结构：

前端的pages目录，pages中新建了项目需要的页面文件夹，每个页面对应的文件夹下又分为了index.html、index.js、index.css三个文件用来写我们页面中用到的业务代码；
后端的server目录，用于写后端相关的逻辑代码；
配置了基础的webpack，能在80端口运行前端代码，看到页面内容；
使用node启动后端服务。

下一章主要内容:
1.后端书写相关接口（先写一个接口进行测试）;
2.后端连接mysql数据库，及简单sql语句书写；
3.前端通过axios调用后端接口获取数据;

五、最后

GitHub地址：戳这里

本项目仅为学习交流使用，如果有小伙伴有更好的建议欢迎提出来大家一起讨论，另外感兴趣的小伙伴就点个star吧！ ^_^