Day29：用户管理系统；yarn命令，webpack和拦截器

用户管理系统

搭建开发环境

1. 创建项目（创建user-manage文件夹）
2. 项目初始化，使用npm init -y
3. 安装依赖

1. 1. npm i axios 前台请求，用于在客户端发送请求，获取数据
   2. npm i json-server -D 开发依赖，用于开发的时候运行后台使用
   3. 修改package.json中scripts下serve属性为json-server -w data.json
   4. 启动后台，使用npm run server

 

 

 

 

实现列表功能

本质

使用axios获取所有用户数据，遍历展示列表

步骤

1. 在根目录下，创建index.html，作为主页
2. 编写html框架
3. 编写css样式
4. 发送axios请求获取的所有数据

1. 1. 导入axios的js文件(<script src="./node_modules/axios/dist/axios.js">)
   2. 发送ajax请求获取后台数据
   3. 在根据获取的数据遍历，创建tr，填充数据，添加到table下

// 通过axios发送异步请求
// GET方式，请求路径http://localhost:3000/users
axios.get('http://localhost:3000/users').then(res => {
  console.log(res.data)

  res.data.forEach(item => {
    // 获取table对象
    const table = document.querySelector('.user-list')
    // 根据item中的数据动态创建tr对象
    const tr = document.createElement('tr')
    tr.innerHTML = `<tr>
                      <th>${item.id}</th>
                      <th>${item.username}</th>
                      <th>${item.password}</th>
                      <th>
                          <a href="">编辑</a>
                          <a href="">删除</a>
                      </th>
                  </tr>`
    // 将tr添加到table中
    table.appendChild(tr)
  });
})

呈现用户信息

 

实现添加功能

本质

使用axios的post请求，获取表单数据，提交到后台

步骤

1. 书写add.html页面
2. 在index.html里添加链接add.html，为添加用户超链接添加链接地址
3. 发送axios请求，获取表单数据，提交到后台

1. 1. 获取提交按钮，并监听点击事件
   2. 在点击事件中，获取用户输入的用户名和密码
   3. 发送post请求，提交到后台
   4. 跳转到首页

注意引入：<script src="./node_modules/axios/dist/axios.js"></script>

document.querySelector('.btn').addEventListener('click',function(){
  // 获取用户名和密码
  const username = document.querySelector('.username').value
  const password = document.querySelector('.password').value

  // 发送post请求
  axios({
    method:'post',
    url:'http://localhost:3000/users',
    data:{username:username,password:password}
  }).then(res => {
    // 跳转到列表页
    location.href = './index.html'
  })
})

实现修改功能

本质

就是使用axios的get请求，获取要修改的那个用户，并将它的信息展示在页面上

然后再将修改后的数据，通过put请求，发送到后台，进行修改

步骤

1. 书写edit.html页面（复制add页面进行修改）
2. 在index.html为修改用户超链接添加链接地址，将拥护id带过去
3. 在edit.html页面，获取带过来的id，并发送axios请求，得到要修改的拥护，回显数据

1. 1. 获取提交按钮，并监听点击事件
   2. 在点击事件中，获取用户输入的用户名和密码
   3. 发送post请求，提交到后台
   4. 跳转到首页

1. 监听按钮的点击，获取真正要修改的数据，发送put请求，修改后跳转到首页

 

// 根据location对象，获取带过来的id
// console.log(location) // search属性中有id
// console.log(location.search.replace('?','')) // id=2
// console.log(location.search.replace('?','').split('=')) // ['id',2]
const id = location.search.replace('?','').split('=')[1] // 2

// 发送axios请求，得到要修改的拥护，回显数据
axios.get(`http://localhost:3000/users/${id}`).then(res => {
  console.log(res.data)
  // 回显数据
  document.querySelector('.username').value = res.data.username
  document.querySelector('.password').value = res.data.password
})

document.querySelector('.btn').addEventListener('click',function(){
  // 获取用户名和密码
  const username = document.querySelector('.username').value
  const password = document.querySelector('.password').value
  // 发送put请求
  axios({
    method:'put',
    url:`http://localhost:3000/users/${id}`,
    data:{username:username,password:password}
  }).then(res => {
    // 跳转到列表页
    location.href = './index.html'
  })
})

实现删除功能

使用行内绑定方法，删除当前行

本质

使用axios的delete请求，获取要删除的用户的id，提交到后台删除

步骤

1. 给删除超链接添加onclick属性，将id穿进去
2. 编写删除方法，在方法里发送delete请求，传递要删除的用户id，提交后台删除，刷新当前页

<a href="" onclick='handleDel(${item.id})'>删除</a>
// delete，行内绑定handleDel方法，绑定id进行删除当前行
function handleDel(id){
  axios.delete(`http://localhost:3000/users/${id}`).then(res => {
    location.href = './index.html' // 刷新当前页面
  })
}

1.yarn命令

除了npm命令以外，还提供了yarn命令实现包管理

与npm命令类似，了解即可

使用

首先要全局安装yarn

npm i yarn -g

包操作命令

yarn add 包名

添加

yarn remove 包名

移除

 

2.webpack

概念

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

使用

安装webpack服务端

npm i webpack

安装webpack客户端

npm i webpack-cli

打包

npx webpack

最终会在项目下生成一个dist文件夹，打包的文件就在该文件夹下的main.js中

3.拦截器

请求拦截器

概念

在请求发送之前进行必要操作，例如访问页面之前给请求体添加验证、设置请求头等

语法

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

用途

1. 比如用户提交请求中的一些信息不符合服务器的要求，这里可以做一些修改
2. 比如每次发送网络请求时，都希望在界面显示一个请求的图标
3. 某些网络请求，必须要携带特殊的信息（登录的token），如果没有携带，就可以拦截，并做出响应提示

响应拦截器

概念

在响应数据之前，对响应体的一些处理，通常为数据统一处理等，也常用于判断登录是否失效

语法

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  // 比如返回一个data数据
    return response.data;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

作用

1. 统一处理所有请求成功之后响应过来的数据，然后对特殊数据进行处理，其他的正常返回
2. 可以判断服务器返回的登录状态是否有效，如果失效，需要重新登录