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

摘要

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

界面

代码结构

代码

index.html

static/js/app.js

// 定义文章列表组件
const BlogList = {
    template: `
    

        

            
                
            
            
TANKING，热爱创作！
            
                
                    
                
            
        
        
加载中...
        

            

                
                
{{ blog.blog_title }}
                

                    {{ blog.blog_category }}
                    {{ blog.blog_time }}
                    {{ blog.blog_pv }} 阅读
                
                
            
        
        
{{ getFail }}
    
`,
    
    // 数据
    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: `
    

        
加载中...
        

            
{{ blog.blog_title }}
            

                {{ blog.blog_category }}
                {{ blog.blog_author }}
                {{ blog.blog_time }}
                {{ blog.blog_pv }} 阅读
            
            

            {{ blog.blog_like }} 赞
        
        
{{ getFail }}
    
`,
    
    // 数据
    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);
        }
        
        // 检查本地存储是否已点赞，如果已点赞则更新 isLiked
        const 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