Vue+Koa项目完整上线流程中遇到的问题

程序员有时候 “提笔忘字”, 以下是此次过程中遇到的问题流水账, 按顺序记录的, 不再细分什么前端后端了.

有些问题可能过于简单, 勿喷!

1, Koa 的 get, post 请求怎么获取参数

get 类请求: 直接使用 ctx.query 来获取前端传递来的参数
post 类请求: 需要使用到 koa-bodyparser 中间件, 然后通过 ctx.request.body 来获取前端传递的参数

koa-bodyparser 在使用 koa2 指令创建项目时已经内置.

2, get, post, put, delete 接口参数

直接贴一个路由文件的使用吧!

const router = require('koa-router')()
const { database } = require('../config/default')
const queryUtil = require('../service/query');router.prefix(`${database.BASIC_URL}/insurance`)router.get('/type', async function (ctx, next) {ctx.body = await queryUtil.getInsuranceType();
});router.post('/add', async (ctx, next) => {ctx.body = await queryUtil.addInsurance(ctx.request.body);
});router.get('/list', async (ctx, next) => {ctx.body = await queryUtil.insuranceList(ctx.query);
});router.put('/delete/validate', async function (ctx, next) {ctx.body = await queryUtil.deleteInsuranceValidate(ctx.request.body);
})router.delete('/delete', async (ctx, next) => {ctx.body = await queryUtil.deleteInsurance(ctx.query);
});router.get('/detail', async (ctx, next) => {ctx.body = await queryUtil.insuranceDetail(ctx.query);
});router.put('/edit', async (ctx, next) => {ctx.body = await queryUtil.editInsurance(ctx.request.body);
});module.exports = router

3, Vue 3 通过 customRef 实现防抖

废话不多说, 直接上代码:

src/utils/debouncedRef.js

import { customRef } from 'vue'export function useDebouncedRef(value, delay = 200) {let timeoutreturn customRef((track, trigger) => {return {get() {track()return value},set(newValue) {clearTimeout(timeout)timeout = setTimeout(() => {value = newValuetrigger()}, delay)}}})
}

哪个文件需要用到防抖函数, import 进去即可. 关于 customRef 的作用可参考官网介绍

4, defineModel()

defineModel(): 这个宏可以用来声明一个双向绑定 prop，通过父组件的 v-model 来使用。

个人理解: Vue 2 中 ---- “在组件上使用v-model” 的简化版.

我们知道, v-model 可以实现数据的双向绑定, 在 input 标签上使用时可以比较方便的获取 input 的 value 值. 这是因为 v-model 这个指令实际上就是一个 语法糖, 内部默认复合了一个 value 属性和一个 @input 方法.
因此, 我们想要在自定义组件上使用 v-model 时, 就需要在这个自定义组件中声明对应的属性和方法来配合.

那 Vue 3, 确切的说是 3.4+ 版本之后, 这个 defineModel() 的出现, 就会让我们在自定义组件中的配合不再那么麻烦.
以下是一个使用示例, 大家一看便知 ( 仅展示核心代码 ):

示例一: 子组件仅有一个需要传递的 model 属性

子组件 LabelInput.vue 核心代码

<script setup>const model = defineModel()</script><template>...<div class="item_con"><input :id="id" :type="type" v-model="model" :placeholder="placeholder"></div>
</template>

父组件中使用

<script setup>
import { ref } from 'vue'
import LabelInput from '@/components/LabelInput.vue'const username = ref('')
const password = ref('')</script><template><div class="username"><LabelInputv-model="username"></LabelInput></div><div class="password"><LabelInputv-model="password"></LabelInput></div>
</template>

示例二: 子组件仅有多个需要传递的 model 属性

子组件 Example.vue 核心代码

<script setup>const insuranceName = defineModel('insuranceName', { required: true })
const insuranceType = defineModel('insuranceType')</script><template><div class="item_con"><el-input v-model="insuranceName" /></div><div class="item_con"><el-select v-model="insuranceType">...</el-select></div>
</template>

父组件中使用

<script setup>
import { ref } from 'vue'
import Example from './components/Example.vue'const insuranceName = ref('')
const insuranceType = ref('')</script><template><Examplev-model:insuranceName="insuranceName"v-model:insuranceType="insuranceType"></Example>
</template>

5, 网格布局

网格布局是一个 学起来稍复杂, 但是 用起来舒服 的一种布局方案.

学起来复杂: 属性太多了, 眼花缭乱
用起来舒服: 两三个属性就能实现以往实现起来很麻烦的布局效果.

常用的属性:

grid-template-columns
grid-template-rows
row-gap

没有了解过网格布局的小伙伴, 抽空学一学吧, 很好用!

6, Koa 连接 MySQL 数据库

使用 mysql 模块来辅助实现 MySQL 数据库连接:

安装指令:

npm i mysql

之后就是 koa 中的配置, 以下是我自己的简单封装:

1, 根目录/config/default.js

const database = {HOST: 'xxx.xxx.xxx.xxx', //数据库地址USER: 'root',PASSWORD: 'xxxxxx',DATABASE: 'xxx', //数据库名称...
}
module.exports = { database}

2, 根目录/db/mysql.js

const mysql = require('mysql')
const { database } = require('../config/default')const pool = mysql.createPool({host: database.HOST,user: database.USER,password: database.PASSWORD,database: database.DATABASE
})exports.query = function (sql, values) {return new Promise((resolve, reject) => {pool.getConnection(function (err, connection) {if (err) {reject(err)console.log(err, "数据库连接失败");resolve({code: 500,})} else {console.log("数据库连接成功");connection.query(sql, values, (err, results) => {if (err) {reject(err)resolve({code: 400})} else {resolve({code: 200,results,})connection.release()//resolve(rows)}//connection.release() // 释放连接池})}})})
}

3, 使用

某js 文件中

const db = require('../db/mysql')function xxx() {const queryData = await db.query(`select * from ...`);...
}
...

7, Element UI 中国城市三级联动

Element UI 中国省市区级联数据: element-china-area-data

安装

npm i element-china-area-data

使用

某.vue 文件中:

<script setup>
import { reactive } from 'vue'
import { pcaTextArr } from 'element-china-area-data'const userForm = reactive({address_city: [],
})</script><template><div class="city"><el-cascaderclass="city_con":options="pcaTextArr"clearableplaceholder="选择城市"v-model="userForm.address_city"></el-cascader></div>
</template>

8, Vue 3 使用 Element UI 中的 loading

对于 loading 的使用, 可以使用 v-loading 这个 Element UI 提供的自定义指令, 属性值为 Boolean 类型就行.

我这里是以服务的形式使用的 loading 加载样式, 做了全局封装.
优点: 全局共用一个 loading
缺点: 全局共用一个 loading
代码:
src/utils/loading.js

import { ElLoading } from "element-plus"// style
const loadingStyle = {lock: true,text: 'Loading',background: 'rgba(0, 0, 0, 0.7)',
}
let load = null
const loading = {loading: () => {!load && (load = ElLoading.service(loadingStyle))},close: () => {load && load.close()}
}export default loading

使用:

import loading from '@/utils/loading'// 显示 loading
loading.loading()// 关闭 loading
loading.close()

在合适的时机调用 loading 的两个方法即可.
比较简陋, 不喜勿喷!

我是在自己二次封装的 axios.js 文件中使用的, 只要发送网络请求, 就会有 loading 的显示.

9, Koa 中 mysql 模块的 query 方法使用

上述内容中已经讲了将 mysql 重新封装 ( 创建 db/mysql.js ), 然后再要使用时 import 引入后调用 query() 方法即可.
这里简单聊下 query() 方法的使用:

// 1, 完整 sql 语句
const queryData = await db.query(`select * from xxxx`);// 2, 使用 ?
const queryData = await db.query('SELECT * FROM `books` WHERE `author` = ?', ['David']);// 3, 对象
const queryData = await db.query({sql: 'SELECT * FROM `books` WHERE `author` = ?',timeout: 40000, // 40svalues: ['David']
});// 4, 对象, value
const queryData = await db.query({sql: 'SELECT * FROM `books` WHERE `author` = ?',timeout: 40000, // 40s},['David']
);// 5, sql, value
const queryData = await db.query('SELECT * FROM `books` WHERE `author` = ?', 'David');

10, Koa 执行定时任务

使用 node-schedule 来实现定时任务的执行.

安装

npm i node-schedule

使用

1, 根目录/schedule/index.js

const schedule = require('node-schedule');
const queryUtil = require('../service/query');const REFRESH_REMIND = 'refresh_remind';function refreshRemind() {// 重复const rule2 = new schedule.RecurrenceRule();// [0,1,2],表示周天、周一、周二都会执行rule2.dayOfWeek = [0, 1, 2, 3, 4, 5, 6];rule2.hour = 0;rule2.minute = 30;rule2.second = 0;schedule.scheduleJob(REFRESH_REMIND, rule2, async function() {// 每天 00:30:00 刷新 is_remind 数据const refreshResults = await queryUtil.refreshReminded();console.log('更新 is_remind 结果', refreshResults);});
}module.exports = { refreshRemind }

2, app.js


// schedule 定时任务 --- 在路由加载之前调用
const { refreshRemind } = require('./schedule/index')
refreshRemind();

scheduleJob() 方法的第一个参数还有其他传参形式:

const schedule = require('node-schedule');// 每逢分钟为 42 时触发, 例如: 19:42, 20:42, ...
const job = schedule.scheduleJob('42 * * * *', function(){console.log('The answer to life, the universe, and everything!');
});

┬ ┬ ┬ ┬ ┬ ┬
│ │ │ │ │ │
│ │ │ │ │ └ day of week (0 - 7) (0 or 7 is Sun)
│ │ │ │ └───── month (1 - 12)
│ │ │ └────────── day of month (1 - 31)
│ │ └─────────────── hour (0 - 23)
│ └──────────────────── minute (0 - 59)
└───────────────────────── second (0 - 59, OPTIONAL)

更多配置请参考[官方文档[(https://www.npmjs.com/package/node-schedule)

11, Vue 3 跨域代理

最初找的文档都是要在 vue.config.js 文件中配置 devServer, 但是想着都 Vue 3 了, 应该有变化吧, 就去 vite 的官网去搜索方案, 还真是找到了, 为此还专门写了篇博客, 这里不再赘述, 传送门

12, 服务器中项目代码存放位置

项目写完之后, 该上线了, 前端项目 npm run build 之后的 dist 放置在哪里呢? 直接就开始百度吧, 走了不少弯路.

印象最深的一个说放置于 koa 项目的 public 文件中, 然后修改 app.js 中静态资源的路径后面拼接上 /dist( 默认值: __dirname + ‘/public/’).

诶, 直接运行 koa, 浏览器地址栏 localhost:3000 还真把前端项目给跑起来了, 点了几个页面后, 刷新, 坏了 !!! Vue 的路由与 Koa 的路由冲突了 !!! 又找方案!!!

找着找着, 发现不对, 我不都用 Nginx 了吗? 还乱配置啥? 于是, 静下来屡思路, 我应该让 Nginx 来管理呀!

于是, 最终前端的 dist 放置于 Nginx 静态资源文件夹 html 下的一个文件夹中, 具体可参考上一篇博客, 传送门

里面还记录了 Nginx 的 config 文件该怎么配置.

Koa 的配置也在博客里边, 我这里就不赘述了.

13, 自定义指令实现元素高度撑满父级

直接上代码:

1, src/directives/height.js

function siblings(elm) {var a = [] //保存所有兄弟节点var p =  elm && elm.parentNode.children //获取父级的所有子节点for (var i = 0; i < p.length; i++) { //循环if (p[i].nodeType == 1 && p[i] != elm) { //如果该节点是元素节点与不是这个节点本身a.push(p[i]) // 添加到兄弟节点里}}return a
}export default function(app) {app.directive("height", {mounted: function(el) {// 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)const parentNodesH = el.parentNode.clientHeightconst nodes = document.getElementById(el.id)const sibNodes = siblings(nodes)let exitH = 0sibNodes.forEach(el => {exitH += el.clientHeight})el.style.height = parentNodesH - exitH + 'px'}})}

2, src/directives/index.js

import registerHeight from './height'export default function registerDirectives(app) {registerHeight(app)
}

3, main.js

...
// 自定义指令
import registerDirectives from './directives'const app = createApp(App)app.use(createPinia())
app.use(router)
app.use(ElementPlus)
registerDirectives(app)app.mount('#app')

4, 使用

必须要有 id 属性

<template>...<div id="xxx" v-height>...</div>...
</template>

本章完!