业工作的需求：写接口

接口第一个含义是：写http请求 或者其他如webservice ,hessian这些

接口第二个含义：写的就是个java的interface接口

基于serverlet请求一般对应响应 request 对应响应 response； 返回的参数最终都是string的形式返回，一般都喜欢用比如fastJSON Gson这样的toString一下返回；默认是使用jackson的序列化操作的；其他的如protobufuff? xml这样的，遇到xml这样的返回也无需担心，实在不会了直接用StringBuilder这样的类进行append拼接，另外一种方式就是模板化格式返回或者一些工具类转换

通常操作都是增删改查 外加导入导出和统计;多一点就是写个byXX

addXXX

updateXXX

deleteXXX

searchXXList

importXXX

exportXXX

countXXX

注意：请求参数不要带一些特殊的东西，如delete update等等特殊的，框架中可能会影藏一些过滤的来过滤这些特殊字符；如果方法命名不允许这样的，可以改成其他方式的命名，但大体是符合项目要求（符合当前项目规定的）

那写接口需要注意哪些，http的"接口"，即请求url,尽量使用post请求，见名知意(项目规范来，有些不一定是按这个来的)下面实例一个

一个是写在controller返回的，一个是写在方法上的，一般都是@RequestMapping 有些指定方法的如：@PostMapping 需要看具体工程规范一般两个都可以用

value值，避免重复

SpringMVC中：这个地方是被处理器映射器解析

需要try catch 么 看项目，有些做了全局异常解析器统一返回异常，有些则是项目中的，如返回一个构造对象

interface接口

/**
 * 校验服务
 */
public interface ICheckService {
    boolean checkParam(CheckConfig checkConfig, Map<String,String> map);
}

方法命名规范，可以看前面中关于方法的介绍 ：此处略提： 返回值 方法名（动词开头，代表行动） 参数列表（有些地方使用map会更通用一些（个人习惯），另外就是对象充分使用，java语言本身就是个对象语言）

接口尽量遵循一些原则，比较多书籍写到的

开闭原则：对扩展开放，对修改关闭

依赖倒置：抽象不应依赖细节，细节依赖抽象

单一职责：接口功能职责明确，不写一个接口对个职责，不利于维护即做什么比较单一

接口隔离：用多个专门的接口，而不是单一的接口 （主要有多实现这个implements）,写小的接口不写大的（大的指方法贼多的接口）

迪米特：最少知道原则

里氏替换：一句话，多态运用，其他写的比这里多

合成复用：主要将的是尽量组合，达到内聚 常用Autowired Resource注解作用理解就是这个

一句话总结：就是尽量写的简单的，小的接口 这样避免工作踩坑；可能有时你的确无法避免这样大的接口，那可能都是写古董代码

万不得已不要轻易改别人的接口，因为没出问题好，出问题就是你背锅，搞不好造成重大生产问题被开除（见过别人干过这样的事情）

其他的需要考虑的可能会涉及设计模式，此处不再引申，如果要实战的话，建议可以看看《研磨设计模式》，或者多看看spring的源码设计以及常用的工具类中的一些写法，这样对于写代码的提升会是比较快的

w3cschool，菜鸟教程等等都有这些讲解

https://www.w3cschool.cn/shejimoshi/flyweight-pattern.html

好了，即将踏入工作的你异或是已经工作的你，将逐步领悟

题背景

网站更新后，解决了某些bug，但是用户未刷新网页，还在浏览网站更新前内容……

然后用户说：“bug根本没解决啊！”

我说：“你刷新下页面啊”

用户说：“嗯，好了”

那么，有没有一种方式，可以直接通知用户网站有更新，提示用户主动刷新页面呢？

有！当然有

说明

本项目以vue2举例，其他的Vue3、React等，请自行实现。

假设你基于git提交代码，以下从git的commit head中获取唯一值

（注：或者其他可行方式替代，自行实现）

解决方案 - 纯前端检测

还有其他解决方案，如：从服务器获取版本号，轮询查询等。

但上述都有性能问题、或需要服务端配合、或需要添加一些配置项，显得麻烦，读者可自行选择

1.生成唯一标识

在vue打包的时候，编写一个脚本，存储提交的commit head作为hash值，也就是唯一标识。

在vue.config.js的同级，新建一个release.js文件：

const execSync=require('child_process').execSync;
const fs=require('fs');
const path=require('path');

const dirName=path.dirname(__filename);

// 执行git命令，获取当前HEAD指针所指向的提交的完整哈希值
const gitHead=execSync('git rev-parse HEAD', {
  cwd: path.resolve(dirName, './')
}).toString().trim()
// 只取前十个数字或字母
const hash=gitHead.substring(0, 10);

// 版本号：时间戳+git的hash值
const version=Date.now() + '_' + hash;

// .env.production文件路径
const envFile=path.join(dirName, './.env.production');

// 读取目标文件，并通过正则判断.env.production文件中是否有VITE_APP_VERSION开头的环境变量
try {
  const data=fs.readFileSync(envFile, {
    encoding: 'utf-8',
  });
  const reg=/VUE_APP_VERSION=\d+_[\w-_+:]{7,14}/g;
  const releaseStr=`VUE_APP_VERSION=${version}`;
  let newData='';
  if (reg.test(data)) {
    newData=data.replace(reg, releaseStr);
    fs.writeFileSync(envFile, newData);
  } else {
    newData=`${data}\n${releaseStr}`;
    fs.writeFileSync(envFile, newData);
  }
  console.log(`插入release版本信息到 env.production 完成，版本号：${version}`);
} catch (e) {
  console.error(e);
}

上述代码，把提交的git commit head值取前10位数，再加上时间戳组成hash值。

并且把该值写入.env.production文件，变量名为VUE_APP_VERSION

2.hash对比

用户登录的时候，把版本号的hash值本地存储

import Cookies from "js-cookie";
Cookies.set('app_version', process.env.VUE_APP_VERSION)

然后在路由守卫中，比较缓存值app_version、与当前获取的process.env.VUE_APP_VERSION值是否相等

• 相等：说明没更新，
• 不相等：则说明网站更新了，因为网站发布后会重新生成一个VUE_APP_VERSION值，那么这时候就要提示用户更新了

路由守卫permisssion.js的关键代码如下

import Cookies from "js-cookie";
import { Message, MessageBox } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'

// 是否首次进入网页，首次不校验刷新
let isFirstEntry=true;

// 检测网站更新
function checkUpdate() {
  // 系统的版本号
  const system_app_version=process.env.VUE_APP_VERSION
  // 浏览器的版本号
  const web_app_version=Cookies.get('app_version')
  if(isFirstEntry) {
    isFirstEntry=false
  } else {
    // 如果不存在系统的版本号，则设置系统版本号，第一次不提示刷新，否则换个浏览器又提示了
    if(!web_app_version) {
      Cookies.set('app_version', system_app_version)
    } else {
      // 如果浏览器的版本号不等于系统的版本号，则重设浏览器的版本号，并提示刷新
      if (system_app_version !==web_app_version) {
        console.log('版本号不一致')
        refreshTip(system_app_version)
      }
    }
  }
}

// 刷新提示
function refreshTip(system_app_version) {
  MessageBox.confirm('当前网站内容有更新，是否刷新页面？', '提示', {
    confirmButtonText: '立即刷新',
    cancelButtonText: '忽略',
    type: 'warning'
  }).then(()=> {
    Cookies.set('app_version', system_app_version)
    window.location.reload()
  }).catch(()=> {
    console.log('取消了')
    Cookies.set('app_version', system_app_version)
  })
}

router.beforeEach((to, from, next)=> {
  NProgress.start()
  if (getToken()) {
	to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path==='/login') {
      next({ path: '/' })
      NProgress.done()
    } else { 
      // 只在生产环境检测是否有版本更新
	  if(process.env.NODE_ENV==='production') {
        checkUpdate()
      }
	}
}

上述方法是在在用户切换菜单时，监听路由变化来检测是否更新，这是比较常用的方法。

此外，有的人会轮询检测是否有更新，这样会损耗性能且不优雅。

请读者自行选择触发的时机。

最后

最后，在打包时，修改一下打包命令，执行release.js并打包

修改package.json文件：

'scripts': {
	"build:prod": "node ./release.js && vue-cli-service build",
}

恭喜你，大功告成了！

关于作者

作者在CSDN社区叫：“前端没钱”

CSDN主页地址：https://blog.csdn.net/yan1915766026

作者是前端开发人员，会经常发布一些好用的工具、方法，并且持续更新《若依nodejs全栈教程》希望帮助更多的前端开发人员。

感谢关注！