实战Vue简易项目（3）需求分析

CompileYouth 发布于2019-08-23 10:35 / 3536人阅读

摘要：页面布局页面整体布局分上中下上下部门导航栏，每个页面所共有页面的主体，随内容可滚动栏，页面可选，有的有，有的无可分离组件日期组件审批流组件列表组件可分离的工具库申请单类型事假病假年假对应数据类型应该为，需要一个转换为对应的方法申请单状

页面布局

App页面整体布局分上中下 || 上下部门；

NavigationBar -> 导航栏，每个页面所共有；

MainContext -> 页面的主体，随内容可滚动；

TabBar -> Tab栏，页面可选，有的有，有的无；

可分离组件

日期组件；

审批流组件：

列表组件；

可分离的工具库

申请单类型： ‘事假’、‘病假’、‘年假’；

对应数据类型应该为Number，需要一个转换为对应icon的方法；

申请单状态： ‘审批中’、‘已拒绝’、‘执行中’、‘已结束’；

对应数据类型应该为Number，需要一个转换为对应icon的方法；

审批状态：‘未到达’、‘待处理’、‘已拒绝’、‘已同意’；

对应数据类型应该为Number，需要一个转换为提示文字的方法；

日期时间字段

可能需要时间格式化工具库；

项目文件结构

~~以下是项目资源src/下的预期文件结构，可以先不看，后续一步步填充，甚至可能修改：~~

Views

Layout

只需加载一次的视图主结构；

业务文件夹

index.vue

others

Components

公用的才提取出来；

styles

全局样式文件

公用样式文件

router

路由配置文件

store

状态管理文件

assets

图片、字体等资源文件

utils

公用的工具；

constants

常量配置文件

~~mixins~~

通用继承组件

接下来聊点具体的业务：

角色

当前项目中，有两类人：

申请人

申请人对应着“我的申请”、“详情页”、“新建申请”三个视图；

“我的申请”分为“审批中”、“已完成”；

“审批中”的列表数据；

“已完成”的列表数据；

“详情页”有两种情况：

“审批中”的申请单，无操作性；

“执行中”的申请单，可以“结束”申请单；

“新建申请”：

收集申请单必要字段；

有“提交”操作；

审批人

审批人对应着“我的审批”、“详情页”两个视图；

“我的审批”分为“待处理”、“已完成”；

“待处理”的列表数据；

“已完成”的列表数据；

“详情页”有两种情况：

“待处理”的申请单，可以“同意”、“拒绝”申请单；

“已完成”的申请单，无操作性；

表单数据 “新建申请”表单数据； “详情页”（审批）意见； 章节回顾

该如何划分视图Views，为什么这样划分

该如何提取组件，为什么这样提取

该如何分离工具，为什么这样分离

思考

接下来如何实现Views呢？

GPU云服务器云服务器项目实战 python实战项目 python项目实战 php项目实战

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96495.html

实战Vue简易项目（1）初始化环境配置

摘要：目前，我们还没有创建项目，进入预期项目目录的上一级文件目录下即可。使用脚手架初始化项目最后一个为项目名称，可以自定义其它名称。本章以下命令都是在cmd命令行中进行的。安装命令行 npm i -g vue-cli 安装完成后，输入vue -V返回版本号，即安装成功；初始化项目切换到项目目录下项目目录，即项目所在目录。目前，我们还没有创建项目，进入预期项目目录的上一级文件目...

mindwind 2019-08-23 10:30 评论0 收藏0
实战Vue简易项目（5）模拟数据

摘要：若需要传参，传第二个参数不接受多个参数的传入，最多只接收两个参数请求数据目前，通过以上步骤，我们独立的构建了模拟数据和状态管理，但还没有将它们结合起来。验证如果你想验证写出来的模拟数据是否正确，可以在示例页打开控制台，直接运行。关于模拟数据，这里使用Mock.js这个库，关于用法，官网说的也比较详细，这里我就简单的带一下。列表数据我们先将项目中src/components/Hel...

Magicer 2019-08-23 10:43 评论0 收藏0
前端经典文章

摘要：上周末看这篇文章时，偶有灵光，所以，分享出来给大家一起看看前端面试四月二十家前端面试题分享请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。前端切图神器 avocode 有了这个神器，切图再也腰不酸，腿不疼了。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，...

lowett 2019-08-22 13:58 评论0 收藏0
实战Vue简易项目（2）定制开发环境

摘要：至于，为什么跟踪文件因为这个功能是开发环境下独有的，要修改开发环境吖，必然找开发环境的配置文件进行跟踪。测试可行性重启项目后，在浏览器中输入是你本地，可通过查看能够访问，就说明局域网内的其他端可以访问。然而，这样并没有结束。本章内容包含上一章思考的解决，还有一些其它的定制... CSS预处理关于对.vue文件模块处理规则的配置依次可在build/webpack.base.conf....

woshicixide 2019-08-23 10:33 评论0 收藏0
实战Vue简易项目（4）定义视图

摘要：是中的条件指令，根据返回的布尔值动态添加或移除元素。传值方式我是标题需要在中定义函数传的值为字符串，不需要前缀传的值为非字符串数字布尔值函数数组对象，为前缀，值为表达式计算结果在程序中，如引用的值。为该组件内，元素绑定的事件处理函数。视图包含内容#NavigationBar、#TabBar、#MainContext；为什么#NavigationBar、#TabBar分在Layou...

LeoHsiun 2019-08-23 10:40 评论0 收藏0