zoukankan      html  css  js  c++  java
  • 【Part1】用JS写一个Blog(node + vue + mongoDB)

    学习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~

  • 相关阅读:
    Sum of Medians
    MINSUB
    Girls Love 233
    How Many Answers Are Wrong
    Sorting It All Out
    Cube Stacking
    Boolean Expressions
    表达式求值
    #1301 : 筑地市场
    用seaborn对数据可视化
  • 原文地址:https://www.cnblogs.com/tianshifu/p/8044857.html
Copyright © 2011-2022 走看看