vue初探（構建一個axios+java項目）

時間 2019-11-12

標籤 vue 初探構建一個 axios+java axios java 項目欄目 Java 简体版

原文原文鏈接

在組件vue文件中變量都是整個做用域，不可以使用this。在js文件，this用於指代data中的變量。前端

一. 環境搭建vue

1.安裝node.js，從node.js官網下載並安裝node，安裝過程很簡單，一路「下一步」就能夠了（傻瓜式安裝）。安裝完成以後，打開命令行工具(win+r，而後輸入cmd)，輸入 node -v，以下圖，若是出現相應的版本號，則說明安裝成功。java

2.安裝淘寶鏡像。windows下安裝。。node

　　linux下安裝。。。linux

打開命令行工具，把這個（npm install -g cnpm --registry= https://registry.npm.taobao.org）複製（這裏要手動複製就是用鼠標右鍵那個，具體爲啥很少解釋），安裝這裏是由於咱們用的npm的服務器是外國，有的時候咱們安裝「依賴」的時候很很慢很慢超級慢，因此就用這個cnpm來安裝咱們說須要的「依賴」。安裝完成以後輸入 cnpm -v，以下圖，若是出現相應的版本號，則說明安裝成功。

安裝webpack，打開命令行工具輸入：npm install webpack -g，安裝完成以後輸入 webpack -v，以下圖，若是出現相應的版本號，則說明安裝成功。
安裝vue-cli腳手架構建工具，打開命令行工具輸入：npm install vue-cli -g，安裝完成以後輸入 vue -V（注意這裏是大寫的「V」），以下圖，若是出現相應的版本號，則說明安裝成功。

二. 構建一個axios+java項目

在硬盤上找一個文件夾放工程用的。這裏有兩種方式指定到相關目錄：①cd 目錄路徑 ②若是以安裝git的，在相關目錄右鍵選擇Git Bash Here
安裝vue腳手架輸入：vue init webpack exprice ，注意這裏的「exprice」是項目的名稱能夠說是隨便的起名，可是須要主要的是「不能用中文」。

$ vue init webpack exprice --------------------- 這個是那個安裝vue腳手架的命令
This will install Vue 2.x version of the template. ---------------------這裏說明將要建立一個vue 2.x版本的項目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------項目名稱
? Project name exprice
? Project description (A Vue.js project) ---------------------項目描述
? Project description A Vue.js project
? Author Datura --------------------- 項目建立者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由，也就是之後是spa（但頁面應用須要的模塊）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啓用eslint檢測規則，這裏我的建議選no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".

webpack


3.<重點>cd 命令進入建立的工程目錄，首先cd exprice（這裏是本身建工程的名字）；
4.在package.json文件，加入axios

  "dependencies": {
    "axios": "^0.17.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },


5 . 在config下的index.js配置代理，將proxyTable{}配置爲

   proxyTable: {
      /**
       * npm代理，解決調試接口中，跨域問題
       * */
      '/api': {
        target: 'http://192.168.1.91:8090', // 接口地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }

    },

6. 在src下的main.js引入axios，ios

// 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'
Vue.config.productionTip = false;

import axios from 'axios';
let axiosIns = axios.create({
  // 發佈
  baseURL:'/',
  // 開發
  baseURL: '/api/',
});
Vue.prototype.$http = axiosIns;

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

7. 在hello.vue 中添加表單和方法，這樣vue前端就配置完了。git

<template>
  <div class="hello">
     <input type="text" v-model="tip"/>
        <input type="button" @click = "aa"/>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tip :''
    }
  },
     methods:{
         aa(){
           let self = this;
            this.$http.post('/vprocesslogin',
             {tip:self.tip})
             .then(function (response) {
            if (response.data.success) {
               console.log(response);
             }
           })
         }
       }
}
</script>

8. 安裝axios 依賴npm install axios --save
9.安裝項目依賴：npm install，由於自動構建過程當中已存在package.json文件，因此這裏直接安裝依賴就行。
10。npm run dev 便可運行。

8. java後臺配置web

tomcat配置server.xml的Context的path要配爲「/」vue-router

<Context path="/" docBase="*******" debug="0" reloadable="true" crossContext="true" />

struts配置，寫一個jsonaction，添加json攔截器。其餘寫法保持原ssh框架不變。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
        "http://struts.apache.org/dtds/struts-2.3.dtd">
<!-- Struts2配置文件的根元素 -->
<struts>  
    <package name="struts-demo" extends="struts-main">    
    <interceptors>
        <interceptor-stack name="demostack">
            <interceptor-ref name="defaultStack" />
            <interceptor-ref name="json"/>
        </interceptor-stack>
    </interceptors>    
        <action name="vprocesslogin" class="vLoginAction" method="vprocesslogin"> 
             <result type="json" /> 
             <interceptor-ref name="demostack" />
        </action> 
    </package>
</struts>

這樣後臺action就能收到vue前臺提交上來的數據

    public String getTip() {
        return tip;
    }

    public void setTip(String tip) {
        this.tip = tip;
    }

    public String getForwardUrl() {
        return forwardUrl;
    }

    public void setForwardUrl(String forwardUrl) {
        this.forwardUrl = forwardUrl;
    }

    public String execute() throws Exception
    {
        return SUCCESS;
    }

    public void vprocesslogin() throws Exception
    {
        System.out.println(tip);
        System.out.println(tip);
        tip = "erty";
        System.out.println(tip);
    }