文章目录
前言
由于毕业设计会涉及到部分前端代码,需要掌握部分基础知识。所以学习一下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
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 解决跨域问题![](https://i-blog.csdnimg.cn/blog_migrate/5febbd339f42130327a26e840f47ecd5.png)
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