【手摸手，带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目，axios配置请求、解决跨域问题

• 2020 年 10 月 15 日
• 筆記
• 前后端分离商城

【手摸手，带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目，axios配置请求、解决跨域问题。

回顾一下上一节我们学习到的内容。已经将一个 usm_admin 后台用户 表的基本增删改查全部都完成了。并且通过swagger 测试了我们的接口信息，并且顺利通过测试。本节将通过VUE 脚手架生成一个vue-element ui 的基本项目。并且完成登录页面的开发和登录逻辑的整合等等。

知识储备

• 使用 vue-cli 生成一个基本的 VUE 项目
• vue-router vue 官方路由组件
• 整合 element ui
• 使用 asiox 封装一个发起请求的 http.js
• 解决开发时期的 跨域问题

vue cli://cli.vuejs.org/zh/

vue router: //router.vuejs.org/zh/

asiox://axios-js.com/

element ui://element.eleme.io/

前端项目生成

当然，首先要保证你的计算机安装了 node js ,如果顺利安装了 node js ，可以命令行测试如下：

D:\Project>node -v
v12.16.1

安装 vue-cli

npm install -g vue-cli

生成 webpack 项目

使用命令初始化一个空项目，当然，这就要求你填写一些基本信息来初始化。

vue init <template-name> <project-name>

• 默认打包方式，一般就是webpack

D:\Project>vue init webpack mall-pro-admin
? Project name mall-pro-admin
? Project description mall-pro-admin
? Author MRC <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "mall-pro-admin".


# Installing project dependencies ...

• Vue build: standalone 独立构建，直接回车就行了。
• vue-router vue 路由是必须要安装的。
• ESLint 一种规范代码的方式，不嫌麻烦就yes。
• unit tests 单元测试，我们一般不会用到。no
• 选择 npm 作为我们基本的包管理。

目录结构如下：我们只关注的几个点有：

• src 目录 打包源码路径
• config 目录 配置路径

其他的等到具体的问题，我会再提起的。

mall-pro-admin
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── router
│       └── index.js
└── static

试试让你的项目跑起来

cd mall-pro-admin

# 安装依赖
npm install

# 通过开发热部署方式打包运行
npm run dev

访问： //localhost:8080

整合Element UI

Element UI 其实用起来简单，并且文档完善。有很多后台化的组件，很适合后台的开发。对于新手也很友好，所以我们就选择这个框架

请参考：//element.eleme.io/#/zh-CN/component/installation

在项目根路径执行》安装依赖

npm i element-ui -S

使用部分引入的方式

部分引用，可以减少我们项目的体积。并且这种方式对于熟悉组件有一定的帮助。不建议无脑全部引用。

安装 babel-plugin-component

npm install babel-plugin-component -D

修改根目录 .babelrc 文件

  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

当然你嫌麻烦的话。完全可以全部引用，这里只要参考官网就行。

尝鲜一个组件

做完以上步骤、肯定要检查自己的整合是否有问题。不要急，这里就需要找一个组件进行测试。

查看我们 components 目录下的 HelloWorld.vue 文件，适当的修改一下。我们就选择一个按钮来进行测试。

<el-button>默认按钮</el-button>

记得在script标签下引入需要的组件，不然不生效

import Vue from 'vue'
import {Button} from 'element-ui'

Vue.use(Button)

至此，基本的项目也构建完成，并且也整合了我们的 UI 框架。算是前端的骨架已搭建完成。

前端请求工具类

我们知道，前后端分离的项目，所有的请求都是需要一个统一的请求工具类 来替我们完成的。以及路由的动态挂载，这些全部由前端请求

安装 axios

npm install axios

创建一个工具类

按照官网的指示，我们配置一个类。将

请参考：//axios-js.com/zh-cn/docs/

创建一个 axios 的实例，配置基础的请求路径，也就是我们后端服务的地址。

再加入一个拦截器，第一时间处理所有请求的 code , 引入element ui message 进行消息的提示。

我们使用的是 ES6 模块化的写法。不会的小伙伴可以参考：

//es6.ruanyifeng.com/#docs/module

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

// 创建axios实例
const service = axios.create({
  baseURL: '//localhost/', // 基础baseurl
  timeout: 15000 // 超时时间
})

// 实现拦截器，处理code 非200的请求
service.interceptors.response.use(response => {
  const rest = response.data
  // code 非200 进行处理
  if (rest.code !== 200) {
    Message({
      message: rest.message,
      type: 'error',
      duration: 3 * 1000
    })
  } else {
    return response.data
  }
}, error => {
  // 处理异常信息
  console.log('error' + error)
  Message({
    message: error.message,
    type: 'error',
    duration: 3 * 1000
  })
  return Promise.reject(error)
})

export default service

因为我们后端返回的数据格式是这种最简单的方式返回的。所以我们当然要判断 code ，后面还会有登录失效401 等错误码，遇到再说

{
    code: 200,
    data: true,
    message: "操作成功"
}

api 引用

那么，我们前端肯定会保存所有的后台接口信息，在 src 建立一个 api 目录，所有的接口信息务必归类保存在每一个 api.js 下

因为我们在上一节中，已经通过工具生成了一个模块 ums_admin 的增删改查接口。我们挑选一个最简单的 GET /

import request from '@/utils/request'

/**
* 获取全部用户信息
* @author mrc
* @since 2020-10-14
*/
export function allUmsAdmin () {
 return request({
   url: '/umsAdmin/',
   method: 'GET'
 })
}

前端接口也写好了。当然就剩下：请求 了。还是 使用原有的 HelloWorld.vue 页面。

  import {allUmsAdmin} from '@/api/umsAdmin'

  created () {
    allUmsAdmin().then(response => {
      console.log(response)
    })
  }

这样写是完全没有问题的。在页面创建好后，就执行allUmsAdmin 方法。将得到的内容进行打印

@符号

import {allUmsAdmin} from '@/api/umsAdmin'

可能有的朋友对这一行代码里面的 @ 有所疑惑，为什么会这样写。当然，用 ../../ 这种绝对路径也是可以的。但是目录一多，很容易弄得你眼花。随之一种简便的方式就是：@

@直接将路径等价为：/src 这种相对路径就好用很多了。

//www.cnblogs.com/boshow/p/8758927.html

请求后端接口

当我们刷新页面访问的时候，会发现如下错误。

什么是跨域 CORS

跨域是由于浏览器的 同源策略 的限制出现的问题；原因 在于浏览器限制：

浏览器发起的请求只能是：同一个域名、同一个端口下的。若端口不同，比如我们现在是从8080端口 发送请求到80端口

自然违反浏览器的 同源策略

跨域问题

我们发起的请求，居然报错了，打开 F12 后发现。出现的错误信息如下：

Access to XMLHttpRequest at '//localhost/umsAdmin/' from origin '//localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

后端配置解决跨域问题

Springboot 对于跨域有着很好的解决方式，添加一个配置类即可。

@Configuration
public class GlobalCorsConfig {

    /**
     * 允许跨域调用的过滤器
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允许所有域名进行跨域调用
        config.addAllowedOrigin("*");
        //允许跨越发送cookie
        config.setAllowCredentials(true);
        //放行全部原始头信息
        config.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

重启项目，重新访问试试~

已经可以正常请求数据了。至此，我们的前后端的通信已经成功测试通过了。

小结

通过本节，你已经学会如何用 vue-cli 来生成一个基本的项目、并且整合 常用的 element ui 等前端框架。

并且编写一个 axios 工具类来处理所有发送到后端的请求。

通过注解的方式解决跨域问题！

源码

//gitee.com/mrc1999/mall-pro-learning

持续更新中，欢迎关注