大事件项目——目的
1、练习jquery ajax请求
2、学习使用git管理代码，把代码推送到远程仓库
3、jquery分页插件、日期插件
——————————————————————————————————————————————————————————
没有清晰的看清结构与样式，造成不必要的操作，浪费时间：做项目时，看清css样式，JQ操作起来才不会造成不必要的麻烦
1.调试能力
2.分析问题的能力
3.查找资料的能力
_proto_ 对象查找原型
————————————————————————————————————————————————————————
1.初始化数据库
a.启动本地数据库
b.创建bignews数据
c.修改config/index.js文件的数据库连接配置
d.执行初始化数据.bat文件
2.把代码托管到码云
1、创建一个bignews目录
2、把静态文件复制到目录下
3、执行git init初始化仓库
4、执行git add .把所有文件追踪起来
5、执行git commit -a -m "提交信息"把代码提交到仓库
6、去码云创建一个远程仓库
7、把本地仓库和远程仓库进行关联，并且把代码推送上去
3.用户登录
1.获取用户名与密码的val（）
2.发送ajax请求
3,batoken存到本地存储中
window.localStorage.setItem('token', response.token);
4.bootstrap 模态框
1.引入bootstarp的css、js
2.引入HTML结构
3.控制模态框的显示
$('.modal-body').html('用户名和密码不能为空')
$('#loginModal').modal('show')
5.获取用户的信息（注意：把token放入请求头）
1，获取用户的个人信息
1.1 发送ajax请求
1.2，把token取回来，放在请求头
1.3 用户信息显示到相应的位置
1.4.对头部右侧修改图片
6.退出登录
1.删除本地存储的token
window.localStorage.removeItem('token');
2.跳转到登录页面
7.如果未登录，访问接口，直接踢出去
1.1如果状态不为200，就会进入error函数
1.2 通过状态码判断是否有权限访问，如果是403，表示没有登录
8.iframe的使用
1.a的target设置为iframe的name；
9.侧边栏点击切换状态状态
1.找到侧边栏的元素，监听点击事件
2.给点击的元素增加激活的类名
10 个人中心-数据回显
1.请求数据
1.1 获取token数据，放到请求头
2.把数据填充到相应的位置
3.错误处理 error 403 通过父窗口控制跳转，否则直接window是表示iframe里面的window对象
parent.window.location.href = './login.html'
11.http封装
1.查看重复的内容
2.寻找可变的参数
3.覆盖的问题——写在空对象
// // 定义一个空对象
// // 添加对象的属性ajax，属性值等于一个函数
// // 属性值函数的参数又是一个对象request
// // 参数对象的属性是请求的方式，地址，参数，请求成功时的回调函数回调函数
12.调用封装diamante
1.在html页面引入http.js
2.调用封装的方法
13.1修改用户信息页面
1.通过new创建FormData对象，传递一个form表单dom对象
formdata是可以上传任何数据，把数据以二进制的形式上传
const formData = new FormData($('#form')[0]);
// 1.1 查看formData数据
for(let item of formData.entries()) {
console.log(item)
}
// 2、发送请求，注意！如果需要发送formData数据，jquery要设置contentType: false； processData: false
// 3.阻止表单默认行为
return false;
13.2 判断数据实例
const isFormData = data instanceof FormData;
13.3 优化http层的封装
1.如果是formData类型数据，设置contentType:false processData: false
2.const isFormData = data instanceof FormData;
if (isFormData) {
requestOption.contentType = false;
requestOption.processData = false;
}
14，本地图片预览
1.监听用户头像的选择
2.获取用户的选择的图片file对象
const file = $('#exampleInputFile')[0].files[0]
（这里if判定flie // 如果提交空的话会是空白false 进入不了下面代码，true就进入下面 3 4 步骤代码 ）
3. URL.createObjectURL(file)
const url = URL.createObjectURL(file);
4.把得到的url赋值给图片的src属性
$('.user_pic').prop('src', url);
15 修改用户信息够更新父级页面
// 左上角和右上角的用户信息也要同步更新
前提是回调函数code== 200
1，重新刷新页面
// window.location.reload(); // 这是不行得，因为个人信息页面是放在iframe里面
// 注意！如果使用file协议打开，有可能会报错（浏览器的iframe安全问题），这时候需要live server通过http协议访问
// parent.window.location.reload();
2.直接调用父级方法，会导致多一次请求
// iframe内的js如何操作父窗口元素
// parent.getUserInfo() ;（getUserInfo()这是数据回显的函数调用）
3.1 创建一个临时url
const file = $('#exampleInputFile')[0].files[0];
（这里if判定flie // 如果提交空的话会是空白false 进入不了下面代码，true就进入下面步骤代码 ）
if (file) {
const tmpUrl = URL.createObjectURL(file);
3.2 修改左上角和右上角的图片
$('.sider .user_info img', parent.document).prop('src', tmpUrl);
$('.user_center_link img', parent.document).prop('src', tmpUrl);
}
// 3.3 修改左上角的昵称
$('.sider .user_info span', parent.document).html('欢迎  ' + $('#nickname').val())
}
}
16.对象的结构
// 以前的写法
// function test(obj) {
// console.log(obj)
// }
// 直接在参数上解构
function test({name, age, gender}) {
console.log(name, age, gender)
}
test({ name: 'tom', age: 18 })
17.instanceof与typeof的区别
1.返回值是一个字符串，用来说明变量的数据类型
2.instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。通常来讲，使用 instanceof 就是判断一个实例是否属于某种类型。
————————————————————————————————
18.文章分类管理
1.显示分类列表
a,请求数据
b，使用art-template实现数据渲染
2.分类编辑功能
（安全if判定，当编辑文本为空时，弹出窗口提示不能为空）
a，点击编辑按钮时，把编辑框现实出去
b，把数据回显到编辑框
c，当用户点击保存的时候，把数据发送到客户端
d，如果用户点击取消，那就隐藏编辑框
3，新增文章分类
（新增文章与编辑文章的框是相同的，但是可以用冗余代码换取代码灵活。更改类名即可（交集类名））
（新增过后的val需要清空）
a,点击新增分类的时候，显示新增分类弹出框
b,点击保存的时候，把新增的数据提交交给服务器
c，点击取消，隐藏弹出框
————————————————————————————————
19.文章管理
1.下拉分类列表
a，获取分类列表
b，把数据渲染到页面
c.使用artTemplate渲染数据到页面
2.显示文章列表
a，获取筛选数据，发送请求
b，筛选文章
b2,获取用户选择的下拉框的值
获取选择的分类, 注意，如果option有value属性，就获取value，否则会获取文本
获取筛选文章的状态
2.把数据渲染到页面
——————————————————————
20.分页
当数据量比较大的时候，数据要分多次加载
如果服务端一次就把所有数据返回给前端，前端负责分页？
问题：传输数据量过大，导致显示时间过久
分页问题一般都是后端提供相应接口。
1.引入相关资源
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./jquery-1.12.4.min.js"></script>
<script src="./jquery.twbsPagination.js"></script>
2.在页面声明分页插件显示的地方
<ul id="pagination"></ul>
3.初始化分页插件
________________________________________________________________________
21.删除功能
（利用新变量定义） 记录分页的页数，再作为参数给删除时使用
1.绑定删除按钮函数传参 为id
2.success回调 cde为204时，调用显示信息函数，参数当前页面的页数；
网友评论