一, vue開發環境搭建

1, 開發工具

WebStorm或Visual Studio Code

2, 下載安裝nodejs

##  後端開發環境 Eclipse + JDK + Tomcat 等不再贅述

二, vue測試專案搭建

1, 新建資料夾作為專案路徑

     E:\vueDemo

2, 安裝npm

開啟Visual Studio Code, 開啟資料夾vueDemo, 執行指令:

npm install -g cnpm --registry=https://registry.npm.taobao.org

3, 安裝vue-cli腳手架

cnpm install vue-cli -g

4, 檢視vue是否安裝成功

vue --version

5, 安裝webpack

vue init webpack

6, 安裝相關依賴檔案

進入專案資料夾(自定義新建一個)下,  執行 cnpm install 來安裝下載到模板中的package.json中的依賴，安裝完成後會在專案資料夾下自動生成node-module檔案來存放安裝的依賴檔案。

cnpm install

7, 執行專案執行 npm run dev  (注：此時不能用cnpm來執行，必須是npm)

8, 執行成功後, 測試訪問

http://10.171.1.34:8080/#/, 出現歡迎介面即ok, 至此vue專案基礎框架算是搭建成功

三, vue實現簡易登陸功能

1, 在components裡，新建登陸頁面login.vue

<template>
  <div class="login">
    {{ message }}<br/><br/>
    <input v-model="username" placeholder="使用者名稱"><br/><br/>
    <input v-model="password" placeholder="密碼"><br/><br/>
    <button v-on:click="login">登陸 </button>
  </div>
</template>
 
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
    export default {
      name: "login",
      data() {
        return {
          message: 'Hello Vue!',
          username: '',
          password: ''
        }
      },
      http: {
        headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        headers: {'Access-Control-Allow-Origin': '*'}
      },
      methods: {
        login: function () {
          var _this = this;
          console.log(_this.username + _this.password);
          $.ajax({
              url: 'http://10.171.1.34:8088/ssm_test/login.do',
              type: 'GET',
              dataType: 'JSONP',
              data: {
                  name: _this.username,
                  pwd: _this.password
              },
              success: function (res) {
                console.log("登陸成功");
              },
              error: function (err) {
                console.log("返回出錯了");
              }
        });
         
        }
      }
 
    }
</script>
 
<style scoped>
 
</style>
 

2, 新建登陸失敗頁面fail.vue

<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '登陸失敗'
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

3, 將元件新增到路由表中，在router下的index.js檔案

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/components/login'
import fail from '@/components/fail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/login',//系統的首頁面url
      name: 'login',
      component: login//對應上文的import
    },  {
      path: '/fail',
      name: 'fail',
      component: fail
    }
  ]
})

4.main.js檔案新增vue-resource，

支援http請求,如果未安裝依賴包，先npm安裝依賴(npm install vue-resource)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import VueResource from 'vue-resource'
import $ from 'jquery'

Vue.use(VueResource);
Vue.use($);


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

5, 啟動測試

npm run dev, 測試登陸: http://10.171.1.34:8080/#/login, 出現登陸介面即ok

四, 登陸功能前後端資料互動的實現

1, 後端對應登陸介面的開發

2, 前後端資料互動

3, 跨域問題的處理