JavaWeb 笔记——6

一、Vue

1.1、Vue-概述

• Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
• 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
• 官网: Vue官网

1.2、Vue快速入门

1. 新建HTML页面，引入 Vue.js文件

<script src="js/vue.js"></script>

2. 在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({
	el: "#app",
	data() {
		return {
			username: ""
		}
	}
});

3. 编写视图

<div id="app">
<input name="username" v-model="username" >
	{{username}}
</div>

1.3、Vue常用指令

• 指令:HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。
  例如: v-if, v-for…
• 常用指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

指令	作用
v-bind	为HTML标签绑定属性值，如设置href , css样式
v-model	在表单元素上创建双向数据绑定

• v-bind:

  <a v-bind:href="url">百度一下</a>
  

  <!--v-bind可以省略-->
  <a:href="url">百度一下</a>
  

• v-model:

  <input name="username" v-model="username">
  

指令	作用
v-on	为HTML标签绑定事件

• html:

<input type="button" value="一个按钮" v-on:click="show()">
<input type="button" value="一个按钮" @click="show()">

• vue:

new Vue({
	el:"#app",
	methods: {
		show(){
			alert(我被点了");
		}
	}
});

指令	作用
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值

• v-if:

<div v-if="count == 3">div1</div>
<div v-else-if="count == 2">div2</div>
<div v-else>div3</div>

• v-show:

<div v-show="count == 3">div4</div>

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性

• v-for

<div v-for="addr in addrs">
{{addr}}<br>
</div>

• 加索引

<div v-for="(addr,i) in addrs">
<!--i表示索引，从0开始-->
{{i+1}}:{{addr}}<br>
</div>

1.3、Vue生命周期

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

• mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。
  • 发送异步请求，加载数据

new Vue({
	el:"#app",
	mounted(){
		alert("vue挂载完毕，发送异步请求");
	}
});

1.4、查询所有-案例

1.5、新增品牌-案例

二、Element

2.1、Element概述

• Element：是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，用于快速构建网页

• 组件：组成网页的部件，例如超链接、按钮、图片、表格等等~

• Element官网: Element官网

2.2、快速入门

1. 引入Element 的css、js文件和Vue.js

   <script src="vue.js"></script>
   <script src="element-ui/liblindex.js"></script>
   <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
   

2. 创建Vue核心对象

<script>
new Vue({
		el:"#app"
	})
</script>

3. 官网复制Element组件代码

2.3、Element布局

• Element中有两种布局方式:
  • Layout布局：通过基础的24分栏，迅速简便地创建布局
  • Container 布局容器：用于布局的容器组件，方便快速搭建页面的基本结构

2.4、常用组件

• 在Element官网找到相关的组件并且配置到网页中

三、综合案例

3.1、换件搭建

• 创建maven
• 引入依赖
• 导入数据

3.2、查询所有

3.3、新增品牌

3.4、Servlet代码优化

• Web层的Servlet个数太多了，不利于管理和编写
• 将Servlet进行归类，对于同一个实体的操作方法，写到一个Servlet中。比如: BrandServlet、UserServlet

package com.Smulll.web.Servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

public class BaseServlet extends HttpServlet {

    //根据请求地最后一行路径分发方法
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取请求路径
        String uri = req.getRequestURI();
        //获取最后一段路径，方法名 通过 / 进行分割
        int i = uri.lastIndexOf('/');
        String methodName = uri.substring(i + 1);
        //System.out.println(methodName); //selectAll
        //获取BrandServlet字节码文件 Class
        Class<? extends BaseServlet> cls = this.getClass();
        //System.out.println(cls);  //class com.Smulll.web.Servlet.BaseServlet
        try {
            //获取方法 Method对象
            Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            System.out.println(method);
            //执行方法
            method.invoke(this,req,resp);
        } catch (NoSuchMethodException e) {
            throw new RuntimeException(e);
        } catch (InvocationTargetException e) {
            throw new RuntimeException(e);
        } catch (IllegalAccessException e) {
            throw new RuntimeException(e);
        }
    }
}

package com.Smulll.web.Servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/brand/*")
public class BrandServlet extends BaseServlet{
    public static void selectAll(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
        System.out.println("selectAll...");
    }

    public static void add(HttpServletRequest req, HttpServletResponse resp) throws ServletException,IOException{
        System.out.println("add...");
    }
}

3.5、批量删除

3.6、分页查询

3.6.1、后端逻辑

3.6.2、前端逻辑

3.7、条件查询

• 3个条件之间有什么关系？
  AND

• 3个条件必须全部填写吗？
  不需要
  动态SQL <if> <where>

• 条件查询需要带分页吗？
  需要

select *
from tb_brand
<where>
	<if test="brand.brandName != null and brand.brandName != '' ">
		brand_name like #{brand.brandName}
	</if>
	<if test= "brand.companyName != null and brand.companyName != '' ">
		and company_name like #{brand.companyName}
	</if>
	<if test= "brand.status != null">
		and status = #{brand.status}
	</if>
</where>
limit #{begin} ,#{size}