weixin_55458088的博客

最开始没看懂，还以为是没有错误页面，于是在根目录创建了一个error页面，后面发现是找不到/这个目录对应页面，因为我们的页面结构是这样的。我们的托管服务器默认提供的呃https连接，访问服务端接口用的http，所以这里要点击地址栏改成http地址重新请求。之前写了一篇文章，nestjs写的后端，nuxt写的前端，都是通过pm2启动启动服务的方式完成部署工作的。好了，nuxt静态托管部署完成，服务还是用的之前的，只是改了下跨域问题重新打包部署了一下。没问题，接口通了基本就没问题了，再让我们登录完操作下。

上次发的实战本来是说搞完整的整套流程的，由于中间花了些时间，最终还是只在本地前后端加数据库整个跑通了，因为之前讲过服务端部署流程所以那一期就没讲服务端部署了，但是想了想，这次这个加上了前端的部署跟调用，还是应该加上前端部署跟前后端整体跑通才算数，所以开始。

这个是在我写部署服务端部署nestjs的过程中发现的问题，避免那一章篇幅太长，我把中间sql升级遇到的问题及解决办法单独写出来了。

以上步骤允许你的 NestJS 应用根据不同的环境加载不同的配置文件，从而使得环境特定的配置更加容易管理。并提供了额外的功能，使得加载环境变量更加灵活和方便。以下是如何根据不同环境加载不同。然后在package.json的运行语句里面加上。在 NestJS 中，根据不同环境获取不同的。后，你可以在应用程序的任何地方使用。：在启动应用时，通过命令行设置。环境变量的值来决定加载哪个。环境变量，以便加载正确的。部分配置了相应的启动脚本。：首先，确保你已经安装了。：在你的根模块（通常是。来获取环境变量的值。

之前本来是想把学习用的nest测试项目部署上去实现增删改查已经联表查询功能试试的，但是想想既然已经部署到服务端并且能正常运行了，那本地跟服务端差别不大了，还不如搞个真正的需求部署上去，所以今天想自己用nuxt3+vue3+vant4+nestjs+mysql实现一个简单的人员管理系统首先第一步：阿里云服务器实例转配之前选了按量付费，一天要五块多，太心疼了，转包月先。

搞定，之前还做了很多猜想，因为看大家写的加解密的例子秘钥都是16位的，于是猜测是不是前端默认是16位的，所以把后端的解密模式也改成了aes-128-cbc，后面再试的时候发现32位aes-256-cbc也没问题，所以意味着前端其实没有固定秘钥位数，后端解密的时候用的模式才固定了秘钥位数，前端跟着后端走就行。之前说搞一个完整的前后端项目，前端用nuxt3，后端用nestjs，先搞个简单的用户体系，里面包含了连接数据库，增删改查操作，联表查询，用户token校验，数据加解密传输。

前面两篇文章已经按照阿里云服务器部署引导在云服务器上把node环境安装好并且把示例工程跑起来了，接下来尝试把我们自己的nestjs项目部署到云服务器实例上跑起来。

部署示例项目 示例项目搭建演示完成，到此还基本都是阿里云环境搭建引导上有的，中间唯一教程中没有提到的问题就是第一篇中提到的因为云服务器实例配置不够导致语句不执行的问题（任何语句执行都返回killed）

最近在学习nestjs，在想怎么一个人把前后端跟数据库搞定，之前买了个服务器，只是用来买域名备案了，完全没用上，到最近才创建了一个实例，今天开始一步一步自己看怎么把我的nestjs测试代码以及mysql数据库部署到云服务器上服务器购买，域名备案，实例创建这些ali云上面都有引导的，之前忘了记录了，实在不会可以打客服电话问问。

splitchunks配置导致的打包页面空白问题

通过查看元素发现按钮的盒子模型是box-sizing：border-box；我们知道盒子模型默认的box-sizing都是content-box，遂猜想会不会是这个border-box导致绘制盒模型的时候内容把边框挤没了一部分。iphonexs跟iphone13上面一个设置为1px大小的边框的按钮会看不见某个边框，我们看到的是左边框或者下边框。解决办法：给按钮添加样式:box-sizing: content-box，边框出现。

通过查看nuxt官网发现autoprefixer的配置在nuxt.config.js里面的build对象下。但是项目搭建完之后死活都没有生效，后面看了postcss文档，autoprefixer文档说明。配置完之后还是没生效，也有尝试在项目中安装autoprefixer依赖作为插件引入，还是没生效。后面想到autoprefixer是根据支持的浏览器列表去添加对应前缀的，可能还是这个没配置对？但是postcss官网对于autoprefixer的配置跟nuxt上配置位置不太一样。

后升级webpack发现其他问题，回退之后重新安装以来，然后报vue（2.6.14）版本跟vue-template-compiler（2.7.10）版本不一致的错误（不知道之前运行为啥一直没报错）然后在style标签里面import url(./test.scss)的方式引入样式文件就会一直报Can't resolve './test.scss' ,然后重新运行，神奇地发现没问题了，import导入scss文件没问题了，所以把loaders.cssModules配置删掉了。

These dependencies were not found: * child_process in ./node_modules/shelljs/src/exec.js * fs in ./node_modules/fs.realpath/index.js, ./node_modules/glob/common.js

在第一个页面点击输入框时触发输入框聚焦事件，这时候系统认为用户已经进行过点击行为并且已经触发过输入框的聚焦事件了，项目中第一个页面输入框为disabled，所以需要加一个额外的屏幕给一个屏幕不可见的输入框（不要用v-if跟v-show，而是用定位或者透明之类的样式使其在屏幕中不可见），在disabled输入框点击时触发这个不可见的输入框的聚焦事件，然后使用vue路由跳转第二个页面，在第二个页面中的mounted里面加$nexttick触发输入框的focus事件

js连续调用函数

前端时间做了个需求，是关于监听用户点击实体返回键出现挽留弹窗的需求做过混合开发的都知道，要在自己的app内监听返回事件是很简单的，但是在浏览器中呢，我们知道用onbeforeunload也可以监听用户刷新或者关闭页面，但是这种方式弹出的对话框是浏览器默认的，不能更改样式 先说下，我们的工程是基于vue进行的开发，所以这里有种方法就是在当前页面的mounted生命周期中加入一个this.$router.push('?dialog=true')方法，我们知道，此时对于浏览器...

最近在跑面试，最近遇到过好几次同样的笔试题，其中一个就是这个：[1,1,1,3,3,4,4,4,4],在这样一组数组中找到里面出现最多的元素以及出现的次数一年前被面试到的时候是电话面试题，当时没有思想准备，想到的最直接的办法就是一个for循环把不同元素分不同数组存储，最后一个去比较他们的长度，这样的方法现在想来很蠢，也很费内存；最近又在面试过程中遇到了同样的笔试题，还有一个是直接让我敲代码的，我目前想到的比较简单一点的方法如下，当然，如果有更好的方法可以交流，本人现在来说是技术菜鸟const