开发简易聊天室前端(vue3)后端(node.js)数据库(MySQL)的过程,及踩坑经历

本文详细介绍了使用vue3作为前端,node.js作为后端,MySQL作为数据库开发简易聊天室的过程。涉及前端路由设置、eslint规范、axios配置,后端用户注册、登录、信息获取、添加好友等接口实现,以及数据库设计。通过这个项目,作者加深了对前后端协作和代码规范的理解。
摘要由CSDN通过智能技术生成

前端

1.vue前端路由分为history和hash两种模式

const router = createRouter({
  // history模式
  history: createWebHistory(),
  // hash模式:#/
  // history: createWebHashHistory(),
  routes,
});

区别:hash模式 刷新页面时,#号后面的路径不会发送给服务端;history模式 刷新页面时,会把完整的路径发送给服务端。

2.eslint语法检查下的alert()不能使用,如果需要用,请在这行代码上一行添加注释 // eslint-disable-next-line

// 全局前置路由守卫
router.beforeEach((to, from, next) => {
  if (to.meta.isAuth) {
    if (window.sessionStorage.getItem('token')) {
      next();
    } else {
      // eslint-disable-next-line
      window.alert('请先登录');
    }
  } else {
    next();
  }
});

3.关于vue3里store语法糖问题 mapStore、mapMutations

3.1当引入store时,路径写道store目录就行,写道具体文件会报错,(这里应该也是语法报错),如果把store模块化,就另说了。

import store from '../../../store';

4.使用axios插件发送ajxs请求需要带请求头时࿰

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值