vue.js+node.js+mongoDB项目小坑

Q1：从mongo中读出来的数据无法添加属性

Questionbase
  .find({qCategory: element.pCategory})
  .then(q => {
    var out = []
    var count = 0
    q.forEach(function (element, index, array) {
      element.qIndex = ++count
    }
  })
  .catch(err => {})

其目的很简单，就是为了给数据库返回的查询结果q中的每个element对象添加一个新的属性qIndex，但是从打印出的结果不难发现element对象没能成功添加新属性。

问题原因：Mongoose取到的数据的结构依赖于事先定义的schema。由于新添加的属性在schema中没有定义，所以属性是无效的。

解决方案：

1. 在schema中添加该属性

const questionbaseSchema = mongoose.Schema({
  qID: { type: Number, required: true },
  qCategory: String,
  qType: String,
  qQuestion: String,
  qIndex: Number
})

2.使用mongoose自带的Document.prototype.toObject()方法，将·element转换为对象，然后操作对象

q.forEach(function (element, index, array) {
  var obj = element.toObject()
  obj.qIndex = ++count
})

Q2：vue打包后的跨域问题

在开发环境中，通过配置/config/index.js文件的dev.proxyTable解决跨域问题

proxyTable: {
  '/api': {
    target: 'hxxp://localhost:3030',
    changeOrigin: true
  }
}

在dist目录下键入anywherer命令访问页面，出现404错误。

解决方案：使用Nginx反向代理机制解决跨域问题。

反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

1.下载Nginx

首先下载Nginx并解压，下载版本nginx/Windows-1.14.0。

2.修改配置文件

对/conf/nginx.conf进行配置。

server {
  <!-- 监听的端口号 -->
  listen       8055;  
  <!-- 域名 -->
  server_name  localhost;

  <!-- 根目录&主页 -->
  location / {
    root   C:/Users/Asus/Desktop/ccsqb/dist;
    index  index.html index.htm;
  }

  <!-- 反向代理配置 -->
  location ^~/api/ { 
    proxy_pass hxxp://localhost:3030;
  } 
}

关于反向代理配置的说明：
- 如果URL后面有/，表示绝对路径，真实访问的是hxxp://localhost:3030/
- 如果URL后面没有/，表示相对路径，真实访问的是hxxp://localhost:3030/api。
所以，本文上面实际请求的是：hxxp://localhost:3030/api，当然另一种写法：proxy_pass hxxp://localhost:3030/api/;也可以正常访问。

Nginx常用命令说明：

start nginx  : 启动nginx
nginx -s reload  : 修改配置后重新加载生效
nginx -s reopen  : 重新打开日志文件
nginx -s stop  : 快速停止nginx

tasklist /fi "imagename eq nginx.exe"  : 检查是否启动成功

3.启动nginx

cmd进去Nginx解压目录，运行启动命令，然后就可以通过hxxp://localhost:8055正常访问项目了。

Node.js打包

1.安装pkg

安装命令npm install -g pkg

2.修改package.json文件

"bin": "app.js"

3.生成exe

pkg -t win package.json

运行成功后会在根目录下生成一个exe可执行程序，双击启动后的效果如下图。