node-vue先后端分离记录

时间 2019-11-09

标签 node vue 后端分离记录繁體版

原文原文链接

node vue项目开发

看了近一周的vue开发，有诸多感触，我以前接触过react、angular因此特别想学学久仰大名的vue。学习半天之后发现，接触到的东西多了，学习起来就是容易不少，vue的指令我能个联想到angular的指令，vue组件化设计相似于react的组件化设计，包括一些router的设置跟react里的路由或者nodejs里的路由都差很少，vuex更是根据redux、flux改写的，虽然我还搞不太明白怎么用，至于vue的模板渲染，跟expres渲染ejs没有太大的区别。使用vue能够彻底脱离jq，虽然我还没感觉到不用jq有什么神奇的赶脚，可是我以为这种双向数据绑定的仍是挺方便的，此文档用来记录我学习vue的一些新的知识和想法。css

指令

v-bind 主要用于动态绑定DOM元素属性，即元素属性实际的值是有vm实例中的data属性提供的。
v-model 主要对表单元素进行双向数据绑定，在修改表单元素的值时，实例vm中对应的vm对应的属性也同时更新。
v-if,v-show,v-else这几个指令来讲明模板和数据间的逻辑关系html
- v-if和v-else的做用是根据数值来判断是否输出该dom元素，以及包含的子元素。
  eg:
  <div v-if="yes">yes</div> 当vm实例中的data.yes=true时，模板引擎会编译这个dom节点，输出 <div>yes</div>值得注意的是：v-else要紧跟v-if不然不起做用。
- v-show与v-if的效果差很少，都是经过判断真假显示内容，惟一不一样的是，v-show不显示的时候是display:none,也就是保留了dom节点，可是v-if不会。
v-for 用于列表渲染，能够循环遍历数组和对象,注意v-for="b in 10"目前指的是1-10的迭代
v-on 事件绑定，简写@:
v-text <p v-text="msg"><p>至关于innerText,与{{msg}}相比，避免了闪现的问题。
v-HTML 相似于innerHTML,也能够避免闪现
v-el 这个指令至关于给dom元素添加了个索引，例如<div v-el="demo">this is a test </div>,若是想获取当前dom里的值,能够vm.$els.demo.innerText,注意：html不区分大小写，驼峰式的写法会自动转成小写，能够经过-的方式转换成大写。
v-ref 与v-el相似经过vim.$refs访问
v-pre 跳过编译这个元素
v-cloak 感受没啥用
v-once新增内置指令，用于标明元素或组件只渲染一次。

模板渲染

v-for 主要用于列表渲染，讲根据接受到的数组重复渲染v-for绑定到的dom元素及内部子元素，并能够经过设置别名的方式，获取数组内数据渲染到节点中。
eg:前端
```
<ul v-for="item in items">
      <li>{{item.title}}</li>
      <li>{{item.description}}</li>
    </ul>
```
v-for在vue1.x内置$index变量，在vue.2x移除了此变量，直接使用{{index}},例如<li v-for="(item,index) in items">{{index}}</li>
修改数据vue
- 直接修改数组能够改变数据
- 不能直接改变数组的状况node
  - 1.vm.items[0]={},这种状况下没法修改，解决：vm.item.$set(0,{})或者vm.$set('item[0]',{})
  - 2.vm.item.length=0

v-for遍历对象，可使用（key,value）的形式自定义key变量。react

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

注意：在vue1.x内置`$key`变量，在vue.2x移除了此变量，直接使用`{{key}}`

template标签

用来做为模板渲染的跟节点，可是渲染出来不存在此节点webpack

事件绑定与监听

v-on能够绑定实例属性methods中的方法做为事件的处理器，v-on:后面能够接受全部的原生事件名称。ios

简写 @:
能够绑定methods函数，也支持内联js，可是仅限一个语句。
绑定methods函数和内联js均可以获取原生dom元素，event.
绑定多个事件时，为顺序执行。

ui组件饿了吗

使用指南

安装

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

引入文件main.js

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

使用git

在components文件夹下新建一个页面，从饿了吗找到本身喜欢的组件，好比走马灯 Carousel.vue 把代码复制到这个页面
在须要的此组件的文件下，好比APP.vue里

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>

这样就可运行了

自定义组件

例如我想在加一个导航组件名字叫作headerBar,我在components里加一个文件叫作headerBar.vue：web

<template>
  <h2>这是一个导航</h2>
</template>

使用：
在App.vue中须要先导入这个组件，再注册这个组件，最后使用它

<template>
<div id="app">
  <headerBar></headerBar>
  //以标签形式使用，注意：避免使用原生html的标签
  <img src="./assets/logo.png">
  <router-view/>
</div>
</template>

<script>
import headerBar from './components/headerBar.vue'  //导入组件
export default {
  name: 'app',
  components: {
    headerBar: headerBar  //注册组件
  }
}

先后端分离

习惯了用node作全栈开发,如今用vue-webpack作前端开发，node作后端开发也挺爽的，先后端实现了分离。

启动后端接口

cd back
cnpm install
npm run dev

启动前端服务器

cd front
cnpm install
npm start

进入登陆页面，点击登陆，控制台打印访问成功的信息,并成功跳转到helloworld页面

先后端通讯

vue-resource

安装vue-resource 并在main.js中引用

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

在config/index.js 配置 proxyTable代理服务器

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

使用

this.$http.get('api/apptest')
       .then((response) => {
         // 响应成功回调
         console.log(response)
       }).catch(e => {
             // 打印一下错误
         console.log(e)
       })
   }

缺点：在开发环境下没有问题，可是在生产环境下请求后端接口不成功

axios

首先配置axios,在src下新建一个http.js

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

在main.js中引入

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

使用

get方法

login () {
  // 获取已有帐号密码
  this.axios.get('/apptest')
    .then((response) => {
      // 响应成功回调
      console.log(response)
      // this.$router.go({name: 'main'})// 无论用
      this.$router.push({name: 'HelloWorld'})
    }).catch(e => {
      // 打印一下错误
      console.log(e)
    })
}

post方法

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) => {
      // 响应成功回调
      console.log(response)
    }).catch(e => {
      // 打印一下错误
      console.log(e)
    })
}

生产环境路径问题

在生产环境下发现打包之后路径不对，修改config下的index.js

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

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

源码位置 https://gitee.com/react-modul...

遇到的问题

vue.esm.js?dcc1:574 [Vue warn]: Do not use built-in or reserved HTML elements as component id: Header缘由：由于header在HTML5里面是个原生的标签，因此在开发的时候会提示错误。解决方法：修改components里面左边的header名称