echart

建立 echart 图表五步

简单图表的几个基本组件

父页面与子页面

// 只有index.html 这个页面的ajax出现身份认证识别,直接跳到登录页

if (location.href.indexOf('.index.html') != -1) {

location.href = './login.html'

} else {

// 其他的页面,要求父页面跳转到登录页(iframe标签)

// dashboard.html score.html student.html

// 出现ajax身份认证失败,应该让他们的父页面跳转

window.parent.location.href = './login.html'

}

click或form表单注册提交事件

• click是对点击的按钮注册事件
• submit是对form表单注册（注意这个）

补充

1. autocomplete="off" 用来关闭表单自动填充功能

   <form autocomplete="off" class="container">
   

   

2. post参数设置

   1. Content-Type: application/x-www/form-urlencoded // a=1&b=2&c=3(在案例中,如果是对表单的请求,用$(this).serialize()实现获取表单参数,直接变成这种参数格式,当然要引用jQuery的包)
   2. Content-Type: application/json // {"a":1,"b":2}
   3. Content-Type: multipart/form-data // FormDate

3. post参数也可以直接用字符串的格式

   data: `username=${inp1.value}&password=${inp2.value}`,
   

4. 设置头部参数中权限认证参数

   // 设置所有请求路径,全部添加token认证
   axios.defaults.headers.common['Authorization'] = localStorage.getItem('myToken')
   

5. console.dir(error) 以对象的形式输出

6. iframe标签

• iframe标签可以实现页面包含,显示一个页面
• 可以借助a链接实现页面跳转,a链接的target值,和iframe标签中的name值相同,点击a链接,页面就会去iframe标签中显示

  <iframe src="./dashboard.html" name="fm" frameborder="0"></iframe>
  

7. 调试工具中能通过view source按钮看到请求行

8. 请求方式选择

• params 传递查询参数
• data 传递请求体参数(一般post/put/patch 用请求体参数)

jquery通知插件toastr

<link href="toastr.css" rel="stylesheet"/>
<script src="toastr.js"></script>
//警告
toastr.warning()
//成功
toastr.success()
//错误
toastr.error()

注意：

1. 使用echart 可以先在官网调好代码，全都可以实现后再粘贴回vscode

2. 官网之外的社区网站也可以搜搜

3. 平时有些好玩的，经典的案例可以收藏起来

4. 公共js代码common.js放在写的js代码之前

5. 数组的方法

• 数组.findIndex() //拿到查到第一个元素的下标
• 数组.find() //拿到查到第一个元素的值

6. 元素.onchange 可以用来对表单元素进行不同选择时触发事件

7. for(let key in 对象) 可以用来遍历对象(注意:很多方法是对数组生效而对象不生效的,比如map,push)

8. input.focus()能够自动触发光标显示

案例中代码

form表单代码

1. toastr 是jQuery的一个提示框插件库

2. $(this).serialize() jQuery中提供的一个方法，用来快速获取form标签中的数据

3. 响应信息data解构写法

4. 表单.reset()重置表单信息

5. 给表单注册submit 事件,能够提交数据，在表单中需要有button按钮（设置type="submit"或不设置也行，反倒是设置type="button"不行）

给数组中添加不重复name的对象

1. 根据ele传来的后台每个对象数据，依次将pieData中的每个对象中的name值 判断是否和每次传来的ele中的province值相同，如果不同（说明不存在），则设置初始值，以对象的方式添加到数组中；如果相同（说明已存在），则让对象中name所在对象中的value值加1
2. 其中第二句代码是关键，根据index的值进行后面的if判断，分别做处理

common.js中拦截器的使用

注意

1. 响应拦截器中对应错误的处理,这里要实现当页面请求没有挂载token身份认证时就跳回到登录页,主页有子页面和父页面之分,所以当检测到当前页面是主页时直接跳转,检测到为子页面时,设置父页面跳转,并且只要认证失败就销毁存在本地的token
2. 对于error信息的显示,console.log不能完整显示,可以用console.dir