项目职责：人过留影 项目介绍: queryἀۨ疀 主要是为公安内部提供可视数据，方便对人员实时监控管理，以及对犯罪人员进行信息采集 责任描述: 1. 使用Vue搭建底层框架，搭配Vuex合理管理数据状态， 以及使用Element UI进行页面的快速搭建 2. 对axios进行二次封装，对响应数据进行拦截，根据接口文档mock数据； 3. 根据需求，对结构样式相同的模块进行拆分，将公共部分提取封装成组件，通过传参，根据参数的不同渲染不同内容，已达到组件的复用； 4. 主要负责首页模块、登录模块 （a）首页模块: 1）UI层: 使用的是antd中的Table表格布局以及tab切换； 2）页码及每页总条数，筛选条件作为参数传给后台实现每页数据的更新； 3）router: 使用watch侦听器设置immediate: true解决刷新页面title与页面不符的原因； 首页跳转详情页，通过vue-router，动态路由传参，根据id点击，渲染不同的数据页面； 4) 数据请求: 使用Axios请求数据，根据请求数据返回的参数，对Axios进行二次封装； 使用interceptors拦截器，使用message进行全局提示 5）使用echarts可视化工具完成柱形图/折线图/饼图的可视化并封装组件,减少开发时间。 (b) 登录模块: 1) 不同用户的登录，通过后台返回的数据列表实现不同用户权限划分并进行渲染； 2) 将表单进行封装，validator属性自定义对手机号、email、公司密码规范等进行校验，并配 合ressetFields完成关闭重置效果； 账号密码登录: 通过后台返回数据来判断用户登录的账号是否存在，账号不存在或密码账号不 正确时，则通过validateFields方法来进行自定义校验并输出结果； 手机号验证码登录: 通过正则来判断手机号是否为合法手机号； 手机号框为空或不合法时，则校验输出提醒消息； 手机号正确时，才可发送验证码； 通过setInterval定时器来实现一个获取验证码的倒计时效果； 验证码为后台返回的数据，输入的验证码内容同返回数据一致时，才可进行登录； 5）登录成功服务端会将JWT注入cookie内同时设置httpOnly防止通过web代码来获取和修改JWT； 4 8 B F ②洀Ĥ؀* "全局导航守卫router.beforeEach拦截路由，并判断用户权限，有权限则通过next(路由)跳转页面，并且根据用户权限来做出相对应的权限列表渲染； 项目二

项目职责：项目简介: 哈哈镜是一个休闲食品品牌，面向中高端用户，主营鸭系列、海鲜、寿司、泡菜、卤制品等品类的休闲食品。 责任描述: 搭配 vuex 合理管理数据状态及 Vant-Ui 构建ui层并通过lib-flexible 用于设置rem基准值解决适配问题； 主要负责的是首页和登录，商品，使用vue-router实现页面的切换。 首页模块 针对页面时加载首屏可见模块（Vue Lazy Component）进行（图片懒加载 vue-lazyload），其余不可见模块import()懒加载。提高首屏渲染速度，增加用户体验; table 切换: 对页面进行数据的更新与迭代(列表(复用组件)，当前选中的状态会存储到 vuex 的 state 中，点击会进行判断，避免重复请求)。 上拉页面: 使用scrollTop和windowHeight来判断,axios 请求渲染并使用destroyed销毁加载实现，防止多页面触发; 商品模块 首页部分内容,跳转到数据列表页(通过 vue-router,动态路由传参，携带内容 id)，根据点击内容不同渲染不同的数据列表； 每次点击筛选模块,把点击内容存放对象中,调用接口请求，后端匹配相 的数据， 返回数据渲染页面，实现筛选功能,下拉页面: 对页面进行数据的加载； 登录模块，点击获取本地存储的localstorage进行判断，如果为空，则跳转到登录页，点击登录按钮，会有一个全屏的黑色透明遮罩和loading图，防止用户频繁操作，登录成功将用户的id本地存储起来，同时返回首页。 附近的店面模块，调用的是腾讯地图接口，获取经纬度，通过请求本地server返回附近的店面位置。 项目三

项目职责：项目简介: 中国普洱茶网旗下商城 责任描述: 使用 JQuery插件实现网页动态效果 使用正则完成注册和登录的初步校验； 使用JQuery插件实现节点操作以及控制功能，如页面跳转数据显示等工作 用Ajax获取后台数据，完成页面数据的渲染。 解决各个浏览器的兼容问题，修复bug； 主要职责: 首页及首页的渲染 二级菜单通过transition控制显示隐藏 通过原生js实现轮播图 应用图片懒加载加快页面渲染速度 项目四

项目职责：项目介绍: 包含各类书籍作品供消费者选购 责任描述: 通过HTML+CSS实现页面布局，采用animate实现动画效果，采用sass进行编译 利用内置的@mixin实现样式复用； 利用axios进行数据请求，通过响应拦截完成token的添加处理，通过es6模板字符串 进行数据渲染，减少页面渲染开销； 利用JQ的animate属性实现导航栏底部动画的效果，hover属性完成鼠标划入样式切换 通过swiper插件实现banner，改变部分样式完成3d切换效果； 使用window.open打开窗口及location.href跳转; 实现产品UI和交互方面的开发需求，采用模块形式的开发，将功能进行合理的划分，大大降低代码之间的耦合性，以便于代码的维护；