从头创建基于NodeJS的WEB框架Koa的项目

码客说

发布于 2021-04-19 17:42:40

6680

发布于 2021-04-19 17:42:40

文章被收录于专栏：码客码客码客

前言

之前我们说过Koa框架的用法，现在我们就用它从头创建一个前后端在一块的项目，其实下面的方式还是前后端分离的，只是后端为前端提供了WEB服务器。

创建项目

假如我的项目叫ZDevOpsNode

创建该目录并进入，初始化

npm init -y

注意

-y会跳过设置项目属性的过程，注意项目名称中如果包含大写会提示不符合要求，修改为小写即可

生成配置如下

{
  "name": "zdevopsnode",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

项目的目录结构

目录及文件作用

dist 前端项目打包后保存的目录
src 前端项目所在目录
- assets 资源文件
- index.html 前端页面的入口模板文件
- index.js和index.vue vue页面文件
main.js 后端的程序入口
package.json 主配置文件
webpack.config.js webpack的配置文件

前端

添加前端相关库

Webpack

npm install -D webpack@4
npm install -D webpack-cli

Vue

npm i vue --save
npm install -D vue-loader vue-template-compiler

JS(Babel)

npm i babel-core babel-loader@7 babel-preset-env --save-dev

CSS(Less)

npm install less --save-dev
npm install style-loader css-loader less-loader@5.0.0 --save-dev

文件

npm install file-loader --save-dev

HTML

npm uninstall html-webpack-plugin
npm i --save-dev html-webpack-plugin@4

注意插件的版本要和Webpack的版本对应,否则打包错误

项目根目录添加webpack.config.js

const path = require("path");
const {
  VueLoaderPlugin
} = require('vue-loader')
var HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html的插件

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  entry: {
    index: "./src/index.js",
  },

  output: {
    path: __dirname + "/dist",
    publicPath: "./",
    filename: "[name].js",
  },

  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html' //打包前端项目的模板页面
    })
  ],
  module: {
    rules: [{
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          esModule: false,
          query: {
            name: "[name].[ext]?[hash]",
          },
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },

  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      "@": resolve("src"),
      images: resolve(path.join(__dirname, "src", "assets", "images")),
    },
  },
};

package.json

"scripts": {
  "dev":"webpack && node main.js",
  "webpack": "webpack --mode development"
},

说几个配置

{
  entry: {
    index: "./src/index.js",
  },

  output: {
    path: __dirname + "/dist",
    publicPath: "./",
    filename: "[name].js",
  },
}

这个配置相当于打包这个生产线的输入和输出，会把输入的每个JS加工后放到path定义的位置，文件的路径会在前面前面拼接上publicPath的值，这个配置不仅仅对JS生效，引用的css和图片也受publicPath的影响。

html-webpack-plugin 这个插件的作用很简单，他只是在模板的html里添加上了打包后生成的js文件。

而那堆file-loader、vue-loader、babel-loader、less-loader等则是我们需要引用什么格式就需要对应的loader

静态模板

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自动化运维</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</html>

index.js

import Vue from 'vue'
import App from './index.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

index.vue

<template>
  <div class="wrap">
    <div class="loginInner">
      <h1>欢迎,登录运维平台!</h1>
      <div class="login"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {};
  },
  created() {},
  methods: {}
};
</script>

<style lang="less" scoped>
.wrap {
  height: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: url("./assets/images/login/login_bg.jpg") no-repeat;
  background-size: cover;
  .loginInner {
    color: white;
  }
}
</style>

后端

安装依赖

npm install koa --save-dev
npm install koa-router --save-dev
npm install koa-static --save-dev

main.js

const Koa = require('koa')
const app = new Koa()
const Router = require('koa-router');
const path = require('path');
const serve = require('koa-static');
const router = new Router()

const static_serve = serve(path.join(__dirname, "dist"));
app.use(static_serve);

app.use(router.routes()).use(router.allowedMethods());
router.get('/hello', (ctx, next) => {
  ctx.body = 'Hello World';
})

app.listen(3000)

运行