好久不见呀, 这两年写了很多很多东西, 也学到很多很多东西, 没有时常分享是因为大多都是我独自思考. 明年我想出去与更多的大神交流, 再修筑自己构建的内容.
有时候我会想: 我们遇到的问题, 碰到的界限, 是别人给的还是我们自己给的? 其实我觉得自己选择的方向是对的, 但是有时难免会怀疑, 是否有人和我在做一样的事情, 我希望找到有趣的伙伴, 做一些有趣的事情.
又将年终了, 该做年终总结了呀.. 最近花了一些时间, 升级了一下我们的技术架构, 使用 vue 作为我们的框架. 延续传统, 我们仍然需要开发一些 java , 所以将 vue 项目集成进了 springboo, 实现了一些便利的如协作开发前后端, 命令编译, 简洁的打包部署, router 和 axios 交互问题. 写了一个项目示例, 有兴趣的可以了解 (欢迎 start 呀!): Vue + SpringBoot 项目示例 https://github.com/ch-zgh-1993/vue-springBoot .
引子: 最近写了一个项目, 设计了一些基础组件. 在开发过程中, 也发现了一些最初没有想到的, 但可以作为基础组件使用的内容. 而数据流刚好就是其中一个. 因为很早之前写过一个, 只不过那个是原生的, 这个使用了 vue 和 elementUI, SCSS.
重要提示
1. 技术的提升, 并没有意味着 UI 的提升, 所以我很抱歉, 比起之前没有更好看. 所以你们使用要先找 UI 优化样式. 又一次叹息, UI 的重要性. 没有一个好的 UI 伙伴, 在只关注美的人看来, 一身武功, 自降 7 分. 以后要结识一个呀!
2. 因为之前写过, 所以兴致来了就又写了一下基于 vue 的实现.
功能
1. 样式增加了主题设置, 目前只有日志和报警, 可以扩展主题 (比较简单就可以实现扩展).
2. 增加了日志分类, 如时间, 级别, 概要 (比较简单可以扩展为你所需要的).
代码才是最重要的吧
- <template>
- <div>
- <div :id="theme" class="stream-wrapper">
- <el-table
- :data="table.data"
- stripe
- show-summary
- sum-text="统计"
- :summary-method="getSummaries"
- height="100%"
- style="width: 100%; max-height: 100%">
- <el-table-column
- v-for="item in layout"
- :prop="item.key"
- :label="item.value"
- :key="item.key"
- ></el-table-column>
- </el-table>
- </div>
- <!-- 测试按钮 -->
- <div>
- <el-row>
- <el-button type="primary" @click="addOne"> 增加一条 </el-button>
- </el-row>
- </div>
- </div>
- </template>
- <script>
- // 数据流组件: 开发过程中增加的组件, 作为数据流展示的基础组件
- // 内容:
- // 展示数据流
- //
- // 类型:
- // 我使用的类型共有 2 中, log, warn . 可以根据需要增加, 只需要改变样式即可.
- //
- // props:
- // theme, maxLength, layout, info,
- //
- /// TODO: 同样需要 UI 进行设计呀...
- import 'element-ui/lib/theme-chalk/base.css';
- // 测试数据
- const baseData = '《为你我受冷风吹》, 为你我受冷风吹 寂寞时候流眼泪, 有人问我是与非 说是与非, 可是谁又真的关心谁, 若是爱已不可为, 明白说吧 无所谓, 不必给我安慰 何必怕我伤悲, 就当我从此收起真情 谁也不给, 我会试着放下往事, 管他过去有多美, 也会试着不去想起, 你如何用爱将我包围, 那深情的滋味, 但愿我会就此放下往事, 忘了过去有多美, 不盼缘尽仍留慈悲, 虽然我曾经这样以为, 我真的这样以为';
- const data = baseData.split(',');
- // 支持主题, 可扩展
- const themes = ['log', 'warn'];
- export default {
- props: {
- // 主题
- theme: {
- default: 'log',
- validate(val) {
- return themes.indexOf(val)> -1;
- }
- },
- // 保留最大长度
- maxLength: {
- default: 100,
- type: Number,
- validate(val) {
- return val> 0;
- }
- },
- // 每条日志的分类, 以及表格布局.
- layout: {
- default(){
- return [{
- key: 'date',
- value: '日期',
- width: '40',
- }, {
- key: 'level',
- value: '级别',
- width: '10',
- }, {
- key: 'main',
- value: '主要内容',
- width: '50',
- }, {
- key: 'info',
- value: '详细信息',
- width: '100',
- }];
- },
- type: Array,
- validate(val) {
- val.every((val) => {
- return val.hasOwnProperty('key')
- && val.hasOwnProperty('value')
- && val.hasOwnProperty('width');
- });
- },
- },
- // 统计信息说明词语
- info: {
- default(){
- return {
- contentSpan: '日志',
- };
- },
- validate(val) {
- return themes.indexOf(val.contentSpan)> -1;
- },
- },
- },
- name: 'DataStream',
- data() {
- return {
- table: {
- data: [],
- },
- };
- },
- methods: {
- // 增加一条信息
- addOne(){
- const vm = this;
- let index = vm.table.data.length;
- if(index === data.length) return;
- if(vm.table.data.length === vm.maxLength){
- vm.table.data.length.pop();
- }
- vm.table.data.unshift({
- date: new Date().toLocaleString(),
- level: ['Info', 'Warn', 'Error'][Math.floor(Math.random()*3)],
- main: '我是提要',
- info: data[index],
- });
- },
- // 日志统计信息
- getSummaries(param) {
- return ['统计:', ` 目前共有 ${param.data.length} 条 ${this.info.contentSpan} 信息 `];
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .stream-wrapper {
- margin: 10px 1%;
- padding: 2px;
- width: 98%;
- height: 500px;
- border: 1px solid #000000;
- border-radius: 4px;
- }
- // 日志 主题样式
- #log {
- background: #dbf4fc;
- color: #000;
- & /deep/ td {
- background: #fff;
- }
- & /deep/ th, & /deep/ .el-table__footer-wrapper td {
- background: #d4ece2;
- color: #2a2ad2;
- }
- }
- // 报警 主题样式
- #warn {
- background: #e60909;
- color: #e60909;
- & /deep/ td {
- background: #a99f9f;
- color: #e60909;
- }
- & /deep/ th, & /deep/ .el-table__footer-wrapper td{
- background: #eae2d1;
- color: #0d483f;
- }
- }
- </style>
示例 (是不是很丑...)
好了, 我这个前端没什么美感... 坚守基础的航线, 坚持自己的方向, 不想撤退.
来源: https://www.cnblogs.com/zgh-blog/p/data_stream2.html