vue的简单创建使用

1.Vue的使用

1.创建vue文件夹

安装vue: npm install -g @vue/cli

1.创建一个vue基础文件指令: vue create student-system 然后选择vue2或者vue3或者根据自己选择更多配置

2.进入文件夹:cd student-system

3.npm run serve

2.使用elementUI

4.安装饿了么ui: npm i element-ui -S

5.在main.js里面引入:

import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3.使用axios

6.下载axios: npm i axios

配置axios:

• 在src文件夹下创建一个文件夹存放配置文件,文件夹名为network
• 在network文件夹下创建一个request.js文件

代码示例如下:

import axios from "axios";

export function request(config){
    const instance = axios.create({
        baseURL:"http://localhost:8080"  //使用代理服务器的话端口号和自己的一样!!!不用和后端一样,如果没有配置代理服务器和后端接口一样的端口号
    })
    return instance(config)
}

在src文件夹下面新建一个api文件夹,用来存放接接口的js文件

比如我要接入的是post请求的localhost:8081/student/login在api文件夹下创建一个loginApi.js文件,示例代码如下:

import { request } from "@/network/request";
export function getLogin(data){
    return request({
        url:"/student/login",
        method:"POST",
        data
    })
}

在要调用的地方

<script>
    import {getLogin} from "../../api/loginApi"
</script>

使用示例:

<script>
    import {getLogin} from "../../api/loginApi"
    
    getLogin(this.loginForm).then((res) => {
    if (res.data.code == 200) {
      this.$message({
        message: `${res.data.msg}`,
        type: "success",
      });
      this.$router.push("/home/index");    //路由跳转
    }
  });
</script>

4.配置router到自己页面

1.比如我要做一个登陆页面,我现在view文件夹下新建一个login文件夹专门存放login页面

2.在login文件夹下新建一个vue文件为LoginView.vue文件

<template>
    <div>
        <h1>登录页面</h1>
    </div>
</template>

3.在router文件夹里面的js文件引入LoginView.vue文件的路由路径可以有两种方式

//第一种
import LoginView from '../views/login/LoginView.vue'
const routes = [
  {
    path: '/',
    name: 'login',
    component: LoginView
  },
]
//第二种
const routes = [
  {
    path: '/',
    name: 'login',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/login/LoginView.vue')
  }
]

在view文件夹里面的App.vue文件写router-link标签让login页面显示

<template>
  <div id="app">
    <nav>
      <router-link to="/">login</router-link>
    </nav>
    <router-view/>
  </div>
</template>

5.使用vue-cookie

7.安装vue-cookie: npm i vue-cookie

在需要调用的地方:

<script>
    import cookies from "vue-cookie";
</script>

使用:

<script>
    cookies.set("token","123456789");
    cookies.get("token")
</script>

6.使用axios拦截器

8.使用axios拦截器示例:

import axios from "axios";
import cookies from "vue-cookie"
export function request(config) {
    const instance = axios.create({
        baseURL: "http://10.110.19.62:8081"
    });

    // 添加请求拦截器
    instance.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        console.log(cookies.get("token"));
        if(cookies.get("token")!=null){
            config.headers.Authorization = "Bearer "+ cookies.get("token");    
        }
        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });

    // 添加响应拦截器
    instance.interceptors.response.use(function (response) {
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        return response;
    }, function (error) {
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        return Promise.reject(error);
    });
    return instance(config)
}

7.使用restful风格

9.restful风格请求:

import { request } from "@/network/request";
export function addUser(data){
    return request({
        url:"/student/addUser",
        method:"POST",
        data
    })
}

export function editUser(data){
    return request({
        url:"/student/updateUser",
        method:"PUT",
        data
    })
}

export function selectById(query){
    return request({
        url:"/student/selectById",
        method:"GET",
        params:query
    })
}

export function deleteById(userId){
    return request({
        url:"/student/deleteById/" + userId,
        method:"delete"
    })
}

8.配置代理服务器

10.代理服务器配置 在vue.config.js中添加如下配置

//开启代理服务器(方法二)
    devServer: {
        proxy: {
            //  '/yu'为请求前缀，用于控制是不是走代理，想走代理时就在请求前缀前边加上这个请求前缀
            '/yu': {
                target: 'http://localhost:5000',
                pathRewrite: { "^/yu": "" }, //重写路径  匹配以/yu为开头的路径都变为空字符串 
                ws: true, //用于支持websocket
                changeOrigin: true //用于控制请求头中的host值
            },
            '/demo': {
                target: 'http://localhost:5001',
                pathRewrite: { "^/demo": "" },
                ws: true, //用于支持websocket
                changeOrigin: true //用于控制请求头中的host值
            },
        }
    }