6月项目总结--浅尝jsp（官网优化），移动端Echarts，mescroll试水，树形插件bootstrap-treeview

在此立一个flag，每月15日之前发布上一个月的项目总结，以此督促自己坚持

项目1，官网优化之JSP页面

1，先说说我自己对jsp页面的理解：

jsp：java sever page 也就是java服务器页面，也相当于我们服务端渲染的页面；
jsp构成：html + JSP脚本（java代码片段） + JSP标签
jsp语法：
<%…%>：Java语句；
<%=…%>：Java表达式；
<%!..%>：在类中添加方法或成员
…还有好多知识，都是我们后台告诉我的，这个项目中我也知识写一下html，渲染一下数据

2，再说说jsp页面的好处

前面说到了服务器页面渲染，也就奠定了用户通过域名请求到服务器之后直接返回的就是一个已经渲染好的html页面，没有什么异步请求之类的说法，所以重点就是：便于seo优化

项目2，改版（移动端）录入系统

1，改版rem计算方式（为了减少请求，此段代码直接放入htm的head中）

window.onresize = adjuestadjuest();function adjuest() {//-> 按照设计稿标准比例,在根据当前屏幕的尺寸,动态的计算出当前页面的REM比例,保证在不同屏幕的下的响应式开发var desW = 750;var winW = document.documentElement.clientWidth;document.documentElement.style.fontSize = winW / desW * 100 + 'px';};

2，百度Echarts 定制 https://echarts.baidu.com/download.html

// 这是一个柱状图例子，最近6个月的数据// 初始化图表插件// 进件统计参数var jjtjbarOption = {title: {subtext: '单位：件'},xAxis: {axisTick: {alignWithLabel: true},nameTextStyle: {color: "#485465"},data: ["1月", "2月", "3月", "4月", "5月", "6月"]},yAxis: {nameTextStyle: {color: "#485465"}},series: [{name: '进件量',type: 'bar',label: {show: true,},itemStyle: {color: "#FFA717"},data: [27, 80, 96, 100, 120, 200]}]};// document.getElementById('jjtjbarChart')必须得在初始化之前设置固定的宽高，不然会看不到图表展示var jjtjbarChart = echarts.init(document.getElementById('jjtjbarChart'));// 动态获取后台数据，设置到图表上doPost('/xxxxx/xxx/xxx', params, function (res) {if(res.code==0){// 进件统计var applyList = res.data.applyList || [];var jjtjxAxis = [];var jjseriesData = [];applyList.forEach(function (item) {jjtjxAxis.push(item.month + '月');jjseriesData.push(item.count);});jjtjbarOption.xAxis.data = jjtjxAxis; // 设置进件统计X轴刻度jjtjbarOption.series[0].data = jjseriesData; // 设置进件统计柱状图数据jjtjbarChart.setOption(jjtjbarOption); // 把数据设置到配置参数中，}})

最终效果图如下

3，下拉刷新插件更改（mescroll）http://www.mescroll.com/

4 ，树形控件（bootstrap-treeview） http://www.jq22.com/jquery-info10461

效果图

// 初始化树形结构数据var defaultData = [{text: '总经办',tags: ['业绩'],state: {expanded: false,},nodes: [{text: 'CEO',tags: ['业绩']},{text: '总裁',tags: ['业绩']},{text: '联合创始人',tags: ['业绩']}]},{text: '销售部',tags: ['业绩'],state: {expanded: false,},nodes: [{text: '何超（业务员） 18520126187',tags: ['业绩']},{text: '销售1部',tags: ['业绩'],nodes: [{text: '李育生（主管） 18520126187',tags: ['业绩']}]},{text: '销售2部',tags: ['业绩'],nodes: [{text: '李育生（主管） 18520126187',tags: ['业绩']},{text: '何超（业务员） 18520126187',tags: ['业绩']},{text: '钟小光（业务员） 18520126187',tags: ['业绩']}]}]},{text: '产品部',tags: ['业绩'],state: {expanded: false,},nodes: [{text: '李育生（主管） 18520126187',tags: ['业绩'],userId: '1',linkURL: './personYeji.html'},{text: '何超（业务员） 18520126187',tags: ['业绩'],userId: '36',linkURL: './personYeji.html'},{text: '钟小光（业务员） 18520126187',tags: ['业绩'],userId: '34',linkURL: './personYeji.html'}]}];//  dom元素 <div id="tree"></div>//  定制treeview的默认外观和行为$('#tree').treeview({expandIcon: 'glyphicon glyphicon-plus-sign', // 展开时节点图标collapseIcon: 'glyphicon glyphicon-minus-sign', // 收缩是节点图标// enableLinks: true,// showBorder:false,highlightSelected: false, // 选择节点时是否高亮showTags: true,  // 是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出。data: data  // 列表树上显示的数据。});// 本节难点
// 动态获取数据，填充树形结构doPost('xxx/xxx/xxxx',params,function(res){if(res.code==0){var data =res.data;for (var i = 0; i < data.length; i++) {// 清洗数据data[i] = setData(data[i]);data[i].list=null;  //把不需要的list清空data[i].userList=null; //把不需要的userList清空}}})// 递归调用 按照数据结构进行数据打磨function setData(dept) {dept.text = dept.name;dept.tags = ['业绩'];dept.state = {expanded: false,};dept.linkURL = './departMentYeji.html'dept.nodes = [];if (dept.list && dept.list.length > 0) {for (var i = 0; i < dept.list.length; i++) {var d = setData(dept.list[i]);dept.nodes.push(d);}dept.list =null // 清空掉不需要的数据}if (dept.userList && dept.userList.length > 0) {for (var i = 0; i < dept.userList.length; i++) {var user = dept.userList[i];user.tags = ['业绩'];user.linkURL = './personYeji.html';if (user.isMaster) {user.text = user.userName + "（主管）" + user.mobile;} else {user.text = user.userName + "（业务员）" + user.mobile;}dept.nodes.push(user);}dept.userList = null // 清空不需要的用户的列表数据}if (!dept.nodes) {dept.nodes = null;}return dept;};

每一个list相当于一个部门，部门下面由两重要部分组成。一部分可能还有下级部门，一部分就是用户列表；
所以在setData方法打磨数据中，遇到第一部分，就需要递归（循环调用此方法）一直找到最后为止；
遇到第二部分（用户列表），就直接拼接到数据中；
经过层层循环，就达到了数据按照插件规定的数据结构呈现。

最后拼接出来的数据结构
最后实现点击详情，带上参数跳转

// 点击详情进入对应的页面$('#tree').on('click', '.badge', function () {var nodeId = $(this).parent().data('nodeid')// 插件提供的方法，通过节点id可以获取到节点所有的信息，包括自定义添加到节点里面的信息var nodeInfo = $('#tree').treeview('getNode', nodeId);var linkURL = nodeInfo.linkURL;var name = '';var idType = '';// url 正则匹配（全局匹配）if (linkURL.match(/departMentYeji/g)) {idType = 'departmentId';name = 'departmentName=' + nodeInfo.name;} else {idType = 'ownerId';name = 'userName='+nodeInfo.userName;}window.location.href = linkURL + '?'+idType+'=' + nodeInfo.id + '&' + name;});

6月项目总结--浅尝jsp（官网优化），移动端Echarts，mescroll试水，树形插件bootstrap-treeview相关推荐

项目一：《小米官网》jQuery重构
小米官网项目的整体布局就不多说了,在项目一:<小米官网>中我就写过了,我就是直接复制粘贴的之前的 html 和 css,只是把JS部分用jQuery重新写了一遍,不想打字了,直接分享下我的 ...
1月13日科技资讯|苹果官网以旧换新价格暴跌；戴威退出 ofo 法人代表及高管；TensorFlow 2.1.0 发布
CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧.扫描上方二维码进入 CSDN App 可以收听御姐萌妹 Style 的人工版音频哟. 一分钟速览新闻 ...
项目一：《小米官网》
一.项目介绍 "小米旗舰商城".二十一世纪是网络休闲生活的时代,在这互联网时代, 网络销售已经变成了现在较大的-一个营销模式.如今信息网络的发展可以说是一日千里,透过网络的运用,可 ...
如何使用Vue集成其它UI组件？如何阅读UI官网？移动端组件Vant实例教程（熬夜干货）
如何使用Vue集成其它UI组件前言一.Vant是什么? 二.基础环境准备 1.1 了解是根本 1.2 安装 1.3 引入组件 3.1 步骤一 3.2 步骤二 3.3 步骤三二.事件绑定 2.1 ...
电信号簿助手APP的官网优化方案
该优化方案二八于2015年12月提交给电信号簿助手负责的相关公司一个朋友后,目前首页已做修改,对比之前更符合一个作为APP下载的展示官网.本文主要侧重从SEO.用户体验等几个角度,操作难度低,如果按照 ...
Python爬虫项目：下载王者荣耀官网所有皮肤并对名称（以后更新的也可以）
博主的学习网站 : https://bigdataboy.cn/ 分为两步: 1.找到皮肤图片的地址函数只需要传入英雄编号即可返回 {皮肤名称:链接地址} 形式 def Downloed_ksin( ...
ro服务器维护副本cd,仙境传说ro手游测试服12月21日更新维护内容官网公告：强制更新客户端...
亲爱的冒险者们: 在过去的一周中我们对游戏的底层代码进行了较大程度的调整优化,在本次维护结束后,TestFlight及TapTap将分别上架一个新的客户端. 请冒险者特别注意!该客户端为[强制更新客 ...
rem实现官网PC 移动端适配
最近搭建了一个公司的官网系统,要实现移动端和手机端的适配,屏幕缩放要能够满足自适应的条件,下面简单的介绍一下技术的实现过程,也算是自己工作的一个总结. 1.技术选型选用vue脚手架 element- ...
【蓝桥杯官网试题 - 真题训练】生命之树（树形dp）
题干: 在X森林里,上帝创建了生命之树. 他给每棵树的每个节点(叶子也称为一个节点)上,都标了一个整数,代表这个点的和谐值. 上帝要在这棵树内选出一个非空节点集S,使得对于S中的任意两个点a,b,都存 ...

6月项目总结--浅尝jsp（官网优化），移动端Echarts，mescroll试水，树形插件bootstrap-treeview

项目1，官网优化之JSP页面

1，先说说我自己对jsp页面的理解：

2，再说说jsp页面的好处

项目2，改版（移动端）录入系统

1，改版rem计算方式（为了减少请求，此段代码直接放入htm的head中）

2，百度Echarts 定制 https://echarts.baidu.com/download.html

3，下拉刷新插件更改（mescroll）http://www.mescroll.com/

4 ，树形控件（bootstrap-treeview） http://www.jq22.com/jquery-info10461

6月项目总结--浅尝jsp（官网优化），移动端Echarts，mescroll试水，树形插件bootstrap-treeview相关推荐

最新文章

热门文章