用express初始化node
express -ejs rty-server生成
目录结构
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
修改文件index.js
不需要删除 在默认路由下面添加下列代码
router.get('/giveSomeJson', function(req, res, next) {
res.json({
'title':'jsonObj',
'time':Date.parse(new Date())
})
});
重启node，访问服务器地址查看
node路由访问成功
打包部署Vue
用vue-cli初始化项目
vue init webpack rty-vue
cnpm install
npm run dev //本地启动vue
cnpm install axios --save-dev
修改main.js初始化axios
import Axios from 'axios'
Vue.prototype.axios=Axios //全局配置axios
Vue.prototype.axios.defaults.baseURL = 'http://xx.xx.xx'; //默认请求地址
修改HelloWorld.vue
注释掉原本的dom元素 | 也可以不注释
html
<button @click="getPhpData">getData</button>
<input v-model="dataFromNode" type="" name="">
js
data () {
return {
msg: 'Welcome to Your Vue.js App',
dataFromNode:'empty'
}
},
methods:{
getPhpData:function(){
this.axios.get('/giveSomeJson').then(res=>{
console.log(res)
}).catch(err=>{console.log(err)})
}
}
直接打包
npm run build
把生成的dist文件中的index.html改名为index.ejs放进服务器上node项目view目录（覆盖）
把static文件放进public目录
重启node
pm2 start ./bin/www
浏览器访问服务器地址
访问成功、访问node接口成功
