最近包工头喊农民工小郑搬砖，小郑搬完砖后沉思片刻，决定写篇小作文分享下，作为一个初学者的全栈项目，去学习它的搭建，到落地，再到部署维护，是非常好的。
------题记
写在前面通过本文的学习，你可以学到
vue2、element ui、vue-element-admin在前端的使用
组件设计
echarts在前端中的使用
eggjs在后端node项目中的使用
docker一键化部署
需求分析 背景近些年，网络诈骗案频发，有假扮家里茶叶滞销的茶花女，有假扮和男朋友分手去山区支教的女教师，有告知你中了非常6+1的大奖主持人，有假扮越南那边过来结婚的妹子，各类案件层出不穷。作为公民，我们应该在社会主义新时代下积极学习组织上宣传反诈骗知识，提高防范意识。除此之外，对于种种诈骗案件，是网站的我们就应该封其网站，是电话的我们就应该封其电话，是银行的我们就该封其银行账号，是虚拟账号的我们就应该封其虚拟账号。我相信，在我们的不懈努力之下，我们的社会将会更和谐更美好！
需求长话短说，需求大致是这样子的：有管理员、市局接警员、县区局接警员、电话追查专员、网站追查专员、银行追查专员、虚拟账号专员这几类角色， 相关的角色可以进入相关的页面进行相关的操作，其中市局和管理员的警情录入是不需要审核，直接派单下去，而县区局的警情录入需要进行审核。当审核通过后，会进行相应的派单。各类追查员将结果反馈给该警单。系统管理员这边还可以进行人员、机构、警情类别，银行卡、数据统计、导出等功能。希望是越快越好，越简单越好，领导要看的。
部分效果如图：
这个项目不是很大，复杂度也不是很高，并发量也不会太大，毕竟是部署在public police network下的。所以我这边选用vue2，结合花裤衩大佬的vue-element-admin，前端这边就差不多了，后端这边用的是阿里开源的eggjs，因为它使用起来很方便。数据库用的是mysql。部署这边提供了两套方案，一套是传统的nginx、mysql、node、一个一个单独安装配置。另一种是docker部署的方式。
功能实现 前端 vue代码规范参见：https://www.yuque.com/ng46ql/tynary
vue工程目录结构参见：
vue组件设计与封装这里我选了几个有代表性的典型的组件来讲解，我们先来看一张图找找组件设计和封装的感觉。
通过观察我们发现，在后台管理界面中，蛮多的页面是长这样子的，我们不可能来一个页面我们就再写一次布局，这样人都要搞没掉。所以我们会有想法地把它封装成一个container.vue,它主要包含头部的标题和右边的新增按钮、中间的过滤面板以及下方的表格。
container.vue是一个布局组件，它主要是框定了你一个页面大致的布局， 在适当的位置，我们加入插槽slot去表示这块未知的区域，container.vue代码实现如下：
<template> <div> <el-row> <el-col :span="24"> <el-row> <el-col :span="12"> <div v-if="title" > {{ title }} </div> </el-col> <el-col :span="12" > <slot /> <el-col /> </el-col> </el-row> </el-col> <el-col :span="24"> <slot /> </el-col> </el-row> <div> <slot /> </div> </div> </template> <script> export default { name: 'CommonContainer', props: { title: { type: String, default: '' } } } </script> <style lang="scss" scoped> .top { padding: 15px; min-height: 100px; background-color: #fff; box-shadow: 0 3px 5px -3px rgba(0, 0, 0, 0.1); } .title-box { height: 100px; line-height: 100px; display: flex; justify-content: space-between; align-items: center; } .title { font-size: 30px; font-weight: 700; } .content { margin: 20px 5px 0; padding: 20px 10px; background: #fff; } .btn-group { text-align: right; padding: 0 10px; } </style>往下走，我们会想到怎么去设计表格这个组件，在设计这个组件的时候，我们需要清楚的知道，这个组件的输入以及输出是什么？比如说table-query.vue这个组件，从名字我们能够看出，它是有查询请求的，那么对于请求，很容易抽象出的一些东西是，请求地址，请求参数，请求方法等等，所以这边的props大致可以这么敲定。
props: { // 请求表格数据的url地址 url: { type: String, required: true }, // 默认分页数 pageSize: { type: Number, default: 10 }, // 是否展示序号 index: { type: Boolean, default: true }, // 表格的列的结构 columns: { type: Array, required: true }, orgId: { type: String, required: false, default: '' }, // 请求表格数据的方法 method: { type: String, default: 'post' }, // 请求表格数据的参数 params: { type: Object, default: () => ({}) }, // 是否支持高亮选中 isHighlightRow: { type: Boolean, default: false }, // 是否显示分页 isShowPagination: { type: Boolean, default: true }, // 是否显示迷你分页 isPaginationSizeSmall: { type: Boolean, default: false } },