【vue前端项目实战案例】Vue3仿今日头条App

本文将开发一款仿“今日头条”的新闻App。该案例是基于 Vue3.0 + Vue Router + webpack + TypeScript
等技术栈实现的一款新闻资讯类App,适合有一定Vue框架使用经验的开发者进行学习。

项目源码在文章末尾

1 项目概述

该项目是一款“今日头条”的新闻资讯App,主要有以下功能。

  • 新闻分类
  • 首页新闻列表
  • 刷新加载最新新闻
  • 用户私信留言
  • 新闻搜索
  • 查看新闻详情

1.1 开发环境

本项目是基于Vue3框架开发的一款WebApp,使用Vue CLI脚手架工具创建项目。在指定的硬盘目录处启动命令行工具,例如,在 C:\project 目录下打开命令行工具,并执行以下命令。

#安装脚手架
npm i -g @vue/cli#创建项目
vue create toutiao

项目创建成功后,继续在命令行工具中执行 cd toutiao 命令,进入项目根目录,安装Vant UI组件库和axios模块。执行命令如下:

#安装Vant3 UI组件库
npm i vant@next -S#安装axios模块
npm i axios -S

项目的调试使用Google Chrome浏览器的控制台进行,在浏览器中按下F12键,然后单击“切换设备工具栏”,进入移动端的调试界面,可以选择相应的设备进行调试。
项目运行的效果如图1 所示。

在这里插入图片描述
图 1 项目效果图

1.2 项目结构

项目结构如图2所示,其中src文件夹是项目的源文件目录,src文件夹下的项目结构如图3所示。
在这里插入图片描述
图2 项目结构

在这里插入图片描述
图3 src文件夹

项目结构中主要文件说明如下。

  • node_modules:项目依赖管理目录。
  • public:项目的静态文件存放目录,也是本地服务器的根目录。
  • src:项目源文件存放目录。
  • package.json:项目npm配置文件。
  • vue.config.js:项目构建配置文件

src文件夹目录说明如下。

  • assets:静态资源文件存放目。
  • components:公共组件存放目录。
  • hooks:项目的静态数据和模块封装管理目录。
  • router:路由配置文件存放目录。
  • store:状态管理配置存放目录。
  • views:视图组件存放目录。
  • App.vue:项目的根组件。
  • main.ts:项目的入口文件。
  • Shims-vue.d.ts: typescript的适配定义文件。

2 入口文件

项目的入口文件有 index.html、main.ts和App.vue三个文件,这些入口文件的具体内容介绍如下。

2.1 项目入口页面

index.html是项目默认的主渲染页面文件,主要用于Vue实例挂载点的声明与DOM渲染。代码如下:

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

2.2 程序入口文件

main.ts是程序的入口文件,主要用于加载各种公共组件和初始化Vue实例。本项目是基于Vue3开发的,在入口文件中引入createApp()来创建vue实例对象。项目中的路由设置和引用的Vant UI组件库也是在该文件中定义的。代码如下:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant';
import 'vant/lib/index.css';const app = createApp(App)
app.use(store)
app.use(router)
app.use(Vant)
app.mount('#app')

2.3 组件入口文件

App.vue是项目的根组件,所有的页面都是在App.vue下面切换的,所有的页面组件都是App.vue的子组件。在App.vue组件内只需要使用 组件作为占位符,就可以实现各个页面的引入。代码如下:

<template><router-view/>
</template>

2.4 路由文件

在src/router/index.ts文件中,定义了项目的所有跳转的路由,代码如下:

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Home',component: () => import ('@/views/Home.vue')},{path: '/search',name: 'Search',component: () => import ('@/views/Search.vue')},{path: '/details',name: 'Details',component: () => import ('@/views/Details.vue')},{path: '/message',name: 'Message',component: () => import ('@/views/Message.vue')}
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

3 项目组件

项目中所有页面组件都在views文件夹中定义,所有的公共组件都在components文件夹中定义,具体组件内容介绍如下。

3.1 公共组件

在首页新闻列表和新闻内容页中,都需要使用到新闻列表的展示,为了增强代码的可扩展性,可以在components文件夹下创建NewsCard.vue新闻卡片的公共组件。代码如下:

<template><div class="news-card" @click="onClick"><van-row gutter="20"><van-col span="16"><div class="news-title">{{title}}</div><div class="news-msg"><span>{{author}}</span><span>{{date}}</span></div></van-col><van-col span="8"><van-image :src="pic" style="height: 100%"><template v-slot:error>加载失败</template></van-image></van-col></van-row></div>
</template><script>
export default {props: {title: String,author: String,date: String,pic: String},setup(props,context) {//新闻点击事件const onClick = () => {}return {onClick}}
}
</script><style scoped>
.news-card{box-sizing: border-box;padding: 0px 10px;
}
.van-row{padding: 15px 0px;border-bottom: 1px solid #F7F7F7;
}
.news-title{color: #222;font-size: 18px;
}
.news-msg{font-size: 12px;color: #999;margin-top: 5px;
}
.news-msg span{margin-right: 8px;
}
</style>

3.2 首页导航栏

App首页汇集了整个应用的核心功能入口,在头部导航栏部分,主要涉及了两个功能的入口按钮,分别是“私信”和“搜索”。在头部导航栏的下方,设计了新闻分类的标签页按钮,方便用户切换不同类别的新闻列表。效果如图4所示。

在这里插入图片描述
图 4 首页导航栏效果

Home.vue首页组件,代码如下:

<template><div class="page-body"><!-- 头部 --><van-nav-bar fixed z-index="1000"><template #title><span class="top-title">今日头条</span><van-icon name="replay" color="#fff" size="18"/></template><template #left><van-icon name="envelop-o" color="#fff" size="22" /></template><template #right><van-icon name="search" color="#fff" size="22" /></template></van-nav-bar><!-- 分类导航 --><van-tabsv-model:active="active"background="#F4F5F6"stickyoffset-top="46"title-active-color="#EE0A24"><van-tab v-for="tab in tabsList" 
:key="tab.key" :title="tab.name" :name="tab.key"><div class="tab-views"><!-- 此处为新闻列表 --></div></van-tab></van-tabs></div>
</template>

新闻类别的标签页数据使用的是本地静态数据,在项目中的src/hooks文件夹下创建tabs.ts文件,用于保存新闻分类的静态数据。代码如下:

const tabs = [{key: 'top',name: '推荐'},{key: 'guonei',name: '国内'},{key: 'guoji',name: '国际'},{key: 'yule',name: '娱乐'},{key: 'tiyu',name: '体育'},{key: 'junshi',name: '军事'},{key: 'keji',name: '科技'},{key: 'caijing',name: '财经'},{key: 'shishang',name: '时尚'},{key: 'youxi',name: '游戏'},{key: 'qiche',name: '汽车'},{key: 'jiankang',name: '健康'}
]export default tabs

在Home.vue文件中,进入src/hooks/tabs.ts文件,并设置为响应式数据。代码如下:

<script lang="ts">
import { ref } from "vue";
import tabs from "../hooks/tabs";
export default {name: "Home",setup() {const tabsList = ref(tabs);return {tabsList};},
};
</script>

3.3 首页新闻列表

首页新闻列表的效果如图5所示。

在这里插入图片描述
图5 首页新闻列表效果

在首页中引入NewsCard.vue新闻卡片的公共组件,并对axios获取数据进行封装。由于本项目中使用的是“聚合数据平台”的数据接口,在请求服务端接口时会出现跨域,需要先配置本地服务器的请求代理。
在项目根目录下创建vue.config.js配置文件,在配置文件中添加proxy的配置。代码如下:

module.exports = {devServer: {proxy: {'/api': {target: 'http://v.juhe.cn',changeOrigin: true,pathRewrite: {"^/api": ""}}}}
}

封装axios请求方法,在src/hooks目录下创建sendhttp.ts文件,代码如下:

import axios from 'axios';
import { ref } from 'vue';
import { Toast } from 'vant';//聚合数据上申请的用户密钥
const key = 'xxx'function sendhttp(api: string, query: string) {const result = ref(null)//加载数据const getData = (query: string, toast?: any) => {axios.get(api, {params: {type: query,key}}).then(res => {console.log(res.data)result.value = res.data.result.dataif(toast){toast.clear()}}).catch(err=>{if(toast){toast.clear()}})}getData(query)//切换导航事件const tabsChange = (name: string) => {getData(name)}//刷新事件const replay = (name: string) => {const toast = Toast.loading({message: "加载中...",forbidClick: true,duration: 0,loadingType: "spinner",});getData(name,toast)}return {result,tabsChange,replay}
}export default sendhttp

在Home.vue文件中,引入src/hooks/sendhttp.ts文件,并在setup()函数中发送请求,将请求成功后的数据遍历在标签页中。
Home.vue文件,代码如下:

<template><div class="page-body"><!-- 头部 --><van-nav-bar fixed z-index="1000" @click-left="onClickLeft" @click-right="onClickRight"><template #title><span class="top-title">新闻头条</span><van-icon name="replay" color="#fff" size="18" @click="replay" /></template><template #left><van-icon name="envelop-o" color="#fff" size="22" /></template><template #right><van-icon name="search" color="#fff" size="22" /></template></van-nav-bar><!-- 分类导航 --><van-tabsv-model:active="active"background="#F4F5F6"stickyoffset-top="46"title-active-color="#EE0A24"@change="tabsChange"><van-tab v-for="tab in tabsList" :key="tab.key" :title="tab.name" :name="tab.key"><div class="tab-views"><news-card v-for="news in result" :key="news.uniquekey" :title="news.title" :author="news.author_name":date="news.date":pic="news.thumbnail_pic_s"@click="onClickNews(news.uniquekey)"></news-card></div></van-tab></van-tabs></div>
</template><script lang="ts">
import { ref } from "vue";
import tabs from "../hooks/tabs";
import sendhttp from '../hooks/sendhttp';
import NewsCard from '../components/NewsCard.vue';
import { useRoute, useRouter } from 'vue-router'
export default {name: "Home",components: {'news-card': NewsCard},setup() {const router = useRouter()const active = ref('top');const tabsList = ref(tabs);//获取新闻数据const {result, tabsChange, replay} = sendhttp('/api/toutiao/index',active.value)//导航栏左侧按钮点击事件const onClickLeft = () => {router.push({path: 'message'})}//导航栏右侧按钮点击事件const onClickRight = () => {router.push({path: 'search'})}//点击新闻const onClickNews = (id:string) => {router.push({path: 'details',query: {id}})}return {active,replay,tabsList,tabsChange,result,onClickLeft,onClickRight,onClickNews};},
};
</script><style scoped>
.van-nav-bar {background-color: #d43d3d;
}
.top-title {font-size: 18px;font-weight: bold;color: #fff;margin-right: 5px;
}
.van-tabs{top: 46px;
}
</style>

3.4 新闻详情页

点击新闻列表,触发NewsCard.vue新闻卡片组件上的点击事件,通过useRouter路由模块,将新闻的id传给Details.vue新闻详情组件。代码如下:

<template><div class="page-body"><!-- 分类导航 --><van-tabsv-model:active="active"background="#F4F5F6"stickyoffset-top="46"title-active-color="#EE0A24"@change="tabsChange"><van-tab v-for="tab in tabsList" :key="tab.key" :title="tab.name" :name="tab.key"><div class="tab-views"><news-card v-for="news in result" :key="news.uniquekey" :title="news.title" :author="news.author_name":date="news.date":pic="news.thumbnail_pic_s"@click="onClickNews(news.uniquekey)"></news-card></div></van-tab></van-tabs></div>
</template><script lang="ts">
import NewsCard from '../components/NewsCard.vue';
import { useRoute, useRouter } from 'vue-router'
export default {name: "Home",components: {'news-card': NewsCard},setup() {const router = useRouter()//其他代码...//点击新闻const onClickNews = (id:string) => {router.push({path: 'details',query: {id}})}return {onClickNews};},
};
</script>

在新闻详情页中,通过useRoute组件获取参数,得到新闻的id,并再次发送axios请求,获取当前新闻的详细数据。Details.vue组件,代码如下:

<template><div><!-- 导航栏 --><van-nav-bar left-arrow fixed @click-left="onClickLeft"><template #left><van-icon name="arrow-left" size="16" color="#999" /><span style="margin-left:10px;">{{result.author_name}}</span></template><template #right><van-icon name="share-o" size="20" color="#999" /></template></van-nav-bar><!-- 正文 --><div class="news-body"><!-- 新闻标题 --><div class="news-title">{{result.title}}</div><!-- 新闻信息 --><div class="news-msg"><span>{{result.author_name}}</span><span>{{result.date}}</span></div><!-- 新闻内容 --><div class="news-content" v-html="result.content"></div></div></div>
</template><script>
import { ref } from "vue";
import { useRoute } from "vue-router";
import axios from 'axios';export default {setup() {const route = useRoute();const id = route.query.id;const result = ref({title:'',author_name: '',date: '',content: ''});//获取请求axios.get('/api/toutiao/content',{params: {uniquekey: id,key: '26dafe8731502872b632b9552feccf06'}}).then(res=>{result.value = res.data.result.detail}).catch(err => {})//点击导航栏左侧按钮const onClickLeft = () => {window.history.back();};return {onClickLeft,result};},
};
</script><style scoped>
.news-body{margin-top: 60px ;box-sizing: border-box;padding: 0px 15px;
}
.news-title{font-size: 22px;color: #222;font-weight: bold;
}
.news-msg{font-size: 12px;color: #999;margin: 10px 0px 20px;
}
.news-msg span{margin-right: 10px;
}
</style>

新闻详情页的效果如图6所示。

在这里插入图片描述
图6 新闻详情页效果

3.5 私信留言页

点击头部导航栏的左侧图标按钮,跳转到私信留言列表页面,效果如图7所示。

在这里插入图片描述
图7 私信留言列表

Message.vue私信列表组件,代码如下:

<template><div><!-- 导航栏 --><van-nav-bartitle="私信"fixedleft-arrow@click-left="onClickLeft"><template #left><van-icon name="arrow-left" size="16" color="#999" /></template></van-nav-bar><!-- 留言列表 --><div class="message-list"><van-cell v-for="(msg,index) in list" :key="index" :value="msg.date"><!-- 使用 title 插槽来自定义标题 --><template #title><van-badge :dot="!msg.read"><span class="custom-title">{{msg.name}}</span></van-badge></template><template #label><span class="msg-content">{{msg.content}}</span></template></van-cell></div></div>
</template><script>
import { ref } from 'vue';
import messageData from '../hooks/messageData';
export default {setup(){const list = ref(messageData)const onClickLeft = () => {window.history.back()}return {onClickLeft,list}}
}
</script><style scoped>
.message-list{margin-top: 50px ;
}
.msg-content{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
}
</style>

本项目的私信留言使用的是本地静态数据,在src/hooks目录下创建messageData.ts文件,用于留言静态数据。代码如下:

const messageData = [{name: '独上归州',date: '2021-3-18',content: '你好,你的那篇文章的链接失效了,能不能再重新发布一次?',read: false},{name: '椒房殿°',date: '2021-1-8',content: '前端简历的模板发一下吧',read: false},{name: '你在逗我笑i',date: '2020-12-5',content: '你好啊!',read: false},{name: '猫与玫瑰 ะ',date: '2020-8-10',content: '你的文章写的很棒啊!',read: true},{name: '那只小猪像你',date: '2020-8-1',content: '已转发',read: true},{name: '橙子姑娘',date: '2020-5-11',content: '已转发',read: true},{name: '忽然之间',date: '2020-3-6',content: '点个赞',read: true},{name: '配角戏',date: '2020-1-3',content: '已转发',read: true}
]export default messageData

3.6 新闻搜索页面

在首页的头部导航栏,点击右侧按钮,跳转到新闻搜索页面,效果如图8所示。
在这里插入图片描述
图 8 新闻搜索也效果

Search.vue新闻搜索组件,代码如下:

<template><div class="search"><!-- 搜索框 --><van-searchv-model="keywords"shape="round"placeholder="请输入你感兴趣的"show-actionaction-text="搜索"@cancel="onClickRight"><template #left><van-icon name="arrow-left" @click="onClickLeft" style="margin-right:10px"/></template></van-search><!-- 搜索记录 --><div class="search-history"><div class="search-history-title"><span>搜索记录</span><van-icon name="delete-o" @click="clear" /></div><div><van-tag v-for="(kw,index) in list" :key="index" closeable size="medium" type="primary" @close="delTag(index)">{{kw}}</van-tag></div></div></div>
</template><script>
import { ref } from 'vue';
import { Dialog } from 'vant';
export default {setup() {const keywords = ref('')const list = ref(['千锋教育','前端教程'])//点击导航栏左侧按钮const onClickLeft = () => {window.history.back()}//点击导航栏右侧搜索按钮const onClickRight = () => {list.value.push(keywords.value)console.log(keywords)}//删除搜索记录const delTag = (index) => {list.value.splice(index,1)}//清空搜索记录const clear = () => {Dialog.confirm({message: '确定要清空记录吗?',}).then(() => {list.value = []}).catch(() => {});}return {keywords,onClickLeft,delTag,clear,onClickRight,list}}
}
</script><style scoped>
.van-search{border-bottom: 1px solid #eee;
}
.search-history{box-sizing: border-box;padding: 0px 15px;margin-top: 10px ;
}
.search-history-title{height: 30px;display: flex;align-items: center;justify-content: space-between;
}
.search-history-title>span{font-size: 14px;
}
.van-tag{margin: 6px 8px;
}
</style>

项目源码下载地址:
https://download.csdn.net/download/p445098355/89570498

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

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

相关文章

go语言day14 bufio包 ioutil包

Golang-100-Days/Day16-20(Go语言基础进阶)/day16_file操作.md at master rubyhan1314/Golang-100-Days GitHub 一、bufio包 读写文件 1&#xff09; bufio包下的Reader类实现了Read()方法和Write()方法 2&#xff09;和io包相比&#xff0c;虽然都是在读写文件&#xff0c;…

【Android】性能实践—编码优化与布局优化学习笔记

【Android】性能实践—编码优化与布局优化学习笔记 编码优化 使用场景 如果需要拼接字符串&#xff0c;优先使用StringBuffer和StringBuilder进行凭借&#xff0c;他们的性能优于直接用加号进行拼接&#xff0c;因为使用加号连接符会创建多余的对象一般情况下使用基本数据类…

Unity扩展SVN命令

可以直接在unity里右键文件提交和查看提交记录 顶部菜单栏上回退和更新整个unity工程 SvnForUnity.CS 记得要放在Editor文件夹下 using System.Collections; using System.Collections.Generic; using System.Diagnostics; using System.IO; using UnityEditor; using Unity…

Era3D 论文学习

代码地址&#xff1a;https://penghtyx.github.io/Era3D/ 论文地址&#xff1a;https://arxiv.org/abs/2405.11616 解决了什么问题&#xff1f; 尽管多视角内容生成领域取得了显著的进展&#xff0c;但现有的方案仍然面临着相机先验不匹配、效果差、分辨率低等问题&#xff0…

windows USB 设备驱动开发- 对 MUTT 设备进行 BIOS/UEFI 测试

对 MUTT 设备进行 BIOS/UEFI 测试&#xff0c;BIOS/UEFI 测试验证 USB 启动以及控制器到操作系统的切换。 USB 启动配置 在 USB 2.0 (EHCI) 和 USB 3.0 (xHCI) 控制器上执行这些测试&#xff0c;每种主要 USB 媒体类型 &#xff0c;USB 2.0 BOT、USB 3.0 BOT 和 USB 3.0 UASP…

【Android】ListView和RecyclerView知识总结

文章目录 ListView步骤适配器AdpterArrayAdapterSimpleAdapterBaseAdpter效率问题 RecyclerView具体实现不同布局形式的设置横向滚动瀑布流网格 点击事件 ListView ListView 是 Android 中的一种视图组件&#xff0c;用于显示可滚动的垂直列表。每个列表项都是一个视图对象&…

Python教程(一):环境搭建及PyCharm安装

目录 引言1. Python简介1.1 编译型语言 VS 解释型语言 2. Python的独特之处3. Python应用全览4. Python版本及区别5. 环境搭建5.1 安装Python&#xff1a; 6. 开发工具&#xff08;IDE&#xff09;6.1 PyCharm安装教程6.2 永久使用教程 7. 编写第一个Hello World结语 引言 在当…

每日一题 LeetCode03 无重复字符的最长字串

1.题目描述 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的最长字串的长度。 2 思路 可以用两个指针, 滑动窗口的思想来做这道题,即定义两个指针.一个left和一个right 并且用一个set容器,一个length , 一个maxlength来记录, 让right往右走,并且用一个set容器来…

如何避免蓝屏?轻量部署,安全和业务连续性才能两不误

自19日起&#xff0c;因CrowdStrike软件更新的错误配置而导致的“微软全球蓝屏”&#xff0c;影响依然在持续。这场被称为“史上最大规模的IT故障”&#xff0c;由于所涉全球企业太多&#xff0c;专家估计“蓝屏”电脑全部恢复正常仍需时日。 尽管 CEO 乔治 库尔茨&#xff08…

鸿蒙OpenHarmony Native API【drawing_pen.h】 头文件

drawing_pen.h Overview Related Modules: [Drawing] Description: 文件中定义了与画笔相关的功能函数 Since: 8 Version: 1.0 Summary Enumerations Enumeration NameDescription[OH_Drawing_PenLineCapStyle] { [LINE_FLAT_CAP], [LINE_SQUARE_CAP], [LINE_ROUND_…

聚焦智慧出行,TDengine 与路特斯科技再度携手

在全球汽车行业向电动化和智能化转型的过程中&#xff0c;智能驾驶技术正迅速成为行业的焦点。随着消费者对出行效率、安全性和便利性的需求不断提升&#xff0c;汽车制造商们需要在全球范围内实现低延迟、高质量的数据传输和处理&#xff0c;以提升用户体验。在此背景下&#…

从零开始:神经网络(1)——什么是人工神经网络

声明&#xff1a;本文章是根据网上资料&#xff0c;加上自己整理和理解而成&#xff0c;仅为记录自己学习的点点滴滴。可能有错误&#xff0c;欢迎大家指正。 人工神经网络&#xff08;Artificial Neural Network&#xff0c;简称ANN&#xff09;是一种模仿生物神经网络结构和功…

《500 Lines or Less》(5)异步爬虫

https://aosabook.org/en/500L/a-web-crawler-with-asyncio-coroutines.html ——A. Jesse Jiryu Davis and Guido van Rossum 介绍 网络程序消耗的不是计算资源&#xff0c;而是打开许多缓慢的连接&#xff0c;解决此问题的现代方法是异步IO。 本章介绍一个简单的网络爬虫&a…

STM32F0-标准库时钟配置指南

启动 从startup_stm32f0xx.s内的开头的Description可以看到 ;* Description : STM32F051 devices vector table for EWARM toolchain. ;* This module performs: ;* - Set the initial SP ;* - Set t…

【Leetcode】十八、动态规划:不同路径 + 最大正方形

文章目录 1、动态规划2、leetcode509&#xff1a;斐波那契数列3、leetcode62&#xff1a;不同路径4、leetcode121&#xff1a;买卖股票的最佳时机5、leetcode70&#xff1a;爬楼梯6、leetcode279&#xff1a;完全平方数7、leetcode221&#xff1a;最大正方形 1、动态规划 只能…

C#开源、简单易用的Dapper扩展类库 - Dommel

项目特性 Dommel 使用 IDbConnection 接口上的扩展方法为 CRUD 操作提供了便捷的 API。 Dommel 能够根据你的 POCO 实体自动生成相应的 SQL 查询语句。这大大减少了手动编写 SQL 代码的工作量&#xff0c;并提高了代码的可读性和可维护性。 Dommel 支持 LINQ 表达式&#xff…

记一次因敏感信息泄露而导致的越权+存储型XSS

1、寻找测试目标 可能各位师傅会有苦于不知道如何寻找测试目标的烦恼&#xff0c;这里我惯用的就是寻找可进站的思路。这个思路分为两种&#xff0c;一是弱口令进站测试&#xff0c;二是可注册进站测试。依照这个思路&#xff0c;我依旧是用鹰图进行了一波资产的搜集&#xff…

SSIS_SQLITE

1.安装 SQLite ODBC 驱动程序 2.添加SQLite数据源 在“用户DSN”或“系统DSN”选项卡中&#xff0c;点击“添加”。选择“SQLite3 ODBC Driver”&#xff0c;然后点击“完成”。在弹出的配置窗口中&#xff0c;设置数据源名称&#xff08;DSN&#xff09;&#xff0c;并指定S…

英迈中国与 Splashtop 正式达成战略合作协议

2024年7月23日&#xff0c;英迈中国与 Splashtop 正式达成战略合作协议&#xff0c;英迈中国正式成为其在中国区的战略合作伙伴。此次合作将结合 Splashtop 先进的远程桌面控制技术和英迈在技术服务与供应链管理领域的专业优势&#xff0c;为中国地区的用户带来更加安全的远程访…

联想教育电脑硬盘保护同传EDU系统使用简明教程

目录 一、原理概述 二、简明使用方法 1、软件下载 2、开机引导 3、开始安装 4、使用 &#xff08;1&#xff09;进入底层 &#xff08;2&#xff09;进行分区设置 &#xff08;3&#xff09;系统设置 &#xff08;4&#xff09;安装硬盘保护驱动 &#xff08;5&…