Vue2高级【学习笔记】

最新推荐文章于 2024-07-17 21:40:42 发布
最新推荐文章于 2024-07-17 21:40:42 发布
阅读量234 收藏
点赞数
分类专栏： # 前端 文章标签： 学习 vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52487106/article/details/128729085
版权

文章目录

Vue-cli&ElementUI

1、Vue-cli

1.1、什么是Vue-cli

  • Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能
  • Vue cli 背后集成了现代化开发的诸多功能,通过简单的命令就可以完成 "零配置"的项目环境搭建

1.2、 安装Vue-cli步骤

在安装vue-cli前，要确认自己的电脑是否安装了nodejs和npm

1.2.1、安装Node.js

详情参考

1.2.2、安装vue-ui

目前主流版本是 2.x 和 3.x 版本,安装3.x 以上的版本是因为该版本既可以创建2.x项目与3.x 项目
注意: 以管理员身份打开命令行

  1. 安装命令

npm install -g @vue/cli

  1. 输入 vue命令
    在这里插入图片描述
  2. 输入 vue -V 查看版本

vue -V

1.3、快速构建Vue项目

1.3.1、步骤说明

我们使用vue-cli 快速构建项目,步骤如下:

  1. 桌面创建一个空的文件夹
  2. 以管理员身份运行cmd , 进入到vueTest文件夹
  3. 执行下面的命令

1.基于交互式命令方式,创建项目
//文件名 不支持驼峰（含大写字母）使用短横线方式
vue create my-project

  1. 选择自定义安装,点击回车
    在这里插入图片描述
  2. 在这列表中,选择我们要安装的组件,使用空格键选择,选好后回车
    在这里插入图片描述
  3. 按回车之后,提示选择什么模式的路由,我们输入 n (表示选择hash模式)
    在这里插入图片描述
  4. 选择项目配置文件单独存放
    在这里插入图片描述
  5. 是否保存模板,选择n 不创建
    在这里插入图片描述
  6. 安装完成,提示输入执行下面这两个命令

在这里插入图片描述

  1. 首先进入项目目录

cd my-project

  1. 启动项目

npm run serve
在这里插入图片描述

  1. 访问项目: http://localhost:8080/
    在这里插入图片描述

  2. 停止项目只要，关闭命令行窗口即可

1.3.2、 导入Vue项目到VSCode
  1. VSCode中右键选择打开文件夹
  2. 选择桌面上的项目
  3. 打开项目,可以看到如下项目结构
    在这里插入图片描述
1.3.3、项目结构介绍
|--- my-project 项目名称
	|--- node_modules 存放依赖包的目录
	|--- public 静态资源管理目录
	|--- src 组件源码目录(我们写的代码)
		|--- assets 存放静态图片资源(CSS也可以放在这里)
		|--- components 存放各种组件(一个页面可以看做一个组件)，各个组件联系在一起组成一个完整的项目
		|--- router 存放了项目路由文件
		|--- views 放置的为公共组件(主要还是各个主要页面)
		|--- App.vue app.vue可以当做是网站首页，是一个vue项目的主组件，页面入口文件
		|--- main.js 打包运行的入口文件，引入了vue模块和app.vue组件以及路由route
	|--- babel.config.js babel配置文件, 对源代码进行转码(把es6=>es5)
	|--- package.json 项目及工具的依赖配置文件
	|--- paxkage-lock.json 依赖配置文件
	|--- README.md 项目说明
1.3.4、Vue脚手架自定义配置

     每个项目的根目录下面，一般都有一个 package.json 文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。 npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

这里要在vue.config.js多加一个自定义配置：端口号
如果你没有这个vue.config.js文件的话就在package.json中去配置
vue.config.js

devServer:{
  port: 8888,
}

package.json

"vue":{
	"devServer":{
		"port": "8888"
	}
}

这里推荐使用vue.config.js去配置vue的自定义的配置，如果没有的话可以自己创建一个

module.exports = {
  devServer:{
    port: 8888
  }
}
1.3.5、Vue组件化开发

  • 组件化是Vue的精髓，Vue项目就是由一个一个的组件构成的。 我们主要的工作就是开发的组件

  • 我们用 vue-cli 脚手架搭建的项目，里面有很多，如 index.vue 或者 App.vue 这一类的文件.每一个*.vue 文件都是一个组件 ，是一个自定义的文件类型, 比如 App.vue 就是整个项目的根组件。

  • 常见的组件：

    • 页面级别的组件
      • 页面级别的组件，通常是 views 目录下的.vue组件，是组成整个项目的各个主要页面
    • 业务上可复用的基础组件
      • 这一类组件通常是在业务中被各个页面复用的组件，这一类组件通常都写到 components 目录下，然后通过import在各个页面中使用

  • 组件的组成部分

    • template : 组件的HTML部分
    • script: 组件的JS脚本 (使用ES6语法编写)
    • style: 组件的CSS样式
<!-- 1.template 代表html结构, template中的内容必须有且只有一个根元素
编写页面静态部分 就是 view部分 -->
<template>
    <div>
        测试页面....
    </div>
</template>

<!-- 2.编写vue.js代码 -->
<script>
// 可以导入其组件
// import Header from '../components/header.vue'

// 默认写法，输出该组件
export default {
    // 组件名称，用于以后路由跳转
    name: "Home",
    // 当前组件中需要使用的数据
    data(){
        return {}
    },
    methods: {}
}
</script>
<!-- 编写当前组件的样式代码 -->
<style scoped>
/* 页面样式 加上scoped 表示样式就只能在当前组件有效 */

</style>

1.4、项目运行流程

1.4.1、main.js
// 1、项目运行会加载 入口文件main.js
// 在vue中使用import 变量名 from 文件路径
import Vue from 'vue'
import App from './App.vue' // 主组件
import router from './router' // 路由

// 关闭启动提示
Vue.config.productionTip = false

// 创建Vue实例
new Vue({
  router, // 为整个项目 添加路由
  render: h => h(App) // 生成模板 App - App.vue
}).$mount('#app') // 挂载了App.vue中id为App的区域

在这里插入图片描述

1.4.2、App.vue
// 2、App.vue 是项目的主组件（整个项目的其他页面都是主组件中切换）
// 它是App.vue中html代码部分
<template>
<!-- 挂载的区域 -->
  <div id="app">
    <nav>
      <!-- 路由的导航链接 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
1.4.3、路由
// 3、查看路由文件的具体配置
//  引入所需文件
import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入了Home.vue组件
import HomeView from '../views/HomeView.vue'

// 使用了路由功能
Vue.use(VueRouter)

// 创建路由集合，元素就是一个一个的路由规则
const routes = [
  {
    path: '/', // 路径
    name: 'home',// 路径名称
    component: HomeView // 表示路由导航到的组件
  },
  {
    path: '/about',
    name: 'about',
    // 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/AboutView.vue')
  }
]

// 创建路由管理器对象
const router = new VueRouter({
  routes
})

// 用来表示导出模块
export default router
1.4.4、Home.vue
// 4、查看默认访问的Home.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
// @符号表示 src这个目录
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>
1.4.5、HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

1.5、组件的使用案例

1.5.1、自定义组件

自定义一个组件，然后将本身vue中的helloworld组件替换成它

<template>
    <div class="header">
        {{ msg }}    
    </div>    
</template>

<script>
// js部分的代码
export default {
    name:"Header", // 组件名称
    data(){ // data函数
        return {
            msg:"这是一个Header组件"
        }
    }
}
</script>

<style scoped>
.header{
    height: 100px;
    line-height: 100px;
    background-color: #eee;
    text-align: center;
    color:red;
}
</style>

在这里插入图片描述

1.5.2、组件的传参

参考文章：https://blog.csdn.net/weixin_52487106/article/details/128764077

2、Element-UI

2.1、Element-UI介绍

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建
Element-UI官方站点：https://element.eleme.cn/#/zh-CN

2.2、Element-UI使用

  • 安装
  1. 当前项目下打开终端, 安装依赖包 ,执行下面的命令

npm i element-ui -S

  1. 打开 main.js , 导入Element-UI 相关资源.
  • main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等。
//导入组件库
import ElementUI from 'element-ui'
//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'
//配置Vue插件 将El安装到Vue上
Vue.use(ElementUI);
  1. 复制Element 按钮样式 到app.vue文件的 template下
<template>
  <div id="app">
    <nav>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>
  1. 启动项目
    在这里插入图片描述

2.3、CLI工程改造

  1. 删除components下的文件
  2. App.vue
<template>
	<div id="app"></div>
</template>
<style>
</style>
  1. router文件夹下的index.js保留
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  
]

const router = new VueRouter({
  routes
})

export default router
  1. 清空views
  2. 安装axios
  • 安装命令

npm i axios

  • 在main.js中导入axios相关资源
//引入axios
import axios from 'axios'
//Vue对象使用axios
Vue.prototype.axios = axios;

2.4、用户登录界面制作

2.4.1、Dialog对话框组件

在这里插入图片描述
我们可以用Dialog制作一个登陆弹窗,选择自定义内容
在这里插入图片描述

  1. Login.vue
<template>
    <div id="login">
        <el-dialog :show-close="false" title="用户登录" :visible.sync="dialogFormVisible">
        <el-form>
            <el-form-item label="账号" :label-width="formLabelWidth">
            <el-input autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input autocomplete="off"></el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">登 录</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
      return {
        dialogFormVisible: true,
        formLabelWidth: '120px'
      };
    }
}
</script>

<style scoped>

</style>
  1. 配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/components/Login'

Vue.use(VueRouter)

const routes = [
  // 访问/ 也跳转到login
  {
    path: "/",
   redirect: "login" // 重定向
  },
  // 登录路由
  {
    path: "/login",
    name: "login",
    component: Login
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router
  1. App.vue
<template>
  <div id="app">
    <!-- 根据访问路径，渲染路径匹配到的组件 -->
    <router-view>

    </router-view>
  </div>
</template>

<style>

</style>

在这里插入图片描述

2.4.2、登录功能编写
<template>
    <div id="login">
        <el-dialog :show-close="false" title="用户登录" :visible.sync="dialogFormVisible">
        <el-form>
            <el-form-item label="账号" :label-width="formLabelWidth">
            <el-input v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="login">登 录</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
      return {
        dialogFormVisible: true,
        formLabelWidth: '120px',
        user:{
            username: "",
            password: ""
        }

      };
    },
    methods:{
        // 登录的方法
        login(){
            // 定义常量保存url
           var url = "https://2105bb20-e273-4b30-9565-d7208ae7bef6.mock.pstmn.io/login";
           this.axios.get(url, {
            // 携带参数
            params:{
                username: this.user.username,
                password: this.user.password
        4.    },

           }).then((res) => {
            console.log(res);
            this.dialogFormVisible = false;
           }).catch((error) => {
            // 出现错误使用ElementUI提供的消息提示
            this.$message.error("对不起！登录错误！");
           })
        }
    }
}
</script>

<style scoped>

</style>

axios案例：http://axios-js.com/zh-cn/docs/index.html

这里没有使用setup那个东西，数据都是在data()中直接用return返回回去的，没有使用哪些ref啥的东西，还有这个axios我觉得比jquery还复杂点，但是不知道在速度上怎么样，后来搜了搜，怎么感觉jquery有点老了，感觉还是用axios比较好
https://segmentfault.com/a/1190000012836882

2.4.3、搭建虚拟服务器测试
  • Mock server就是模拟一个服务器，我们使用Mock server可以模拟后台接口,对请求进行响应
  • 在前后端分离的开发中 前端利用mockeserver模拟出对应接口，拿到返回数据来调试，无需等后端开发人员完成工作。
  1. 使用postman模拟出一个server
    在这里插入图片描述
  2. 打开如下窗体，创建一个伪服务
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  3. 修改请求的URL
    在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

小知识

  • postman可以测试接口，又可以当后端用，很神奇
  • 这个是刚知道的如果axios的回调函数使用function的方式写的话，回调函数内部访问不了this这个关键字，此时就需要在methods中var that = this;然后通过that访问属性，但是如果使用es6的箭头函数的话就可以在回调函数内部使用
2.4.4、前端页面跳转

https://v3.router.vuejs.org/zh/guide/essentials/navigation.html
      在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push来进行跳转（也就是编程式的导航）

methods:{
        // 登录的方法
        login(){
            // 定义常量保存url
           var url = "https://2105bb20-e273-4b30-9565-d7208ae7bef6.mock.pstmn.io/login";

           this.axios.get(url, {
            // 携带参数
            params:{
                username: this.user.username,
                password: this.user.password
            },

           }).then((res) => {
            console.log(res);
            // 成功后关闭对话框
            this.dialogFormVisible = false;
            // 进行页面跳转，跳转到首页，在前端进行页面跳转必须要使用路由
            this.$router.push("index");
           }).catch((error) => {
            // 出现错误使用ElementUI提供的消息提示
            this.$message.error("对不起！登录失败！");
           })
        }
    }

2.5、首页布局页面制作

2.5.1、创建 index.vue
<template>
    <el-button type="danger">布局页面</el-button>
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>
2.5.2、配置路由

router目录下 的index.js 路由文件

import Index from '@/components/Index'

{
    path: "/index",
    name: "index",
    component: Index
  },
2.5.3、布局容器和导航菜单
<template>
<div class="index">
   <el-container style="height: 100%" direction="vertical">
        <el-header>后台管理</el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    background-color="#D3DCE6">
                        <el-submenu index="1">
                            <template slot="title">
                            <i class="el-icon-location"></i>
                                <span>导航菜单</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1"><i class="el-icon-menu"></i>课程管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <el-main>Main</el-main>
            </el-container>
    </el-container>
</div>
    
</template>

<script>
export default {
    
}
</script>

<style>
html,
body,
#app,
.index,
.el-container{
    padding: 0px;
    margin: 0px;
    height: 100%;
}
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>

`知识点``

  1. 就像是bootstrap一样都是抄过来然后修改，然后有不同的class啥的一些配置可以使用不同的样式
  2. 这里我用了官网的抄下来的代码，发现容器布局不能全屏显示，然后参考了
    https://blog.csdn.net/qq_36275889/article/details/94634397    解决了问题
2.5.4、导航菜单的嵌套路由设置

在这里插入图片描述
这里使用了嵌套路由（子路由）
在这里插入图片描述
在这里插入图片描述

2.6、课程列表展示

2.6.1、Table表格组件的使用

Course.vue

<template>
    <div class="course">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
     data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
}
</script>
<style scoped>
</style>

在这里插入图片描述

2.6.2、Course组件开发
<template>
    <div class="course" >
        <el-table v-loading="loading" element-loading-text="玩命加载中..." :data="courseList" stripe style="width: 100%">
            <el-table-column prop="id" label="ID" ></el-table-column>
            <el-table-column prop="course_name" label="课程名称" ></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="sort_num" label="排序"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
     data() {
      return {
        courseList: [
         {
            id: 1,
            course_name: "java",
            price: 888,
            sort_num: 1,
            status: "下架"
         }],
         loading: true
      }
    },
    // 钩子函数created，在DOM页面生成之前执行
    created(){
       this.loadCourse(); 
    },
    methods:{
        // 方法1：获取课程信息
        loadCourse(){
            alert("loadCourse方法执行了");
            // 发送请求获取课程信息

            // 取消加载动画
            this.loading = false;
        }
    }
}
</script>
<style scoped>
</style>
  • 所需的字段写好，然后对应取值的prop写好
  • 先测试，造一份假数据
  • 做一个加载动画，使用钩子函数created，调用加载数据的方法，然后加载完后将加载动画取消即可
2.6.3、请求后台接口
<script>
import axios from 'axios';
export default {
     data() {
      return {
        courseList: [],
        loading: true
      }
    },
    // 钩子函数created，在DOM页面生成之前执行
    created(){
       this.loadCourse(); 
    },
    methods:{
        // 方法1：获取课程信息
        loadCourse(){
            // 发送请求获取课程信息
            const url = "http://localhost:8082/lagou_edu_home/course";
            return this.axios.get(url,{
                params:{
                    methodName: "findCourseList",
                }
            }).then((resp) => {
                console.log(resp);
                // 取消加载动画
            this.loading = false;
            }).catch((error) => {
                this.$message.error("获取数据失败！");
            })  
        }
    }
}
</script>

注意点：

  1. 如果不清楚成功的回调函数传回来的值是什么的话，先打印出来看看
  2. 这个axios请求最后一定要return都返回出来，才能被\template中使用
  3. 最后要处理跨域问题
2.6.4、跨域问题解决

  • 当我们在前端项目中,向后端发送请求的获取课程数据的时候,出现了跨域问题

  • 已被CORS策略阻止：请求的资源上没有’ Access-Control-Allow-Origin’标头（跨域请求失败）
    在这里插入图片描述

  • 什么是跨域
    跨域是指通过JS在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，只要协议、域名、端口有任何一个不同，都被当作是不同的域,浏览器就不允许跨域请求。

  • 如何解决
    跨域的允许主要由服务器端控制。服务器端通过在响应的 header 中设置 Access-Control-AllowOrigin 及相关一系列参数，提供跨域访问的允许策略

  • 设置响应头中的参数来允许跨域域请求:

    • Access-Control-Allow-Credentials
    • Access-Control-Allow-Origin 标识允许跨域的请求有哪些
  1. 在pom文件中引入依赖
<!-- 解决跨域问题所需依赖 -->
<dependency>
	<groupId>com.thetransactioncompany</groupId>
	<artifactId>cors-filter</artifactId>
	<version>2.5</version>
</dependency>
  1. 在web.xml中 配置跨域 filter
<!--配置跨域过滤器-->
<filter>
	<filter-name>corsFilter</filter-name>
	<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>
<filter-mapping>
	<filter-name>corsFilter</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>
  1. 然后就可以看到数据了

在这里插入图片描述

2.7、条件查询

2.7.1、ElementUI输入框组件
 <el-row :gutter="20">
    <el-col :span="6">
        <el-input placeholder="课程名称" v-model="courseMethod"  prefix-icon="el-icon-search" clearable> </el-input>
    </el-col>
    <el-col :span="1">
        <el-button type="primary">点击查询</el-button>
    </el-col>
</el-row>
  • bootstrap是布局栅格是12格子，这个ElementUI是24个格子神奇！
2.7.2、请求后台数据
<template>
  <div class="course">
    <el-row :gutter="20">
        <el-col :span="6">
            <el-input placeholder="课程名称" v-model="filter.course_name"  prefix-icon="el-icon-search" clearable> </el-input>
        </el-col>
        <el-col :span="6">
            <el-input placeholder="课程状态" v-model="filter.status"  prefix-icon="el-icon-search" clearable> </el-input>
        </el-col>
        <el-col :span="1">
            <el-button type="primary" @click="findByCourseName">点击查询</el-button>
        </el-col>
    </el-row>
    
    <el-table
      v-loading="loading"
      element-loading-text="玩命加载中..."
      :data="courseList"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="course_name" label="课程名称"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="sort_num" label="排序"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      courseList: [],
      loading: true,
      filter:{
        course_name: "",
        status: null
      }
    };
  },
  // 钩子函数created，在DOM页面生成之前执行
  created() {
    this.loadCourse();
  },
  methods: {
    // 方法1：获取课程信息
    loadCourse() {
      // 发送请求获取课程信息
      const url = "http://localhost:8082/lagou_edu_home/course";
      return this.axios
        .get(url, {
          params: {
            methodName: "findCourseList",
          },
        })
        .then((resp) => {
          console.log(resp.data);
          this.courseList = resp.data;
          // 取消加载动画
          this.loading = false;
        })
        .catch((error) => {
          this.$message.error("获取数据失败！");
        });
    },

    // 方法2：根据课程名称查询课程信息
    findByCourseName(){
        const url = "http://localhost:8082/lagou_edu_home/course";
        this.axios.get(url,{
            params:{
                methodName: "findByCourseNameAndStatus",
                course_name: this.filter.course_name,
                status: this.filter.status
            }
        }).then((resp) => {
            console.log(resp.data);
            this.courseList = resp.data;
        }).catch((error) => {
             this.$message.error("获取数据失败！");
        })
    }
  },
};
</script>
<style scoped>
</style>
  • 我给加上了课程状态的输入框
  • 记得开启加载提示，好看些！
    在这里插入图片描述
wzdhc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2学习笔记
weixin_43885418的博客
12-06 742
推荐大家安装的 VScode 中的 Vue 插件 Vue 3 Snippets Vue 3 Snippets - Visual Studio Marketplace Vetur Vetur - Visual Studio Marketplace 什么是 vue 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就
vue2高级用法
ZT_KEBEI的博客
03-22 1196
文章目录vue高级用法1.混入mixin2.父子组件传值3.子组件触发父组件事件4.eventBus事件总线5.vue组件绑定原生事件6.插槽7.动态组件8.组件缓存9.watch监听10.vue中配置开发环境、生产环境、测试环境11.观察组件中的任何内容11.nextTick()vue-cli配置移动端调试Vuex基础用法解决页面刷新数据丢失问题方式一：方式二vuex数据持久化(插件方式)vue内外边距的初始化vue-router(路由)1.路由传参VUE项目美化滚动条组件封装使用封装按钮button拓展
Vue2高级篇
weixin_44283682的博客
03-05 1186
Vue2高级篇知识，包含Vuex, Vue-router等
Vue2~3高级用法
weixin_45291798的博客
11-27 440
2、v-slot:header="header" 将header插槽中的数据绑定到header变量中，可在父组件中直接使用。#header 无法实现将header插槽中的数据绑定到变量中。slider.js 在Mixins文件夹下建一个slider.js文件。1、v-slot:header 等于#header。页面（组件）引用mixins。comp.vue 组件。
vue w3cschool学习笔记
09-07
在“vue w3cschool学习笔记”中，我们可以看到多个关键知识点，包括Vue的安装与运行、实例化、模板语法、指令、用户输入、过滤器、条件判断、循环语句、计算属性以及事件处理等。 1. **安装与运行**： 使用`cnpm ...
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
VUE学习笔记
07-17
Vue的学习笔记将涵盖其核心概念、基本用法以及实际应用。 一、Vue的核心概念 1. 双向数据绑定：Vue采用MVVM（Model-View-ViewModel）模式，通过`v-model`指令实现了视图与数据模型之间的双向绑定，使得数据变化时...
vue学习笔记1
08-03
Vue.js 是一个轻量级的前端JavaScript框架，专注于视图层的构建，具有易学易用的特点，并且能够...通过掌握这些基础知识，我们可以逐步深入学习Vue的组件系统、路由、状态管理等更高级的概念，从而构建复杂的单页应用。
vue和react学习笔记.rar
10-26
本压缩包包含的“vue和react学习笔记”是针对这两个框架的学习资源，旨在帮助初学者快速入门。 Vue.js是一个轻量级的JavaScript框架，它以简洁的API和易于上手的特点受到了开发者们的喜爱。Vue的核心特性包括声明式...
vue2高级小总结
qyszy123的博客
08-09 190
b.vue接收事件($on 接收命令)第一个参数为标志变量，第二个参数中的item为通信的值bus . $off('tellB') //这步操作为 卸载这个命令 不写的话，$on事件就会重复执行 有多少事件就卸载多少个 }
Vue2进阶之Vue2高级用法
qq_34306228的博客
04-18 1163
App.vue main.js App.vue main.js global注入到new Vue实例上，然后在App.vue的实例中执行自己当前的data与Vue实例执行顺序有关，先进行当前实例化声明（全局注入），然后再实例化声明的时候注入我们内部的mixin，是外部的的global更高一点像Vue-router、Vuex等也是插件，通过插件注入进去的 Vue-router Vue-router关于插件的内容 Vuex install的方法，将全部内容挂载到Vue的构造函数上，通过use方法挂载到Vue实
10个实用技巧让你的 Vue 代码更优雅
qq_41429765的博客
09-16 797
10个实用技巧让你的 Vue 代码更优雅 johnYu高级前端进阶2020-10-11 关注高级前端进阶，回复“加群” 加入我们一起学习，天天进步 作者：johnYu 链接：https://juejin.im/post/6854573215969181703 前言???? 作为深度代码洁癖，我们都希望能写出简单高效的代码，让我们的代码看起来更加优雅，让我们抛弃繁杂的代码，一起开启简单的旅程~~ slots 新语法向 3.0 看齐 ❝ 使用带有“＃”的新命名插槽缩写语法,在Vue 2.6
全Vue2（狂敲14W字，全代码干货）
momo不会IT的博客
10-22 1395
总结Vue数据监测
常用：vue中的几个高级方法
weixin_41127362的博客
10-19 630
vue常用方法，高级方法
Vue (二) 高级特性
一条到晚游泳的鱼
09-23 160
1、修饰符 1.事件修饰符： stop：阻止冒泡（事件冒泡:点击子元素，事件会一级一级冒泡到父元素） 举例：如下当点击子元素“按钮1”时会调用work1方法，还会冒泡到父元素并触发work方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vu
昇思25天学习打卡营第14天|LLM-文本解码原理--以MindNLP为例
最新发布
wwt72的博客
07-17 830
限制输出序列的最大长度为50个token。top-p=0.95，top-p采样表示在每一步生成token时，只从概率分布中累计概率达到95%的token中进行采样，有助于保持生成文本的流畅性和质量，同时允许一些低概率的token被选中，从而增加多样性。表示禁用了top-k采样，因为在top-k采样中，通常是从概率最高的k个token中随机选择一个token作为下一个输出，而这里设置为0表示不限制token的选择，实际上这将等同于使用 softmax 概率分布直接进行采样。这有助于提高生成文本的多样性。
黑马程序员Vue前端学习笔记：从基础到高级特性
前端学习笔记-黑马程序员Vue是一份全面介绍Vue.js框架的教程，旨在帮助初学者快速理解和掌握Vue的核心概念和用法。Vue作为现代前端开发的重要工具，其特点包括： 1. **轻量级框架**：Vue起始于简化Web应用开发，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值