学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来做,数据库用mongodb。总的来说就是 node + vue + mongodb开发博客系统,探索前端走向全栈之路。

我会记录下来整个过程在我的专栏,有兴趣的可以关注一下,一起学习,欢迎讨论。

话不多说,先进行前后端项目的初始化。

前端项目初始化

命令行输入命令 cd your_project // 切换到你想要切换到文件夹
安装vue脚手架vue-cli 命令行输入 npm install vue-cli -g
安装完成后,输入 vue init webpack blog // vue初始化,blog是项目的名称,可自行更改,初始化的数据可根据自己的的需要选择默认或是自己命名,需要说明的是,vue-router选项需要选择yes,因为要前后端分离,路由由前端控制。

安装完成后,输入命令 cd blog 切换到项目文件夹后,输入命令 npm run dev 访问一下 http://localhost:8080,项目初始化完成。(最新版本的vue-cli不用手动安装依赖,他会自动安装,第九影院所以没有了 npm install )

下面解释一下项目的目录

buildconfig文件都是关于webpack的相关配置,暂且先不管它
项目中安装的依赖都存放在node_modules目录中
src目录就是我们在开发过程中写代码的地方
assets存放一些js css 图片等资源,可根据需要选择要与不要
components中放的就是.vue的文件,每一个文件都是一个组件
routerindex.js就是我们写路由的地方
app.vue就是最终的单页面呈现的组件
main.js就是整个项目的入口文件

后端项目初始化

这里我用的node的express框架,先安装expres生成器,用来快速生成express应用骨架
命令行输入 npm install express-generator -g 
安装成功后,命令行输入 express blog-server www.dijiuyy.com 这里blog-server是后端项目的名称,根据自己需要改变
安装完成后,进入后端项目 cd blog-server
然后执行 npm install 安装项目依赖
安装完成后,启动项目 npm start
打开浏览器访问 localhost:3000 可看到启动成功

前端和后端都启动成功,接下来就正式开始开发。
show time~

【Part1】用JS写一个Blog(node + vue + mongoDB)的更多相关文章

  1. [AST实战]从零开始写一个wepy转VUE的工具

    为什么需要 wepy 转 VUE "转转二手"是我司用 wepy 开发的功能与 APP 相似度非常高的小程序,实现了大量的功能性页面,而新业务 H5 项目在开发过程中有时也经常需要 ...

  2. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  3. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  4. 手把手教你从零写一个简单的 VUE

    本系列是一个教程,下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 今天给大家带来的是实现一个简单的类似 VUE 一样的前端框架,VUE 框架现在应 ...

  5. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  6. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  7. 如何使用 js 写一个正常人看不懂的无聊代码

    如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

  8. 使用 Node.js 写一个代码生成器

    背景 第一次接触代码生成器用的是动软代码生成器,数据库设计好之后,一键生成后端 curd代码.之后也用过 CodeSmith , T4.目前市面上也有很多优秀的代码生成器,而且大部分都提供可视化界面操 ...

  9. [NodeJS]使用Node.js写一个简单的在线聊天室

    声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require ...

随机推荐

  1. Aizu 2456 Usoperanto (贪心)

    贪心,对于一个修饰关系可以连一条有向边,在合并的时候,子节点的序列一定是连续安排的,因为如果有交叉,交换以后一定更优. 然后一个序列一个序列的考虑,长度短的应该在前面,否则同样交换以后更优.因此排序以 ...

  2. 【洛谷4011】孤岛营救问题(状压SPFA)

    点此看题面 大致题意: 有一个\(N*M\)的四联通迷宫,相邻两个可能互通,可能有一扇门,也可能有一堵墙.对于第\(i\)类的门,你需要有第\(i\)类的钥匙才可以通过.问你从\((1,1)\)到达\ ...

  3. tableViewcell上放定时器

    tableviewcell上的定时器: 1.创建一个管理定时器的TimerManger类, TimerManger.h #import <Foundation/Foundation.h> ...

  4. Java 虚拟机枚举 GC Roots 解析

    JVM 堆内存模型镇楼. 读<深入理解 Java 虚拟机>第三章GC算法,关于 GC Roots 枚举的段落没说透彻,理解上遇到困惑.因此对这点进行扩展并记录,发现国内各种博客写来写去都是 ...

  5. php xdebug扩展无法进入断点问题

    Waiting for incoming connection with ide key 看到这句话就恶心 这两天搞php运行环境搞的头大,好在现在终于调通了,可以正常进入断点了 现在记录一下,避免下 ...

  6. BundleConfig的作用

    在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原 ...

  7. 委托、事件与Observer设计模式

    范例说明 上面的例子已不足以再进行下面的讲解了,我们来看一个新的范例,因为之前已经介绍了很多的内容,所以本节的进度会稍微快一些: 假设我们有个高档的热水器,我们给它通上电,当水温超过95度的时候:1. ...

  8. React后台管理系统-登录页面

    登录页面 <div className="col-md-4 col-md-offset-4">                <div className=&qu ...

  9. 如何使用工具进行C/C++的内存泄漏检测

    系统编程中一个重要的方面就是有效地处理与内存相关的问题.你的工作越接近系统,你就需要面对越多的内存问题.有时这些问题非常琐碎,而更多时候它会演变成一个调试内存问题的恶梦.所以,在实践中会用到很多工具来 ...

  10. [JZOJ] 5935. 小凯学数学

    由Noip2018初赛的知识得,a|b + a&b = a+b 设计一个区间dp,设\(f[l][r][x]\)表示区间\([l,r]\)能否构成\(x\),数据不大,转移暴力枚举 复杂度\( ...