Vue3 + NodeJs（Koa）项目搭建「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

技术栈

前端：Vue3 + Vite + ElementUI
后端：使用 Koa 作为服务器框架
数据库：使用MongoDB

前端部分

搭建

直接使用Vite 来快速构建 Vue 项目

npm init @vitejs/app vue3-node

然后选择Vue框架。安装 elementUI 作为组件库

npm install element-plus --save

在main.js 中注册

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
const app = createApp(App);

app.use(ElementPlus);
app.mount('#app')

接入路由

在src目录下创建router文件夹，文件夹里面创建路由信息index.js

import { createRouter, createWebHashHistory} from 'vue-router'
import Home from '../views/home.vue'
const routes = [
  {
    path: '/',
    component: Home
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})
export default router;

main.js里进行注册

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
const app = createApp(App);

app.use(router)
app.use(ElementPlus);
app.mount('#app')

修改App.vue

<template>
  <router-view></router-view>
</template>

接入Axios

使用Axios 来作为http请求的库，为了方便使用，我们做一些封装，在src目录下创建api目录，目录下有个index.js 文件

// src/api/index.js
import axios from 'axios';
import { ElMessage } from 'element-plus'

const service = axios.create({
  baseURL: import.meta.env.VITE_BASE_API, // api 的 base_url
  timeout: 50000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json'
  },
  transformRequest: [data => JSON.stringify(data)] // 参数转换
});

// axios实例拦截响应
service.interceptors.response.use(
  (response) => {
    if (response.status !== 200) {
      ElMessage.error('网络连接异常,请稍后再试!');
    }
    return response;
  },
  // 请求失败
  (error) => {
    ElMessage.error(error.message);
  }
);

// axios实例拦截请求
service.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
) 

export default service;

我们上面使用了import.meta.env.VITE_BASE_API 来获取环境变量VITE_BASE_API，所以需要在根目录创建.env文件，进行设置环境变量

VITE_BASE_API=http://localhost:3000

然后在api目录下在创建一个api文件，这个文件的作用是用来保存请求接口的方法，后续使用时，在这个文件新增接口请求的方法，然后在具体页面调用，这样的好处是，多个地方调用同一个接口时方便使用和修改。比如我们现在需要请求一个接口 /api/hello

// src/api/api.js
import request  from './index';

export function getData(params) {
  return request({
    url: '/api/data',
    method: 'get',
    params
  });
}

需要使用的话，我们在使用的页面进行引入

import { getData } from '@/api/api'

getData().then(res=> {
 console.log(res);
}).catch(err=>{
 console.log(err);
})

到这里我们就搭建完成一个简单的前端项目。

后端部分

执行npm init 初始化项目后，在根目录下创建app.js。安装Koa

npm install koa --save

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx) => {
  ctx.body = 'Hello World';
});

app.listen(3001);

在终端执行nodemon app.js就可以启动项目了，这是在浏览器打开http://localhost:3001/ 就会出现 Hello World

添加路由

创建文件 routers/index.js

const Router = require('koa-router');

const router = new Router();
router.prefix('/api');

router.get('/data', async (ctx, next) => {
  const { name } = ctx.query;
  ctx.type = 'json';
  ctx.body = {
    code: 200,
    message: '请求成功',
    data: `hello ${name || ''}`,
  };
  return next();
});
module.exports = router;

在 app.js 中注册

const Koa = require('koa');
const Router = require('./routers/index');

const app = new Koa();

app.use(async (ctx) => {
  ctx.body = 'Hello World';
});
app.use(Router.routes(), Router.allowedMethods());
app.listen(3001);

这时候我们在前端项目中请求 http://localhost:3001/api/data 会报跨域的错，所以我们还需要对跨域进行处理。
安装中间件 koa2-cors

npm install koa2-cors --save

在 app.js 中注册

const Koa = require('koa');
const cors = require('koa2-cors');
const Router = require('./routers/index');

const app = new Koa();

app.use(cors());

app.use(Router.routes(), Router.allowedMethods());
app.listen(3001);

这是我们在前端项目请求 http://localhost:3001/api/data 就会返回正确的数据了

接入 MongoDB

首先电脑需要有个MongoDB数据库，安装MongoDB 直接去官网下载即可，下载地址：www.mongodb.com/download-ce…

安装mongodb 和 mongoose。mongoose为模型提供了一种直接的，基于scheme结构去定义你的数据模型。它内置数据验证，查询构建，业务逻辑钩子等，开箱即用。

npm i mongodb mongoose -S

使用mongoose连接MongoDB数据库。如果你的数据库没有设置账号密码，那么可以直接使用mongoose.connect('mongodb://host:port/database')，如果设置了密码，则使用mongoose.connect('mongodb://username:password@host:port/database'); 在项目中创建 /models/index.js

const mongoose = require('mongoose');

mongoose.Promise = Promise;
const url = 'mongodb://0.0.0.0:27017/test';
mongoose.connect(url, { useNewUrlParser: true, useUnifiedTopology: true });
const db = mongoose.connection;
db.on('error', (error) => {
  console.log(`数据库连接失败：${error}`);
});

db.on('open', () => {
  console.log('数据库连接成功');
});

这样就可以连接成功了，后续就可以直接使用 mongoose 进行操作，

Vue3 + NodeJs（Koa） 项目搭建

技术栈