【前端框架】积累与发现_submitservlet-优快云博客

本文链接：https://blog.youkuaiyun.com/dominic_z/article/details/93513226

基础

浏览器渲染引擎到底做了什么

Vant

Vant Weapp

Bootstrap

查看依赖的jQuery版本

组件

解决 Bootstrap dropdown require Popper.js的问题
这个沙雕组件需要popper.js这个库，4.4的文档是这么写的

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

但是官方的popper已经更新到2.11了，而bootstrap需要的库版本是1.16.0，从上面那个链接的url可以看出来，如果直接使用v2的popper仍然会报错，直接将上面那个链接里的js代码拷贝下来导入也可以的
我发现js的第三方库有个特点，例如popper的github里有好几个Popper.js，只有一个是需要我引入的

Bootstrap 面包屑导航（Breadcrumb）
修改面包屑导航栏，添加样式.breadcrumb-item + .breadcrumb-item::before { content: "> ";}，这个是兄弟选择器

bootstrap 4 panels已被card替换 - 由良大小姐 - 博客园

Vue

vue的文档非常好

Vue对象属性

computed 和watch
简单理解，watch属性是当观察到data里的对应的数据变化之后会执行的函数

vue选择标签，下面的两个vue不能颠倒，否则会报错，无法正常渲染，也好理解

<script src="../web/js/vue.js"></script>
<div id="outer">
    {{outerdata}}
    <div id="inner">{{innerdata}}</div>
</div>
<script>
    new Vue({
        el:"#inner",
        data:{           innerdata:1       }
    });
    new Vue({
        el:"#outer",
        data:{           outerdata:1       }
    })
</script>

事件

v-on监听的事件里，文档里说
在这里插入图片描述

指令

v-bind指令
 Vue中的v-cloak使用解读解决闪一下的问题

组件

Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')">
      Click me to be welcomed
    </button>  `
})
new Vue({
  el: '#emit-example-simple',
  methods: {
    sayHi: function () {
      alert('Hi!')
    }
  }
})

<div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>

解释一下上面代码的运行机制，首先welcome-button是一个全局组件，这个组件在#emit-example-simple里用到，v-on是用来进行事件绑定用的，这个组件在使用的时候，被额外绑定了一个叫做welcome的事件，触发该事件会调用sayHi方法。而组件里面有一句是v-on:click="$emit('welcome')"，意思是这个click事件触发的时候，会进一步触发父级组件（此时指的就是组件本身，即welcomt-button）的welcome事件，进而执行被注册到emit-example-simple的方法sayHi

插槽slot

其实是组件的功能拓展，即可以在自定义组件内部再添加东西

作用域插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
    <script src="vue/vue-router.js"></script>
    <script src="jQuery/jquery-3.4.1.js"></script>
    <script>
        $(function f() {
            let template = $('#navigation-link').html();
            Vue.component('navigation-link', {
                template: template,
                data: () => {
                    return {user: {firstName: 'wang', lastName: 'xiaohu'}}
                }
            });
            new Vue({
                el: "#d1",
            })
        })
    </script>
</head>
<body>
<template id="navigation-link">
    <div>
        <span><slot name="namedSlot" v-bind:user="user">{{ user.lastName }}</slot></span>
    </div>
</template>
<div id="d1">
    <navigation-link>
        <template v-slot:namedSlot="slotProps">{{ slotProps.user.firstName }}</template>
    </navigation-link>
</div>
</body>
</html>

上面的例子就是如何使得插槽内容能够访问子组件中才有的数据。上面把插槽命名为namedSlot，然后在组件中使用v-slot:namedSlot="slotProps"来指定这个插槽，slotProps就带有着属性数据

渲染的功能就是使用函数生成组件里的插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
    <script src="vue/vue-router.js"></script>
    <script src="jQuery/jquery-3.4.1.js"></script>
    <script>
        $(function f() {
            let template = $('#navigation-link').html();
            Vue.component('anchored-heading', {
                template: template,
                props: {
                    level: {
                        type: Number,
                        required: true
                    }
                },
                render: function (createElement) {
                    return createElement(
                        'h' + this.level,   // 标签名称
                        this.$slots.default // 子节点数组
                    )
                },
            });
            new Vue({
                el: "#d1",
            })
        })
    </script>
</head>
<body>
<template id="navigation-link">
    <div>
        <slot></slot>
    </div>
</template>
<div id="d1">
    <anchored-heading :level="3">Hello world!</anchored-heading>
</div>
</body>
</html>

里面level: {type: Number,required: true}，意思是指明这个属性的类型以及是否必须输入，在组件上使用level参数的时候一定要使用v-bind:level="3"，此时才会认为这个参数是个数字3，否则会看成普通的字符串3

Vue-cli

组件基础
 初识 Vue.js 中的 *.Vue文件
单文件组件，其中script 部分里的东西实际上就是注册组件时（Vue.component）候会使用的的参数

JSP

jsp是什么，作为一个准淘汰的工具，至少要知道他是干什么。用Tomcat写过后台处理程序吧，就是处理get和post请求的。注意，在处理的时候，是可以通过response直接控制输出的页面的，例如

public class SubmitServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter writer = resp.getWriter();
        writer.println("print");
        writer.write("write");
    }
}

<servlet>
        <servlet-name>SubmitServlet</servlet-name>
        <servlet-class>SubmitServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>SubmitServlet</servlet-name>
        <url-pattern>/submitServlet</url-pattern>
    </servlet-mapping>

那么访问http://localhost:8080/submitServlet的时候就会出现
在这里插入图片描述
而JSP受此启发，每个JSP最后都会被转化成一个java类，这个类继承了HttpServlet的一个子类，在其内部有一个类似于service的函数，这个函数会按照jsp里的java代码逻辑进行执行处理request，返回response。jsp代码里还有html标签之类的东西，这些东西都会按照jsp里的组织形式（一些规则，比如谁先谁后啊之类的）一股脑的塞进out.print()方法里，最后response里存着的就是一张完整的HTML，所以JSP叫做java server page，整个页面都是在服务端构建起来的。