全栈工程师：一个功能的完整生命周期

不知不觉自己慢慢成了一个全栈工程师，也独立的负责了一整个业务功能的开发。从数据库，业务接口，前端，部署，数据报表等都是由自己一个人独立完成。分别对应功能开发的不同技术。我们首先从数据库设计开始。

1. 数据库

1.1. 数据库创建

以mysql为例，需要注意一下字符编码集（utf8mb4）,主键必须要有。我们按照自己的需求编写对应的数据结构即可。

1.2. 代码生成

可以自动生成好代码，非常方便快捷。省去了写mapper，xml，entity，service。只需要编写controller就可以了。

2. 业务代码编写

2.1. service代码编写

框架使用现在比较常用的mybatisPlus即可。采用lambda调用。

一个是列表，一个是更新接口。

2.2. controller编写

将service的数据吐到前端即可。

2.3. 配置注意点

2.3.1. mybatis配置

• 需要在bootstrap.yml文件中配置对应的实体类解析，配置文件路径。

• mybatis中的mapper接口扫描，将mapper接口加载到spring容器中

在有Configuration注解类上进行标记即可。

3. 前端

以一个前端VUE项目为例，我们只需要关注这三个模块即可。可以解决我们90%的业务功能。

3.1. 数据类

api.js记录所有的请求地址

system.js(自定义) 编写我们所有的GET，POST请求。底层使用axios来进行调用

3.2. 页面

可以copy一个常用的页面，然后进行更改。permissionPage.vue中

templete中编写我们的页面布局。script中编写我们的方法

3.2.1. 点击事件

使用@符号关联下面method中的方法。

3.2.2. 属性绑定

:符号关联下面的data数据中的对象，实现双向绑定。

3.2.3. 初始调用

我们可以把需要初始调用的放到mounted中。

3.2.4. 其他

其他组件调用方法，可以直接参照对应的网址上的demo即可。写的非常详细。vue组件页面

3.3. 报表

报表有一点特殊，使用的阿里的G2引擎。G2图表，项目中使用的是viser,一个非常好用丰富的图表库。可以根据自己的业务需要进行绘制对应的数据即可。Viser图表。成品如下：

实现了折线图和饼图，接入也是非常快。按照官网的例子来即可。

4. 部署

基本东西做完后，就涉及到部署了，项目是前后端的项目，所以涉及到前后端的部署。前端部署采用nginx部署。后端有基本的java环境即可。

4.1. 后端部署

按照网上的教程，安装JDK8的环境。我们可以通过Alibaba Cloud Toolkit直接快捷的将我们的jar包编译打包到服务器上。

具体操作步骤，可以参照我的上一篇文章。这样就可以部署到服务器上后直接重新启动。

4.2. 前端部署

可以按照网上的教程，安装好nginx即可。常用的指令有

nginx -t   # 测试指令是否正常
nginx -s reload # 修改后，刷新配置
nginx -c conf/nginx.conf # 指定配置文件

4.2.1. 转发脚本

vue项目按照上面的配置即可。监控的端口是443，如果没有域名，证书的情况下，监控80端口即可。同样也可以采用Alibaba Cloud Toolkit将前端build好的dist文件直接打包到远程服务器上。

5. 总结

自己独立开发的过程中，肯定会遇到各种各样的问题，不要担心，细心去解决。在独立开发过程中需要不断丰富自己的技能数，根据业务场景，是否采用分布式存储，微服务，分布式事务，限流等等。