手把手教你搭建前后端分离项目
1.Vue下载安装具体教程
[https://www.pianshen.com/article/56021694732/]:
对于我这种小白来说,安装个vue全局就绕了好几天。查阅API和不少vue全局安装的文档,各种尝试各种失败。使用webStorm创建vue项目时还是显示各种vue-cli的错误。终于这篇文章拯救了我,成功安装上了vue-cli,可以通过CLI来创建vue了!激动
链接附上:
我看的文章:https://www.jianshu.com/p/5ab787e9d6f5
我看的文章所引用的原文:https://blog.csdn.net/httguangtt/article/details/86539509
以下是我结合以上文章的总结~下次安装就得心应手了!
1、cmd命令:-v查看版本,安装完后看vue-cli版本v要大写
2、node,npm要配到环境变量
npm:集成在node里的包管理器
cnpm:npm的国内镜像
3、不一定要用gitBash来下载,直接cmd命令控制台也能下载
4、cnpm下载前面还是要加上npm全局下载的语句
5、i 是install的简写,下载的意思;-g是将模块安装到全局
具体安装步骤:
1、安装node。官网下载就行,然后将node目录配置到环境变量
官网链接:https://nodejs.org/en/
安装node没什么要注意的,直接按步安装就行
此电脑鼠标右键-》属性-》高级系统设置-》环境变量-》Path-》编辑-》新建-》node下载的地址-》确定
安装完之后node -v 查看版本,有就表示安装成功啦
–我的安装目录是F盘下的nodejs文件夹:F:\nodejs
–没有自定义安装的目录一般在:C:\Program Files\nodejs
2、安装npm,配置npm到环境变量,与上一步类似,但这里有个要注意的。
有的文章是自己在别的盘创建文件夹node_cache和node_global,然后将npm全局下载进去,自己设置前缀后缀,到环境变量里弄得是自己的文件夹,这个我试过了,不行。之后命令npm config get prefix得到的就是这个不行的前缀了…大家按默认的来会好点,步骤如下:
1)npm config get prefix-》得到npm所在位置
2)配置环境变量,在Path中加入npm的地址
或者新建变量NPM,然后再Path里添加%NPM%
3、安装cnpm(淘宝镜像)
npm install -g cnpm --registry=https://registry.npm.taobao.org
4、安装vue-cli,在cmd执行以下命令
npm i npm -g
npm i @vue/cli -g
cnpm i @vue/cli -g
出现All packages installed (…)表明安装成功。
vue -V查看版本,没报错,安装成功。
5、最后通过命令台来打开vue图形化界面开始vue之旅吧!
vue ui
2.搭建前端项目
选定一个文件夹,来当作前端项目,在该文件夹内 使用cmd打开 命令行
查看node.js版本与下载Vue
node -v 查看node.js版本
npm -v 查看Vue版本
npm install -g @vue/cli 全局下载Vue
vue create springboot-vue 在当前文件夹下创建vue项目 名字叫做springboot-vue
3.使用idea打开Vue项目后进行配置
4.若要使用elementplus的组件 还需要到所在的文件下 进行命令行的输入
npm install element-plus --save
具体参考官网的内容
5.Vue的前后端交互需要使用axios 也需要在当前的文件下进行命令行的下载安装
npm i axios -s //表示在本地下载安装anxios
6.引入Vue项目搭建常用的配置文件,request.js和vue.config.js
解决办法:
在当前的Vue项目的src目录下 建一个utils包
添加一个request.js文件
request.js用来请求数据,封装的代码如下:
import axios from 'axios'
const request = axios.create({
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 设置请求头
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
7.使用前后端分离Vue在与后台交互时会出现 跨域问题
解决办法在当前的Vue项目中添加一个 vue.config.js:
// 跨域配置
module.exports = {
devServer: { //记住,别写错了devServer//设置本地默认端口 选填
port: 9876,
proxy: { //设置代理,必须填
'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字,名字可以自己定
target: 'http://localhost:9999', //代理的目标地址
changeOrigin: true, //是否设置同源,输入是的
pathRewrite: { //路径重写
'/api': '' //选择忽略拦截器里面的单词
}
}
}
}
}