云尚办公系统：角色管理前端复习总结

• 目录

  安装

  前端解决跨域问题

  Vue的入门 

  ---

  ---

  安装

  • # 解压压缩包
    # 进入目录
    cd guigu-auth-ui
    # 安装依赖
    npm install
    # 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
    npm run dev

• 前端解决跨域问题

proxy: {
  '/dev-api': { // 匹配所有以 '/dev-api'开头的请求路径
    target: 'http://localhost:8800',
    changeOrigin: true, // 支持跨域
    pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api'
      '^/dev-api': ''
    }
  }
}

• Vue的入门 

• getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo().then(response => {
        const { data } = response
  
        if (!data) {
          return reject('Verification failed, please Login again.')
        }
  
        const { name, avatar } = data
  
        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

  ---

• 首先，这段代码是一个具有异步操作的Vuex action，名为getInfo({ commit, state })，用来异步获取用户信息并更新store中的数据。

  getInfo() 函数返回一个Promise对象：

  return new Promise((resolve, reject) => { // code here... })

  在这个Promise对象中，我们发起了一个异步请求，通过调用getInfo()函数来获取用户信息。在then回调函数中，我们首先解构出来响应数据中的name和avatar字段：

  const { name, avatar } = data

  接着，我们使用commit方法来触发Vuex store中的mutation，用得到的name和avatar去更新state中相应的数据：

  commit('SET_NAME', name) commit('SET_AVATAR', avatar)

  这里的SET_NAME和SET_AVATAR都是mutations，用于更新state的数据。

  最后，在成功处理完响应数据之后，我们使用resolve方法将处理后的data返回给调用者：

  resolve(data)

  如果在处理响应数据时发生错误，我们会在catch回调函数中将错误信息reject出去：

  .catch(error => { reject(error) })

  这样，在调用getInfo()函数时，我们可以使用Promise的语法来处理异步请求的结果。如果请求成功，我们可以通过调用.then()回调函数来处理响应数据。如果请求失败，则可以通过调用.catch()回调函数来处理错误信息。

 methods: {
    fetchData(current=1) {
      this.page = current
      // 调用api
      api.getPageList(this.page, this.limit, this.searchObj).then(response => {
        this.list = response.data.records
        this.total = response.data.total
      })
    },
  }

这段代码是一个Vue.js组件中的方法，名为fetchData。它用于从服务器获取数据并更新组件的数据。

首先，在调用fetchData方法时，我们可以传入一个参数，用于指定当前页码（默认为1）：

•  fetchData(current=1) { this.page = current // code here... }

                接下来，在方法内部，我们将当前页码赋值给组件的data对象中的page属性：

 this.page = current 

                  然后，我们调用了一个名为api.getPageList()的方法来发起网络请求，并传入当前页码、每页展示的数量以及搜索对象作为参数。根据代码中的注释来看，api.getPageList()方法应该是一个用于获取某个页面的数据列表的自定义API。

   api.getPageList(this.page, this.limit, this.searchObj) .then(response => { // code here... })

        通过.then()方法，我们注册了一个回调函数，在网络请求成功返回数据后执行。回调函数的参数response是服务器返回的响应对象。

        在回调函数中，我们通过访问response.data.records和response.data.total来获取响应数据中的records和total字段。假设服务器返回的响应数据包含了一个数组字段records，其中存储了当前页的数据记录；还包含了一个整数字段total，表示总的数据记录数。

this.list = response.data.records this.total = response.data.total 

        我们将获取到的数据记录数组赋值给组件的data对象中的list属性，用于在组件的模板中进行渲染。同时，将总数据记录数赋值给组件的data对象中的total属性，可能用于分页等功能。

        综上所述，这段代码的作用是：根据当前页码、每页展示的数量和搜索对象，从服务器获取数据列表，并将数据记录数组和总记录数分别赋值给组件的list和total属性。这样，在组件的模板中就可以根据这些数据进行展示或其他操作了。