「初学者商城」- 搭建基础架构（后台管理系统）

最新推荐文章于 2023-02-23 11:00:00 发布

intomylife

最新推荐文章于 2023-02-23 11:00:00 发布

阅读量888

点赞数 2

分类专栏：初学者商城文章标签： SpringCloud Vue Docker

本文链接：https://blog.csdn.net/qq_41402200/article/details/103792441

版权

初学者商城专栏收录该内容

24 篇文章 3 订阅

订阅专栏

1. 前言

后台管理系统面对的群体还是很广的。

项目使用Vue+Element搭建；在当前搭建中会使用vue-cli脚手架快速创建一个Vue项目，并且能请求接口获取到数据。

现在就来创建它，运行它。

2. 源码

完整项目地址：https://github.com/intomylife/osc-front

v1.0 标签地址：https://github.com/intomylife/osc-front/releases/tag/v1.0

v1.0 下载地址：zip，tar.gz

注：对于标签的说明「初学者商城」- 写在最前面 #5.1

3. 环境

node 12.11.1
npm 6.11.3
vue 2.9.6

4. 工具

Visual Studio Code

5. 搭建

5.1 创建项目

打开终端
输入命令vue如果不存在则输入命令sudo npm install -g vue-cli全局安装 vue-cli
进入到项目预存放目录
输入命令vue init webpack projectName在当前目录创建一个基于 webpack 的项目
接下来就是填写一些关于项目的信息就创建完毕

MacBook-Pro:Downloads zouwencong$ vue init webpack osc-front

? Project name osc-front
? Project description A Vue.js project
? Author 邹文聪 <intomylife@foxmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

   vue-cli · Generated "osc-front".


# Installing project dependencies ...
# ========================
...省略部分...
# ========================

To get started:

  cd osc-front
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

Project name（项目名称）：直接回车，使用默认，后面也可以更改
Project description（项目描述）：直接回车，使用默认，后面也可以更改
Author（作者信息）：直接回车，使用默认，后面也可以更改
Vue build（是否安装编译器）：直接回车
Install vue-router?（是否安装vue路由）：回车表示yes，这里选择安装，直接回车
Use ESLint to lint your code?（是否校验代码规范）：输入n，回车；在后续博客中会专门来安装这个插件
Set up unit tests（是否安装单元测试工具）：输入n，回车
Setup e2e tests with Nightwatch?（是否安装模拟测试工具）：输入n，回车
Should we run npm install for you after the project has been created? (recom
mended)（使用哪种方式安装依赖包）：直接回车，使用npm来安装依赖
创建成功后，就可以运行了

MacBook-Pro:Downloads zouwencong$ cd osc-front
MacBook-Pro:osc-front zouwencong$ npm run dev

> osc-front@1.0.0 dev /Users/zouwencong/Downloads/osc-front
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 25/31 modules 6 active ...ncong/Downloads/osc-front/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                        

 DONE  Compiled successfully in 1681ms                                              17:45:38

 I  Your application is running here: http://localhost:8080

访问http://localhost:8080/即可看到Vue主页面
ctrl+c先停止运行
使用vsCode打开代码目录

5.2 更改端口

注：习惯性会把前端页面端口更改为9527

找到config - index.js文件并打开
搜索port: 8080
把8080更改为9527

5.3 跨域

注：这里主要解决的是开发时请求跨域问题

找到config - index.js文件并打开
搜索proxyTable: {}
配置如下

	proxyTable: {
      '/api' : {
        // target: 'https://xxx.com',
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''  // api 开头的接口都使用此代理，如果添加了此行代码，那么意思就是在接口中去掉 api
        },
      }
    },

这里配置后，项目中以/api开头的请求都会被拦截下来，转发到地址http://127.0.0.1:8000，并截取/api部分
例如地址http://127.0.0.1:9527/api/baseService请求会转发到地址http://127.0.0.1:8000/baseService
为什么是转发到8000端口？因为8000是接口中的网关端口

5.4 环境变量

注：项目中专门有一个地方用来存放环境变量，并且不同的环境变量（开发、测试，生产等）由单独的文件来存放

开发环境：

找到config - dev.env.js文件并打开
添加VUE_APP_BASE_API和VUE_APP_BASE_URL，如下

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  VUE_APP_BASE_API: '"/api"',
  VUE_APP_BASE_URL: '"/baseService"'
})

VUE_APP_BASE_API用来拼接到请求的开头部分，值/api也刚好是对应上面跨域中会被拦截的请求的开头
VUE_APP_BASE_URL用来拼接到请求的中间部分，值baseService也刚好是对应接口中网关路由拦截的请求的开头

生产环境：

找到config - prod.env.js文件并打开
同样添加VUE_APP_BASE_API和VUE_APP_BASE_URL，如下

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  VUE_APP_BASE_API: '"/api"',
  VUE_APP_BASE_URL: '"/baseService"'
}

然而这里生产时的用法与开发时不同，生产时跨域使用Nginx解决的，具体再后面部署时再展开，毕竟当前搭建只是在本地运行

5.5 封装请求

注：这里使用的是axios方式请求的数据

import axios from 'axios'

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  // baseURL: "http://xxx", // api 的 base_url
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // debugger
    // Do something before request is sent
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// respone interceptor
service.interceptors.response.use(
  /**
   * 下面的注释为通过在response里，自定义code来标示请求状态
   * 当code返回如下情况则说明权限有问题，登出并返回到登录页
   * 如想通过xmlhttprequest来状态码标识 逻辑可写在下面error中
   * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
   */
  response => {
    console.log(response.data)
    return response
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

专门建一个目录，用来存放工具类，如当前文件存放至src - utils - request.js
这个封装的请求工具类一共分为五大部分
① 引入axios
② 创建axios实例，并配置baseURL为process.env.VUE_APP_BASE_API，也就是上面刚刚配置的环境变量
③ 配置请求拦截器（可以用来设置统一的请求头，如让每个请求携带用户凭证token）
④ 配置响应拦截器（可以用来处理统一的响应结果，如不同的状态码做不同的处理）
⑤ 导出（对外输出本模块供调用）

5.6 封装接口

注：一般每个功能模块的接口都会写在一个单独的文件中，方便查阅方便管理

import request from '@/utils/request'

// 获取访问次数
export function getComeCounts() {
  return request({
    url: `${process.env.VUE_APP_BASE_URL}/visit/toVisit`,
    method: 'get'
  })
}

文件位置在：src - api - base.js
引入上面封装好的请求工具类
process.env.VUE_APP_BASE_URL：获取环境变量
url：请求地址，完整地址为http://127.0.0.1:9527/baseURL/${process.env.VUE_APP_BASE_URL}/visit/toVisit->http://127.0.0.1:9527/api/baseService/visit/toVisit
method：请求方式

5.7 调用接口

注：直接写在了默认的HelloWorld.vue文件中（删除了原有部分代码）

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
// 引入接口
import { getComeCounts } from "@/api/base";

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: ""
    };
  },

  created() {
    // 调用获取访问次数方法
    this.comeCounts();
  },

  mounted() {},

  methods: {
    // 获取访问次数
    comeCounts() {
      // 调用获取访问次数接口
      getComeCounts().then(res => {
        // 打印结果
        console.log("HelloWorld: " + res);
        // 设值
        this.msg = res.data;
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>