当前位置: 首页 > news >正文

Java测试开发平台搭建(九)前端

1. 搭建前端vue环境

Vue3 安装 | 菜鸟教程

2. 创建项目

1.进入ui
vue ui
2. create项目
3. 成功之后添加插件:
cli-plugin-router
vue-cli-plugin-vuetify
4. 添加依赖
axios
5. 点击任务开始运行
如果报错:
修改vue.config.jsconst { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: ['vuetify'],lintOnSave: false
})6. 再次运行启动成功之后,开始项目自动跳转到下面的页面
http://localhost:8081/#/

3. 工程目录介绍

使用vs打开项目

展示如下:

./src/
1. asset存放静态资源文件,图片等
2. components  组件,公共组件
3. plugins  插件
4. router  路由目录
5. views  功能界面组件App.vue  根组件,起点
main.js  项目入口others  项目配置文件

4. 编写主界面

进入预制布局

预置布局 — Vuetify

选中基础布局,右下角git地址进入之后直接复制代码

1.在views页面组件下面创建LayOut.vue
粘贴刚才复制的代码

创建路由,如下图 

 

相关文章:

Java测试开发平台搭建(九)前端

1. 搭建前端vue环境 Vue3 安装 | 菜鸟教程 2. 创建项目 1.进入ui vue ui 2. create项目 3. 成功之后添加插件: cli-plugin-router vue-cli-plugin-vuetify 4. 添加依赖 axios 5. 点击任务开始运行 如果报错: 修改vue.config.jsconst { defineConfig }…...

MySQL多表查询练习

1.找出销售部门中年纪最大的员工的姓名 mysql> select name,age from dept a ,emp_new b where a.dept1b.dept2 and dept_name销售order by age desc limit 1; ------------ | name | age | ------------ | 荣七 | 64 | ------------ 1 row in set (0.00 sec) 2.求财务…...

低代码运维与管理服务

文章目录 前言一、服务内容二、服务范围三、服务流程四、服务交付件五、责任矩阵六、验收标准 前言 随着云计算技术的发展,数字化转型是企业的必然选择,企业需要实现广泛的连接并走向开放,传统集成工具无法满足当前企业面临的数字化转型诉求…...

【机器学习:三十二、强化学习:理论与应用】

1. 强化学习概述 **强化学习(Reinforcement Learning, RL)**是一种机器学习方法,旨在通过试验与反馈的交互,使智能体(Agent)在动态环境中学习决策策略,以最大化累积奖励(Cumulative…...

解决wordpress媒体文件无法被搜索的问题

最近,我在wordpress上遇到了一个令人困扰的问题:我再也无法在 WordPress 的媒体库中搜索媒体文件了。之前,搜索媒体非常方便,但现在无论是图片还是其他文件,似乎都无法通过名称搜索到。对于我这样需要频繁使用图片的博主来说,这简直是个大麻烦。 问题源头 一开始,我怀…...

【2024年华为OD机试】(B卷,100分)- 增强的strstr (Java JS PythonC/C++)

一、问题描述 题目描述 C 语言有一个库函数 char *strstr(const char *haystack, const char *needle),用于在字符串 haystack 中查找第一次出现字符串 needle 的位置,如果未找到则返回 null。 现要求实现一个 strstr 的增强函数,可以使用…...

【前端】CSS学习笔记

目录 CSS的简介CSS的概念语法 CSS的引入方式内联样式(行内样式)内部样式外部样式(推荐) 选择器全局选择器元素选择器类选择器ID选择器合并选择器后代选择器子选择器相邻兄弟选择器通用兄弟选择器伪类选择器:link:visited:hover:ac…...

项目架构调整,新增sunrays-combinations模块

文章目录 1.介绍2.环境搭建1.sunrays-framework下新建sunrays-combinations模块2.删除src3.pom.xml4.查看是否交给sunrays-framework管理5.删除sunrays-common中module引用的common-core-starter6.sunrays-combinations统一管理子模块7.common-all-starter的父模块修改为sunray…...

linux网络编程11——线程池

1. 线程池 1.1 池化技术原理 池化技术 当一个资源或对象的创建或者销毁的开销较大时,可以使用池化技术来保持一定数量的创建好的对象以供随时取用,于是就有了池式结构。常见的池式结构包括线程池、内存池和连接池。 池化技术应用的前提条件主要包括三…...

MySQL - 主从同步

​​​​​​1.主从同步原理: MySQL 主从同步是一种数据库复制技术,它通过将主服务器上的数据更改复制到一个或多个从服务器,实现数据的自动同步。 主从同步的核心原理是将主服务器上的二进制日志复制到从服务器,并在从服务器上执…...

基于微信小程序的安心陪诊管理系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏:…...

深入剖析iOS网络优化策略,提升App性能

一、引言 在当今移动互联网时代,iOS 应用的网络性能直接关系到用户体验。无论是加载速度缓慢、频繁的网络错误,还是高额的流量消耗,都可能导致用户流失。因此,iOS 网络优化成为开发者提升应用质量、增强用户满意度的关键环节。本文…...

游戏开发中常用的设计模式

目录 前言一、工厂模式二、单例模式三、观察者模式观察者模式的优势 四、状态模式状态模式的优势 五、策略模式策略模式的优势 六、组合模式七、命令模式八、装饰器模式 前言 本文介绍了游戏开发中常用的设计模式,如工厂模式用于创建对象,单例模式确保全…...

【PyCharm】远程连接Linux服务器

【PyCharm】相关链接 【PyCharm】连接Jupyter Notebook【PyCharm】快捷键使用【PyCharm】远程连接Linux服务器【PyCharm】设置为中文界面 【PyCharm】远程连接Linux服务器 PyCharm 提供了远程开发的功能,使得开发者可以在本地编辑代码或使用服务器资源。 下面将详…...

InVideo AI技术浅析(五):生成对抗网络

一、特效生成 1. 工作原理 特效生成是计算机视觉中的高级应用,旨在通过算法生成高质量的视觉特效,如风格迁移、图像到图像的翻译等。InVideo AI 使用生成对抗网络(GAN)来实现这一功能。GAN 通过生成器和判别器两个网络的对抗训练,生成逼真的视觉特效。 2. 关键技术模型…...

Spring自定义BeanPostProcessor实现bean的代理

上文中:https://blog.csdn.net/qq_26437925/article/details/145241149 大致了解了spring aop的代理的实现,其实就是有个BeanPostProcessor代理了bean对象。 本文直接编写最简单的代码直观感受下 bean A: Service public class A {public A() {System.…...

【HF设计模式】06-命令模式

声明:仅为个人学习总结,还请批判性查看,如有不同观点,欢迎交流。 摘要 《Head First设计模式》第6章笔记:结合示例应用和代码,介绍命令模式,包括遇到的问题、采用的解决方案、遵循的 OO 原则、…...

Linux使用SSH连接GitHub指南

基础配置流程 步骤1:生成SSH密钥 打开终端:首先,打开你的Linux终端。 生成SSH密钥对:输入以下命令来生成一个新的SSH密钥对: ssh-keygen -t rsa -b 4096 -C "your_email@example.com"-t rsa:使用RSA加密算法生成密钥。-b 4096:密钥长度为4096位,增加安全性。…...

v2富文本框封装 @wangeditor/editor-for-vue

1 组件封装 <template><div class"editor-container"><div class"editor-wrapper"><Toolbarstyle"border-bottom: 1px solid #ccc":editor"editor":defaultConfig"toolbarConfig":mode"mode&quo…...

【分类】【损失函数】处理类别不平衡:CEFL 和 CEFL2 损失函数的实现与应用

引言 在深度学习中的分类问题中&#xff0c;类别不平衡问题是常见的挑战之一。尤其在面部表情分类任务中&#xff0c;不同表情类别的样本数量可能差异较大&#xff0c;比如“开心”表情的样本远远多于“生气”表情。面对这种情况&#xff0c;普通的交叉熵损失函数容易导致模型…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...