此 blog 项目是基于 react 全家桶 + Ant Design 。
效果图:
- pc 端
- 移动端适配
完整效果请看:http://biaochenxuying.cn:2019/
- 登录
- 注册
- 文章列表
- 标签分类
- 个人介绍
- 点赞与评论
- 留言
- 时间轴
- 项目展示
- 发文(支持 MarkDown 语法)
- 文章详情展示(支持代码语法高亮)
- 移动端适配
- 网站波浪效果(请看 https://biaochenxuying.cn/wave.html)
- 第三方 github 授权登录
- 文章归档
- 文章详情的目录
因为访问地址 http://biaochenxuying.cn:2019/ 加了端口 2019 ,所以体验线上的授权功能会受限
完整功能请访问 vue + typescript + element-ui 版的 https://biaochenxuying.cn
- 无
- react: ^16.8.4
- antd: ^3.15.0
- react-router::^4.3.1
- webpack: 4.28.3
- axios:0.18.0
- redux: ^4.0.1
- highlight.js: ^9.15.6
- marked:^0.6.1
- 项目是按 antd 推荐的教程来搭建的:antd 在 create-react-app 中使用 , 实现了 按需加载组件代码和样式。
- components
- article 文章详情
- articles 文章列表
- comments 评论
- loadEnd 加载完成
- loading 加载中
- login 登录
- message 留言
- nav 导航
- project 项目
- register 注册
- slider 右边栏(博主 logo 、链接和标签等)
- artchive 归档
- timeLine 时间轴(历程)
- router 路由
- store redux 的状态管理
- utils 封装的常用的方法
- views 框架页面
- 关于 页面
对于 关于 的页面,其实是一篇文章来的,根据文章类型 type 来决定的,数据库里面 type 为 3 的文章,只能有一篇就是 博主介绍 ;达到了想什么时候修改内容都可以。
所以当 this.props.location.pathname === '/about' 时就是请求类型为 博主介绍 的文章。
type: 3, // 文章类型: 1:普通文章;2:是博主简历;3 :是博主简介;
# install dependencies
npm install
# serve with hot reload at localhost: 3000
npm start 或者 yarn start
# build for production with minification
npm run build 或者 yarn run build
如果要看完整的效果,是要和后台项目 blog-node 一起运行才行的,不然接口请求会失败。
虽然引入了 mock 了,但是还没有时间做模拟数据,想看具体效果,请稳步到我的网站上查看 http://biaochenxuying.cn:2019
其他具体的业务代码,都是些常会见到的需求,这里就不展开讲了。
项目地址:
前台展示: https://github.com/biaochenxuying/blog-vue-typescript
本博客系统的系列文章:
笔者觉得每个开发者都应该拥有自己的网站和服务器,这可是很酷的事情,学习 Linux、跑跑脚本、建站、搭博客啥的都行啊。
因为笔者就有自己的服务器,而且有两台了,用于平时的学习,还搭建了自己的网站。
有不少读者问过我,为什么我学的那么快的呢 ? 怎么在一年内学了那么知识的...
其实也没什么秘决,就是平时有自己的服务器了,就爱折腾,学到的知识能很快得到验证,所以学起来兴致高一点。
特别是大三和大四的学生,买了服务器,搭建个项目给面试官看也香,对找工作和面试都加分,还可以熟悉技术栈。
想学得快,就得有自己的服务器来折腾才行(低于 1 折、89/年、229/3年,比学生机还便宜)
比如笔者的两个网站:
如果您觉得本项目和文章不错或者对你有所帮助,请给个星吧,你的肯定就是我继续创作的最大动力。