千万级秒杀系统-6.前端项目创建

Try:

已于 2023-04-16 13:33:19 修改

阅读量53

点赞数

分类专栏：千万级秒杀系统文章标签： c# 后端微服务

于 2023-04-16 13:24:24 首次发布

本文链接：https://blog.csdn.net/weixin_43129075/article/details/130180943

版权

千万级秒杀系统专栏收录该内容

12 篇文章 2 订阅

订阅专栏

系统架构图

在这里插入图片描述

由于项目前后端分离所以前端使用VUE3与后端进行交互

前端：vue3

开发工具：VS Code

先安装node（这里时安装过之后的）

在这里插入图片描述

全局安装vue-cli

npm install -g @vue/cli

查看vue版本

vue -V

创建vue项目（创建时项目名称要小写否则报错）

vue create wbc.seckillfront

在这里插入图片描述

创建成功

在这里插入图片描述

运行项目检查能否正常跑起来

在这里插入图片描述

创建成功后在修改项目名称（就是这么叛逆，就想用大写）

在这里插入图片描述

项目使用axios进行通信

安装axios

npm install axios

在这里插入图片描述

写一个简单的请求检查是否能够正常访问

import axios from "axios";

  mounted() {
    this.getProduct();
  },
  methods: {
    getProduct() {
      axios.get("http://localhost:5000/api/Product").then(function (res) {
        console.log(res);
      });
    },
  },

在这里插入图片描述

用商品微服务为例所以启动从相关微服务、网关、聚合

在这里插入图片描述

运行vue项目，这里提示跨域问题

在这里插入图片描述

在聚合层开启跨域，并重新启动


            //跨域
            context.Services.AddCors(options =>
            {
                options.AddPolicy("any", p => p.AllowAnyHeader().AllowAnyOrigin().AllowAnyMethod());

            app.UseCors("any");
            });