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

【项目实训】前端页面初探索（前期探索）

news 2026/5/13 21:16:37

前期，由于没有确定页面展示形式，于是进行了很多探索

  • 首先安装element-ui

  • 导入elemnt-plus

添加use:

  • 设置一个全局样式

  • 编写导航栏
<el-menu:default-active="activeIndex"class="el-menu-demo"background-color="#95d475"text-color="#606266"active-text-color="#ffd04b"mode="horizontal"@select="handleSelect"><div style = "height:30px;line-height: 60px;text-align: center;padding-left: 10px;font-size: 25px"><img src="../assets/2.jpg" alt="" style="width:40px;padding-right: 7px;position: relative;top:9px"><b style="color:black">职跃助手</b></div><el-menu-item index="1">首页</el-menu-item><el-menu-item index="2">面试经验总结</el-menu-item><el-menu-item index="3" >模拟面试</el-menu-item>

样式如图：

  • 进行页面间路由

首先在index.js中编写路由逻辑

其次，在导航栏部分编写点击实现跳转页面的逻辑，即在el-menu处加router,并把index设置为相应的页面

  • 编写面试经验页

首先编写两个选择器用来选择公司岗位，然后进行确认

 需要注意，为了实现选择一个选项后，在选项框中出现该选项，要把v-model添加到data中：

实现效果如下：

相关文章：

【项目实训】前端页面初探索（前期探索）

前期&#xff0c;由于没有确定页面展示形式&#xff0c;于是进行了很多探索 首先安装element-ui 导入elemnt-plus 添加use: 设置一个全局样式 编写导航栏 <el-menu:default-active"activeIndex"class"el-menu-demo"background-color"#95d475&quo…...

编程日记 2024/6/27 9:26:07

机器人控制系列教程之动力学建模(2)

接昨天的推文&#xff1a;https://editor.csdn.net/md/?articleId139991958 &#xff0c;动力学的求解通常是个相对比较复杂的过程&#xff0c;但现在基本上不用人工来推算求解各种公式和求解过程了&#xff0c;大家只需要知道其中的步骤即可&#xff0c;现代对于动力学问题的…...

编程日记 2024/6/27 9:25:05

Golang | Leetcode Golang题解之第200题岛屿数量

题目&#xff1a; 题解&#xff1a; func numIslands(grid [][]byte) int {res : 0for i : 0; i < len(grid); i {for j : 0; j < len(grid[i]); j {if grid[i][j] 1 {resdfs(grid, i, j)}}}return res }func dfs(grid [][]byte, r, c int) {h, w : len(grid), len(gri…...

编程日记 2024/6/27 9:24:03

Linux系统启动流程

init程序类型&#xff1a; ①、SysV&#xff1a;init&#xff0c;centos 5之前&#xff0c;配置文件/etc/init.d/ ②、Upstart: init&#xff0c;centos 6&#xff0c;配置文件/etc/init.d/ /etc/init/ ③、Systemd:Systemd&#xff0c;centos 7&#xff0c;配置文件/usr/li…...

编程日记 2024/6/27 9:22:01

Vue 学习之 axios

目录 执行安装命令&#xff1a;npm install axios 使用的时候导入 axios以data&#xff0c;params&#xff0c;headers传参方式的区别 axios封装 是一个基于 promise 的 网络请求库&#xff0c;作用于浏览器和 node.js 中。使用Axios可以在前端项目中发送各种方式的HTTP请求…...

编程日记 2024/6/27 9:21:00

Python学习笔记17 -- 猜数字小游戏2

目录 一、功能函数 1、说明函数 -- 对游戏玩法及设置进行说明 2、答案函数 -- 生成答案 3、猜测函数 -- 让玩家进行猜测 4、对照函数 -- 将答案和猜测进行对照 4.1 A函数 4.2 B函数 5、结果函数 -- 判断得到结果或继续猜测 6、时间函数 -- 判断一局游戏所用时间 7、打…...

编程日记 2024/6/27 9:19:58

【系统架构设计师】七、信息安全技术基础知识(信息安全的概念|信息安全系统的组成框架|信息加解密技术)

目录 一、信息安全的概念 1.1 信息安全的基本要素和范围 1.2 信息存储安全 1.3 网络安全 二、信息安全系统的组成框架 2.1 技术体系 2.2 组织机构体系 2.3 管理体系 三、 信息加解密技术 3.1 数据加密 3.2 对称加密技术 3.3 非对称加密算法 3.4 数字信封 3.5 信…...

编程日记 2024/6/27 9:17:55

CMMM Plus+ Calculus Update 超级游戏大作 游戏说明

资源链接 Scratch超级生命模拟游戏&#xff1a;CMMMPlusCalculusUpdate.sb3资源-CSDN文库 关卡编辑器 ◽️使用 WASD 移动视图。 ◽️LMB 放置单元格。 ◽️Space LMB 删除单元格。Ctrl Space LMB 删除所有相同类型的单元格。 ◽️Q / E 旋转单元格。 ◽️Z / X 在单元格类…...

编程日记 2024/6/27 9:16:54

Java OA系统任务协作模块

以下是一篇关于构建高效且功能丰富的OA系统任务协作模块的博客文章&#xff0c;采用了Spring Boot、Spring Data JPA和React等主流技术。文章不仅展示了项目的基本实现&#xff0c;还介绍了如何优化代码和增加新的功能&#xff0c;以提升系统的性能和用户体验。 --- ## 构建高…...

编程日记 2024/6/27 9:14:52

深入解析Maven常用命令

目录 什么是 MavenMaven 的安装与配置Maven 项目结构Maven 常用命令 mvn cleanmvn compilemvn testmvn packagemvn installmvn deploymvn sitemvn dependencymvn help 总结 什么是 Maven Maven 是由 Apache 软件基金会开发的一个项目管理和构建工具。它基于项目对象模型&…...

编程日记 2024/6/27 9:08:45

【Docker】镜像

目录 1. 镜像拉取 2. 镜像查询 3. 镜像导出 4. 镜像上传 5. 镜像打标签 6. 镜像上推 7. 镜像删除 8. 镜像运行及修改 8.1 在registry 节点运行 mariadb 镜像&#xff0c;将宿主机 13306 端口作为容器3306 端口映射 8.2 查看容器ID 8.3 进入容器 8.4 创建数据库xd_d…...

编程日记 2024/6/27 9:07:44

力扣最新详解5道题：两数之和三数之和四数之和

目录 一、查找总价格为目标值的两个商品 题目 题解 方法一&#xff1a;暴力枚举 方法二&#xff1a;对撞指针 二、两数之和 题目 题解 方法一&#xff1a;暴力枚举 方法二&#xff1a;哈希表法 三、三数之和 题目 题解 方法一&#xff1a;排序暴力枚举set去重 …...

编程日记 2024/6/27 9:06:42

通讯：单片机串口和电脑通讯

目录 1.串口输出数据到电脑 硬件部分 串口输出数据到电脑的软件软件部分&#xff1a; 相关问题&#xff1a; 2.单片机串口--485--485转USB--电脑 串口&#xff0c;芯片&#xff0c;转换器&#xff0c;设备之间的通讯的接线&#xff0c;都是要TX--RX, RX--TX 交叉连接。 单…...

编程日记 2024/6/27 9:04:41

ubuntu22.04 设置双屏

一 概述 最近把ubuntu18.04 升级到 22.04 双屏显示出来问题&#xff0c;在此记录下解决问题方案。二 解决方案 1 使用命令查看能检测到显示器 xrandr根据输出的信息&#xff0c;我们可以知道 HDMI-0 与 DP-0 是connected 。检测到两个显示器 2 设置输出显示器分辨率 由于我…...

编程日记 2024/6/27 9:03:40

【FPGA-常见问题及解决方案】

1、VIVADO的License无法加载&#xff1a;license文件必须在英文路径&#xff1b; 2、例程代码路径不能过长&#xff0c;也不允许有中文路径&#xff01;&#xff01;&#xff01; 3、明明加载了license&#xff0c;license也正确&#xff0c;例程无法完成综合&#xff1a;这种情…...

编程日记 2024/6/27 9:02:38

【第3章】MyBatis-Plus持久层接口之Service Interface(上)

文章目录 前言一、save1. 示例&#xff08;save&#xff09;2. 示例&#xff08;saveBatch&#xff09;3. 示例&#xff08;saveBatch 指定批次大小&#xff09; 二、saveOrUpdate1.示例&#xff08;saveOrUpdate&#xff09;2.示例&#xff08;saveOrUpdateBatch&#xff09;3…...

编程日记 2024/6/27 9:00:36

Nodemon的入门及使用

nodemon 是一个工具&#xff0c;通过在检测到目录中的文件更改时自动重新启动 Node.js 应用程序来帮助开发基于 Node.js 的应用程序。它非常适合在开发环境中使用。以前&#xff0c;我们开发一个 Node 后端服务时&#xff0c;每次更改文件&#xff0c;都需要手动重启服务才能生…...

编程日记 2024/6/27 8:58:34

cesium 实现三维无人机航拍过程实景效果

需求背景 需要实现一个动态的三维无人机航拍过程实景效果 代码开发中&#xff0c;迭代功能待续... 解决效果 cesium 实现三维无人机航拍过程实景效果 index.vue <template><div><el-button class"btn" click"start">开始</el-butt…...

编程日记 2024/6/27 8:57:33

Rust：使用 Warp 框架编写基于 HTTPS 的 RESTful API

在 Rust 中使用 Warp 框架编写基于 HTTPS 的 RESTful API&#xff0c;你需要首先设置好 TLS/SSL 证书以启用 HTTPS。以下是一个基本的步骤指南&#xff1a; 步骤 1: 安装 Rust 和 Cargo 确保你已经安装了 Rust 和 Cargo。你可以从 Rust 官网 下载并安装 Rust。 步骤 2: 创建…...

编程日记 2024/6/27 8:56:32

测试开发工程师需要掌握什么技能？

测试开发工程师是软件开发中至关重要的角色之一。他们负责编写、维护和执行自动化测试脚本、开发测试工具和框架&#xff0c;以确保软件的质量和稳定性。为了成为一名优秀的测试开发工程师&#xff0c;你需要掌握以下技能&#xff1a; 1. 编程技能&#xff1a; 作为测试开发工…...

编程日记 2024/6/27 8:55:31

实现Degrees of Lewdity游戏本地化：完整中文补丁安装教程

实现Degrees of Lewdity游戏本地化&#xff1a;完整中文补丁安装教程 本教程将指导您完成Degrees of Lewdity游戏的中文本地化过程&#xff0c;通过系统的游戏本地化方法&#xff0c;帮助您顺利安装中文补丁&#xff0c;解决游戏界面语言障碍&#xff0c;提升游戏体验。我们将…...

编程新知 2026/5/13 19:33:21

代码骨架生成器：从原理到实践，打造高效项目脚手架

1. 项目概述&#xff1a;从零到一的代码骨架生成器在软件开发领域&#xff0c;尤其是团队协作或个人快速启动新项目时&#xff0c;我们常常会陷入一种重复性的“仪式感”中&#xff1a;创建项目目录结构、初始化版本控制、配置构建工具、设置代码规范、编写基础配置文件……这些…...

编程新知 2026/5/13 18:08:31

清华PPT模板终极指南：从零开始打造专业学术演示

清华PPT模板终极指南&#xff1a;从零开始打造专业学术演示 【免费下载链接】THU-PPT-Theme 清华主题PPT模板 项目地址: https://gitcode.com/gh_mirrors/th/THU-PPT-Theme THU-PPT-Theme是一个专门为清华大学师生和学术工作者设计的PPT模板集合&#xff0c;提供了多种符…...

编程新知 2026/5/13 16:36:33

5步实现Cursor Pro永久免费：终极破解工具完整指南

5步实现Cursor Pro永久免费&#xff1a;终极破解工具完整指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your trial r…...

编程新知 2026/5/13 16:03:38

Primr：开源AI研究代理，35分钟自动生成公司深度战略分析报告

1. 项目概述&#xff1a;Primr&#xff0c;一个将公司网站转化为深度战略分析的AI研究代理 如果你做过公司研究、市场分析或者投资尽调&#xff0c;你肯定知道那有多痛苦。打开浏览器&#xff0c;输入公司网址&#xff0c;在“关于我们”、“产品”、“新闻”和“博客”之间来…...

编程新知 2026/5/13 14:51:34

开源协作平台Penny：为女性开发者打造包容性技术社区

1. 项目概述&#xff1a;一个为女性开发者量身定制的开源协作平台最近在GitHub上闲逛&#xff0c;发现了一个挺有意思的项目&#xff0c;叫“WomenBuilt/penny”。光看这个名字&#xff0c;你可能会有点摸不着头脑&#xff0c;这“penny”是啥&#xff1f;一个记账应用&#xf…...

编程新知 2026/5/13 13:44:37

不只是显示中文：用fbterm给你的CentOS终端换个‘皮肤’，提升老旧服务器运维效率

终端美学革命&#xff1a;用fbterm打造高效CentOS字符界面工作环境 在服务器运维的世界里&#xff0c;图形界面往往被视为奢侈品。当您面对一台资源受限的老旧CentOS服务器&#xff0c;或者需要远程管理没有X11支持的机器时&#xff0c;字符界面就成了唯一的选择。但单调的终端…...

编程新知 2026/5/13 13:35:45

独立开发者工具箱：模块化架构与全栈实践指南

1. 项目概述&#xff1a;一个独立开发者的工具箱 如果你是一个独立开发者&#xff0c;或者正在尝试构建自己的数字产品&#xff0c;那么你一定经历过这样的时刻&#xff1a;一个想法在脑海中成型&#xff0c;你迫不及待地想把它变成现实&#xff0c;但当你打开编辑器&#xff0…...

编程新知 2026/5/13 13:30:23

Vim多光标编辑插件vim-visual-multi：提升批量文本处理效率

1. 项目概述&#xff1a;一个能改变你Vim多光标编辑体验的插件 如果你是一个Vim或Neovim的深度用户&#xff0c;并且对现代编辑器&#xff08;比如VSCode、Sublime Text&#xff09;里那种流畅的多光标编辑功能念念不忘&#xff0c;那么你肯定不止一次地搜索过“Vim multiple c…...

编程新知 2026/5/13 13:19:13

AI智能体安全策略引擎：AgentEnforcer框架设计与实战应用

1. 项目概述&#xff1a;一个为AI智能体量身定制的“行为守门员” 最近在折腾AI智能体&#xff08;Agent&#xff09;的开发&#xff0c;尤其是在构建那些需要自主执行任务、与外部API交互的复杂系统时&#xff0c;一个核心痛点总是挥之不去&#xff1a; 如何确保智能体的行为…...

编程新知 2026/5/13 12:33:19