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.hqwc.cn/news/488262.html

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

相关文章

Linux快速修改ip地址

Linux修改IP配置 一 、查找ip配置文件 ifcfg-ens33二、编辑 vi ifcfg-ens33文件三、重启网络或者重启系统 一 、查找ip配置文件 ifcfg-ens33 cd /etc/sysconfig/network-scripts/ls //查看network-scripts文件夹下面的文件二、编辑 vi ifcfg-ens33文件 vi ifcfg-ens33注意&…

阿里云国际-在阿里云服务器上快速搭建幻兽帕鲁多人服务器

幻兽帕鲁是最近流行的新型生存游戏。该游戏一夜之间变得极为流行&#xff0c;同时在线玩家数量达到了200万。然而&#xff0c;幻兽帕鲁的服务器难以应对大量玩家的压力。为解决这一问题&#xff0c;幻兽帕鲁允许玩家建立专用服务器&#xff0c;其提供以下优势&#xff1a; &am…

【mysql】1000w数据量的分页查询SQL,如何优化提升性能?

文章目录 优化场景特别注意&#xff01;&#xff01;&#xff01;有前提&#xff0c;谨慎使用 优化场景 当表数据量非常大时&#xff0c;需要进行分页查询如果慢的时候&#xff0c;可以考虑优化下。 假设一页展示10条&#xff0c;查询第10w条后面的数据时候变慢了… 优化思路&…

Sora是什么?

文章目录 前言Sora是什么&#xff1f;功能特色优点 缺点Sora模型的工作原理如何使用Sora模型Sora模型的应用场景Sora模型带来的问题虚假信息版权问题 后记 前言 Sora是美国人工智能研究公司OpenAI发布的一款令人惊叹的人工智能文生成视频大模型。近年来&#xff0c;人工智能技…

Java学习笔记------继承

继承 Java中提供了一个关键字extends&#xff0c;用这个关键字&#xff0c;我们可以让一个类和另一个类建立继承关系 如图&#xff0c;Student和Teacher类中除了study&#xff08;&#xff09;和teacher&#xff08;&#xff09;两个成员函数不同&#xff0c;其他重复了&…

会声会影2024最新官方旗舰版下载及功能讲解

会声会影支持的视频格式非常多样&#xff0c;包括但不限于&#xff1a;AVI、MPEG-1、MPEG-2、AVCHD、MPEG-4、H.264、BDMV、DV、HDV、DivX、QuickTime、RealVideo、Windows Media Format、MOD&#xff08;JVC MOD 文件格式&#xff09;、M2TS、M2T、TOD、3GPP、3GPP2 等。 这些…

【LNMP】云导航项目部署及环境搭建(复杂)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、项目介绍1.1项目环境架构LNMP1.2项目代码说明 二、项目环境搭建2.1 Nginx安装2.2 php安装2.3 nginx配置和php配置2.3.1 修改nginx文件2.3.2 修改vim /etc/p…

基于PostGIS的慢查询引起的空间索引提升实践

目录 前言 一、问题定位 1、前端接口定位 2、后台应用定位 3、找到问题所在 二、空间索引优化 1、数据库查询 2、创建空间索引 3、geography索引 4、再看前端响应 总结 前言 这是一个真实的案例&#xff0c;也是一个新入门的工程师很容易忽略的点。往往在设计数据库的…

vue2+element医院安全(不良)事件报告管理系统源代码

目录 安全不良事件类型 源码技术栈 医院安全&#xff08;不良&#xff09;事件报告管理系统采用无责的、自愿的填报不良事件方式&#xff0c;有效地减轻医护人员的思想压力&#xff0c;实现以事件为主要对象&#xff0c;可以自动、及时、实际地反应医院的安全、不良、近失事件…

C++之类作用域

目录 1、全局作用域 2、类作用域 2.1、设计模式之Pimpl 2.2、单例模式的自动释放 2.2.0、检测内存泄漏的工具valgrind 2.2.1、可以使用友元形式进行设计 2.2.2、内部类加静态数据成员形式 2.2.3、atexit方式进行 2.2.4、pthread_once形式 作用域可以分为类作用域、类名…

Kafka入门二——SpringBoot连接Kafka示例

实现 1.引入maven依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache…

RK3568平台开发系列讲解(Linux系统篇)SPI 客户端通信

🚀返回专栏总目录 文章目录 一、spi_transfer二、spi_message三、初始化沉淀、分享、成长,让自己和他人都能有所收获!😄 SPI I/O模型由一组队列消息组成。我们提交一个或多个struct spi_message结构时,这些结构以同步或异步方式处理完成。单个消息由一个或多个struct sp…