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

直接在html中引入Vue.js的cdn来实现一个简单的博客

news 2026/4/3 21:27:24

摘要

其实建立一个博客系统是非常简单的，有很多开源的程序，如果你不喜欢博客系统，也可以自己开发，也可以自己简单做一个。我这次就是用Vue.js和php做后端服务实现一个简单的博客。

界面

在这里插入图片描述

代码结构

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head><title>VueBlog</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"><script src="./static/js/vue.min.js"></script><script src="./static/js/vue-router.min.js"></script><script src="./static/js/axios.min.js"></script><link rel="stylesheet" href="./static/css/app.css">
</head>
<body><div id="app"><router-view></router-view></div><script src="./static/js/app.js"></script>
</body>
</html>

static/js/app.js

// 定义文章列表组件
const BlogList = {template: `<div class="container"><div class="header"><span class="logo"><img src="./static/img/logo.jpg" /></span><h2>TANKING，热爱创作！</h2><span class="tag"><a href="https://github.com/likeyun?tab=repositories" target="_blank"><img src="./static/img/github.png" /></a></span></div><div v-if="isLoading" class="loading-message">加载中...</div><ul v-infinite-scroll="loadMoreBlogs" infinite-scroll-disabled="loadingMore"><li v-for="blog in blogs" :key="blog.blog_id"><router-link :to="'/blog/' + blog.blog_id"><p class="blog_title">{{ blog.blog_title }}</p><p class="blog_info"><span>{{ blog.blog_category }}</span><span>{{ blog.blog_time }}</span><span>{{ blog.blog_pv }} 阅读</span></p></router-link></li></ul><div class="error-message" v-if="getFail">{{ getFail }}</div></div>`,// 数据data() {return {blogs: [], // 列表数据getFail: null, // 加载失败isLoading: true, // 加载中currentPage: 0, // 当前页码loadingMore: false // 是否正在加载更多内容};},async created() {// 加载初始文章列表await this.loadMoreBlogs();},mounted() {// 监听滚动事件window.addEventListener('scroll', this.handleScroll);},methods: {// 监听滚动事件handleScroll() {const scrollY = window.scrollY;const windowHeight = window.innerHeight;const documentHeight = document.documentElement.scrollHeight;if (scrollY + windowHeight >= documentHeight - 200 && !this.loadingMore) {// 当用户滚动到接近底部并且没有正在加载更多数据时this.loadMoreBlogs();}},// 异步加载列表async loadMoreBlogs() {try {// 正在加载更多数据this.loadingMore = true;const response = await axios.get('./server/getBlogList.php', {params: {p: this.currentPage + 1}});if (response.data.code === 200) {// 获取成功this.blogs.push(...response.data.blogList);this.currentPage++;} else if (response.data.code === 202) {// 已到最后一页this.getFail = '已到最后一页';// 销毁监听事件window.removeEventListener('scroll', this.handleScroll);} else {// 获取失败this.getFail = '获取博客列表失败';}// 隐藏加载中this.isLoading = false;} catch (error) {// 获取失败this.getFail = '获取博客列表失败';console.error(error);} finally {// 加载完成this.loadingMore = false;}}}
};// 文章正文组件
const BlogDetail = {template: `<div class="container"><div v-if="isLoading" class="loading-message">加载中...</div><div v-else><p class="blog_title blog_content_title">{{ blog.blog_title }}</p><p class="blog_info blog_content_info"><span>{{ blog.blog_category }}</span><span>{{ blog.blog_author }}</span><span>{{ blog.blog_time }}</span><span>{{ blog.blog_pv }} 阅读</span></p><div v-html="blog.blog_content" class="blog_content"></div><button class="like_button" @click="likeBlog" :disabled="isLiked">{{ blog.blog_like }} 赞</button></div><div class="error-message" v-if="getFail">{{ getFail }}</div></div>`,// 数据data() {return {blog: {},getFail: null,isLiked: false, // 是否已经点过赞isLoading: true, // 加载中};},// 异步加载内容async created() {try {// 根据路由加载博客正文var blogId = this.$route.params.id;const response = await axios.get('./server/getBlogContent.php?blogId=' + blogId);if (response.data.code == 200) {// 获取成功this.blog = response.data.blogContent;// 加载完成this.isLoading = false;}else{// 获取失败this.getFail = '获取博客内容失败';}} catch (error) {// 获取失败this.getFail = '获取博客内容失败';console.error(error);}// 检查本地存储是否已点赞，如果已点赞则更新 isLikedconst isLiked = localStorage.getItem('liked_' + blogId);if (isLiked === 'true') {// 如果有缓存就设置为你已经点过赞this.isLiked = true;}},// 方法methods: {// 记录点赞likeBlog() {if (!this.isLiked) {axios.post('./server/likeBlog.php?blogId=' + this.blog.blog_id).then(response => {if (response.data.code === 200) {// 更新点赞数量this.blog.blog_like++;// 将点赞状态设置为已点赞this.isLiked = true;// 点赞成功后，将点赞状态保存到本地存储localStorage.setItem('liked_' + this.blog.blog_id, 'true');}}).catch(error => {console.error(error);});}}}
};// 定义路由
const routes = [{ path: '/', component: BlogList },{ path: '/blog/:id', component: BlogDetail }
];const router = new VueRouter({routes
});// 创建Vue实例并挂载到app节点
new Vue({el: '#app',router
});

演示

http://demo.likeyunba.com/blog/#/

作者

TANKING

直接在html中引入Vue.js的cdn来实现一个简单的博客

摘要其实建立一个博客系统是非常简单的，有很多开源的程序，如果你不喜欢博客系统，也可以自己开发，也可以自己简单做一个。我这次就是用Vue.js和php做后端服务实现一个简单的博客。界面代码结构代码 index.html <!DOCTYP…...

编程日记 2023/8/15 21:39:43

Android Studio瀑布流实现

效果： ImageDetail class package com.example.waterfallflow; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.widget.ImageView;public class ImageDetail extends Activity{Overrideprotected void …...

编程日记 2023/8/15 21:38:42

Java 中的 == 运算符、equals 方法和 hashcode 方法

一、运算符是 Java 中的一个运算符，用于比较两个对象，但在比较两个对象的时候需要根据比较类型分情况进行讨论。 1.1 基本数据类型与基本数据类型基本数据类型之间通过进行比较的时候，是直接比较它们的大小，而与它们的具体…...

编程日记 2023/8/15 21:37:39

第一个ArkTS项目实践-鸿蒙ArkTS

第一个ArkTS项目实践-ArkTS 第一个ArkTS项目实践-ArkTS自定义组件的组成配置属性与布局配置属性布局改变组件状态循环渲染列表数据代码ToDoItem组件ToDoList页面效果参考资料第一个ArkTS项目实践-ArkTS 本篇文章是官网上视频对ArkTS开发实践的第一个视频，主要是引…...

编程日记 2023/8/15 21:36:38

【数据结构•堆】序列和的前n小元素（堆排序）

题目描述问题：序列和的前 n n n小元素给出两个长度为 n n n的有序表 A A A和 B B B, 在A和B中各任取一个, 可以得到 n 2 n^2 n2 个和. 求这些和最小的 n n n个。输入输出格式输入格式： 输入数据共三行。　　第一行，一个整数值 n n …...

编程日记 2023/8/15 21:35:37

Keepalived+http高可用实战

环境准备： 两台安装了keepalived的服务器 ip：192.168.134.170;192.168.134.172 1、安装http服务 yum install httpd -y2、写一个测试页面 [rootlocalhost ~]# echo "hostname -I,web1 test page. " > /var/www/html/inde [rootlocalho…...

编程日记 2023/8/15 21:34:36

Linux文件系统管理

Linux文件系统管理磁盘的组成与分区计算机用于存取文件的硬件是磁盘，磁盘的组成主要有磁盘盘、机械手臂、磁盘读取头与主轴马达所组成， 而数据的写入其实是在磁盘盘上面。磁盘盘上面又可细分出扇区(Sector)与磁道(Track)两种单位， 其中扇区…...

编程日记 2023/8/15 21:33:33

MyBatis-Plugin源码全面分析

三、MyBatis-Plugin 1. 基本开发方式需求：在MyBatis执行之前打印一行醒目的日志，携带参数实现Interceptor接口： Intercepts(Signature(type Executor.class,method "query",args {MappedStatement.class,Object.class, RowB…...

编程日记 2023/8/15 21:32:32

Vscode 常用操作教程

一、语言换成中文这是我们可以直接点击左边栏第四个图标搜索插件 chinese ,也可以直接ctrlshiftp快捷键也会出来如图所示图标，出来chinese 插件之后选择安装install,安装完成之后重新ctrlshiftp会出现如图所示页面找到我的鼠标在的地方对应的中文，此时…...

编程日记 2023/8/15 21:31:31

Linux设备树详解

Linux 设备树详解 Linux 操作系统早期是针对个人电脑设备而开发的操作系统，而个人电脑处理器产商较为单一（例如只有 Intel，AMD）同时个人电脑产商均使用 Intel 或 AMD 制造的处理器，业界形成了统一的总线/硬件接口标准…...

编程日记 2023/8/15 21:30:30

.netcore grpc服务端流方法详解

一、服务端流式处理概述客户端向服务端发送请求，服务端可以将多个消息流式传输回调用方和客户端流相反，客户端流发出请求，服务端可以传输一批消息给客户端，直至本次请求响应完全结束。针对文件分段传输下载，该方式非…...

编程日记 2023/8/15 21:29:28

python爬虫数据解析xpath、jsonpath，bs4

数据的解析解析数据的方式大概有三种 xpathJsonPathBeautifulSoup xpath 安装xpath插件打开谷歌浏览器扩展程序，打开开发者模式，拖入插件，重启浏览器，ctrlshiftx，打开插件页面安装lxml库安装在python环境中的Scri…...

编程日记 2023/8/15 21:28:26

go语言的database/sql结合squirrel工具sql生成器完成数据库操作

database/sql database/sql是go语言内置数据库引擎，使用sql查询数据库，配置datasource后使用其数据库操作方法对数据库操作，如下： package mainimport ("database/sql""fmt"_ "github.com/Masterminds…...

编程日记 2023/8/15 21:27:24

LVS集群和分布式

LVS 一.集群和分布式概念 1.1 集群在计算机领域，集群早在 1960 年就出现，随着互联网和计算机相关技术的发展，现在集群这一技术已经在各大互联网公司普及。 1.1.1 集群概念计算机集群指一组通过计算机网络连接的计算机，它们…...

编程日记 2023/8/15 21:26:23

使用QT可视化设计对话框详细步骤与代码

一、创建对话框基本步骤创建并初始化子窗口部件把子窗口部件放到布局中设置tab键顺序建立信号-槽之间的连接实现对话框中的自定义槽首先前面三步在这里是通过ui文件里面直接进行的，剩下两步则是通过代码来实现二、项目创建详细步骤创建新项目为项目命名为…...

编程日记 2023/8/15 21:25:21

TFTP Server

简介 TFTP（Trivial File Transfer Protocol,简单文件传输协议）是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议，提供不复杂、开销不大的文件传输服务。端口号为69。 TFTP和FTP的区别安全性区别 FTP支持登录安全&…...

编程日记 2023/8/15 21:24:18

登录验证码实现

Hutool代码改造 Hutool 有参考文档；很多工具类；把一些功能都封装好；都不用你自己去写；直接调用它的工具类它这里会详细告诉你引入方式Hutool <dependency><groupId>cn.hutool</groupId><artifactId>hu…...

编程日记 2023/8/15 21:23:15

2. 获取自己CSDN文章列表并按质量分由小到大排序（文章质量分、博客质量分、博文质量分）（阿里云API认证）

文章目录写在前面步骤打开CSDN质量分页面粘贴查询文章url按F12打开调试工具，点击Network，点击清空按钮点击查询是调了这个接口https://bizapi.csdn.net/trends/api/v1/get-article-score用postman测试调用这个接口（不行，认证不通…...

编程日记 2023/8/15 21:22:14

在Windows和MacOS环境下实现批量doc转docx,xls转xlsx

一、引言 Python中批量进行办公文档转化是常见的操作，在windows状态下我们可以利用changeOffice这个模块很快进行批量操作。二、在Windows环境下的解决文案 Windows环境下，如何把doc转化为docx，xls转化为xlsx？ 首先&#xff…...

编程日记 2023/8/15 21:21:13

【网络编程（二）】NIO快速入门

NIO Java NIO 三大核心组件 Buffer（缓冲区）：每个客户端连接都会对应一个Buffer，读写数据通过缓冲区读写。Channel（通道）：每个channel用于连接Buffer和Selector，通道可以进行双向读…...

编程日记 2023/8/15 21:20:11

多车环境下车载毫米波雷达是否会相互干扰？

在汽车工业迈向智能化与自动化的进程中，毫米波雷达已然成为了车辆感知体系中不可或缺的一部分。这种波长介于1毫米至10毫米之间的电磁波进行探测的装置，凭借其能够穿透雨雪、浓雾及强光直射的全天候工作能力，为高级驾驶辅助系统提供了关键的距…...

编程新知 2026/4/3 21:13:49

Driver Store Explorer终极指南：三步清理Windows冗余驱动，快速释放数十GB空间

Driver Store Explorer终极指南：三步清理Windows冗余驱动，快速释放数十GB空间【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 你是否发现Windows系统盘空间越来越…...

编程新知 2026/4/3 20:49:33

如何利用 SEO 工具提取网站的外部链接

如何利用 SEO 工具提取网站的外部链接在当今竞争激烈的网络环境中，外部链接（即指向你网站的其他网站的链接）已经成为提升网站搜索引擎排名的重要因素。利用 SEO 工具提取网站的外部链接，不仅能帮助你更好地了解你的网站链接情况…...

编程新知 2026/4/3 20:49:33

如何一步一步地获取和风天气的天气数据（2026版）

如何一步一步地获取和风天气的天气数据（2026版）一、和风天气核心优势二、前期准备2.1 注册和风天气开发者账号2.2 创建项目并获取认证密钥（API 项目ID/JWT Token）2.2.1 登录控制台 → 进入项目管理 → 点击创建项目。2.2.2 填写项…...

编程新知 2026/4/3 20:35:30

别再让用户装Python了！手把手教你用PyInstaller把Tkinter小工具变成独立EXE

告别Python依赖：用PyInstaller打造零配置的Tkinter桌面应用每次看到同事对着你开发的工具一脸茫然地问"Python是什么？pip又该怎么装？"，作为开发者的你是否感到深深的无力？这种技术鸿沟正在吞噬无数优秀工具…...

编程新知 2026/4/3 20:27:26

2025豆包AI高阶视频教程精准提示词合集大模型通用附教程资料大全

📂 资源包含哪些硬核内容？（部分展示） 资源下载地址：https://pan.quark.cn/s/fdeeee266e5b 主要涵盖但不限于以下核心模块： 📖 【AI阅读大师】法！ 🎨 【文生图魔方…...

编程新知 2026/4/3 20:09:12

SharpSCADA项目实战：基于样例工程构建完整物料接收生产线

SharpSCADA项目实战：基于样例工程构建完整物料接收生产线【免费下载链接】SharpSCADA C# SCADA 项目地址: https://gitcode.com/gh_mirrors/sh/SharpSCADA 想要快速掌握工业自动化SCADA系统的开发吗？SharpSCADA项目为你提供了一个完美的起点&…...

编程新知 2026/4/3 20:05:11