node vue項目開發(fā)之前后端分離實戰(zhàn)記錄

 <ul v-for="item in items">
 <li>{{item.title}}</li>
 <li>{{item.description}}</li>
 </ul>

<li v-for="(key,value)" in objectDemo>
 {{key}}---{{$key}}:{{vue}}
</li>

npm install cnpm install element-ui --save-dev

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, { size: 'small' })

import Carousel from './components/Carousel'
export default {
 name: 'app',
 components: { //components加s
 Carousel: Carousel
 }
}

<template>
<div id="app">
 <Carousel></Carousel>
 <img src="./assets/logo.png">
 <router-view/>
</div>
</template>

cd back
cnpm install
npm run dev

cd front
cnpm install
npm start

import VueResource from 'vue-resource'
Vue.use(VueResource)

proxyTable: {
 '/api/**': {
 target: 'http://localhost:3000',
 pathRewrite: {
 '^/api': '/api'
 }
 }
}

this.$http.get('api/apptest')
 .then((response) => {
 // 響應(yīng)成功回調(diào)
 console.log(response)
 }).catch(e => {
 // 打印一下錯誤
 console.log(e)
 })
 }

import axios from ‘a(chǎn)xios'
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
export default axios

import axios from './http'
Vue.prototype.axios = axios
new Vue({
 el: '#app',
 router,
 axios,
 template: '<App/>',
 components: { App }
})

login () {
 // 獲取已有賬號密碼
 this.axios.get('/apptest')
 .then((response) => {
 // 響應(yīng)成功回調(diào)
 console.log(response)
 // this.$router.go({name: 'main'})// 不管用
 this.$router.push({name: 'HelloWorld'})
 }).catch(e => {
 // 打印一下錯誤
 console.log(e)
 })
}

register () {
 console.log(this)
 // 獲取已有賬號密碼
 let params = {
 user: this.userinfo.account,
 password: this.userinfo.password,
 directionId: this.userinfo.directionId
 }
 this.axios.post('/signup', params)
 .then((response) => {
 // 響應(yīng)成功回調(diào)
 console.log(response)
 }).catch(e => {
 // 打印一下錯誤
 console.log(e)
 })
}

build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),

 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './', //原來是 assetsPublicPath: '/'