vue axios 发送get请求传递参数给后端失败_记录使用vue-cli3创建项目的全过程

今天起利用上班划水时间，自己通过vue-cli3搭建项目。

安装cli并创建项目

1. npm install -g @vue/cli
2. vue create my-project

创建项目时的配置选项

这里选择了自主配置，勾选了ts,router以及vuex

名词解释（doge）:

1. Babel：将ES6转为ES5
2. TypeScript：JavaScript的超集，以前项目用过一阵子，不多，希望这次搭建项目能学会他
3. Progressive Web App (PWA) Support：是否支持PWA
4. Router：路由
5. Vuex：状态管理
6. CSS Pre-processors：css预处理
7. Linter/Formatter：代码风格，检测代码是否符合代码风格，不符合则编译报错
8. Unit Testing：单元测试
9. E2E Testing：端到端测试

接下来的配置除了路由使用history模式没有yes以为其他都是yes（忘了截图了，也不敢确定自己是否配置正确）

项目创建成功

目录结构：

不清楚shims-tsx.d和shims-vue.d文件的作用，先放着

接下来的工作：引入饿了么框架，封装axios并完成请求后端地址。

饿了么框架引入

安装：npm i element-ui -S（-S表示生产环境和开发环境都需要用到该模块）

注册：

6点了！！！！先下班哈哈哈 大家周末愉快

————————————————手动分割线—————————————————

2020.7.13 周一

上午开了一个小时会，自己规划了一下本周任务，然后剩了四十分钟左右的时间就逛逛知乎，划水到中午吃饭。（呲溜呲溜，美滋滋）

下午开始继续搭建Vue项目。

引入并封装axios

axios的引入并不是像element-ui一样，直接Vue.use()就可以，而是需要将他挂载到Vue的原型上（或者vuex中的action里）。这里我是在目录下新建了一个utils文件，里面存放了二次封装的axios请求文件（transformAxios.js）以及请求拦截器（intercept.js），然后在入口文件main.js中引入这两个文件并将二次封装的axios挂载到Vue的原型上。

单独的二次封装axios文件：transformAxios.js

import axios from 'axios'

// 根据运行环境切换相应的请求基地址
if(process.env.NODE_ENV == 'development'){
  axios.defaults.baseURL = "developmentBaseUrl"
}else if(process.env.NODE_ENV == 'production'){
  axios.defaults.baseURL = "productionBaseUrl"
}

/**
 * axios统一的请求行为函数
 * @target 引用该函数时的对象，一般是this
 * @url 请求基地址后的拼接地址
 * @params 请求参数
 * @status 页面中的loading参数，和 @target 一起使用，改变loading状态
 * @method 请求方式
 * */ 
async function func(target,url,params = {},status = '',method = "get"){
  try {
    status ? target[status] = true : ''
    let res = {}
    if(method === "get" || method === "delete"){
      res = await axios({
          method,
          url,
          params,
        })
    }else if(method === "post" || method === "put"){
      res = await axios({
        method,
        url,
        data:params,
      })
    }
    status ? target[status] = false : ''
    return res
  } catch (error) {
    status ? target[status] = false : ''
    throw error
  }
}

export async function axiosGet(target,url,params = {},status = ''){
  const res = await func(target,url,params,status,'get')
  return res
}

export async function axiosPost(target,url,params = {},status = ''){
  const res = await func(target,url,params,status,'post')
  return res
}

export async function axiosPut(target,url,params = {},status = ''){
  const res = await func(target,url,params,status,'put')
  return res
}

export async function axiosDelete(target,url,params = {},status = ''){
  const res = await func(target,url,params,status,'delete')
  return res
}

单独的请求拦截文件：intercept.js

import axios from 'axios'
import {Message} from 'element-ui'

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 这里获取登录之后的token，如果有则增加token请求头
  if(localStorage.getItem('token')){
    config.headers['token'] = '111'
  }
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 这里对响应返回值进行判断，符合条件则返回过滤之后的内容
  if(response.status === 200 && response.data.apiStatus === "0" && response.data.sysStatus === "0"){
    return response.data.data
  }
  // 对响应数据做点什么
  return response;
}, function (error) {
  Message.error("出错拉")
  // 对响应错误做点什么
  return Promise.reject(error);
});

现在已经完成了对axios的基本封装以及请求拦截，试了一下，能请求到现有项目的地址。关于axios部分就先这样吧，等后边做着发现问题了再回来改。

emmmmm关于Vue Router部分明天再来，今天剩余的时间就刷知乎了。手动狗头

---

2020年7月14日 周二

今天开始写vue router部分。

Vue Router

---

哈哈哈哈哈哈哈哈dbq，周二就写了个标题。。。。

周二写了很久，顺便把vuex也写了，写到了下班，然后就没更新了，加上昨天做项目没时间，所以今天才来更新。话不多说，继续搭建我们的小项目。

因为使用vue cli3创建项目时选择了router和vuex，所以不用再次安装router和vuex了，并且项目自动给你在主文件main.js给你引入了router和vuex，router和vuex的项目结构也是搭建好了的，里面还有简单的相关配置。

Vue Router

主文件main.js下面的全局路由守卫设置：

router目录下的index.js文件：

router目录下的router.js路由列表子文件：

我们可以在meta属性下添加任意字段来方便我们实现其他功能。例如我这儿的title将会在路由跳转后将他替换到浏览器的title描述上；keepAlive将判断该属性是否应该被<keep-alive>组件包裹。

Vuex

store目录下的index.js文件：

store目录下的loginStore.js文件：

总结

到目前为止，项目的基本搭建已经完成，我自己测了两个公司的api，都能联通，但是这只是一个项目的雏形框架，真正的项目还会添加更多的模块。当然，路要一步一步走，饭要一口一口吃，大家要对自己有信心，一步一步慢慢来吧。

下面贴出这个雏形项目的码云仓库：（登录账号：10767614056 登陆密码：123456）

vue cli3项目雏形​gitee.com

大家，加油！钱进！