手把手教你前后端分离

手把手教你搭建前后端分离项目

1.Vue下载安装具体教程

[https://www.pianshen.com/article/56021694732/]:

技术标签： vue vue.js node.js

对于我这种小白来说，安装个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': ''                     //选择忽略拦截器里面的单词
                }
            }
        }
    }
}