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

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吧！ ^_^