以后端的思维优化VUE前端开发

引言

后端可以靠各种框架和技术整合好CRUD的逻辑，甚至让业务开发仅集中在数据库设计上。相比而言，作为一个前端技术，除了靠奋不顾身的加班以外，还是有不少的方法可以让你活得更轻松一点，这需要跳出前端的圈子，向后端的思维来学习。并且，没有哪个技术能够让你速度一下飞跃，只能通过不断的改进一点一滴的积累出来。

向spring学习

Spring有个神奇的功能，叫package scan，它可以让你在建立服务代码的同时，自动配置好对应的容器设置

前面我写过一篇【使用webpack的动态模块功能实现类似包扫描来简化配置】，阅读量很少。在后端，使用过spring的同学其实能很容易理解这种特性，它能让我们不用关心路由及各种配置，保证每个模块的配置和逻辑集中化。

使用它的好处，能让你忘记VUE还有个route配置这么个活，一切以约定为基础。新建一个路由管理下的页面只需要3步：

STEP 1

编写你的页面，例如Home.vue

STEP 2

将Home.vue放入你的逻辑页面目录下，记得要建立子目录，一般推荐扫描到二级目录，因为业务复杂情况下一定要按业务分目录的。所以，我把Home.vue放入pages/home目录

STEP 3

重启webpack（因为包扫描是依赖webpack的机制），此时在路由配置里就自动生成了一条以你文件名小写字符为name的路由（当然你也可以定义你自己的规则，例如用下划线+大写的模式），然后在你页面里就可以愉快的直接调用了：

router.push({name:'homeView', params:params});

状态变量

对于业务开发，会有不少变量会处于几个有限的不同状态里。典型的例如性别，分别为男、女和保密。Java后端最合适的就是枚举类型了，在整个编码过程中，定义统一的语义性质的枚举量，例如：

/**
 * 性别
 * @author 12755
 *
 */
public enum SexCodeEnum implements ICodeEnum{

    /**
     * 男士
     */
	MAN,
	/**
	 * 女士
	 */
	WOMAN,
	/**
	 * 保密、两者都使用（礼品用）
	 */
	SECRECY;

	
	public static SexCodeEnum fromCode(String code) {
		try {
			return values()[Integer.parseInt(code)];
		} catch (Exception e) {
			return null;
		}
	}

	@Override
	public String toCode() {
		return Integer.toString(this.ordinal());
	}

	@Override
	public List<ICodeEnum> valueList() {
		List<ICodeEnum> result = new ArrayList<ICodeEnum>();
		for(SexCodeEnum value: values()){
			result.add(value);
		}
		return result;
	}
}

这样在后端，在逻辑代码判断时使用Enum语义明确了，而前端呢？还要停留在"0"和"1"的“魔鬼数字”年代吗，同样的道理，为了重构，我们也可以考虑把后台的Enum“导入”到前台，我们可以写一个后台TestCase，通过模板技术，生成对应的js，甚至自动提交到前端的项目。这样一来，前端便有了方便使用的状态定义文档CodeEnum.js，类似这样：

/**
  使用模板生成的代码表
  用法：
  import CodeEnum from codeEnum.js;
  然后直接使用Enum例如 CodeEnum.UserStatCodeEnum.NORMAL;
  generate at 2019-12-5 8:52:21
*/

const CodeEnum = {
	AccountTypeCodeEnum: {
	CREDITS: '0',
	PRE_DEPOSIT: '1',
	},
	SexCodeEnum: {
	MAN: '0',
	WOMAN: '1',
	SECRECY: '2',
	},
}

CodeEnum.enumToText = ((enumValue, enumClass, enumTexts) =>{
    const enumTextsArray = enumTexts.split(',');
    let result = '';

    const EnumObj = CodeEnum[enumClass];
    if(EnumObj !== undefined){
        Object.keys(EnumObj).forEach((key) => {
            if(EnumObj[key] === enumValue){
                result = enumTextsArray[parseInt(EnumObj[key])];
            }
        });
	}
    return result;
});

export default CodeEnum;

当然还配上一个状态转换的工具方法，省去了前端同学写switch或if的烦恼（基于顺序对应的规则）。

 

除了这些，我还做了例如srping的RequestMapping定义导出的工具等，这样一点点自动化的积累，让前端的开发效率一点点的提升起来。而且，让维护更加高效，再也不怕命名重构。

 

工具篇

只会写代码的程序员只能叫码农

当技术达到一定的高度时，能够为业务再次提升的能力就会逐渐变少，那么我们不如跳出技术本身，来改善业务周边的工具平台，同样来为业务服务。作为一名架构师，要有这种能力。 

这里就要提一下java后端业界用的比较多的工具swagger，它可以生成你需要提交的业务数据结构。这样一来，你在页面需要绑定的数据结构就可以直接复制下来了，省心而且不会出错，当然要删除一些不关心的变量（例如里面有个乐观锁变量），但是至少做删除会比添加复制会省心许多。