SpringBoot+Vue全栈开发-刘老师教编程(b站)(三)

vue框架快速上手

1.导入vue的脚本文件
2.声明要被vue所控制的DOM区域
3.创建vue的实例对象


1.基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //1.导入vue的脚本文件
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    //2.声明要被vue所控制的DOM区域
    <div id="app">
        {{message}}
    </div>
    //3.创建vue的实例对象
    <script>
        Vue.createApp({
          data() {
            return {
              message: 'Hello Vue!'
            }
          }
        }).mount('#app')
      </script>
    
</body>
</html>

2.内容渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <p>姓名:{{username}}</p>
        <p>{{desc}}</p>
        <p v-html="desc"></p>
    </div>
    <script>
        const vm={
            data:function(){
                return{
                    username:'zhangshan',
                    desc:'<a href="http://www.baidu.com">百度</a>'
                }
            }
        }
        const app=Vue.createApp(vm)
        app.mount('#app')
    </script>
    
</body>
</html>

运行结果:
请添加图片描述
3.属性绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <a :href="link">百度</a>
        <input type="text" :placeholder="inputValue">
        <img :src="imgSrc" :style = "{width:w}" alt="">
    </div>
    <script>
        const vm = {
            data: function(){
                return{
                    link:"http://www.baidu.com",
                    inputValue:'请输入内容',
                    imgSrc:'./images/demo.png',
                    w:'500px'
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>
</html>

运行结果:请添加图片描述
4.使用JavaScript表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id = "app">
        <p>{{number + 1}}</p>
        <p>{{ok ? 'True' : 'False'}}</p>
        <p>{{message.split('').reverse().join('')}}</p>
        <p :id="'list-' + id">xxx</p>
        <p>{{user.name}}</p>
    </div>
    <script>
        const vm = {
            data: function(){
                return {
                    number: 9,
                    ok: false,
                    message: 'ABC',
                    id: 3,
                    user:{
                        name:'zs'
                    }
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>
</html>

运行结果:
请添加图片描述
5.事件绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id = "app">
        <h3>count 的值为:{{count}}</h3>
        //原生onclick封装成 v-on:click,v-on:和@等价
        <button v-on:click="addCount">+1</button>
        <button @click="count+=1">+1</button>
    </div>
    <script>
        const vm ={
            data :function(){
                return{
                    count: 0,
                }
            },
            methods:{
            //点击按钮,让count自增+1
                addCount(){
                    this.count += 1
                },
            },
        }
        const app = Vue.createApp(vm)
        app.mount("#app")

    </script>
    
</body>
</html>

运行结果:请添加图片描述
6.条件渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
    <button @click="flag = !flag">Toggle Flag</button>
    //如果flag值为false,v-if和v-show都不显示,但是区别在于v-if标签不会被创建,v-show标签会被创建
    <p v-if="flag">请求成功----被v-if控制</p>
    <p v-show="flag">请求成功----被v-show控制</p>
    </div>
    <script>
        const vm = {
            data :function(){
                return{
                    flag:false,
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount("#app")
    </script>
    
</body>
</html>

运行结果:
请添加图片描述
7.列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(user, i) in userList">索引是:{{i}},姓名是:{{user.name}}</li>
        </ul>
    </div>
    <script>
        const vm = {
            data :function(){
                return {
                    userList:[
                        {id:1,name:'zhangsan'},
                        {id:2,name:'lisi'},
                        {id:3,name:'wangwu'}
                    ],
                }
            },
        }
        const app = Vue.createApp(vm)
        app.mount("#app")
    </script>
    
</body>
</html>

运行结果:请添加图片描述
8.v-for中的key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <!-- 添加用户区域 -->
        <div>
            <!-- v-model比起:value可以双向绑定,输入的值可以影响name -->
            <input type="text" v-model="name">
            <button @click="addNewUser">添加</button>
        </div>
        <!-- 用户列表区域 -->
        <ul>
            <li v-for="(user, index) in userlist" :key="user.id">
                <input type="checkbox"/>
                姓名:{{user.name}}
             </li>
        </ul>
    </div>
    <script>
        const vm = {
            data :function(){
                return{
                    //用户列表
                    userlist:[
                        {id:1,name:'zs'},
                        {id:2,name:'ls'}
                    ],
                    //输入用户名
                    name:'',
                    //下一个可用的id值
                    nextId:3
                }
            },
            methods:{
                //点击了添加按钮
                addNewUser(){
                    //unshift是在列表起初位置加进去
                    this.userlist.unshift({id: this.nextId,name:this.name})
                    this.name=''
                    this.nextId++
                }

            }

        }
        const app = Vue.createApp(vm)
        app.mount("#app")
    </script>
</body>
</html>

运行结果:
请添加图片描述

NPM简介

  • NPM(Node Package Manager)是一个NodeJS包管理和分发工具。
  • NPM以其优秀的依赖管理机制和庞大的用户群体,目前已经发展成为整个JS领域的依赖管理工具。
  • NPM最常见的用法就是用于安装和更新依赖。要使用NPM,首先要安装Node工具。

Vue CLl使用

  • Vue CLl是Vue官方提供的构建工具,通常称为脚手架
  • 用于快速搭建一个带有热重载(在代码修改后不必刷新页面即可呈现修改后的效果)及构建生产版本等功能的单页面应用。
  • Vue CLl基于 webpack 构建,也可以通过项目内的配置文件进行配置,安装:npm install -g @vue/cli

创建vue

创建条件:npm install -g @vue/cli(已经安装过,不用再次输入)
出现bug请添加图片描述

1.输入 vue create test1,出现下面,选择Manually select features

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

2.出现下面,对 (* ) Linter / Formatter按下空格取消,回车

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

3.出现下面,选择3.x

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

4.出现下面,选择> In package.json

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Choose a version of Vue.js that you want to start the project with 3.x
? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json

5.出现下面,输入大写N

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Choose a version of Vue.js that you want to start the project with 3.x
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) N

请添加图片描述
6.创建成功

Vue CLI v5.0.8
✨  Creating project in D:\Vscode_workspace\test1.
⚙️  Installing CLI plugins. This might take a while...


added 857 packages in 34s

98 packages are looking for funding
  run `npm fund` for details
🚀  Invoking generators...
📦  Installing additional dependencies...


added 6 packages in 3s

98 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project test1.
👉  Get started with the following commands:

 $ cd test1
 $ npm run serve

请添加图片描述

vue组件开发

组件的构成

  • Vue 中规定组件的后缀名是.vue
  • 每个 .vue 组件都由 3部分构成,分别是
    1.template,组件的模板结构,可以包含HTML标签及其他的组件
    2.script,组件的JavaScript 代码
    3.style,组件的样式

新建组件

1.在components目录下新建一个Hello.vue
2.在App.vue的里添加 import Hello from ‘./components/Hello.vue’
3.在components:{}中添加注册 Hello
4.在添加标签

组件间的传值

  • 组件可以由内部的Data提供数据,也可以由父组件通过prop的方式传值
  • 兄弟组件之间可以通过Vuex等统一数据源提供数据共享。

数据title

<template>
    <div>
        <h1>{{ title }}</h1>
    </div>
</template>
<script>
export  default{
    name:"Movie",
    data:function(){
        return{
            title:"静冈1"
        }
    }
}
</script>

请添加图片描述
请添加图片描述
本机npm install element-ui 仅支持vue2版本,如果从网上下载了文件,先删除node_modules文件,然后在终端输入npm install就会自动生成node_modules文件

使用element-ui

1.先创建vue2的项目
2.输入npm install element-ui
3.在main.js中添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);   //全局注册

使用font-awesome

1.输入npm install font-awesome
2.在main.js中添加import 'font-awesome/css/font-awesome.min.css'
3.<i class="fa fa-address-book fa-1g">asf</i>所有样式前都要加上fa
4.使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x,或者 fa-5x 类 来放大图标。

Axios简介

  • 在实际项目开发中,前端页面所需要的数据往往需要从服务器端获取,这必然涉及与服务器的通信。
  • Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。
  • Axios 在浏览器端使用XMLHttpRequests发送网络请求,并能自动完成JSON数据的转换。
  • 安装:npm install axios
  • 地址:https://www.axios-http.cn/

发送网络请求

请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述

  • vue的生命周期:创建,加载,渲染,销毁
  • methods:{}里面是放自定义函数
  • created:function(){}这种跟生命周期相关的函数放在跟data:function(){}同级
created:function(){
    console.log("组件被创建")
  },
mounted:function(){
   console.log("组件被挂载")  //挂载就是渲染
},

请添加图片描述


使用axios

1.在终端输入npm install axios

2.在Hello.vue中添加import axios from 'axios'(哪里使用就在哪里加)
3.前端端口8080,后端端口改成server.port=8088
4.在App.vue添加下面代码,记得加上后端端口localhost:8088

created:function(){
    console.log("app组件被创建")
    axios.get("http://localhost:8088/user/findAll").then(function(response){
      console.log(response)
    })
  },

5.报错,该报错是跨域问题请添加图片描述
6.解决:在控制器加上@CrossOrigin
7.在Hello.vue添加

<template>
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="序号" width="180"></el-table-column>
        <el-table-column prop="username" label="姓名" width="180"></el-table-column>
        <el-table-column prop="password" label="密码" width="180"></el-table-column>
        <el-table-column prop="birthday" label="生日" width="180"></el-table-column>
    </el-table>
</template>
<script>
import axios from 'axios'

export default{
    name:"Hello",
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    created:function(){
      console.log("hello创建")
      axios.get("http://localhost:8088/user/findAll").then((response)=>{
        this.tableData = response.data
      })
    },
    data() {
      return {
        tableData: []
      }
    },


}
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

8.运行成功
请添加图片描述

axios全局配置

  • 就不用每个组件都要导入axios
    1.在main.js中加入
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8088"

Vue.prototype.$http = axios

2.Hello.vue中created:function(){}内容修改成

created:function(){
      this.$http.get("/user/findAll").then((response)=>{
        this.tableData = response.data
      })
    },

3.运行成功

为什么会出现跨域问题

  • 为了保证浏览器的安全,不同源的客户端脚本在没有明确授权的情况下,不能
    读写对方资源,称为同源策略,同源策略是浏览器安全的基石
  • 同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能
  • 所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)
  • 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域,此时无法读取非同源网页的 Cookie,无法向非同源地址发送 AJAX 请求

跨域问题解决

  • CORS(Cross-Origin Resource Sharing)是由W3C制定的一种跨域资源共享技术标准,其目的就是为了解决前端的跨域请求。
  • CORS可以在不破坏即有规则的情况下,通过后端服务器实现CORS接口,从而实现跨域通信。
  • CORS将请求分为两类:简单请求和非简单请求,分别对跨域通信提供了支持。

简单请求

满足以下条件的请求即为简单请求:

  • 请求方法:GET、POST、HEAD
  • 除了以下的请求头字段之外,没有自定义的请求头:
    Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type
  • Content-Type的值只有以下三种:
    text/plain、multipart/form-data、application/x-www-form-urlencoded

简单请求的服务器处理

  • 对于简单请求,CORS的策略是请求时在请求头中增加一个Origin字段
Host:localhost:8080
Origin:http://localhost:8081
Referer:http://localhost:8081/index.html
  • 服务器收到请求后,根据该字段判断是否允许该请求访问,如果允许,则在
    HTTP头信息中添加Access-Control-Allow-Origin字段。
Access-Control-Allow-0rigin:http://localhost:8081
Content-Length:20
Content-Type:text/plain;charset=UTF-8
Date:Thu,12 Jul 2018 12:51:14 GMT

非简单请求

  • 对于非简单请求的跨源请求,浏览器会在真实请求发出前增加一次OPTION请求,称为预检请求(preflight request)
  • 预检请求将真实请求的信息,包括请求方法、自定义头字段、源信息添加到HTTP头信息字段中,询问服务器是否允许这样的操作。
  • 例如一个GET请求:
OPTIONS /test HTTP/1.1
Origin:http://www.test.com
Access-Control-Request-Method:GET
Access-Control-Request-Headers:X-Custom-Header
Host:www.test.com
  • Access-Control-Request-Method表示请求使用的HTTP方法,Access- Control-Request-Headers包含请求的自定义头字段

  • 服务器收到请求时,需要分别对Origin、Access-Control-Request-Method、Access-Control-Request-Headers进行验证,验证通过后,会在返回HTTP头

  • 信息中添加:

Access-Control-Allow-0rigin:http://www.test.com
Access-Control-A1low-Methods:GET,POST,PUT,DELETE
Access-Control-Allow-Headers:X-Custom-Header
Access-Control-Allow-Credentials:true
Access-Control-Max-Age:1728000
  • Access-Control-Allow-Methods、Access-Control-Allow-Headers:真实请求允许的方法、允许使用的字段
  • Access-Control-Allow-Credentials: 是否允许用户发送、处理cookie
  • Access-Control-Max-Age: 预检请求的有效期,单位为秒,有效期内不会重复发送预检请求。
  • 当预检请求通过后,浏览器才会发送真实请求到服务器。这样就实现了跨域资源的请求访问。

VueRouter安装与使用

  • Vue路由vue-router是官方的路由插件,能够轻松的管理 SPA 项目中组件的切换。
  • Vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来
  • vue-router 目前有 3.x的版本和 4.x的版本,vue-router 3.x只能结合 vue2进行使用,vue-router 4.x 只能结合 vue3 进行使用
  • 安装:npm install vue-router@4

vue2只能按照npm install vue-router@3

使用VueRouter

1.创建Discover.vue、Friend.vue、My.vue
2.在App.vue添加

<template>
  <div>
    <h1>App组件</h1>
    <router-link to="/discover">发现音乐</router-link>
    <router-link to="/Friends">发现音乐</router-link>
    <router-link to="/My">发现音乐</router-link>
    <router-view></router-view>
  </div>
</template>

3.新建router文件夹,vrouter文件夹下新建index.js文件,并在index.js中添加

import VueRouter from "vue-router";
import Vue from "vue";

//把组件导进来
import Discover from '../components/Discover.vue'
import Friends from '../components/Friends.vue'
import My from '../components/My.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    //指定hash属性与组件的对应关系
    routes:[
        {path:'/',redirect:"/discover"},//首页定向到discover页面
        {path:'/discover',component:Discover},
        {path:'/friends',component:Friends},
        {path:'/my',component:My},
    ]

})
export default router//对象导出

4.在main.js中添加

import Vue from 'vue'
import App from './App.vue'
import router from './router'   //

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router                         //
}).$mount('#app')

嵌套组件
  • 新建Playlist.vue、Toplist.vue
  • 在Discover中嵌套子组件
   <template>
    <div>
        <h1>发现音乐</h1>
        
        //discover前一定要加/
        
        <router-link to="/discover/toplist">推荐</router-link>   
        <router-link to="/discover/playlist">歌单</router-link>
        <hr>
        <router-view></router-view>
    </div>
   </template>
  • 在index.js导入需要的组件
//法一:添加
import Toplist from '../components/Toplist.vue'
import Playlist from '../components/Playlist.vue'

 {path:'/discover/playlist',component:Playlist},
 {path:'/discover/toplist',component:Toplist},

//法二:通过children属性,嵌套声明子路由

import Toplist from '../components/Toplist.vue'
import Playlist from '../components/Playlist.vue'

 {
            path:'/discover',
            component:Discover,
            //通过children属性,嵌套声明子路由
            children:[
                {path:"toplist",component:Toplist},
                {path:"playlist",component:Playlist},
            ]
        },

动态路由

1.在My.vue添加嵌套组件

<template>
    <div>
        <h1>我的音乐</h1>
        <router-link to="/my/1">商品1</router-link>
        <router-link to="/my/2">商品2</router-link>
        <router-link to="/my/3">商品3</router-link>
        <router-view></router-view>
    </div>
</template>

2.动态路由添加

//法一:
(1)新建Product.vue,添加
    <template>
        <h3>商品{{ $route.params.id }}</h3>
    </template>

(2)在index.js添加
    import Product from '../components/Product.vue'
        {
            path:'/my',
            component:My,
            children:[
                {path:":id",component:Product},
            ]
        },
        
//法二:
(1)新建Product.vue,添加
    <template>
        <h3>商品{{ id }}</h3>
    </template>
    <script>
    export default {
        props:["id"]
    }
    </script>
    
(2)在index.js添加
    import Product from '../components/Product.vue'
       {
            path:'/my',
            component:My,
            children:[
                {path:":id",component:Product,props:true},
            ]
        },

编程式导航

<template>
    <button @click="gotoProduct(2)">跳转到商品2</button>
</template>
<script>
export default{
    methods :{
        gotoProduct:function(id){
        	this.$router.push('/movie/s{id}')
        }
    }
}
</script>

请添加图片描述

  • 36
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值