vue3 elementplus video 的展示

转载

mob64ca14038b36 2024-10-12 00:56:36

文章标签 vue.js 学习前端 spring 服务器 文章分类 机器学习人工智能

vue element-admin项目学习第一天

前言

已经完成了搭建所需环境的任务，今天遇到的问题有点多，首先去官网了解的时候，了解了这个项目的作用就是简化我们后端平台搭建的项目。
项目采用主要的是vue，阅读官网我发现了他推荐我们从vue element-template 这个项目二次开发，那么这个两个项目有什么区别呢？其实主要是一个template是一个迷你版本，实现的功能比较少。

项目启动的时候遇得到问题

阅读readme文档，官网已经为我们准备了构建和启动项目的说明，按照步骤来就可以启动成功，前提是你要有node和git，其实有没有git都没关系主要是一定要安装node,其中具体的介绍和快速上手还需要浏览官网，下面提供项目的地址：vue element-admin
安装的时候运行npm install 指令，因为缺少某些东西导致无法安装，具体我没有记录直接百度然后cv大法就解决了
然后就进入主题：mock模拟的数据换自己的项目服务器

更换mock模拟数据为真实服务器数据

首先在vue.config.js中修改其中的devServe把 before: require('./mock/mock-server.js')注释掉

//原先代码
 devServer: {
port: port,
open: true,
overlay: {
  warnings: false,
  errors: true
},
//before: require('./mock/mock-server.js')

然后在deServe里面添加proxy如下

proxy: {
     // 开发环境代理配置
     [process.env.VUE_APP_BASE_API]: {
       // 目标服务器地址，这里填写你字节的服务器的域名和端口号
       target: process.env.VUE_APP_SERVICE_URL,
       changeOrigin: true, // 开启代理服务器，
       pathRewrite: {
       //配置重写的路径
         ['^' + process.env.VUE_APP_BASE_API]: ''
       }
     }
   }

在main.js注释掉mock相关代码

//直接注释掉一下代码
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

配置.env.development:

#目标服务接口地址,就是请求的时候的接口地址,配置自己的
VUE_APP_SERVICE_URL='http://192.168.137.***:8088'

#开发基础路径
VUE_APP_BASE_API='/api'

配置.env.production:

# base api
VUE_APP_BASE_API = '/api'

在\src\utils\request.js文件里面添加请求头，因为我们发送的是json

//就是添加这一句
	axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// create an axios instance
const service = axios.create({
//这里填写的地址其实就是你自己服务器的地址
  baseURL: process.env.VUE_APP_SERVICE_URL, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

修改对应的api，在src\api\user.js文件中,这里我修改的是登录接口，主要调试通login这个接口

export function login(data) {
  return request({
   // url: '/vue-element-admin/user/login',
    url:'/api/user/login',
    method: 'post',
    data
  })
}

基本是已经可以了，还有就要校对你登录api的字段名字，好比如我这个登录接口就只有phone，和password字段,对应修改src\store\modules\user.js里面的提交参数名字，当然也要修改相对应的校验username的规则改为校验phone的规则。

login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
    //这里我把原来的username换成phone，因为我后端就是简单地用phone和password来登录的
      login({ phone: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data)
        setToken(data)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })

这是时候启动项目点击登录我出现了跨域的问题，问题是我的后端代码没有配置跨域,然后我百度了springboot全局跨域配置，最后终于请求成功，这里我就将配置的代码copy过来，还有就是注意这一步看到请求网络的路径是不是对的，如果不是你的服务器路径的话就是配置错了问题自己检查一下，我就是在这一步浪费了大量的时间百度

package com.xinzhou.config;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;


@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {

        CorsConfiguration config = new CorsConfiguration();
        //开放哪些ip、端口、域名的访问权限，星号表示开放所有域
        config.addAllowedOrigin("*");
        //是否允许发送Cookie信息
        config.setAllowCredentials(true);
        //开放哪些Http方法，允许跨域访问
        config.addAllowedMethod(HttpMethod.GET);
        config.addAllowedMethod(HttpMethod.POST);
        config.addAllowedMethod(HttpMethod.PUT);
        config.addAllowedMethod(HttpMethod.DELETE);
        //允许HTTP请求中的携带哪些Header信息
        config.addAllowedHeader("*");
        //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
        config.addExposedHeader("*");

        //添加映射路径，“/**”表示对所有的路径实行全局跨域访问权限的设置
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        return new CorsFilter(configSource);
    }
}

以上的代码来自这为老哥的spingboot配置跨域

9.现在启动项目测试把：

观察login请求的返回状态号码是200，并且后端的测试端口返回正确的token，说明这个接口已经通了