直接在html中引入Vue.js的cdn来实现一个简单的博客
摘要
其实建立一个博客系统是非常简单的，有很多开源的程序，如果你不喜欢博客系统，也可以自己开发，也可以自己简单做一个。我这次就是用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…...
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 …...
Java 中的 == 运算符、equals 方法和 hashcode 方法
一、 运算符 是 Java 中的一个运算符，用于比较两个对象，但在比较两个对象的时候需要根据比较类型分情况进行讨论。 1.1 基本数据类型与基本数据类型 基本数据类型之间通过 进行比较的时候，是直接比较它们的大小，而与它们的具体…...
第一个ArkTS项目实践-鸿蒙ArkTS
第一个ArkTS项目实践-ArkTS 第一个ArkTS项目实践-ArkTS自定义组件的组成配置属性与布局配置属性布局 改变组件状态循环渲染列表数据代码ToDoItem组件ToDoList页面 效果参考资料 第一个ArkTS项目实践-ArkTS 本篇文章是官网上视频对ArkTS开发实践的第一个视频，主要是引…...
【数据结构•堆】序列和的前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 …...
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…...
Linux文件系统管理
Linux文件系统管理 磁盘的组成与分区 计算机用于存取文件的硬件是磁盘，磁盘的组成主要有磁盘盘、机械手臂、磁盘读取头与主轴马达所组成， 而数据的写入其实是在磁盘盘上面。磁盘盘上面又可细分出扇区(Sector)与磁道(Track)两种单位， 其中扇区…...
MyBatis-Plugin源码全面分析
三、MyBatis-Plugin 1. 基本开发方式 需求：在MyBatis执行之前打印一行醒目的日志，携带参数 实现Interceptor接口： Intercepts(Signature(type Executor.class,method "query",args {MappedStatement.class,Object.class, RowB…...
Vscode 常用操作教程
一、语言换成中文 这是我们可以直接点击左边栏第四个图标搜索插件 chinese ,也可以直接ctrlshiftp快捷键也会出来如图所示图标，出来chinese 插件之后选择安装install,安装完成之后重新ctrlshiftp会出现如图所示页面 找到我的鼠标在的地方对应的中文，此时…...
Linux设备树详解
Linux 设备树详解 Linux 操作系统早期是针对个人电脑设备而开发的操作系统，而个人电脑处理器产商较为单一（例如只有 Intel，AMD）同时个人电脑产商均使用 Intel 或 AMD 制造的处理器，业界形成了统一的总线/硬件接口标准…...
.netcore grpc服务端流方法详解
一、服务端流式处理概述 客户端向服务端发送请求，服务端可以将多个消息流式传输回调用方和客户端流相反，客户端流发出请求，服务端可以传输一批消息给客户端，直至本次请求响应完全结束。针对文件分段传输下载，该方式非…...
python爬虫数据解析xpath、jsonpath，bs4
数据的解析 解析数据的方式大概有三种 xpathJsonPathBeautifulSoup xpath 安装xpath插件 打开谷歌浏览器扩展程序，打开开发者模式，拖入插件，重启浏览器，ctrlshiftx，打开插件页面 安装lxml库 安装在python环境中的Scri…...
go语言的database/sql结合squirrel工具sql生成器完成数据库操作
database/sql database/sql是go语言内置数据库引擎，使用sql查询数据库，配置datasource后使用其数据库操作方法对数据库操作，如下： package mainimport ("database/sql""fmt"_ "github.com/Masterminds…...
LVS集群和分布式
LVS 一.集群和分布式概念 1.1 集群 在计算机领域，集群早在 1960 年就出现，随着互联网和计算机相关技术的发展，现在 集群这一技术已经在各大互联网公司普及。 1.1.1 集群概念 计算机集群指一组通过计算机网络连接的计算机，它们…...
使用QT可视化设计对话框详细步骤与代码
一、创建对话框基本步骤 创建并初始化子窗口部件把子窗口部件放到布局中设置tab键顺序建立信号-槽之间的连接实现对话框中的自定义槽 首先前面三步在这里是通过ui文件里面直接进行的，剩下两步则是通过代码来实现 二、项目创建详细步骤 创建新项目 为项目命名 为…...
TFTP Server
简介 TFTP（Trivial File Transfer Protocol,简单文件传输协议）是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议，提供不复杂、开销不大的文件传输服务。端口号为69。 TFTP和FTP的区别 安全性区别 FTP支持登录安全&…...
登录验证码实现
Hutool代码改造 Hutool 有参考文档；很多工具类；把一些功能都封装好；都不用你自己去写；直接调用它的工具类 它这里会详细告诉你引入方式Hutool <dependency><groupId>cn.hutool</groupId><artifactId>hu…...
2. 获取自己CSDN文章列表并按质量分由小到大排序（文章质量分、博客质量分、博文质量分）（阿里云API认证）
文章目录 写在前面步骤打开CSDN质量分页面粘贴查询文章url按F12打开调试工具，点击Network，点击清空按钮点击查询是调了这个接口https://bizapi.csdn.net/trends/api/v1/get-article-score用postman测试调用这个接口（不行，认证不通…...
在Windows和MacOS环境下实现批量doc转docx,xls转xlsx
一、引言 Python中批量进行办公文档转化是常见的操作，在windows状态下我们可以利用changeOffice这个模块很快进行批量操作。 二、在Windows环境下的解决文案 Windows环境下，如何把doc转化为docx，xls转化为xlsx？ 首先ÿ…...
【网络编程（二）】NIO快速入门
NIO Java NIO 三大核心组件 Buffer（缓冲区）：每个客户端连接都会对应一个Buffer，读写数据通过缓冲区读写。Channel（通道）：每个channel用于连接Buffer和Selector，通道可以进行双向读…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...
Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）
引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要： 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式（自动驾驶、人工驾驶、远程驾驶、主动安全），并通过实时消息推送更新车…...
uniapp 开发ios， xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档：manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号：4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合
作者：来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布，Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明，Elastic 作为 …...
渗透实战PortSwigger靶场：lab13存储型DOM XSS详解
进来是需要留言的，先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码，输入的<>当成字符串处理回显到页面中，看来只是把用户输…...