实习开发日志经验总结（一）

前言

自己之前实习过程中遇到的问题以及相应的解决过程，我都有记录形成比较凌乱的实习日志。故想在整个实习日志的基础上，提炼一些技术知识点或者是解决问题的思路。考虑到实习项目的不方便公开性，所以会隐去相关的业务信息。内容比较杂，但是想记录下方便以后回顾，也希望对大家有帮助。每期整理十条，这是第一期。

实习日志经验总结

1、login页面如何设置不受app.vue中导航栏样式的影响？

导航栏作为系统的通用组件，我并不想让其显示在登陆页面中，因此可以按照以下方法实现
（1）将通用组件如导航栏等和放在一起

app.vue
<div>
    <navigation v-if="!$route.meta.showNav"></navigation>
     <router-view />
</div>

（2）其中route.meta.showNav是我加入路由中的信息

   path: '/',
   component: () => import('../pages/index.vue')
 },
 {
   path: '/login',
   name: 'login',
   component: () => import('../components/login.vue'),
   meta:{
     showNav: true
   }
 },
 {
   path: '/receive',
   name: 'receive',
   component: () => import('../pages/receive.vue')
 }

可以看到在登陆的路由中加入了一个meta属性，由于其他组件未定义此showNav时，$route.meta.showNav的值为"undefined"即为false,因此只需在登陆中加入此属性并设置为true即可。这样在登陆页面时，导航栏不被显示。
个人感觉在很多业务场景实现中，巧用各种路由的信息能省事很多！

2、前后端传输参数的时候url编码的问题，当传输的参数是中文的时候，可能需要先编码在解码
一个可行的实际例子如下：

前端：（注意不能在axios请求里面去写），需要写在外面。前端vue用的是
let str=encodeURLComponent(“某某某”)；
后端接受解码则是
String xxx=URLDecoder.decode((String)jsonObject.get(“xxx”),”UTF-8”);

3、Element UI下拉列表el-option中的key、value、label含义

• key：相当于身份令牌，唯一的令牌，防止出错。这个key没有也行，但是保险起见最好加上。因为这个key作为 value 唯一标识的键名，绑定值为对象类型时必填。
• label ：这是给用户看的，当点击下拉菜单时，会出来选项，用户看到的选项就是这个
• value ：这是你点击某个label(option)之后，将对应的值给v-model绑定的值model

4、如果项目中引用了第三方jar包，则项目中运行时环境的jar包版本则是不低于第三方jar包的版本

5、微服务框架项目中可以不用一个个启动，可以通过配置一键启动。

6、按快捷键Ctrl+Alt+L键即可快速对代码进行格式化。

对jS文件和sql文件管用。

两种js文件：一种容易看懂，一种非常排版很乱，两个图标都不一样，但是其实本质都是一样的，格式化排版后就是一样的了，图标也会变化。

7、xxx.js和xxx.min.js是啥关系

xxx.js 和 xxx.min.js 是同一个 JavaScript 文件的两个不同版本，通常用于生产环境和开发环境之间的区分。它们之间的关系如下：

xxx.js：这是 JavaScript 文件的源代码版本，通常包含可读性更高的源代码，包括注释和格式化的代码。这个文件版本通常用于开发和调试，因为它易于阅读和理解。

xxx.min.js：这是 JavaScript 文件的压缩版本，通常通过删除注释、缩减空白和压缩变量名等方式来减小文件大小。这个文件版本通常用于生产环境，因为它的文件大小更小，可以加快页面加载速度，减少带宽消耗。

通常，开发过程中会使用 xxx.js 版本，以方便调试和开发，因为它的代码易于阅读和理解。而在部署到生产环境时，为了提高性能和减小文件大小，会使用 xxx.min.js 版本，以减少加载时间和资源消耗。

这两个版本通常都是从相同的源代码生成的，只是在构建过程中应用了不同的处理步骤，以满足不同环境的需求。通常，压缩工具（如UglifyJS、Terser等）用于生成 .min.js 版本。

8、不定参数的用法
在一些业务场景中，我们可能需要向js函数传参一个或多个参数（不定），这个时候可以用函数参数中的不定参数实现，然后再函数内部进行业务处理。
一个可能的实现如下：

function checkX(...args){
	for(const arg of args){
		if(arg=="target"){
		return true;
		}
	}
	return false;
}

9、src=“sources/js/mainframe.dl.js?t=20211114”>

在一些年龄比较大的项目，可能会出现上述这种js的用法。其中.sl用于扩展表示该js的功能，后面的t则是时间戳，确保浏览器每次请求文件时都会获取到最新的版本，这样的时间戳通常由构建工具或部署脚本自动生成，并且可以在每次发布新版本时更新，以确保浏览器能够获取到最新的文件。

10、退出登录的时候一定要sessiongstore去掉