Koa2 & Vue.js 前端项目实战-JavaScript中文网-JavaScript教程资源分享门户

前言

Koa2 和 Vue.js 是当前前端开发中非常流行的技术栈，它们分别代表了 Node.js 后端框架和前端框架的最新潮流。本文通过一个实际项目的实战经验，介绍了如何使用 Koa2 和 Vue.js 实现一个完整的前端项目。

工具和环境

本篇文章使用了以下工具和环境：

Node.js v14.15.1
yarn v1.22.5
Koa2 v2.13.0
Vue.js v2.6.12
Vue CLI v4.5.12
Element-UI v2.14.1

项目结构

一个典型的前端项目包含了前端和后端两部分内容。本项目的结构如下：

- backend
  - config         # 配置文件
  - controller     # 路由处理逻辑
  - model          # 数据模型
  - router         # 路由文件
  - app.js         # 入口文件
- frontend
  - public         # 静态资源
  - src            # 源代码
  - node_modules   # 依赖
  - package.json   # 项目配置文件
  - yarn.lock      # 锁定依赖版本

前端项目的源代码部分位于 frontend/src 目录下，包括了代码和资源文件等。后端项目的主要代码部分位于 backend 目录下，包含了 Koa2 项目的配置和路由处理逻辑等代码。

前端项目

创建项目

使用 Vue CLI 创建一个新的 Vue.js 项目：

vue create frontend

其中，我们选择了包含了 babel，eslint 和 router 的默认选项。安装完毕后，在项目目录中启动前端服务：

cd frontend
yarn serve

集成 Element-UI

Element-UI 是一套基于 Vue.js 2.0 的 UI 组件库。可以通过如下方式集成到 Vue.js 项目中：

yarn add element-ui

在 Vue.js 项目的 main.js 文件中进行配置：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

现在，我们已经成功集成了 Element-UI，可以使用其提供的丰富的 UI 组件。

路由配置

Vue.js 的路由功能可以帮助我们实现 SPA(Single Page Application) 应用程序。在 Vue.js 项目中，我们可以通过 Router 配置文件进行路由配置。

创建路由配置文件 /src/router/index.js，并进行一些基本的路由配置和代码编写：

import Vue from 'vue';
import Router from 'vue-router';
import Login from './../views/Login.vue';
import Register from './../views/Register.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/login',
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
    },
    {
      path: '/register',
      name: 'register',
      component: Register,
    },
  ],
});

上述代码中，我们创建了两个路由组件 Login 和 Register，分别对应登录页面和注册页面。同时，我们通过 Router 配置文件，对路由进行了简单的配置。其中，mode: 'history' 表示启用 HTML5 的 history 模式，避免在 URL 中出现了 # 符号。

Vuex 集成

Vuex 是一个专为 Vue.js 应用程序设计的状态管理库，它集成了 Vue.js 的组件和 Flux 的思想。我们可以通过如下方式集成 Vuex：

yarn add vuex

在 Vue.js 项目中，通过如下方式在 store 目录下创建一个 Vuex Store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
  },
  mutations: {
    login(state, payload) {
      state.user = payload;
    },
    logout(state) {
      state.user = null;
    },
  },
  actions: {
    login({ commit }, payload) {
      commit('login', payload);
    },
    logout({ commit }) {
      commit('logout');
    },
  },
});

现在，我们在 Vue.js 项目中集成了 Vuex，可以通过 state，mutations 和 actions 三部分进行全局的状态管理和逻辑处理。

后端项目

创建项目

使用如下命令创建一个 Koa2 项目：

mkdir backend && cd backend
npm init -y
npm install --save koa koa-router mongoose body-parser

Koa2 项目已经创建完毕，我们需要执行如下命令进行配置：

touch app.js

现在，我们已经成功创建了 Koa2 项目的入口文件 app.js。

添加路由

在 app.js 文件中进行路由配置，将 API 路由分离到单独的 router 目录下：

const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');

const app = new Koa();
const router = new Router();

const routes = require('./router');

app.use(bodyParser());
app.use(routes(router));

app.listen(3001, () => {
  console.log('Server is running at http://localhost:3001');
});

在 router 目录中进行路由处理逻辑代码编写：

const UserController = require('./../controller/user');

module.exports = (router) => {
  router.post('/user/register', UserController.register);
  router.post('/user/login', UserController.login);
};

集成 MongoDB

本项目采用了 Mongoose 作为 MongoDB 的 ODM（Object Document Mapping）框架。使用如下命令安装 Mongoose：

npm install --save mongoose

在 Koa2 项目的 model 目录中，创建用户模型：

const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
  username: String,
  password: String,
});

module.exports = mongoose.model('User', UserSchema);

在 controller 目录中，我们可以使用 Mongoose，实现具体业务逻辑：

const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../model/user');

const UserController = {
  async register(ctx) {
    const { username, password } = ctx.request.body;

    if (!username || !password) {
      ctx.response.status = 400;
      ctx.response.body = {
        message: 'Invalid payload',
      }
      return;
    }

    if (await User.findOne({ username })) {
      ctx.response.status = 409;
      ctx.response.body = {
        message: 'User name exists',
      }
      return;
    }

    const salt = bcrypt.genSaltSync(10);
    const hashedPassword = bcrypt.hashSync(password, salt);

    const newUser = new User({
      username,
      password: hashedPassword,
    });

    await newUser.save();

    ctx.response.status = 201;
    ctx.response.body = {
      message: 'Register success',
    };
  },

  async login(ctx) {
    const { username, password } = ctx.request.body;

    const user = await User.findOne({ username });

    if (!user) {
      ctx.response.status = 401;
      ctx.response.body = {
        message: 'User not found',
      }
      return;
    }

    if (!bcrypt.compareSync(password, user.password)) {
      ctx.response.status = 401;
      ctx.response.body = {
        message: 'Incorrect password',
      }
      return;
    }

    const token = jwt.sign({
      id: user._id,
      username: user.username,
    }, 'secret-key', { expiresIn: '1h' });

    ctx.response.body = {
      message: 'Login success',
      token,
    }
  },
};

module.exports = UserController;

上述代码中，我们实现了注册和登录两个 API 路由的业务逻辑。其中，在注册密码的时候，我们使用了 bcrypt 将密码加密，避免密码的明文存储和泄露。在登录时，我们使用了 jsonwebtoken 生成了一个包含了用户信息的 token，并将其返回给客户端。

总结

本文介绍了如何使用 Koa2 和 Vue.js 实战一个前端项目，其中包括了路由、状态管理、UI 组件等的使用，以及后端 MongoDB 的集成和 API 路由的处理逻辑等。通过本文的介绍，你可以快速掌握 Koa2 和 Vue.js 的使用，并应用到开发中。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6595fa3aeb4cecbf2d9e48f8

Koa2 & Vue.js 前端项目实战

前言

工具和环境

项目结构

前端项目

创建项目

集成 Element-UI

路由配置

Vuex 集成

后端项目

创建项目

添加路由

集成 MongoDB

总结

纠错反馈