No.15 vue-element-admin 学习使用（十）样式，和服务端交互

dangsh
603 阅读2分钟

这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

vue 中scoped可以解决样式全局污染，选择器复杂的的问题，给 css 加了一个域的概念。向下面这样，scoped中的样式就只会在当前页面生效。

/* 编译前 */
.example {
  color: red;
}

/* 编译后 */
.example[_v-f3f3eg9] {
  color: red;
}

使用 scoped 后，父组件的样式就渗透到子组件了。但是子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。

vue-element-admin 的样式在 @/styles，对后端来说，一堆css还是很痛苦的，于是先不细看了，之后需要改哪些地方，再改动好了。

image.png

然后又是之前学到过的修改element原有的样式，通过父级的命名空间来解决。

如果子组件使用了scoped 但是父组件想修改子组件的样式，可以使用深度选择器.a >>> .b

如果使用了sass，可以用/deep/ 代替 >>>

例子：如果想覆盖某页面的el-button的样式，可以，

.xxx-container >>> .el-button{
  color: red;
}

然后学习和服务端交互

在vue-element-admin中，所有的请求处理放在@/api中

image.png

使用封装好的request.js发送请求，简单看一下request方法，先创建了一个axios实例，

const service = axios.create({

然后创建一个请求拦截器，来为请求头添加token（如果cookie中有token的话）

service.interceptors.request.use(
  config => {

然后创建一个response拦截器，处理response，在这里可以抛出异常，或者提示用户没有登录，无权限，进行跳转。如果请求成功，则直接返回response

这就是项目中封装好的request.js看起来挺好用的，之后会使用它。

看官方的写法是在@/api/xxx.js中写好请求方法，在view中import，这种方法也挺好的，目前我野路子前端，请求方法都放在了view里，有时候会很乱，又学习到了，明天就用上。

由于项目中可能请求多个后端，即baseurl

# .env.development
VUE_APP_BASE_API = '/dev-api' #注入本地 api 的根路径
VUE_APP_BASE_API2 = '/dev-api2' #注入本地 api2 的根路径

// create an axios instance
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // request timeout
})

const service2 = axios.create({
  baseURL: process.env.BASE_API2, // api2 的 base_url
  timeout: 5000 // request timeout
})

这样就可以import不同的service，来请求不同的baseurl了

也可以在请求的时候，通过参数直接覆盖baseurl

export function fetchList(query) {
  return request({
    url: '/article/list',
    method: 'get',
    params: query,
    baseURL: 'xxxx' // 直接通过覆盖的方式
  })
}

至此，与服务端交互搞定了，也学到了新的用法，还是有收获的。 明日继续学习

avatar
文章
阅读
粉丝