动漫网站源码,disqus wordpress,wordpress 编辑器模板,济南网站建设公司制作程序员有时候 “提笔忘字”, 以下是此次过程中遇到的问题流水账, 按顺序记录的, 不再细分什么前端后端了.
有些问题可能过于简单, 勿喷!
1, Koa 的 get, post 请求怎么获取参数
get 类请求: 直接使用 ctx.query 来获取前端传递来的参数 post 类请求: 需要使用到 koa-bodypar…程序员有时候 “提笔忘字”, 以下是此次过程中遇到的问题流水账, 按顺序记录的, 不再细分什么前端后端了.
有些问题可能过于简单, 勿喷!
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 router3, Vue 3 通过 customRef 实现防抖
废话不多说, 直接上代码:
src/utils/debouncedRef.js
import { customRef } from vueexport 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 setupconst model defineModel()/scripttemplate...div classitem_coninput :idid :typetype v-modelmodel :placeholderplaceholder/div
/template父组件中使用
script setup
import { ref } from vue
import LabelInput from /components/LabelInput.vueconst username ref()
const password ref()/scripttemplatediv classusernameLabelInputv-modelusername/LabelInput/divdiv classpasswordLabelInputv-modelpassword/LabelInput/div
/template示例二: 子组件仅有多个需要传递的 model 属性
子组件 Example.vue 核心代码
script setupconst insuranceName defineModel(insuranceName, { required: true })
const insuranceType defineModel(insuranceType)/scripttemplatediv classitem_conel-input v-modelinsuranceName //divdiv classitem_conel-select v-modelinsuranceType.../el-select/div
/template父组件中使用
script setup
import { ref } from vue
import Example from ./components/Example.vueconst insuranceName ref()
const insuranceType ref()/scripttemplateExamplev-model:insuranceNameinsuranceNamev-model:insuranceTypeinsuranceType/Example
/template5, 网格布局
网格布局是一个 学起来稍复杂, 但是 用起来舒服 的一种布局方案.
学起来复杂: 属性太多了, 眼花缭乱 用起来舒服: 两三个属性就能实现以往实现起来很麻烦的布局效果.
常用的属性:
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-dataconst userForm reactive({address_city: [],
})/scripttemplatediv classcityel-cascaderclasscity_con:optionspcaTextArrclearableplaceholder选择城市v-modeluserForm.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 ./heightexport default function registerDirectives(app) {registerHeight(app)
}3, main.js
...
// 自定义指令
import registerDirectives from ./directivesconst app createApp(App)app.use(createPinia())
app.use(router)
app.use(ElementPlus)
registerDirectives(app)app.mount(#app)4, 使用
必须要有 id 属性
template...div idxxx v-height.../div...
/template本章完!
