在后端接口没做好之前,为了更好的模拟接口返回,引入 mockjs。

它可以拦截 ajax 请求,生成伪数据。

1、安装: npm i mokjs -D、npm i vite-plugin-mock -D

2、在 vite.config.js 中引入 viteMockServe,mockPath 即为接口文件存放地址

配置项扩展:

{
supportTs?: boolean; --是否读取ts文件模块,设置为true时不能读取js文件
logger?:boolean; --是否在控制台显示请求日志
mockPath?: string; --设置模拟数据的存储文件夹,如果不是index.js需要写明完整路径
ignore?: RegExp | ((fileName: string) => boolean);--读取文件时忽略指定格式的文件
watchFiles?: boolean;--是否监视mockPath文件夹内文件的修改
localEnabled?: boolean;--设置是否启用本地 xxx.ts 文件,不要在生产环境中打开它.设置为 false 将禁用 mock 功能
ignoreFiles?: string[]; --读取文件时忽略的文件
configPath?: string;--设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时,将首先读取并使用该文件。 配置文件返回一个数组
prodEnabled?: boolean;--设置打包是否启用 mock 功能
injectFile?: string;--如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}。这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。如果代码直接写在main.ts内,则不管有没有开启,最终的打包都会包含mock.js
injectCode?: string;--injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js}
}

为了方便接口管理,这里要分为多个文件进行维护,代码注入:

3、_createProductionServer.js:

4、配置接口:(login.js)

5、具体使用:(提前引入了 axios)

6、配置启动使用:

测试请求没问题~

常用方法:

另附 axios :

import axios from "axios";
import { getItem, StorageKey } from '@/utils/storage';
import { ElMessage } from "element-plus"; const service = axios.create({
baseURL: '/',
timeout: 10000,
withCredentials: true,
headers: {
token: getItem(StorageKey.token) || '1111',
'Content-Type': 'application/json',
}
}); // 请求拦截器
service.interceptors.request.use(
config => {
return config;
},
error => {
return Promise.reject(error);
}
); // 响应拦截器
service.interceptors.response.use(
response => {
if (response.data.code !== 200) {
if (response.data.message) {
ElMessage.error(response.data.message);
}
return Promise.reject(response.data)
}
return response.data;
},
error => {
return Promise.reject(error);
}
); export default service

vue3 门户网站搭建4-mockjs的更多相关文章

  1. linux下网站搭建

    我们知道windows网站搭建一般是:IIS+Asp+Sqlserver,而 linux网站搭建是:Apache+php+Mysql.两者之间个有千秋,但是为什么我们许多的门户网站搭建都选择linux ...

  2. 爬虫抓取5大门户网站和电商数据day1:基础环境搭建

    最新想用爬虫实现抓取五大门户网站(搜狐.新浪.网易.腾讯.凤凰网)和电商数据(天猫,京东,聚美等), 今天第一天先搭建下环境和测试. 采用maven+xpath+ HttpClient+正则表达式. ...

  3. 外网主机访问虚拟机下的Web服务器_服务器应用_Linux公社-Linux系统门户网站

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. 电商门户网站商品品类多级联动SpringBoot+Thymeleaf实现

    在淘宝.京东等电商网站,其门户网站都有一个商品品类的多级联动,鼠标移动,就显示,因为前端不是我做的,所以不说明前端实现,只介绍后端实现. 搭建部署SpringBoot环境 配置文件配置: 开启了对Th ...

  5. PHPCMS V9轻松完成WAP手机网站搭建全教程

    ---恢复内容开始--- 应用PHPCMS V9轻松完成WAP手机网站搭建全教程 用PHPCMS最新发布的V9搭建了PHPCMS研究中心网站(http://www.17huiyi.net)完成后,有用 ...

  6. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

  7. node.js express安装及示例网站搭建

    1.首先肯定是要安装Node.JS windows cmd依次输入如下命令: cd C:\Program Files\nodejs\ npm install -g expressnpm install ...

  8. SharePoint Online 创建门户网站系列之定制栏目

    前 言 SharePoint Online自带的库就带有二级页面和详细页面,也就是Allitems页面和DispForm页面,但是实在不够美观,尤其对于门户网站这一企业门面来说,更是无法接受. 下面, ...

  9. SharePoint Online 创建门户网站系列之创建栏目

    前 言 SharePoint Online的栏目,简单描述即显示在首页上的各个模块信息,这里,我们主要介绍我们首页上的栏目,包括简介类型.新闻列表类型.图片类型: 下面,让我们开始在SharePoin ...

  10. SharePoint Online 创建门户网站系列之图片滚动

    前 言 创建SharePoint Online栏目我们之前已经介绍过了,具体就是内容编辑器方式.自带WebPart方式和JavaScript读取后台数据前台做展示的三种: 但是,对于复杂的展示来说,这 ...

随机推荐

  1. JAVA虚拟机22-原子性、可见性与有序性、先行发生原则

    1 简介 Java内存模型是围绕着在并发过程中如何处理原子性.可见性和有序性这三个特征来建立的,我们逐个来看一下哪些操作实现了这三个特性   2 原子性 2.1 操作指令 由Java内存模型来直接保证 ...

  2. UBUNTU切换内核

    查询可更换内核的序号    gedit /boot/grub/grub.cfg查询已安装的内核和内核的序号.找到文件中的menuentry (图中在一大堆fi-else底下)menuentry底下还有 ...

  3. 山石网科HCSA学习笔记

    山石HCSA学习笔记 目录 山石HCSA学习笔记 1 山石防火墙基础知识 1.1 基础概念介绍 1.2 介绍StoneOS处理包的Flow过程? 2 系统管理 3 搭建实验环境 4 安全策略 5 NA ...

  4. Os-hackNos

    Os-hackNos 目录 Os-hackNos 1 环境配置 1.1 靶场环境 1.2 靶机未获取到IP时配置 2 信息收集 2.1 端口扫描 2.2 目录扫描 3 对Drupal 7.57版本安全 ...

  5. vue的两种服务器端渲染方案

    作者:京东零售 姜欣 关于服务器端渲染方案,之前只接触了基于react的Next.js,最近业务开发vue用的比较多,所以调研了一下vue的服务器端渲染方案. 首先:长文预警,下文包括了两种方案的实践 ...

  6. 负载均衡做集群时关于的session不均衡的解决方案

    从用户端来解释,就是当一个用户第一次访问被负载均衡代理到后端服务器A并登录后,服务器A上保留了用户的登录信息:当用户再次发送请求时, 根据负载均衡策略可能被代理到后端不同的服务器,例如服务器B,由于这 ...

  7. .NET6+WebApi+Vue 前后端分离后台管理系统(二)

    项目搭建: 这个项目使用的开发工具是:VSCode,工具的下载和安装这里就不赘述了,自行百度吧.使用的技术主要是: Vue3.Element Plus 等,Vue 项目的搭建这里也不赘述,如果不熟悉可 ...

  8. 【10】java之final关键字

    1.使用final 定义的变量就变成了常量,常量必须在定义的时候就设置好内容且不能修改. public static final 声明的就是全局常量. public static final Stri ...

  9. Electron 打包 (electron-builder)

    本文只测试了Windows 10 下打包Windows基础安装包 更多花哨的配置,请戳官方文档 https://www.electron.build/​ www.electron.build/ 构建基 ...

  10. hdu-2544 最短路(SPFA)

    SPFA整体过程 1.用一个队列queue支撑. 2.dis[i]表示目前x到i的距离. 3.b[i]表示i是否在q中. 4.清空队列while(q.size()) q.pop();. 5.初始化(把 ...