vue3前端项目开发,具备纯天然的防止爬虫采集的特征

vue3前端项目开发,具备纯天然的防止爬虫采集的特征!众所周知,网络爬虫可以在网上爬取到一些数据,很多公司,为了自己公司的数据安全, 尤其是web端项目,不希望被爬虫采集。那么,您可以使用vue技术开发web前端内容。下面给大家展示的是,黑马程序员的前端项目之一,小兔鲜的前端web项目内容。


如图,我在自己本地借助于vite插件打开了这个项目,在浏览器内浏览到了前端的页面。这个是默认的首页面截图。

<script setup></script>
<template><!--一级路由的出口--><RouterView />
</template>
<style scoped lang="scss"></style>

 App.vue作为入口文件,里面可以看见就写了一个路由标签。我们使用到了路由插件,router.,在里面配置好了首页的模版路径。

import { createRouter, createWebHistory } from 'vue-router'
//createRouter:创建router的实例对象
//createWebHistory:创建history模式的路由
import Login from '@/views/login/index.vue'
import Layout from '@/views/layout/index.vue'
import Home from '@/views/home/index.vue'
import Categroy from '@/views/category/index.vue'
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [//path和component对应关系{path:'/',component:Layout,children:[{//默认不写内容,就是会跟着一起渲染的path:'',component:Home},{path:'category',component:Categroy}]},{path:'/login',component:Login}]
})export default router

如图,里面可以看见“/”,对应的组件是Layout组件。

这里需要给大家提个醒,里面还有子组件呢,而且,重点来了,子组件里面有一个是没有写内容的,我加了注释,不写内容,默认就会跟着启动渲染出来的。它对应的组件是home。


跑题了,回归到数据安全的层面,我们打开查看源代码,可以看见,里面其实看不见具体的业务数据了。因为被vue技术框架封装起来了。

这个就可以避免一些爬虫采集器的数据抓取了。纯天然,vue技术自带反爬虫的特征。

 

如图,黑马程序员提供了他们的官方业务数据接口调用。我这个是其中一个接口调用。

大家想自学vue项目开发,可以考虑一下黑马程序员的课程,讲的还是比较详细的。适合新手练习项目。入门项目。 

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

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

相关文章

spark ui的job数,stage数以及task数

背景 我们在查看spark ui的界面时&#xff0c;一段spark sql的执行经常看到会有对应有几个job&#xff0c;然后每个job又有几个stage&#xff0c;而每个stage又有好多个task&#xff0c;那么这些job,stage,task是怎么和spark 算子对应的呢 算子和job数,stage数以及task数的对…

代码随想录算法训练营29期|day59 任务以及具体安排

第九章 动态规划part16 583. 两个字符串的删除操作 // dp数组中存储word1和word2最长相同子序列的长度 class Solution {public int minDistance(String word1, String word2) {int len1 word1.length();int len2 word2.length();int[][] dp new int[len1 1][len2 1];for …

Gartner信息图:2024 年44种安全和风险管理技术采用路线图

Gartner发布的该信息图确定了全球企业正在采用的 44 种安全相关技术&#xff0c;并根据采用阶段、部署风险和企业价值对它们进行了映射。安全和风险管理领导者可以使用此信息图将他们的技术投资与同行进行比较。 2024 年安全和风险管理技术采用路线图 SRM 领导者可以使用此信息…

世微AP8P059 静态功耗小 太阳能人体红外线感应IC

概述 AP8P059 是一款集成低压 LDO 、光 控、充电控制、过充保护、欠压保护、 PIR 感应、延时为一体的人体感应太阳能 LED 灯控制芯片&#xff0c;只需要很少的外接元件&#xff0c;适 用于锂电池供电的 PIR 人体感应 LED 灯具 的应用。 外置的一级带通增益放大 器便…

Python实现视频转音频、音频转文本的最佳方法

文章目录 Python实现视频转音频和音频转文字视频转音频步骤 1&#xff1a;导入moviepy库步骤 2&#xff1a;选择视频文件步骤 3&#xff1a;创建VideoFileClip对象步骤 4&#xff1a;提取音频步骤 5&#xff1a;保存音频文件 音频转文字步骤 1&#xff1a;导入SpeechRecognitio…

RV新闻概要 --- 2024/02/23

来源&#xff1a;https://mp.weixin.qq.com/s/EEJVLQnXvgQTbtU_yrW9lw 晶心科技是一家上市公司&#xff08;TWSE&#xff1a;6533&#xff1b;SIN&#xff1a;US03420C2089&#xff1b;ISIN&#xff1a;US03420C1099&#xff09;&#xff0c;已有18 年的经营历史&#xff0c;是…

单向循环链表的操作

main函数&#xff1a; #ifndef __loopLinkList_H__#define __loopLinkList_H__typedef int datatype;union msg{ //若数据的类型也为int&#xff0c;则不需要这个联合体datatype data;int len; //放头结点&#xff0c;记录链表长度};typedef struct node{union msg te…

Istio实战:Istio Kiali部署与验证

目录 前言一、Istio安装小插曲 注意事项 二、Kiali安装三、Istio测试参考资料 前言 前几天我就开始捣腾Istio。前几天在执行istioctl install --set profiledemo -y 的时候老是在第二步就报错了&#xff0c;开始我用的istio版本是1.6.8。 后面查看k8s与istio的版本对应关系后发…

vCenter、vSphere Client硬盘扩容详解

文章目录 1、需求2、vSphere 操作流程3、服务器操作3.1、查看分区空间大小3.2、列出所有可用块设备的信息3.3、新建分区3.4、重读分区表信息3.5、格式化分区信息3.6、查看卷组的详细状态3.7、创建物理卷3.8、扩容卷组3.9、逻辑卷在线扩容3.10、显示物理卷属性3.11、XFS 文件系统…

最少停车数(C 语言)

题目描述 特定大小的停车场&#xff0c;数组cars[]表示&#xff0c;其中1表示有车&#xff0c;0表示没车。车辆大小不一&#xff0c;小车占一个车位&#xff08;长度1&#xff09;&#xff0c;货车占两个车位&#xff08;长度2&#xff09;&#xff0c;卡车占三个车位&#xf…

Rollup + Ts

Rollup Ts RollupTs demo 一、文件配置 | - src | | - utils | | | - .ts | | - .babelrc | | - main.js | | - style.css | - package.json | - rollup.config.js | - tsconfig.json二、插件下载 rollup // rollup 基本的包 typescript // ts 包 rollup/plug…

如何做bug分析 ?bug分析什么 ? 为什么要做bug分析 ?

每当我们完成一个版本测试时&#xff0c;总会在测试报告中添加一些分析bug的指标 &#xff0c;主要用于分析在测试过程中存在的问题 。但是在分析的过程中你就可能遇到如下的问题 &#xff1a; 我应该分析那些指标呢 &#xff1f;每一个具体的指标该如何分析 &#xff1f;它能说…

Vue3学习——computed、watch、watchEffect

computed 与Vue2.x中computed配置功能一致写法 import {computed} from vuesetup(){...//计算属性——简写let fullName computed(()>{return person.firstName - person.lastName})//计算属性——完整let fullName computed({get()return person.firstName - perso…

算法——模拟

1. 什么是模拟算法&#xff1f; 官方一点来说 模拟算法&#xff08;Simulation Algorithm&#xff09;是一种通过模拟现实或抽象系统的运行过程来研究、分析或解决问题的方法。它通常涉及创建一个模型&#xff0c;模拟系统中的各种事件和过程&#xff0c;以便观察系统的行为&a…

Redis缓存一致性问题(自用记录)

背景 在开发过程中&#xff0c;redis缓存技术被大范围应用。由于现在的系统大多是分布式的&#xff0c;高并发的&#xff0c;redis和传统的数据库&#xff0c;存在数据不一致的问题。 解决方案 本文主要探讨两者数据不一致的解决方案&#xff1a; 给缓存设置过期时间&#x…

dell戴尔电脑灵越系列Inspiron 15 3520原厂Win11系统中文版/英文版

Dell戴尔笔记本灵越3520原装出厂Windows11系统包&#xff0c;恢复出厂开箱预装OEM系统 链接&#xff1a;https://pan.baidu.com/s/1mMOAnvXz5NCDO_KImHR5gQ?pwd3nvw 提取码&#xff1a;3nvw 原厂系统自带所有驱动、出厂主题壁纸、系统属性联机支持标志、Office办公软件、MyD…

Jmeter接口测试 ,这应该是全网最详细的教程了

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、Jmeter 的使用步骤 打开Jmeter 安装包&#xff0c;进入\bi…

postman-使用Postman的模拟服务来模拟(mock)后端数据,完成前端模拟API调用

最近项目上比较忙&#xff0c;任务多时间紧&#xff0c;导致后端开发任务繁多&#xff0c;无法及时开发完毕&#xff0c;但是前端同学已经把对应功能开发完成&#xff0c;需要进行前后端联调来验证API及一些交互问题&#xff1b;这不能因为后端的进度来影响前端的工作完成情况&…

【Linux进程】冯·诺依曼体系结构以及操作系统的深入理解

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1.冯诺依曼体系结构特…

kafka和ZK的关系

zk相当于是kafka的一个基础设施 Kafka是一种高吞吐量、可扩展的分布式发布订阅消息系统&#xff0c;ZooKeeper是一个分布式协调服务&#xff0c;用于管理和协调分布式系统中的各种资源 Zookeeper&#xff1a;管理broker&#xff0c;consumer 创建broker后&#xff0c;向zk注册…