java学习--黑马SpringBoot3课程个人总结-2024-02-06

最新推荐文章于 2024-07-14 22:18:32 发布
最新推荐文章于 2024-07-14 22:18:32 发布
阅读量867 收藏 15
点赞数 13
分类专栏： 黑马SpringBoot3的学习笔记 文章标签： java 学习 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68185369/article/details/136054918
版权

1.前端知识学习

在这里插入图片描述

2.Vue

在这里插入图片描述

在这里插入图片描述

准备模块的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>


    <!-- 引入vue模块 -->
    <script type="module">
            import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
            // 创建vue实例
            createApp({

            }).mount("#app")
    </script>
</body>
</html>

添加构建用户界面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 通过差值表达式渲染界面 -->
            <h1>
                {{msg}}
            </h1>
    </div>
    <!-- 引入vue模块 -->
    <script type="module">
            import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
            // 创建vue实例
            createApp({
                    data(){
                        return{
                            //定义数据
                            msg: 'hello Vue3'
                        }
                    }
            }).mount("#app")
    </script>
</body>
</html>

效果如图所示
在这里插入图片描述

3.常用指令

在这里插入图片描述

4.V-for指令

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <!-- 哪个元素多次出现，v-for指令就出现在哪个元素上 -->
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
     
        </table>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建应用实例
        createApp({
            data() {
                return {
                    //定义数据
                    articleList:[
                    {
                        title:"医疗反腐绝非砍医护收入",
                        category:"时事",
                        time:"2023-09-5",
                        state:"已发布"
                    },
                    {
                        title:"中国男篮缘何一败涂地？",
                        category:"篮球",
                        time:"2023-09-5",
                        state:"草稿"
                    },
                    {
                        title:"华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                        category:"旅游",
                        time:"2023-09-5",
                        state:"已发布"
                    }
                ]
                }
            }
        }).mount("#app")//控制页面元素
    </script>
</body>
</html>

效果如图
在这里插入图片描述

5.V-bind标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">客卿的博客</a>
    </div>

    <script type="module">
        //引入vue模块
        import { createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                   url:'https://blog.csdn.net/m0_68185369?spm=1000.2115.3001.5343' 
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>
</html>

效果如图
在这里插入图片描述

点击后
在这里插入图片描述

6.V-if和V-show

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        手链价格为: 
        <span v-if="customer.level>=0 && customer.level<=1">9.9</span> 
        <span v-else-if="customer.level>=2 && customer.level<=4">19.9</span>
        <span v-else>29.9</span>
        <br/>
        手链价格为: 
        <span v-show="customer.level>=0 && customer.level<=1">9.9</span> 
        <span v-show="customer.level>=2 && customer.level<=4">19.9</span>
        <span v-show="customer.level>5"> 29.9</span>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                   customer:{
                    name:"张三",
                    level:2
                   } 
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>

</html>

效果如图
在这里插入图片描述

原理的区别
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

7.V-on

在这里插入图片描述

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="money">点我有惊喜</button> &nbsp;
        <button v-on:click="love">再点更惊喜</button>
    </div>
    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据             
                }
            },
            methods:{
                money: function(){
                    alert('恭喜中间100元')
                },
                love: function(){
                    alert('获得一份姻缘')
                }    
            }
        }).mount("#app");//控制html元素

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

效果如下

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

8.v-model

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        文章分类: <input type="text" v-model="searchConditions.category"/><span>{{searchConditions.category}}</span>

        发布状态: <input type="text" v-model="searchConditions.state"/><span>{{searchConditions.state}}</span>

        <button>搜索</button>
        <button v-on:click="clear">重置</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    searchConditions:{
                        category:'',
                        state:''
                    },
                    //定义数据
                    articleList: [{
                        title: "医疗反腐绝非砍医护收入",
                        category: "时事",
                        time: "2023-09-5",
                        state: "已发布"
                    },
                    {
                        title: "中国男篮缘何一败涂地？",
                        category: "篮球",
                        time: "2023-09-5",
                        state: "草稿"
                    },
                    {
                        title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                        category: "旅游",
                        time: "2023-09-5",
                        state: "已发布"
                    }]
                }
            },
            methods:{
                clear:function(){
                    //清空category和state里的数据
                    //在methods对应的方法里面，使用this代表vue的实例
                    this.searchConditions.category='';
                    this.searchConditions.state='';
                }
            }

        }).mount("#app")//控制html元素
    </script>
</body>

</html>

效果如图所示

在这里插入图片描述

点击“重置”按钮后

在这里插入图片描述

在这里插入图片描述

9.Vue的生命周期

在这里插入图片描述

我们常用的是mounted

在这里插入图片描述

10.Axios

在这里插入图片描述

在这里插入图片描述

客卿123
关注
  • 13
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
SpringBoot基础篇--黑马
06-22
课程的学习目标是让学习者能够快速掌握SpringBoot技术，掌握SpringBoot的基础知识和应用方法，提高学习者的开发能力和解决问题的能力。 课程的学习前置知识包括Java基础语法、Spring与SpringMVC、Mybatis与Mybatis-...
Java黑马的瑞吉外卖项目（SpringBoot+MyBatis-Plus）
07-24
Java黑马的瑞吉外卖项目（SpringBoot+MyBatis-Plus）
java学习--黑马SpringBoot3课程个人总结-2024-02-04
m0_68185369的博客
02-05 330
我们发现在修改密码后，原来的令牌任然生效，这是不合理的。如果在redis中找不到token，那么就抛出异常。因为修改密码后，token会删除，在原来的token下的接口不能访问。在更新token后可以正常的使用了。将生成的令牌存储到redis中。测试在修改密码后token更新。点击package进行打包。
Java学习--黑马SpringBoot3课程个人总结-2024-02-12
m0_68185369的博客
02-12 786
跨域问题的解决,注册界面的搭建 3.跨域问题的解决 代码如下
java学习--黑马SpringBoot3课程个人总结-2024-02-08
m0_68185369的博客
02-08 539
/同步获取articleGetAllService的返回结果。Arcicle.vue的部分改动代码。artcile.js修改后的代码。//获取所有文章数据。
Java学习--黑马SpringBoot3课程个人总结-2024-02-15
m0_68185369的博客
02-16 1157
4.删除文章分类
java学习--黑马SpringBoot3课程个人总结-2024-02-01
m0_68185369的博客
02-01 329
为了解决用户登录认证的问题，引入了jwt令牌。
Java学习--黑马SpringBoot3课程个人总结-2024-02-14
m0_68185369的博客
02-15 907
/声明一个异步的函数。//声明一个异步的函数。
java学习--黑马SpringBoot3课程个人总结-2024-02-03
m0_68185369的博客
02-03 862
如下代码如下``
java学习--黑马SpringBoot3课程个人总结-2024-02-02
m0_68185369的博客
02-02 333
一般用于处理非 Content-Type: application/x-www-form-urlencoded编码格式的数据，比如：application/json、application/xml等类型的数据。通常用于接收POST、DELETE等类型的请求数据，GET类型也可以适用。
Java学习--黑马SpringBoot3课程个人总结-2024-02-16
m0_68185369的博客
02-16 1085
将来当点击+图标，选择本地图片后，el-upload这个组件会自动发送请求，把图片上传到指定的服务器上，而不需要我们自己使用axios发送异步请求，所以需要给el-upload标签添加一些属性，控制请求的发送。由于这个请求时el-upload自动发送的异步请求，并没有使用咱们的request.js请求工具，所以在请求的路ing上，需要加上/api, 这个时候请求代理才能拦截到这个请求，转发到后台服务器上。文章内容需要使用到富文本编辑器，这里咱们使用一个开源的富文本编辑器 Quill。
详细解读java的连连看游戏的源代码-课程设计
08-02
详细解读java的连连看游戏的源代码--【课程设计】 |--|--|--| |C|[张雪峰推荐选择了计算机专业之后-在大学期间卷起来-【大学生活篇】](https://blog.csdn.net/dearmite/article/details/131833197)|★★★✫✰| |...
基于jsp的企业员工信息管理系统的设计与实现-源代码-课程设计
08-02
基于jsp的企业员工信息管理系统的设计与实现--源代码--【课程设计】 |语言选择|收录专辑链接|卷的程度 | |--|--|--| |C|[张雪峰推荐选择了计算机专业之后-在大学期间卷起来-【大学生活篇】]...
多端小程序商城、App商城，使用Java开发,SpringBoot框架、MyBatis-plus持久层框架、Redis作为缓存
01-04
Java SpringBoot实现在线商城项目，实现了电商商城、淘淘商城、新蜂商城、小程序商城、电商书城、淘宝天猫商城、秒杀系统、黑马乐优商城、塔可商城、仿小米商城、微信商城，使用了SpringBoot、Redis、ElasticSearch...
java学习----递归
qq_56798493的博客
07-13 162
【代码】java学习----递归。
《JavaSE》---6.＜基础语法（Java三大程序控制结构）＞
最新发布
m0_73456341的博客
07-14 787
本篇博客主要讲解Java基础语法中的三大结构，一种顺序结构、两大分支结构i（if-else、swich-case）、四大循环结构（while、do while、fot、foreach）
java版的上门家政系统和PHP版的上门家政有什么区别？
baina666的博客
07-12 627
综上所述，Java版和PHP版的上门家政系统各有优缺点，选择哪种语言主要取决于项目的具体需求、预算、开发团队的技术栈以及未来的扩展计划等因素。同时，由于Java生态系统的复杂性和多样性，也可能需要投入更多的时间和资源来学习和掌握相关的技术和工具。Java版：Java拥有庞大的生态系统和丰富的第三方库，这为家政系统的开发和扩展提供了强大的支持。Java版：由于Java的编译执行机制和高效的垃圾回收算法，Java版家政系统通常具有更高的运行效率和更好的性能表现，尤其是在处理高并发、大数据量等复杂场景时。
Spring Security 授权
persistence_PSH的博客
07-14 868
在 loadUserByUsername 方法，在查询数据库用户信息的时候，同时查询出用户的权限，这里以角色名代指权限。在 loadUserByUsername 方法，在查询数据库用户信息的时候，同时查询出用户的权限，这里以角色名代指权限。在 loadUserByUsername 方法，在查询数据库用户信息的时候，同时查询出用户的权限，这里以角色名代指权限。通过 RBAC 获取到用户的具体权限后，再通过 Security 的 用户-权限-资源 来进行权限控制。HttpSecurity 权限配置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值