Vue使用入门

官网：https://cn.vuejs.org/v2/guide/

一、Vue的项目结构

http://www.uml.org.cn/AJAX/201812103.asp?artid=21463?weiid=2774

https://www.jianshu.com/p/f4e95663e10d

二、使用WebStorm创建一个Vue项目

https://blog.csdn.net/weixin_40877388/article/details/80911934

https://blog.csdn.net/qq_37350706/article/details/86591102

三、Vue起步

https://www.runoob.com/vue2/vue-start.html

四、组件间的传值——Vuex

4.1 安装

安装

Code

npm install vuex --save

在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store：

Javascript

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
      activeIndex: 1
  }
});

export default store;

然后我们在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象；

Javascript

// store
import store from './store';

new Vue({
  el: '#app',
  router,
  store,		//在这里添加！！
  components: { App },
  template: '<App/>'
})

4.2 使用

如：在state中定义了一个activeIndex: 1

那么就可以使用 this.$store.state.activeIndex 来取值，

也可以直接赋值 this.store.state.activeIndex = 2;

4.3 使用细节

https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc

五、异步请求axios

5.1 安装

https://www.npmjs.com/package/vue-axios

Code

npm install --save axios vue-axios

Javascript

// 在main.js中添加如下内容
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

5.2 基本使用

https://www.kancloud.cn/yunye/axios/234845

Javascript

// 小例子，具体看上面那个连接
this.axios.get('/queryUser', {params: {name: 'testName', count: 5}}).then((response) => {
    console.log(response.data)
})
this.axios.post('/postTest', {name: 'testName', count: 5}).then((response) => {
    console.log(response.data)
})
this.axios.put('/putTest', {name: 'testName', count: 5}).then((response) => {
    console.log(response.data)
})
this.axios.delete('/deleteTest', {params: {name: 'testName', count: 5}}).then((response) => {
    console.log(response.data)
})

后端springboot

Code

https://blog.csdn.net/suki_rong/article/details/80445880

5.3 封装请求

自行百度，目前没用到

六、axios拦截器

https://blog.csdn.net/AnlanJion/article/details/82144113

Javascript

/* main.js文件，貌似目前只有把过滤器写在main.js才会生效，后续再研究 */

import Vue from 'vue'
import App from './App'
import router from './router'

import store from "./store";

import axios from 'axios';
import VueAxios from "vue-axios";

Vue.use(VueAxios, axios);

// axios 配置
axios.defaults.timeout = 5000;

// http request 拦截器
axios.interceptors.request.use(
  config => {
    console.log("request拦截器");
    if (store.state.token) {
      config.headers.Authorization = `token ${store.state.token}`
    }
    return config
  },
  err => {
    return Promise.reject(err)
  },
)

// http response 拦截器
axios.interceptors.response.use(
  response => {
    console.log("response拦截器");
    return response;
  },
  error => {
    if (error.response) {
      let err = {}; // ！这里可以加入对应的UI进行提示框！
      switch (error.response.status) {
        case 400: err.message = '请求错误(400)' ; break;
        case 401:
          // 401 清除token信息并跳转到登录页面
          store.commit(types.LOGOUT);

          // 只有在当前路由不是登录页面才跳转
          router.currentRoute.path !== 'login' &&
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.path},
          });break;
        case 403: err.message = '拒绝访问(403)'; break;
        case 404: err.message = `请求出错(404)`; break;
        case 408: err.message = '请求超时(408)'; break;
        case 500: err.message = '服务器错误(500)'; break;
        case 501: err.message = '服务未实现(501)'; break;
        case 502: err.message = '网络错误(502)'; break;
        case 503: err.message = '服务不可用(503)'; break;
        case 504: err.message = '网络超时(504)'; break;
        case 505: err.message = 'HTTP版本不受支持(505)'; break;
        default: err.message = `连接出错(${err.response.status})!`;
      }
      alert(err.message);/*!改成自己的UI提示框!*/
    }
    // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
    return Promise.reject(error.response.data)
  },
);


Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

七、axios跨域

https://yq.aliyun.com/articles/705295

目前我采用在nginx进行配置，解决的跨域。

Code

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  logs/host.access.log  main;

    location / {
        proxy_pass   http://localhost:9000/;
        index  index.html index.htm;
        # 添加如下内容
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }
}

八、router路由

官方介绍：

https://router.vuejs.org/zh/guide/#html

带参路由：

https://segmentfault.com/a/1190000012735168?utm_source=tag-newest

九、打包部署springboot

修改config目录下的index.js，找到并修改build:{assetsPublicPath: ‘./‘}原来没有.
然后打包，将dist下的所有文件，复制到springboot的static文件夹下面
然后springboot打jar包
在Linux上运行
Code
nohup java -jar 自己的springboot项目.jar >日志文件名.log 2>&1 &
命令解释：

nohup：不挂断地运行命令，退出帐户之后继续运行相应的进程。

java -jar 自己的springboot项目.jar：执行springboot的项目，如果单单只执行该命令，linux只会短暂的运行该项目，当退出控制台后会自动关闭该项目。

>日志文件名.log：是nohup把command的输出重定向到当前目录的指定的“日志文件名.log”文件中，即输出内容不打印到屏幕上，而是输出到”日志文件名.log”文件中。不指定文件名会在当前目录创建nohup.out，如果当前目录的 nohup.out 文件不可写，输出重定向到 $HOME/nohup.out 文件中。如果没有文件能创建或打开以用于追加，那么 Command 参数指定的命令不可调用。

2>&1：2就是标准错误，1是标准输出，该命令相当于把标准错误重定向到标准输出么。这里&相当于标准错误等效于标准输出，即把标准错误和标准输出同时输出到指定的“日志文件名.log”文件中。

最后的&：让改作业在后台运行。