阿里佰秀用户模块.md · 唉唉唉/原生ajax做的项目+笔记

服务器返回的数据

前端开发要把数据拼接进html标签后 才展示给 用户看

\  转义符  把回车 转义

数据和html拼接 是做组件用户界面公共

js是写页面逻辑的地方  混和就不用写了

模板引擎  js库文件

![Snipaste_2020-07-12_22-01-19](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-12_22-01-19.png)

用ajax使用 管理网站

![Snipaste_2020-07-12_22-05-06](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-12_22-05-06.png)

#### 数据的展示 和数据的管理

最新 发布 最新发布

导航数据  分类数据

分类对应出不同的地方

轮播数据

调用接口来是实现实现：

#### 前后端混合开发：

#### 	 就是 既有前端代码 又有服务端代码

前端根据效果图编写静态html文件，当静态文件 经过测试没问题 直接发送给服务器人员 将静态的数据 嵌套到html里面中  会报错  项目都会放置公共服务器代码 下载在做修改 修改后在传递回去

服务器端开发人员 更新本地后 才能上传到服务器上

代码组织方面说明问题：

把拼接好的返回客户端

![Snipaste_2020-07-12_22-08-28](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-12_22-08-28.png)

#### 开发 模式： 前后端开发模式分离  代码层级

前后端的代码 都不会 涉及代码

通过ajax 调用 后端提供的接口  从而将数据拼接数据展示

服务器 负责逻辑编写

客户端访问：当用户 浏览器 网站中的某个页面 浏览器 只有客户端的html代码 当浏览器执行的时候  在html 通过ajax发送请求 索要数据  客户端 在通过 其他手段 展示出来

![Snipaste_2020-07-12_22-13-58](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-12_22-13-58.png)

#### 项目架构 ：

![Snipaste_2020-07-12_22-17-02](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-12_22-17-02.png)

前面 不用知道ndoe怎么编写 数据库怎么操作 都不需要

我们只知道调用提供的接口  拿到数据 操作。 服务端要

#### 网站客户端需要的技术  模板引擎  jq ajax  字体图标库  siwp js插件 实现 轮播图效果  懒加载

### 安装服务器运行环境：跑起数据 让其调用接口获取

##### 前端人员调用接口需要知道运用什么技术搭建服务器 好运行 调用接口获取数据

##### 服务器 端程序 要运行起来 搭建 服务器运行环境    node  moogedb 可视化 观察数据变化

![Snipaste_2020-07-12_22-21-08](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-12_22-21-08.png)

项目开始：通过jq

#### 数据管理页面：

1. #### 登录页面的接口

![Snipaste_2020-07-12_23-07-34](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-12_23-07-34.png)

1.拿到用户登录信息   发生请求  请求方式 请求地址 请求数据  通过 success拿到数据 error拿到错误信息

#### 2.登录拦截  拦截不能直接访问index.html 管理主页

1.只能登录才能进行访问  登录会返回一个值的

![Snipaste_2020-07-12_23-35-20](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-12_23-35-20.png)

2.页面加载之前 拦截判断

通过src标签 加载发送请求  scr标签没有加载完之后 是不会向下执行的

根据返回状态码判断是否判断 。

3.这个是不是路由 而是 index.html这些 之间访问的数据

![Snipaste_2020-07-12_23-42-26](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-12_23-42-26.png)

# 3.退出功能： location.href = ' 网站'

1.成功就删除或者清除 token 失败就提示 成功就回到登录页面

2.阻止默认跳转行为 js:;  这样阻止默认跳转

#### 3.confirm() 方法 在浏览器弹出一个确认框  有确定 和取消 二个操作

#### 4.confirm返回值 确定就是 true 取消就是false  通过变量接收

#### 5.通过if判断 执行调用退出接口 接口调用成功 就之间 跳到登录页面  接口失败就返回错误信息

#### 6.可判断 页面是否可以访问 没有就还能访问 成功就不能访问的了

#### 7.退出功能 是公共的代码 所以数据管理 都有这个 所以放到公共的js文件中 在每个页面都引入js文件  每个数据管理 都具有退出功能了

# 用户管理功能：创建一个user。js文件 存放用户管理相关的代码

####   1.添加用户 ：涉及头像上传

![Snipaste_2020-07-12_23-55-06](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-12_23-55-06.png)

1.name属性和接口的传递参数要一致

4.表单的默认行为是：return false

2.刷新页面 的好处  获取列表请求重新发送  获取最新的数据  和 文本框清空 说明添加成功

3.接口返回值给出 那就提示用户提示失败

##### 第一步：单选按钮的数据 name属性 同一个 通过value 来决定不同的值

##### 第二步:为表单添加提交事件  先为其设置id属性 获取这个表单 ，

#### 第三步：获取在表单中的输入内容 通过jq一个方法 $this 就是当前表单.serialize() 功能获取用户输入内容 并且把内容 格式化参数 字符串 返回值   客户端向服务器端传递的数据

#### 第四步：想服务器端发送添加用户请求  data属性 接收2种  一种对象 一种是参数字符串

![Snipaste_2020-07-13_00-12-55](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_00-12-55.png)

##### 通过success获取成功信息 error 错误信息    刷新页面  location.reload()；方法  通过观察数据库 看到添加的信息是怎样的

![Snipaste_2020-07-13_00-19-42](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_00-19-42.png)

#### 总结:为表单添加提交事件  获取表单输入内容  发送i请求   阻止表单默认行为

#### 添加用户头像上传：

1.正常的操作流程 应该是用户选择头像 并且将头像上传到服务器 由服务器端返回头像上传之后的地址，有前端人员 在获取上传的地址以后，要将地址存储到一个隐藏域当中 当用户点击添加按钮时将 用户信息和头像地址 一并提交到服务器端

![Snipaste_2020-07-13_00-24-24](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_00-24-24.png)

#### 1.文件选择控件 获取到这个控件按钮 添加change事件 change事件是input特有的吗？

1. 通过files属性 获取用户选择到的文件 一个列表 无论选择多个还是一个 都是一个列表 现在只能选择一个文件 所以 通过  选择到他的第一个文件 下标0  打印 files[0]  展示用户选择到得文件

![Snipaste_2020-07-13_00-34-14](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_00-34-14.png)

2.创建formdata对象 就能实现二进制得文件上传了   通过表单对象 append 添加内容  上传后 服务器返回一个对象 对象当中存储上传之后得地址 对应得属性 名称是 avatar 和 选择得文件  参数1  自定义属性名称 和服务器返回一个 参数2 急速 用户上传文件

3.发送ajax请求发送请求   data 得值就是formdata对象   外加 一个processdata：false  告诉 ajax方法不要解析请求参数 就是 告诉不用解析data对应得值 。正常来将 ajax 会对 data进行解析 把属性名称对应属性值

4.当前二进制 上传 不能去解析  再加上一个配置 contentype false  不用设置请求 参数类型  因为formdata中已经设置好了 。

5.返回成功数据 是上传成功后得图片地址   数组对象中的第一个参数 是append设置的参数 值就是上传之后的图片地址  上传到了uplodas文件夹中 这样就能成功的上传文件了

![Snipaste_2020-07-13_00-44-19](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_00-44-19.png)

6. ##### 头像预览功能成功上传文件后 之后通过 img标签展示预览 添加一个id属性 获取img标签 通过attr  设置图片的src属性  值为 获取到的返回数据[0]下的avatar的值

7.在表单当中 准备一个隐藏域 要把图片地址 提交给服务端   创建一个input type设置为hidden 隐藏域

name 是就一定个调用接口的属性一样  avater  起一个id 做唯一辨识  通过获取id 得到隐藏域 为其设置隐藏域的值 ，值就是 上传之后的图片地址

![Snipaste_2020-07-13_00-52-37](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_00-52-37.png)

8.添加 测试看看能不能提交成功  avatr有值了 存储的值 就是图片地址

#### 总结:为选择上传控件绑定chang事件  创建foedata对象  把选择到的图片 上传到服务区端 一个是看用户看的  一个是要提交给服务区端的

![Snipaste_2020-07-13_01-00-14](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_01-00-14.png)

#### ![Snipaste_2020-07-13_00-54-11](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_00-54-11.png)![Snipaste_2020-07-13_00-59-29](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_00-59-29.png)

# 用户信息展示： checked属性获取的不同

#### attr() 方法设置或返回被选元素的属性和值。

#### 当该方法用于**返回**属性值，则返回第一个匹配元素的值。

#### 当该方法用于**设置**属性值，则为匹配元素设置一个或多个属性/值对。

##### prop() 方法设置或返回被选元素的属性和值。

##### 当该方法用于**返回**属性值时，则返回第一个匹配元素的值。

##### 当该方法用于**设置**属性值时，则为匹配元素集合设置一个或多个属性/值对。

![Snipaste_2020-07-13_09-09-51](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_09-09-51.png)

##### 1.当前上来就向服务起发送请求：获取数据渲染

##### 2.将数据和模板拼接 之后在放到模板当中

3.准备模板文件库 准备模板区域进行渲染 选择模板和数据拼接

4.模板引擎返回拼接好的字符串 要告诉模板引擎怎么拼接

5.$value 代表当前渲染的对象  index下标

6.状态是是通过 三目判断的  不同的值 区分就之间渲染出来

7. 用户头像怎么显示，可以有可以没有  没有的时候就是null  有就是 图片地址

8.  通过if来判断  是否有值  没有就不显示 有就显示

9. 把拼接好的字符串 放置到页面中  获取body控件 让其内容的html 就是拼接好的html 通过jQuery的方法 html来实现

#### 总结：要明白模板引擎的用户 渲染页面是通过 html来直接放置的

# 修改 用户信息： 2步 先把数据渲染页面 在做修改

1. 点击修改 把信息展示到表单中，添加按钮变成修改按钮

2.  点击修改的时候 要实现修改功能

![Snipaste_2020-07-13_09-26-58](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_09-26-58.png)

##### 1.ajax异步的 不能之间js编辑按钮 添加点击事件  将事件绑定到父级身上 因为元素的父级不是通过 js渲染的 可以通过 js直接获取他 其实就是 tobody   通过触发事件父级 冒泡到子元素 实现对应的功能

![Snipaste_2020-07-13_09-40-03](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_09-40-03.png)

##### 2.获取id时候 将渲染的时候 存储id在编辑按钮上 通过自定义属性上 data-id="{{循环的eod}}"  不用起id 多个  要起类名   通过arrt来获取id值 attr 可以获取 和设置

3.根据id获取用户的详情信息 通过模板引擎 拼接字符渲染页面 到表单中   模板引擎拼接的步骤走起就好  通过inpt的value属性 显示 对应的值

激活和权限 通过判断 checked属性 来实现 默认选上  头像通过if 判断 有就显示 否则 就显示 默认头像

4.获取修改后的内容进行 发送请求  因为 修改表单 是通过 js渲染出来的  所以发送修改表单也要 使用事件委托来发送ajax请求   on方法 参数1  事件名称  参数2 触发事件是那个控件  参数3  事件处理函数

#### 5.通过serialize（）方法 来获取表单信息  会自动拼接的字符串参数  少个头像的数据

找到隐藏域 如果  上传了头像 要将头像保存到隐藏域中 以便点击修改按钮 时候 可以拿到用户上传过的图片地址 所以 在隐藏域 添加一个valude属性 值就是 图片的上传地址  之后 参数字符串就有图片地址 了

##### 上传头像 是通过单独来实现了 你点击选择图片了 已经上传了 服务器返回 对应的地址回来而已

##### 6.调用接口 实现修改功能  data参数 就是 通过方法获取到的值  id值怎么获取呢 通过自定义属性 定义在from表单内  值就是 点击的当前用户 那个值 _id字段     因为 这个修改表单是通过 单独的id查询数据库请求出来的数据 和渲染上来的 所以 有这个字段

![Snipaste_2020-07-13_10-14-18](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_10-14-18.png)

7.所以当表单提交的时候  通过attr(data-id) 属性 获取到id

8.拿到数据 就把页面重新刷新就好了 location.reload()

![Snipaste_2020-07-13_10-19-45](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_10-19-45.png)

#### 修改用户信息的头像上传：

##### 点击修改渲染处理的表单上的图片 其实是隐藏于中的value值而已 并没有触发到上传头像的处理函数

![Snipaste_2020-07-13_10-36-04](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_10-36-04.png)

在修改信息当前 头像上传是不起作用的  因为页面显示的文件选择控件 已经是修改表单中的元素了 而修改表单中的元素是js渲染到页面上的 所以 文件选择控件上是没有onchang事件的  因为 chang事件是文件上传的代码。难道我们还要为文件选择控件 绑定一次cahng事件吗 没必要 只要将文件上传上的cahgn事件 改成事件委托  这样就可以了 无论添加 和修改 文件控件 的chjang事件都能被触发了

1.找到表单域的父级 就是文件控件的父级 就是  包裹的div  所以在着div上绑定 事件委托就好了  通过头像 选择控件来触发 绑定的事件身上的chang事件 执行对应的处理函数

![Snipaste_2020-07-13_10-34-28](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_10-34-28.png)

# 删除用户功能：也是事件委托事件

#### 为啥呢  因为 信息数据 是通过ajax技术获取到的 请求到客户端以后在显示到页面中的  由于ajax 不能确定服务器 什么时候返回数据  所以不能直接用js代码获取编辑 删除按钮 并添加点击事件   通过事件委托 让元素父级触发事件 一直在页面中 而不是通过js渲染处理的 所以可以直接获取到他

![Snipaste_2020-07-13_10-41-19](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_10-41-19.png)

1.删除按钮的时候 弹出删除框  是否进行删除 操作 直接 将用户删除即可

2.通过 confirm 方法 弹框  返回布尔值

3.获取用户id  添加自定义属性 通过attr获取数据

![Snipaste_2020-07-13_10-55-50](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_10-55-50.png)

# 批量删除 ：同时删除很多用户

1.当复选框都是处于true的时候  显示批量删除按钮

2.点击选中的 都要删除，

3.三大步骤

## 	第一大步 ：

##### 复选框的选中状态   全选 的时候 都要 选上 没全选都没选上 要个全选按钮保持一致   反过来也是一样 单个全选按钮

第二步：为全选按钮绑定事件 获取元素 绑定到一个变量中 因为经常使用  通过chang事件来做处理函数事件

第三步：当全选选上的时候 ，要获取到全选的状态 所以的用户都要选上 反之所以用户都是 没选上的

第四步： 通过prop方法 来获取 chencak的值  不能attr方法不能获取属性值 因为使用这个获取不到checked属性的值  定义一个变量接收 返回布尔值

第五步：获取到所以的用户  同步到全选上  通过所以用户的父级 获取到这个元素后 通过 find方法查询到复选框

之后通过prop设置 checked 值和全选一致

![Snipaste_2020-07-13_11-07-10](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_11-07-10.png)

做完这个后 在把用户状态同步到全选中 用户都是选中的 全选是true  其中有一个没有选中 那就取消

1.为用户复选框 添加chang事件 但是是通过js渲染出来的 所以要做事件委托  来实现chagn事件  就是 todoby父级

2.处理的逻辑就是看全选 按钮 的动态变化

3.思路

![Snipaste_2020-07-13_11-13-19](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_11-13-19.png)

1.查询所有用户的 input  就是 find方法

2.过滤选中的状态 通过filter方法  条件就是  :checked 在 所有用户过滤出 选中用户   判断成功  就执行成功的处理逻辑 否则就执行else![Snipaste_2020-07-13_11-16-35](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_11-16-35.png)

# 第二大步：管理批量删除按钮的状态  show显示 hide隐藏

1. 这个是 全选和批量删除按钮的管理关系    全选被选中时 批量按钮要显示 否则 隐藏 
2.  这个是 用户按钮选中 和批量删除按钮的管理关系	被选中时 批量按钮要显示 否则 隐藏 
3. 获取全选按钮的状态  判断 真假 真就显示 假就隐藏
4. ![Snipaste_2020-07-13_11-24-12](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_11-24-12.png)

4. 直接在在过滤单选框的代码进行 显示和隐藏  思路是 当选中的复选框 大于0 就是有复选框 有了show 否则就hide

![Snipaste_2020-07-13_11-22-52](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_11-22-52.png)

### 第三大步：批量删除功能的实现   join方法拼接字符串

#### 1.获取按钮 获取用户id 发送批量删除请求

2.id 存储一个数组当中 调用接口 删除用户 用数组连接成一个字符串

3.过滤出获取选中的用户

4.如何得到id呢  通过自定义属性 放到复选框 上 之后 循环就能拿到值了

5.通过ecah方法  参数1 index  参数2 循环的当前循环元素  是原生的html原生  通过 转义 $()括起来 得到jQuery元素  通过attr 的方法的到id值 通过push方法 推送到id是的id中去 之后就能拿到数据id值了  点击多个就添加多个

6.弹出框 confirm 确定是否删除

7.拼接id  多个id用 - 分隔 通过 数组下的一个方法join 进行连接 返回值就是一个字符串

# 登录修改的密码功能：

![Snipaste_2020-07-13_14-01-22](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_14-01-22.png)

1.输入原密码 和2次新密码 即可修改成功

1.为表单项目 添加 name属性 和接口文档一致  为表单添加表单提交事件

2. 获取用户在表单中输入的内容 serialize方法（）
3. 调用接口 实现密码修改功能
4. 修改成功后就跳转页面  组件中有 push路由跳转![Snipaste_2020-07-13_14-09-45](E:\黑马vue\Ajax技术\img\Snipaste_2020-07-13_14-09-45.png)

唉唉唉/原生ajax做的项目+笔记

简介

发行版

贡献者

近期动态

唉唉唉/原生ajax做的项目+笔记 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

唉唉唉/原生ajax做的项目+笔记