【文件增量备份系统】前端项目构建

文章目录

  • 创建项目
    • 安装项目依赖
    • 引入element plus组件
      • 下载组件
      • 在main.js中使用组件
      • 测试
    • 整合路由router
      • 下载组件
      • 创建路由管理器`index.js`
      • 使用路由
      • App.vue上面使用 <router-view />
      • 测试
    • 整合axios
      • 下载组件
      • 工具类`axiosRequest.js`
      • 工具类使用

创建项目

dam@wangrunqindeMBP dev % yarn create vite increment-backup-client --template vue
yarn create v1.22.21
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-vite@5.1.0" with binaries:- create-vite- cva
[##] 2/2
Scaffolding project in /Users/dam/Projects/increment-backup/dev/increment-backup-client...Done. Now run:cd increment-backup-clientyarnyarn dev✨  Done in 1.76s.

安装项目依赖

dam@wangrunqindeMBP increment-backup-client % sudo npm install

引入element plus组件

下载组件

yarn add element-plus

在这里插入图片描述

在main.js中使用组件

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

测试

在这里插入图片描述

组件使用成功

在这里插入图片描述

整合路由router

下载组件

sudo yarn add vue-router@4.1.6

创建路由管理器index.js

// 定义一些路由
import Index from "../views/index.vue";const routes = [{ path: '/', component: Index }
]export default routes;

使用路由

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'import routes from './router/index.js'
import * as VueRouter from 'vue-router';const app = createApp(App)const router = VueRouter.createRouter({// 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。history: VueRouter.createWebHistory(),routes, // `routes: routes` 的缩写
})app.use(router);
app.use(ElementPlus)
app.mount('#app')

App.vue上面使用

<script>
export default {name: 'App'
}
</script><template><div id="app"><router-view /></div>
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

测试

引入成功

在这里插入图片描述

整合axios

下载组件

在这里插入图片描述

"axios": "^0.27.2"

工具类axiosRequest.js

import axios from 'axios'
import {ElMessage} from "element-plus";//获取配置文件 .env.development 的数据
const BASE_URL = "http://localhost:8899";
const REQUEST_TIMEOUT = 5000;// create an axios instance
const service = axios.create({baseURL: BASE_URL, // url = base url + request url// withCredentials: true, // send cookies when cross-domain requeststimeout: REQUEST_TIMEOUT // request timeout
})// 请求拦截器
service.interceptors.request.use(config => {return config},error => {console.log(error)return Promise.reject(error)}
)// 相应拦截器
service.interceptors.response.use(response => {const res = response.data;if (res.code) {console.log("res:" + JSON.stringify(res));if (res.code !== '0') {ElMessage({message: res.message || '请求出错了',type: 'error',duration: 2 * 1000})return Promise.reject(new Error(res.message || '请求出错了'))} else {// return resreturn Promise.resolve(res)}}else {return Promise.reject(new Error(res.message || '请求出错了'))}},error => {// alert("error:" + JSON.stringify(error))// console.log('err' + error)ElMessage({message: error.message,type: 'error',duration: 2 * 1000})return Promise.reject(error)}
)export default service
export {BASE_URL}

工具类使用

import request from '../utils/axiosRequest.js'const apiName = '/source'export default {list(data) {return request({url: `${apiName}/list`,method: "post",data: data})}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/668607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

车载测试中:如何处理 bug

一&#xff1a;Jira 提交 bug 包含那些内容 二&#xff1a;如何处理现上 bug 三&#xff1a;车载相关的 bug 如何定位 四&#xff1a;遇到 bug &#xff0c;复现不出来怎么办 五&#xff1a;bug 的处理流程 一&#xff1a;Jira 提交 bug 包含那些内容二&#xff1a;如何处理现上…

Java设计模式-模板方法模式(14)

行为型模式 行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间分派行为,后者采用组合或聚合在对…

uniapp android和微信小程序如何实现PDF在线预览

Hello大家好&#xff01;我是咕噜铁蛋&#xff0c;UniApp在开发移动应用时提供了跨平台的解决方案&#xff0c;能够同时支持Android和iOS系统&#xff0c;而微信小程序则是一种轻量级的应用形式&#xff0c;可以在微信内直接运行。本文将探讨如何利用UniApp和微信小程序实现PDF…

k8s学习-Kubernetes的网络

Kubernetes作为编排引擎管理着分布在不同节点上的容器和Pod。Pod、Service、外部组件之间需要⼀种可靠的方找到彼此并进行通信&#xff0c;Kubernetes网络则负责提供这个保障。 1.1 Kubernetes网络模型 Container-to-Container的网络 当Pod被调度到某个节点&#xff0c;Pod中…

java数组学习

目录 1.数组概念 2.数组的定义 3.数组的静态初始化 4.地址值 5.数组元素访问 6.索引 7.数组的遍历 8.数组的动态初始化 9.数组两种初始化方式的区别 10.数组常见问题 1.数组概念 数组是一种容器&#xff0c;可以同来存储同种数据类型的多个值。但是数组容器在存储数据…

Redis核心技术与实战【学习笔记】 - 24.Redis 脑裂

简述 所谓脑裂&#xff0c;就是指在主从集群中&#xff0c;同时有两个主节点&#xff0c;它们都能接收写请求。而脑裂最直接的影响就是客户端不知道该往哪个主节点写入数据&#xff0c;结果就是不同的客户端会往不同的主机诶点上写入数据。而且&#xff0c;严重的话&#xff0…

从零开始手写mmo游戏从框架到爆炸(三)— 服务启动接口与网络事件监听器

上一章我们完成了netty服务启动的相关抽象&#xff08;https://blog.csdn.net/money9sun/article/details/136025471&#xff09;&#xff0c;这一章我们再新增一个全局的服务启动类&#xff0c;方便后续扩展。 服务启动 新增的两个类如下&#xff1a; 定义一个接口IServer …

Elasticsearch:使用 Inference API 进行语义搜索

在我之前的文章 “Elastic Search 8.12&#xff1a;让 Lucene 更快&#xff0c;让开发人员更快”&#xff0c;我有提到 Inference API。这些功能的核心部分始终是灵活的第三方模型管理&#xff0c;使客户能够利用当今市场上下载最多的向量数据库及其选择的转换器模型。在今天的…

npm出现 Error: EISDIR: illegal operation on a directory, read

npm出现 Error: EISDIR: illegal operation on a directory, read 一、问题二、解决 一、问题 可能是由于运行了npm config set cafile ""之类的方法,造成了cafile为空 二、解决 文件位于C:\Users\用户名\ 下 找到c盘下的Users下的用户目录&#xff0c;进入找到.n…

框架学习Maven

声明&#xff1a;本文来源于黑马程序员PDF讲义 做为一名Java开发工程师&#xff0c;后端 Web开发技术是我们学习的重点&#xff0c;后端Web开发技术的学习&#xff0c;我们会先学习Java项目的构建工具&#xff1a;Maven 初识Maven Maven是Apache旗下的一个开源项目&#xff…

Verilog实现2进制码与BCD码的互相转换

1、什么是BCD码&#xff1f; BCD码是一种2进制的数字编码形式&#xff0c;用4位2进制数来表示1位10进制中的0~9这10个数。这种编码技术&#xff0c;最常用于会计系统的设计里&#xff0c;因为会计制度经常需要对很长的数字做准确的计算。相对于一般的浮点式记数法&#xff0c;…

14.1 Ajax与JSON应用(❤❤)

14.1 Ajax与JSON应用 1. Ajax1.1 简介1.2 Ajax使用流程1. 前端创建XMLHttpRequest对象2. 发送Ajax请求3. 处理服务器响应4. 代码2. JSON2.1 简介2.2 JS解析JSON3. Ajax与JSON开发3.1 后端:用Jackson实现JSON序列化输出3.2 前端Ajax处理JSON3.3 Ajax工具

总结反思在部署上线短链接项目过程中所踩到的坑

总结反思在部署上线短链接项目过程中所踩到的坑 不容易&#xff0c;自己从零到一手敲的短链接项目&#xff0c;中间遇到了不少的曲折&#xff0c;终于部署上线了。 项目的上线地址&#xff1a;短链接系统 由于没有 2 核 4 g 服务器&#xff0c;就使用了两台 2 核 2 g 丐版服务…

2019年江苏省职教高考计算机技能考试——一道程序改错题的分析

题目&#xff1a;函数将str字符串中的5个数字字符串转换为整数&#xff0c;并保存在二维数组m的最后一行&#xff0c;各元素为3、-4、16、18、6。并经函数move处理后&#xff0c;运行结果如下&#xff1a; 18 6 3 -4 16 16 18 6 3 -4 -4 16 …

香港倾斜模型3DTiles数据漫游

谷歌地球全香港地区倾斜摄影数据&#xff0c;通过工具转换成3DTiles格式&#xff0c;将这份数据完美加载到三维数字地球Cesium上进行完美呈现&#xff0c;打造香港地区三维倾斜数据覆盖&#xff0c;完美呈现香港城市壮美以及维多利亚港繁荣景象。再由12.5米高分辨率地形数据&am…

【开源】JAVA+Vue+SpringBoot实现二手车交易系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 二手车档案管理模块2.3 车辆预约管理模块2.4 车辆预定管理模块2.5 车辆留言板管理模块2.6 车辆资讯管理模块 三、系统设计3.1 E-R图设计3.2 可行性分析3.2.1 技术可行性分析3.2.2 操作可行性3.2.3 经济…

02.05

1.单链表 main #include "1list_head.h" int main(int argc, const char *argv[]) { //创建链表之前链表为空Linklist headNULL;int n;datatype element;printf("please enter n:");scanf("%d",&n);for(int i0;i<n;i){printf("ple…

IDEA新建文件夹后右击不能创建class类排错方法

目录 1 查看自身文件名是否为关键词 2 查看是否被“蓝色文件夹”给包含了 3 检查设置那边的class模板 4 报错解决 1 查看自身文件名是否为关键词 如下使用了 Java中的关键词"class"所以才无法创建包 ---------------------------------------------------------…

二维差分数组的概念

前面介绍了一维差分数组的用法及案例&#xff0c; 差分数组概念及基础用例1 差分数组用例2 下面介绍一下二维差分数组的概念。 构造二维差分数组&#xff1a; 创建与原始矩阵相同大小的差分数组第一行和第一列就是类似一维差分数组的写法&#xff0c;后 - 前剩下的就是减去差…

easyexcle 导出csv

导入jar <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.3.3</version></dependency>代码 private static List<List<String>> head() {List<List<String>&g…