👦

 

vue

NodeJS结合MongoDB结合Vue进行前后端分离的数据请求

展示图如下：

实现过程中需要有以下关键操作：

启动MongoDB数据库

1
mongod

启动NodeJS服务（当前服务配置代码在app.js）

1
nodemon app.js

通过webpack-dev-server启动Vue项目（在项目目录下进行执行命令行命令）

1
npm run dev

由于本地服务器端口不同，通过axios请求会存在跨域问题，可在nodeJS服务配置文件app.js中设置以下代码：

1
2
3
4
5
6
7
8
9
//设置跨域访问
app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});
hexo

搭建hexo方法

步骤如下：

1
2
3
4
5
6
7
8
9
10
11
12
1、基于node
2、npm包管理工具
3、npm install -g hexo(hexo-cli)
4、下载的资源是国外的可能比较慢
5、淘宝镜像(代理的仓库)
6、npm install -g hexo --registry=https://registry.npm.taobao.org
7、在一个空目录（hexo init）博客系统的初始化
8、hexo\source\_posts md文档就是博客文档
9、如果要写一篇博客（新建文件   xxx.md）
10、把md文档转html文件（hexo g）
11、把自己的服务器预览（hexo s） localhost:4000
12、如果从新生成html文件可能会有缓存（hexo clean,hexo g）

简化分析：

1
2
3
4
5
6
7
8
1、首先要先安装好Node,然后同时也要有npm包管理工具
2、然后在自己本地目录下创建一个hexo文件夹
3、以管理员方式打开cmd然后切换到hexo文件夹所在目录下
4、输入命令行：npm install hexo -g --registry=https://registry.npm.taobao.org
5、然后输入命令行：hexo init
6、再输入命令行：hexo g
7、最后输入命令行：hexo s
8、打开浏览器访问  localhost:4000  即可