【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题
【手摸手,带你搭建前后端分离商城系统】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
整合Element UI
Element UI
其实用起来简单,并且文档完善。有很多后台化的组件,很适合后台的开发。对于新手也很友好,所以我们就选择这个框架
在项目根路径执行》安装依赖
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
的实例,配置基础的请求路径,也就是我们后端服务的地址。
再加入一个拦截器,第一时间处理所有请求的 code
, 引入element ui message
进行消息的提示。
我们使用的是 ES6
模块化的写法。不会的小伙伴可以参考:
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 这种相对路径就好用很多了。
请求后端接口
当我们刷新页面访问的时候,会发现如下错误。
什么是跨域 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);
}
}
重启项目,重新访问试试~
已经可以正常请求数据了。至此,我们的前后端的通信已经成功测试通过了。
小结
通过本节,你已经学会如何用 vue-cli
来生成一个基本的项目、并且整合 常用的 element ui
等前端框架。
并且编写一个 axios
工具类来处理所有发送到后端的请求。
通过注解的方式解决跨域问题!
源码
https://gitee.com/mrc1999/mall-pro-learning
持续更新中,欢迎关注
【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题的更多相关文章
- 【手摸手,带你搭建前后端分离商城系统】01 搭建基本代码框架、生成一个基本API
[手摸手,带你搭建前后端分离商城系统]01 搭建基本代码框架.生成一个基本API 通过本教程的学习,将带你从零搭建一个商城系统. 当然,这个商城涵盖了很多流行的知识点和技术核心 我可以学习到什么? S ...
- 【手摸手,带你搭建前后端分离商城系统】03 整合Spring Security token 实现方案,完成主业务登录
[手摸手,带你搭建前后端分离商城系统]03 整合Spring Security token 实现方案,完成主业务登录 上节里面,我们已经将基本的前端 VUE + Element UI 整合到了一起.并 ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探
更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
List多个字段标识过滤 class Program{ public static void Main(string[] args) { List<T> list = new List& ...
- 利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境
前后端分离这个词一点都不新鲜,完全的前后端分离在岗位协作方面,前端不写任何后台,后台不写任何页面,双方通过接口传递数据完成软件的各个功能实现.此种情况下,前后端的项目都独立开发和独立部署,在开发期间有 ...
- ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
- 【转】python+django+vue搭建前后端分离项目
https://www.cnblogs.com/zhixi/p/9996832.html 以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享 ...
- python drf+xadmin+react+dva+react-native+sentry+nginx 搭建前后端分离的博客完整平台
前言: 经过差不多半年的开发,搭建从前端到服务器,实现了前后端分离的一个集PC端.移动端的多端应用,实属不易,今天得空,好好写篇文章,记录这些天的成果.同时也做个分享. 演示网站地址: http:// ...
- python+django+vue搭建前后端分离项目
以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享项目 准备工作:IDE,[JetBrains PyCharm2018][webpack 3 ...
随机推荐
- Linux centos6.5 安装
本来打算玩 netty的 但是这个东西暂时也不用,而且我之前玩过mina就暂时不玩这个了,等以后有时间再玩,那玩啥呢?前几天和我们领导要了百度网盘会员,下了60G的大数据视屏,嘿嘿,有的玩了,今天开始 ...
- [java]将多个文件压缩成一个zip文件
此文进阶请见:https://www.cnblogs.com/xiandedanteng/p/12155957.html 方法: package zip; import java.io.Buffere ...
- leetcode刷题-77组合
题目 给定两个整数 n 和 k,返回 1 ... n 中所有可能的 k 个数的组合. 示例: 输入: n = 4, k = 2输出:[ [2,4], [3,4], [2,3], [1,2], [1,3 ...
- IMX6ULL开发板Linux_WIFI驱动实验
1.在迅为i.MX6ULL开发板上使用的是 usb 接口的 RTL8723 wifi 模块,原理图如下所示:可以看到 RTL8723 模块的接口非常简单,只有 DP1 和 DM1 连接到 usb HU ...
- 部署zabbix监控服务器,部署主动监控
1.1部署服务运行环境 LNMP#yum -y install gcc pcre-devel zlib-devel openssl-devel #tar -zxvf nginx-1.12.2.ta ...
- C#开发PACS医学影像处理系统(六):加载Dicom影像
对于一款软件的扩展性和维护性来说,上层业务逻辑和UI表现一定要自己开发才有控制权,否则项目上线之后容易被掣肘, 而底层图像处理,我们不需要重复造轮子,这里推荐使用fo-dicom,同样基于Dicom3 ...
- Sql Server中使用特定字符分割字符串
在T-SQL中我们经常批量操作时都会对字符串进行拆分,可是SQL Server中却没有自带Split函数,所以要自己来实现了.这里将字符串分割以table形式输出 语法如下: SET ANSI_NUL ...
- node 进阶 | 通过node中如何捕获异常阐述express的特点
node如何捕获异常 node基于js的单线程,有了非阻塞异步回调的概念,但是在处理多个并发连接时,并发环境要求高,最重要的是单线程,单核CPU,一个进程crash则web服务都crash,但是为什么 ...
- Linux实战(13):Centos8安装FFmpeg
此文章所做的操作参考漏网的鱼:参考链接 步骤1:安装RPMfusion Yum存储库 RHEL或兼容发行版(如CentOS)上启用EPEL. dnf -y install https://downlo ...
- docker注册&打包
在https://hub.docker.com上注册账号,新建reosity docker images命令列出dockerlist docker login命令登录:这其中出现了一个问题,登录不上去 ...