vue初探

Posted 2020-10-14 mobaids

在组件vue文件中变量都是整个作用域，不可使用this。在js文件，this用于指代data中的变量。

一. 环境搭建

1.安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

2.安装淘宝镜像。windows下安装。。

 

　　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".
  To get started: --------------------- 这里说明如何启动这个服务
  cd exprice
  npm install
  npm run dev
  如下图：

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，

// 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前端就配置完了。

<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.安装项目依赖：npm install，因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。

8. java后台配置

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>

这样后台就能收到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);
    }