摘要：总的来说就是开发博客系统，探索前端走向全栈之路。我会记录下来整个过程在我的专栏，有兴趣的可以关注一下，一起学习，欢迎讨论。话不多说，先进行前后端项目的初始化。安装完成后，输入命令切换到项目文件夹后输入命令访问一下项目初始化完成。
学习JS也有一段时间了，准备试着写一个博客项目，前后端分离开发，后端用node只提供数据接口，前端用vue-cli脚手架搭建，路由也由前端控制，数据异步交互用vue的一个插件vue-resourse来做，数据库用mongodb。总的来说就是 node + vue + mongodb 开发博客系统，探索前端走向全栈之路。
我会记录下来整个过程在我的专栏，有兴趣的可以关注一下，一起学习，欢迎讨论。
话不多说，先进行前后端项目的初始化。
前端项目初始化新建项目的文件夹，并切换到新建的文件夹
安装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 )
下面解释一下项目的目录
build和config文件都是关于webpack的相关配置，暂且先不管它
项目中安装的依赖都存放在node_modules目录中
src目录就是我们在开发过程中写代码的地方
assets存放一些js css 图片等资源，可根据需要选择要与不要
components中放的就是.vue的文件，每一个文件都是一个组件
router中index.js就是我们写路由的地方
app.vue就是最终的单页面呈现的组件
main.js就是整个项目的入口文件
这里我用的node的express框架，先安装expres生成器，用来快速生成express应用骨架
命令行输入 npm install express-generator -g
安装成功后，命令行输入 express blog-server // 这里blog-server是后端项目的名称，根据自己需要改变
安装完成后，进入后端项目 cd blog-server
然后执行 npm install 安装项目依赖
安装完成后，启动项目 npm start
打开浏览器访问 localhost:3000 可看到启动成功
前端和后端都启动成功，接下来就正式开始开发。
show time~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/19145.html
摘要：总的来说就是开发博客系统，探索前端走向全栈之路。我会记录下来整个过程在我的专栏，有兴趣的可以关注一下，一起学习，欢迎讨论。话不多说，先进行前后端项目的初始化。安装完成后，输入命令切换到项目文件夹后输入命令访问一下项目初始化完成。 学习JS也有一段时间了，准备试着写一个博客项目，前后端分离开发，后端用node只提供数据接口，前端用vue-cli脚手架搭建，路由也由前端控制，数据异步交互用...
摘要：用写一个用写一个上一节我们把数据库连接成功了，这节我准备写关于文章的数据接口增删改查上次说到接口都在文件夹里面写，打开文件，首先引入文章的模型新增文章新增文章方法保存数据到数据库如果出现错误，直接把错误进的错误中枢处理储存成功后，返回给客户 【Part1】用JS写一个Blog （node + vue + mongoDB）【Part2】用JS写一个Blog （node + vue + m...
摘要：用写一个用写一个上一节我们把数据库连接成功了，这节我准备写关于文章的数据接口增删改查上次说到接口都在文件夹里面写，打开文件，首先引入文章的模型新增文章新增文章方法保存数据到数据库如果出现错误，直接把错误进的错误中枢处理储存成功后，返回给客户 【Part1】用JS写一个Blog （node + vue + mongoDB）【Part2】用JS写一个Blog （node + vue + m...
摘要：用写一个上一节前后端项目分别初始化完成，这一小节我就从后端项目开始写。每一个都映射到一个的集合，并定义了该集合中的文档的形式。 【Part1】用JS写一个Blog （node + vue + mongoDB） 上一节前后端项目分别初始化完成，这一小节我就从后端项目开始写。实现mongoDB数据库的连接。 整理后端目录 下面是通过express-generate生成的项目的目录 show...
摘要：用写一个上一节前后端项目分别初始化完成，这一小节我就从后端项目开始写。每一个都映射到一个的集合，并定义了该集合中的文档的形式。 【Part1】用JS写一个Blog （node + vue + mongoDB） 上一节前后端项目分别初始化完成，这一小节我就从后端项目开始写。实现mongoDB数据库的连接。 整理后端目录 下面是通过express-generate生成的项目的目录 show...
阅读 3779·2021-10-12 10:11
阅读 3618·2021-09-13 10:27
阅读 2524·2019-08-30 15:53
阅读 1953·2019-08-29 18:33
阅读 2179·2019-08-29 14:03
阅读 972·2019-08-29 13:27
阅读 3290·2019-08-28 18:07
阅读 743·2019-08-26 13:23
