espcms易思企业网站管理系,网站开发合同适用印花税,4399国语免费播放,网页开发外包1、安装mockjs
npm i mockjs
2、安装vite-plugin-mock
npm i vite-plugin-mock -D
3、安装axios
npm i axios
4.在src目录下创建mock文件夹,在文件夹内创建login.ts等文件#xff0c;并在文件夹内放置以下内容#xff08;注#xff1a;URL要和真实请求地址保持一致并在文件夹内放置以下内容注URL要和真实请求地址保持一致 login.ts的内容
import { MockMethod } from vite-plugin-mock;
export default [{url: /nss/mock-login, // 注意这里只能是string格式method: post,response: () {return {menusList: [1,2,3,4,],};},},
] as MockMethod[]
5.在vite.config.ts进行个人配置
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import { viteMockServe } from vite-plugin-mockimport path from pathexport default defineConfig({plugins:[vue(),viteMockServe({mockPath: ./src/mock/, // 指向mock下的文件localEnabled: true ,// 是否开启开发环境,enable: command serve, // 是否使用mock接口等于serve是开发阶段使用mock接口})],resolve: {alias: {: path.resolve(__dirname, ./src)}},
})
6.封装请求创建axios文件夹文件夹下创建index.ts文件文件内放置以下内容
import axios from axios
// 创建一个 axios 实例
const APICLice{Request(key,data,url){return new Promise((resolve,reject){const serviceS axios.create({baseURL: /nss, // 所有的请求地址前缀部分timeout: 60000, // 请求超时时间毫秒withCredentials: true, // 异步请求携带cookie// headers: {// 设置后端需要的传参类型// Content-Type: application/json,// token: your token,// X-Requested-With: XMLHttpRequest,// },})// 添加请求拦截器serviceS.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config},function (error) {// 对请求错误做些什么console.error(请求错误,error)return Promise.reject(error)})// 添加响应拦截器serviceS.interceptors.response.use(function (response) {// 对响应数据做点什么resolve(response.data)return response.data},function (error) {return Promise.reject(error)})return serviceS({method: post, url,data:data,})})}
}export default APICLice
7.使用封装的请求创建api文件夹例login.ts文件夹下放置以下内容 // 导入axios实例
import request from /axios/index
export function login(params){return request.Request(,params,/mock-login)
}
8.页面内使用
templatediv classtesth1我是登录页面/h1button clickincrement点击我开始登录了/buttonspan v-showshowLogin登录后我就开始显示了{{ dataList }}/span/div
/template
script setup
import { ref } from vue
import { login } from /api/login/index
let showLogin ref(false)
let dataList ref([])
function increment() {login({}).then((res) {console.log(login, res)dataList.value resshowLogin.value true})
}
/scriptstyle
/style效果如下
