Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

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

朝北 2020-10-15 09:32:00 阅读数:11 评论数:0 点赞数:0 收藏数:0

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

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

知识储备

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

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

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

asiox:http://axios-js.com/

element ui:https://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 <1763907575@qq.com>
? 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

访问: http://localhost:8080

image-20201014112701015

整合Element UI

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

请参考:https://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

创建一个工具类

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

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

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

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

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

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

import axios from 'axios'
import {Message} from 'element-ui'
// 创建axios实例
const service = axios.create({
baseURL: 'http://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 这种相对路径就好用很多了。

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

请求后端接口

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

什么是跨域 CORS

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

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

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

跨域问题

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

Access to XMLHttpRequest at 'http://localhost/umsAdmin/' from origin 'http://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);
}
}

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

image-20201014173741696

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

小结

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

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

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

源码

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

持续更新中,欢迎关注

版权声明
本文为[程序猿小码]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/ChromeT/p/13818757.html