vue+node(express)做中间层开发一

Question

如题所述

Answer 1

采用的结构为前端Vue项目，内包一个node服务

执行 npm run dev 启动vue

引入iview和axios，在 main.js 文件中编辑

编辑 helloworld.vue 文件

此时用到了iview组件button，并且设置了两个数据调用的方法，界面如下图

安装 npm install -g express-generator@4
在vueapp下新建server文件夹，切换到server文件夹，执行 express node_api && cd node_api ，会新建一个node_api的项目，然后安装依赖 npm install 。

执行 npm start 启动express

在页面 server/node_api/routes/index.js 配置路由

用浏览器或者postman访问localhost:3000(默认端口是3000)，可以看到有返回了

安装 nodemon 实现nodejs热启动 npm install --save-dev nodemon ，用nodemon指令提到node指令即可
安装 cross-env 实现环境变量设置 npm install --save-dev cross-env ，编辑 server/node_api/package.json ：

此时前端展示有了，后端数据也有了，还需要解决跨域问题，因为端口一个是8080，一个是3000 。
在express的app.js文件内编辑：

设置vue的代理，编辑 config/index.js ：

重启一下express，此时在界面点击按钮，即可看到服务器回传的数据了

接下来可以做的事