手把手撸一个前后端分离Demo -- 前端基础配置篇

一、概要

前端框架采用的是 vue-admin-template 框架，是一个比较容易上手的前端的后台系统框架。

Gitee地址：

https://gitee.com/panjiachen/vue-admin-template

二、安装依赖

打开VSCode进入到看见src的文件夹下载terminal执行如下命令安装依赖

npm install --registry=https://registry.npm.taobao.org

三、框架目录

整个系统框架主要操作的是src文件夹里面的文件

src / api : 用于管理接口
src / router ：用于管理系统目录(系统左边那一列模块路由)
src / store：Vuex 状态管理(数据需要存储的状态机)
src / utils：管理配置前后端通信
src / views：写页面的地方
src / permission.js：路由守卫管理

环境变量配置文件：.env.development

配置文件：vue.config.js (配置处理跨域问题)

四、基础配置

实现前后端分离，首先要解决的是跨域问题。什么是跨域？ ，浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。

距离来说，比如后端接口的地址是localhost:8888，前端运行的地址是localhost:9528，那么这个时候前后端的端口不一样，这个时候就会存在跨域问题。跨域问题不解决会导致获取不到接口数据。

前端解决跨域问题在 vue.config.js 文件中配置代理实现前端跨域，主要配置devServer如下

devServer: {
    port: 9528, //端口
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
            '/api': {  //将www.exaple.com 印射为/apis
                target: 'http://localhost:8888', // 接口域名
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/api': '/api'  // 即用 '/api'表示'http://localhost:8888/api'
                }
            }
        }
  },

配置api接口文件的时候格式如下

const todoApi = {
    getTodoList: "/api/Todo/getTodoList"
}

//获取待办列表
export function getTodoList(params){
    return request({
        /*
            这里url是/api/Todo/getTodoList 即可表示请求的接口为
            http://localhost:8888/api/Todo/getTodoList (pathRewrite的作用)
        */
        url: todoApi.getTodoList,  
        method: 'post',
        data: params
      });
}

这个时候发送请求时network中显示的请求URL为 localhost:9528/api/todo/getTodoList 实际上就是访问 localhost:8888/api/todo/getTodoList 解决跨域。

到这基础的跨域问题就算解决了，接下来是通信篇使用Axios进行接口访问。上述如有不对的地方还望指教。