本项目是一个用vue和node以及mysql实现的一个简单的个人博客系统,整体逻辑比较简单.但是可以我们完整的了解一个项目从数据库到后端到前端的实现过程,适合不太懂这一块的朋友们拿来练手. 本项目所用到的技术和工具: 前端:vue,element-ui,axios,webpack,npm或者yarn,vuex,PWA 后端:express 数据库:mysql 开发工具:Vs Code,Navicat 部分展示页面: 项目结构目录: dist中是打包生成的文件,server中是关于后端服务器的配置

Vue实战狗尾草博客后台管理平台第七章 本章内容为借助模块化来阐述Vuex的进阶使用. 在复杂项目的架构中,对于数据的处理是一个非常头疼的问题.处理不当,不仅对维护增加相当的工作负担,也给开发增加巨大的压力. 在大量的实战开发过程中,狗尾草总结出来的较为友好的方式是 使用一个单独的数据管理库去管理数据. 这样不会给页面增加额外的负担.且API的调用也属于数据处理/获取的部分.因此也放在数据管理下统一管理 注:本章节内容与狗尾草博客管理平台没有任何关系,仅作为Vuex的进阶使用来分享 对模块化的简

Vue实现狗尾草博客后台管理系统第六章 本章节内容 文章列表 文章详情 草稿箱 文章发布. 本章节内容呢,开发的很是随意哈,因为多数就是element-ui的使用,熟悉的童鞋,是可以很快完成本章节的内容的. 为啥文章模块会有这么多东西呢? 因为狗尾草想着以后,文章如果是待发布的话就需要一个地方去存放起来,一开始删除的文章呢,也将会被移入到草稿箱中,这样的话,文章就不会被随便的更改啦. 文章列表 先给大家一张效果图 是不是感觉非常轻松,一个table就可以搞定, 这里的代码呢,我就直接贴出来,因为

Vue实现狗尾草博客后台管理系统第三章 本章节,咱们开发管理系统侧边栏及面包屑功能. 先上一张效果图 样式呢,作者前端初审,关于设计上毫无美感可言,大家可根据自己情况设计更好看的哦~ 侧边栏 这里我们借助element的aslide侧边栏,直接使用. 在components>commons下新建Aslide.vue,Header.vue组件.分别作为我们的侧边栏和头部组件. Aslide内容,我们直接使用el-menu及相关侧边栏组件.不过要仔细阅读以下官方文档,否则使用会比较费劲. colla

MWeb 比较有特色的是一键生成静态博客功能,然后从 MWeb 最开始规划要做静态博客生成功能时,我就希望 MWeb 的静态博客生成功能在易用的同时,还要有很强大的扩展性. 比如说能自己增加网站公告,这个公告可以随时更换和取消.再比如说能自己为网站增加广告,而且可以增加多个广告位,google 的或者自定的广告都可以.这些之前都可以通过修改模板解决,但是有些是解决不了的:比如说把文章列表做成像 theverge http://www.theverge.com/reviews 的页的效果,就是列表

Vue实战狗尾草博客后台管理系统第一章 这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vue init webpack gwc_manage  初始化过程中,会让我们进行一些依赖包,项目配置的基本选择.项目名称,作者信息,描述,是否安装路由,eslint,测试单元,npm/yarn. 这里不选择安装eslint和测试单元.用过的人应该知道非常酸爽. 项目初始化成功后, npm run d

源码 耗时半载(半个月)的大项目终于完成了.这是一个博客系统,使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的修改和删除).文章编辑(Markdown).标签分类等功能. 很早之前就想写一个个人博客.学了 Vue 之后,把前端部分写出来,然后 Node 一直拖拖拉拉的学了很久,中间又跑去实习了一段时间,所以直到回学校之后才列了个计划把这个项目实现了. 翻出之前写的前端部分,好丑啊,干脆推掉重写吧.前端模仿的

kindeditor在之前已经用过,现在在springboot项目中使用.并且也在里面使用了图片上传以及回显等功能. 其实主要的功能是图片的处理:kindeditor对输入的内容会作为html标签处理,对于image的做法是先将图片传到后台服务器,然后上传成功之后回传图片的URL,之后内容中增加<img src='url'>进行回显,当然保存到数据库也是img标签进行保存的. 下面的代码涉及到了:Restful风格的请求.SpringMVC文件的上传.不配置虚拟路径的前提下请求图片资源.kin

因为我是一直写C#的,所以最近闲暇时间一直在学习.NET Core,该博客的后端使用的就是.NET Core WebApi然后加前端Vue. 首先后端.NET Core搭的框架是一个仓储层+服务层+API,然后数据库访问是EF Core+Mysql数据库.具体接口都使用的异步,使用第三方IOC容器解耦. 然后前端页面是网上找的模板https://www.yangqq.com/link.html,博主有各种风格的博客,可以去看下.然后接口请求是axios,vue用来处理数据. 开发环境:vs201

一入冬懒癌发作,给自己找点事干.之前博客程序写过几次,php 的写过两次,nodejs 用 ThinkJS 写过,随着 ThinkJS 版本从1.x 升级到 2.x 之前的博客程序也做过升级.但是因为前面考虑搜索引擎抓取还是用传统的方式开发,没有做前后端分离.这次准备用 vue2.x 和 ThinkJS 3.X 重新写一次.这里主要记录一下开发过程中遇到的问题和解决方法. 地址 https://github.com/lscho/Thin... 尚未写完,持续更新中,后续更新发布在个人博客中:ht

伙伴们出来啦,探讨各问题,关于项目中大量的表单,大家是怎么处理的? 本章主要内容如下:底层布局,路由配置,github仓库推送关联. 关联GitHub仓库 关联建立在github已创建账号的基础上 登录自己的Github账号 新建项目 然后根据自己的情况添加名称和描述 新建完成后,我们只需要按照提示的信息一步一步完成即可 复制命令行到项目终端,回车即可实现推送. 为了验证推送的readme.md文件我们刷新github,即可看到自己添加的readme文件已经才存在仓库之中,下来我们就需要添加项目

先来一下演示效果.和vue的官方文档几乎是一致的,页面内容都可自定义. 此教程部署后的效果预览. 在你跟着教程搭建好项目之后,你会收获: 快速搭建一个文档/博客,后期只需要修改markdown内容和导航参数,即可一键打包生成页面. 页面具有非常好的加载性能和搜索引擎优化(SEO),其他的页面则会只在用户浏览到的时候才按需加载. 自动生成全局搜索.记录上次修改时间等功能. 可嵌入vue组件或跳转至其他页面,可定制自己的样式模板便于扩展. 一键免费部署到 github.pages,无需服务器即可拥有

我们再来看一下管理类的设计. Composition API,就是组合API的意思,那么是不是应该把js代码分离出来,做成独立的管理类的形式呢? 这样代码可以更整洁一些,主要是setup里面的代码就不会乱掉了. 管理类 import webSQLHelp from '../store/websql-help' import { blog, blogForm, blogList, articleList, discuss, discussList } from './blogModel' impo

标签功能添加流程 0.功能概括 标签作为文章中的分类标记,会显示出该文章是关于哪一方面的文章,比如是关于python的还是关于django的. 当我们点击该标签的时候,会出现该博客中所有属于该标签的文章 1.在其他页面做一个链接,指向标签分类页面 在其他页面中显示该文章标签的地方操作,对该标签添加一个URL,作用是定向到分类标签页面的URL(例如tag页面) <a href="{% url "search_tag" tag=post.category %}"&

Windows Live Writer是一款小巧的写博客的工具,非常方便,甚至网上看到过有的评论称Live Writer是一款最不像微软产品的微软产品. Writer支持MSN Spaces以及Wordpress之类的很多博客模板,但是如果是自己写的博客系统呢,就像我的游戏版面,因此就如上一篇的RSS功能一样,也需要亲自动手一下了. XMLRPC协议直白的讲是一个远程通讯用的标准,通讯的双方都使用XML格式来交流,而为了使双方的程序都明白数据的内容,需要有一个格式的约束,这个约束就是XMLRPC

作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 在之前的系列教程中,我们已经实现了:文章的发布.展示.评论等功能,可能认真的小伙伴已经发现这些功能有一些地方设计的不是很好,今天我们就来优化一些体验和操作上的细节.让我们的博客更加完美,使用起来更加顺手- 在模型中指定排序 为了让文章(Post)按发布时间逆序排列,让最新发表的文章排在文章列表的最前面,我们对返回的文章列表进行了排序,即各个视图函数中都有类似于 Post.object

本章主要内容如下: 静态资源服务器的配置.学会如何使用静态资源服务器引入静态资源.并给大家推荐一个免费可使用的oss服务器~ 页面的开发由于近期做出的更改较大.就放在下一篇中. 静态资源服务器 静态资源服务器一般我叫他oss服务器,我们一般都会将一些静态资源文件,比如图片或者其他的视频,音频文件,脚本文件等都可以进行存放.而我们在开发中也仅仅通过连接引入即可进行使用.减少了本地图片的加载.在通过CDN加速后,起响应速度也不用担心啦~ 免费的静态资源服务器体验 七牛云确实是一个挺良心的平台哈.说真

本章主要内容如下: 填补上期的坑. iconfont仓库的关联,引入. 开发登录页面 填坑 上期中我们功能都已正常使用.但不知道有没有小伙伴测试过error页面,当访问地址不存在时,路由是否能正常挑战error页面. 其实是不能的,因为上期的路由配置中,对404,页面及通配符页面的auth没有关掉,导致,在没有登录的情况下,404页面是进不去的.必须先进行登录.所以这是不合适的.这里大家需要先关掉auth. router>permission.js文件中,我们在校验到没有登录的时候会跳转到登录页

开发环境:Python3.5.2和Django1.10.2 username: rootemail: 2016968116@qq.compassword: 123456liuqiuchen 现在我们进入Django中的交互式shell来进行数据库的增删改查等操作 $ python manage.py shellPython 3.4.2 (v3.4.2:ab2c023a9432, Oct 5 2014, 20:42:22)[GCC 4.2.1 (Apple Inc. build 5666) (do

功能:在A网页提交一个评论Forms_B,提交之后自动刷新页面,能够显示刚刚的画面思路:利用一个已经创建的表单,通过视图让其在网页中表现出来,填写玩信息之后提交,会提交到一个新的视图里面去做接受,接受之后重定向到另外一个地方.(是什么地方)步骤: 一.在app里面的forms.py里面新建一个表单: #blog/forms.py from django import forms class CommentForm(forms.Form): ''' 评论表单 ''' #author使用CharFi

功能:在打开文章之后,能在文章下面是显示文章的评论,有父级评论.思路:在文章详情的视图里面,获取这个文章的全部评论,得到显示列表,然后用模板显示出来.步骤:一,在views.py的文章详情中获取评论: 1 #文章详情 2 #blog/views.py 3 def article(request): 4 try: 5 # 获取评论信息 6 #查询指定文章的所有评论,按照id排序 7 comments = Comment.objects.filter(article=article).order_b