# ForntEnd

**Repository Path**: dabaishu/forntend

## Basic Information

- **Project Name**: ForntEnd
- **Description**: Dabaishu Blog System大白薯博客系统，前台前端
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://dabaishu.oschina.io
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2017-04-18
- **Last Updated**: 2025-05-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dabaishu Blog System

> ForntEnd of DaBaiShu Blog System

> 大白薯博客系统展示前端

## 技术选型

### What？

展示前台部分，采用nuxt.js服务端客户端同构框架

[Nuxt.js](https://cn.nuxtjs.org/guide) 是啥？点击名字查看

    

###　Why？

[Nuxt.js](https://cn.nuxtjs.org/guide),基于Vuejs全家桶，能够帮助开发者，构建一套代码之后，可以同时运行于服务端和客户端，能够很好的兼顾单页面的用户体验，和服务端渲染的SEO优化内容。

[Vuejs](https://vuefe.cn/v2/guide/)，可以使用其数据驱动，数据双向绑定功能，减少开发中dom操作成本，增加代码可维护性，Vue对dom操作的算法，以及虚拟dom的引入，可以提高dom操作的效率。

[Muse UI](http://www.muse-ui.org/#/install),Google MD 风格比较简约，个人比较喜欢，相信大部分人都会喜欢这个UI风格的，使用UI框架，让我们可以不用拘束于底层组件的构建，专注于业务的开发。此UI框架，基础功能相对简单，但是符合项目需求





## 模块划分

1. 用户中心
    1. 个人主页
        1. 个人文章 - 带搜索
            - 文章列表
            - 评论列表
            - 全部文章导出
        1. 个人专栏
        1. 个人分类
    1. 个人设置
        1. 资料设置
            - 头像
            - 昵称
            - 电子邮件（只读）
            - 手机号码
            - 性别
            - 个人简介
            - 个人网站
            - 社交信息
        1. 专栏设置
            1. 专栏列表
            1. 新建/编辑专栏
            1. 专栏文章管理
        1. 分类设置
            1. 分类列表
            1. 新建/编辑分类
            1. 分类文章管理
        1. 账户设置
            1. 密码管理
            1. 邮箱管理
            1. 手机号管理

1. 前台首页

	- 优秀文章
	- 邮箱专栏
	- 标签导航
	- 搜索入口

1. 文章列表

	- 文章搜索-结果展示于列表
	- 文章列表
	- 标签
	- 优秀专栏

1. 文章详情

	- 阅读量
	- 点赞量
	- 评论
		- 评论者
		- 被回复者
		- 评论内容
		- 评论时间
	- 创建时间
	- 更新时间
	- 是否原创
	- 类型(原创、转载、翻译)

1. 专栏列表

	- 专栏搜索-结果展示于列表
	- 专栏列表
	- 标签

1. 专栏详情

	- 文章搜索-结果展示于列表
	- 文章列表
	- 标签

1. 文章编辑

    - 文章实时预览
    - 文章本地缓存
    - 文章服务端草稿
    - MarkDown Web 编辑器

1. 登陆中心

    - 邮箱 - 密码登陆
    - 手机号 - 密码登陆
    - 邮箱 - 验证码登陆
    - 手机号 - 验证码登陆

1. 注册中心

    - 手机号注册
    - 邮箱注册

    
## 构建步骤

``` bash
# 安装依赖
$ npm install # Or yarn install

# 启动可热更新开发服务 http://localhost:3000
$ npm run dev

# 构建生产环境并启动生产服务
$ npm run build
$ npm start

# 构建静态页面站
$ npm run generate
```


构建工具基于Nuxt, 查看 [Nuxt.js 文档](https://github.com/nuxt/nuxt.js)。