文章目录

前言

由于毕业设计会涉及到部分前端代码，需要掌握部分基础知识。所以学习一下vue的基础。以此来帮助我尽快完成毕业设计

一、Vue简介

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

二、Vue基础知识

2.1 创建vue项目

有两种方法

1.使用cmd创建vue项目

vue create vue-demo

然后再将创建好的vue项目导入idea中即可

2.使用idea创建vue项目

2.2 配置idea中的npm

4、5处选择电脑本地已经安装好的node.js

node.js安装参考：

至此，配置完成

2.3 vue目录介绍

2.4 前端页面编写

参考：一个 Vue 3 UI 框架 | Element Plus

Button 按钮 | Element Plus

2.5 VUE3 部分源码分析

mian.js

//程序的入口主文件
//引入createApp 函数，创建对应的应用，产生应用的实例对象
import { createApp } from 'vue'
//引入App组件（所有组件的父级组件）
import App from './App.vue'
//引入router组件
import router from './router'
//引入store组件
import store from './store'

// 创建app应用 返回对应的实例对象，调用mount方法进行挂载
createApp(App).use(store).use(router).mount('#app')

HomeView.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
<!--    使用这个子级组件-->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
//引入一个子级组件
import HelloWorld from '@/components/HelloWorld.vue'
// 暴露出去一个定义好的组件
export default {
  // 当前组件的名字是HomeView
  name: 'HomeView',
  // 注册组件
  components: {
    // 注册一个子级组件
    HelloWorld
  }
}
</script>

三、前后端交互

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

这里我们选用axios，中文说明文档：使用说明 · Axios 中文说明 · 看云

3.1、anxios安装

3.2 anxios的特点

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

3.3 创建request.js

参考自：Vue项目搭建常用的配置文件，request.js和vue.config.js_程序员青戈的博客-CSDN博客_vue项目搭建常用的配置文件

import axios from 'axios'

const request = axios.create({
	baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
  
 // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

3.3 解决跨域问题

1.前端跨域

在这个文件中添加下列代码

module.exports = {
  devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
    port: 9876,
    proxy: {                 //设置代理，必须填
      '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
        target: 'http://localhost:9999',     //代理的目标地址
        changeOrigin: true,              //是否设置同源，输入是的
        pathRewrite: {                   //路径重写
          '^/api': ''                     //选择忽略拦截器里面的内容
        }
      }
    }
  }
}

2. 后端跨域

import axios from 'axios'

const request = axios.create({
	baseURL: 'http://localhost:9999',  // 注意！！ 这里是全局统一加上了 后端接口前缀 前缀，后端必须进行跨域配置！
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
  
 // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

总结

原文链接：https://blog.csdn.net/dayu199804/article/details/124484147