重构博客——开发环境搭建

January 02,2017
0
Blog

其实 JavaScript 全栈开发已经兴起好长时间了,现在终于有机会来尝试一下,只用一门语言就可以开发前后端(JavaScript => JSON => JavaScript),并实现前后端分离(后端只提供接口,前后端用 JSON 进行交互)。本文也将分为前端和后端两个模块来介绍开发环境的搭建。

源码地址 GitHub

项目结构

  • server —— 后端

    • server/router —— 后端路由
    • server/models —— 数据库相关
    • server/config —— 项目配置
    • app.js —— 后端入口文件
  • client —— 前端

    • 使用 vue-cli 生成前端目录
      npm i -g vue-cli
      vue init webpack
      
    • client/src/main.js —— 前端入口文件
    • client/src/router.js —— 前端路由

后端

目前 Express 可以说是最流行的 Nodejs 服务端框架了,而且国内也有基于 Express 框架的网站,总体看来,是一个非常成熟的可用的框架。后端用到的框架有:

前端

前端主要用 Vuejs + Element-UI 来实现。目前暂时用 Element-UI ,可能会切换到其他的 UI 组件库。前端用到的框架有(排除 vue-cli 自动添加的):

  • vue-router —— 为 vuejs 添加路由支持
  • element-ui —— 饿了么开发的 vue2.0 前端组件库
  • axios —— 基于 Promise 的 HTTP 客户端
    • 如果你熟悉 vue-resource ,可以这样在 main.js 中添加如下代码:
      import Vue from 'vue'
      import axios from 'axios'
      Vue.property.$http = axios
      

数据库

数据库的安装可以参考 MongoDB 文档

数据库采用了轻量级的 MongoDB 来开发,不同于传统的 SQL 数据库,它属于 NOSQL 数据库,我们可以来对比一下两种数据库:

SQL DatabaseMongoDB解释
databasedatabase数据库
tablecollection数据表/集合
rowdocument数据行记录/文档
columnfield数据字段/域
indexindex索引
primary keyprimary key(_id)主键,MongoDB 自动设置 _id 为主键

在开发过程中会使用 mongoose 来操作数据库,它提供了良好的数据库操作 API 。

这一篇就当作是重构博客的开端。下一篇就来聊聊数据库的实现


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用 CC BY-NC-SA 4.0 - 非商业性使用 - 相同方式共享 4.0 国际进行许可。