项目研发笔记

项目环境配置

后端配置

• 本地 java 服务器

  • 下载Java SE Development Kit 8u351(JDK8)并安装作为后端服务器运行环境。
  • 配置环境变量。
  • 通过命令java -jar fcb-api.jar运行后端提供的 java 应用fcb-api.jar得到本地的后端服务器支持。
  • 上面命令适用于linux，windows通过命令java -Dfile.encoding=UTF-8 -jar fcb-api.jar运行后端提供的 java 应用fcb-api.jar得到本地的后端服务器支持。

• 本地数据库

  • 下载轻量级服务器环境集成工具phpstudy并安装。
    • 软件管理中额外下载工具redis, redisClient, SQL_Front
      • redis是一个非关系数据库(NoSQL)，优点：性能极高、多用途，可移植、强大的命令提示。
    • 数据库设置
      • 数据库必须使用mySql8.x，数据库基本配置：字符集utf8mb4, 引擎innoDB。
      • 设置 root 用户密码后，创建数据库fcb_college。账号、密码都是fcb_college。
      • 打开SQL_Front工具，新建登录信息。host: localhost，其他空字段写fcb_college。
      • 通过phpstudy面板导入三个sql文件（会合并到fcb_college数据库）。
  • 数据库浏览器（图形化界面工具），建议用Navicat（最稳定、专业、强大的收费数据库浏览器），使用SQL_Front可能会有打不开表报错的问题（SQL_Front只是PHPstudy的一个插件软件，新手用来练习还行）。

问题和解决

开发环境问题

• vscode使用node和npm命令报错:node(npm) : 无法将“node(npm)”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
  • 很有可能是没有通过管理员权限启动 vscode ，只有管理员权限启动的 vscode 才能使用node和npm。
  • 实在不行就试试配置全局环境变量。
• 运行项目报错：node:events:491 throw er; // Unhandled 'error' event.
  • 缺少环境变量，需要在环境变量Path中添加C:\Windows\System32。
• 运行项目发现Network: unavailable.
  • 缺少环境变量，需要在环境变量Path中添加C:\windows\System32\Wbem2。
  • 其他可能性
• 配完环境变量再重启 vscode，再重新运行项目即可。
• node版本问题原因可能所在：Node.js v17.x关闭了 SSL 提供程序中的一个安全漏洞stackoverflow回答
  • 解决办法：最稳妥有效的办法是回退安装Node.js 16.x。
• 组件不渲染：是因为需要使用<basic-container></basic-container>作为每个组件的容器。
• 项目内暂时不支持子组件开发，原因未知。

样式问题

• el-popover组件宽度无效问题
  • 原因：el-popover与app组件平行，故不能写scoped限制样式的作用域。
  • 解决办法: 单独另写一个<style lang=scss></style>容器给el-popover组件写样式。切记不要加scoped。
• 利用el-col分栏布局让两个及以上el-form-item表单项占据一行，这两个组建的样式会冲突，下一行el-form-item会增大高度遮盖住el-col包裹的那些表单项。从而使得分栏布局的表单项不能被点击。
  • 原因：饿了么UI组件样式冲突。
  • 解决办法：换个思路使用flex做两个及以上表单项独占一行的布局。

控制台报错

• JSON parse error: Cannot deserialize value of type 'java.lang.Integer' from
  • 原因：前端组件传输的数据字段类型和后端实体类字段不一致。
  • 解决办法：用navicat查看数据库字段类型，把组件传入的参数类型写正确。比如后端需要string，你前端不能传个number。

建议

• Windows查看某个端口被谁占用
• 由于FCB后台的上线环境是 Linux , 并且 Linux 是对大小写敏感的系统，所以 Windows 开发的代码也最好一并小写。能不用驼峰命名法就不用。
• 回调里的this用let that = this进行暂存，目的是
• 注意项目接口返回的状态码字段是result.data.code而不是result.code。
• 配置阿里云图标，建议图标仓库的字体配置能选上的都选上，以免使用时乱码。
• 根据接口返回的code，提示用户数据上传/获取成功与否，当然是写在响应拦截器中的。这样就能配置一次全局使用。类似的还有加载进度条也能写到请求和响应拦截器中。
• 重写 Elment-UI 的表单控件宽度，一般情况下建议直接写行内样式，简单快速不用考虑选择器权重大小。但如果是有相同宽度的大量表单控件需求，还是建议写一个高权重样式或样式穿透覆盖 Elment-UI 的表单控件原宽度。