Element和综合练习

1、Element 基本使用 1.1、Element介绍

Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。
使用Element前提必须要有Vue。
组件：组成网页的部件，例如超链接、按钮、图片、表格等等~
Element官网：https://element.eleme.cn/#/zh-CN
自己完成的按钮
Element 提供的按钮

1.2、Element快速入门

开发步骤
1. 下载 Element 核心库。
2. 引入 Element 样式文件。
3. 引入 Vue 核心 js 文件。
4. 引入 Element 核心 js 文件。
5. 编写按钮标签。
6. 通过 Vue 核心对象加载元素。
  
  #导库
  
  a. 引入组件库 (资料/element/element-ui 整个放到webapp路径)
  
  b. 在webapp下创建js目录, 引入vue.js
  
  c. 在要使用elementUI的html中分别引入vue和elementUI相关文件

代码实现

1.3、基础布局

将页面分成最多 24 个部分，自由切分。

代码实现




    
    
    基础布局

1.4、容器布局

将页面分成头部区域、侧边栏区域、主区域、底部区域。

用于布局的容器组件，方便快速搭建页面的基本结构：

：外层容器。当子元素中包含  或  时，全部子元素会垂直上下排列，否则会水平左右排列。

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外， 的子元素只能是后四者，后四者的父元素也只能是 。

代码实现

1.5、表单组件

由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。

代码实现

1.6、表格组件

用于展示多条结构类似的数据，可对数据进行编辑、删除或其他自定义操作。

代码实现




    
    
    表格组件

1.7、顶部导航栏组件

代码实现

1.8、侧边导航栏组件

代码实现

1.9、小结

Element：网站快速成型工具。是一套为开发者、设计师、产品经理准备的基于Vue的桌面端组件库。
使用Element前提必须要有Vue。
使用步骤
1.下载Element核心库。
2.引入Element样式文件。
3.引入Vue核心js文件。
4.引入Element核心js文件。
5.借助常用组件编写网页。
常用组件
网页基本组成部分，布局、按钮、表格、表单等等~~~
常用组件不需要记住，只需要在Element官网中复制使用即可。

2、界面案例学生列表 2.1、案例效果和分析

2.2、头部区域的实现

实现思路
- 头部效果实现。
- 侧边栏和主区域效果实现。

代码实现

2.3、侧边栏区域的实现

2.4、主区域的实现

主区域和侧边栏区域放在一起

在vue中定义data

3、综合案例学生管理系统 3.1、效果环境的介绍

3.2、登录功能的实现

环境搭建
- 从当天的资料中解压《学生管理系统原始项目》，并导入。

代码实现

html代码

onSubmit(formName) {
                // 为表单绑定验证功能
                this.$refs[formName].validate((valid) => {
                    //只有校验通过,valid才是true, 才能提交数据,发起请求
                    if (valid) {
                        //请求服务器完成登录功能 TODO:
                        let url = "userServlet"
                        let param = `username=${this.form.username}&password=${this.form.password}`
                        console.log(param);
                        axios.post(url,param).then(resp=>{
                            console.log(resp.data);// 如果登录成功,返回true
                            if(resp.data){
                                location.href = "index.html"
                            }else{
                                // alert("用户名不存在或密码错误")
                                
                                this.$message.error("用户名不存在或密码错误")
                            }
                        })
                    } else {
                        return false;
                    }
                });
            }

java代码

UserServlet.java

package com.itheima.controller;

import com.itheima.bean.User;
import com.itheima.service.UserService;
import com.itheima.service.impl.UserServiceImpl;

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

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    private UserService service = new UserServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取请求参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        //2.封装User对象
        User user = new User(username,password);

        //3.调用业务层的登录方法
        List list = service.login(user);

        //4.判断是否查询出结果
        if(list.size() != 0) {
            //将用户名存入会话域当中
            req.getSession().setAttribute("username",username);
            //响应给客户端true
            resp.getWriter().write("true");
        }else {
            //响应给客户端false
            resp.getWriter().write("false");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

UserService.java

package com.itheima.service;

import com.itheima.bean.User;
import com.itheima.dao.UserMapper;
import com.itheima.util.SqlSessionUtil;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;
import java.util.List;

public class UserService {

    public List login(User user) {
        SqlSession sqlSession = SqlSessionUtil.getSession();

        UserMapper mapper = sqlSession.getMapper(UserMapper.class);
        List list = mapper.login(user);
        sqlSession.close();
        return list;
    }
}

UserMapper.java

package com.itheima.dao;

import com.itheima.bean.User;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface UserMapper {
    
    @Select("SELECT * FROM user WHERe username=#{username} AND password=#{password}")
    public abstract List login(User user);
}

3.3、分页查询功能的实现

#分析:
1. index.html 侧边栏(在校学生管理选项) 
	点击 调用 findAll 函数  -> 修改数据 -> 视图更新(stuList.html)

2. 当我们点击侧边栏 "在校学生管理" 的时候, stuList将会被加载到index.html的主区域, 又因为stuList包含Vue, Vue生命周期会启动
	
3. vue生命周期
	created : (data加载好,视图还没好)
		调用了 selectByPage函数
		
4. 	selectByPage函数	
	1). 请求地址
		以前 : 增删改查每个功能对应一个Servlet,太冗余了
		需求 : 一个模块就写一个Servlet(同时处理这个模块的增删改查)
		实现 : 消息分发 
			a. XxServlet 可以 Xx 模块下所有请求, 根据请求后缀名来判断执行相应的逻辑	
			b. XxServlet 的虚拟路径   /Xx
    private void selectByPage(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        //获取请求参数
        try{
            Pagination pagination = baseController.parseJSON2Object(req, Pagination.class);

            //调用业务层的查询方法
            PageBean page = service.selectByPage(pagination);
//            int i = 1/0;
            //响应给客户端
            baseController.printResult(resp,new Result(true,"查询成功!",page));
        } catch (RuntimeException e) {
            e.printStackTrace();
            baseController.printResult(resp, new Result(false, "查询失败!"));
        }
    }

}

2、创建StudentService.java

package com.itheima.service;


import com.itheima.pojo.po.Student;
import com.itheima.pojo.vo.PageBean;
import com.itheima.dao.StudentMapper;
import com.itheima.pojo.vo.Pagination;
import com.itheima.util.SqlSessionUtil;
import org.apache.ibatis.session.SqlSession;

import java.util.List;


public class StudentService{

    public PageBean selectByPage(Pagination pagination) {
        //1. 请求参数 处理

        Integer currentPage = pagination.getCurrentPage();
        Integer pageSize = pagination.getPageSize();

        // 代码健壮性考虑: 防止前端不传参发生的错误
        if(currentPage == null){
            currentPage = 1;
        }

        if(pageSize == null){
            pageSize = 5;
        }
        //2. 查询数据库
        int index = (currentPage -1) * pageSize; // 分页查询初始索引

        SqlSession session = SqlSessionUtil.getSession();//自动commit
        StudentMapper mapper = session.getMapper(StudentMapper.class);
        // 查询每页显示的联系人数据 (加条件)
        List list = mapper.findStudentByPage(index,pageSize);
        // 查询联系人总条数(加条件)
        int sum = mapper.findStudentSum();

        session.close();
        //3. 封装PageBean
        PageBean bean = new PageBean(list,sum);
        return bean;
    }
}

3、创建StudentMapper.java


public interface StudentMapper {
    
    @Select("SELECT * FROM student LIMIT #{index},#{count}")
    List findStudentByPage(@Param("index") int index, @Param("count")int count);
    
    @Select("SELECT count(*) FROM student")
    int findStudentSum();
}

3.4、添加功能的实现

1. 添加学生按钮
		 添加学生
2. showAddStu
		dialogTableVisible4add: false  -> true

3.  添加用户的弹出框 (dialog)
	:visible.sync 控制弹出框是否显示的 (true显示,false隐藏)
	当弹出框使用完毕,会清空弹出框内表单的数据


4. 添加按钮
	   添加

代码实现

html代码

在stuList.html中增加“添加功能”代码

 //TODO: 添加学生
            addStu(){
                let url = "student/addStu"
                let param = this.formData
                axios.post(url, param).then(response => {
                    if (response.data.flag) {
                        this.$message.success(response.data.message); // 成功提示弹出框
                        this.dialogTableVisible4add = false; //隐藏弹出框
                    } else {
                        this.$message.error(response.data.message); // 失败提示弹出框
                    }
                }).finally(() => { //成功响应之后, 执行查询,刷新页面
                    this.selectByPage();
                });

            },

java代码

1、在StudentServlet.java中增加“添加功能”代码-addStu

	
	else if(method.equals("addStu")) {
            //添加数据功能
            addStu(req,resp);
     }	
=============================================================================

	 
    private void addStu(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        try{
            //获取请求参数,封装Student对象
            Student stu = baseController.parseJSON2Object(req, Student.class);

            //调用业务层的添加方法
            service.addStu(stu);

            baseController.printResult(resp,new Result(true,"添加成功!"));
        } catch (RuntimeException e) {
            e.printStackTrace();
            baseController.printResult(resp, new Result(false, "添加失败!"));
        }
    }

2、在StudentService.java中增加“添加功能”-addStu

 
    public void addStu(Student stu) {
        SqlSession sqlSession = SqlSessionUtil.getSession();
        StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
        mapper.addStu(stu);
        sqlSession.close();
    }

4、StudentMapper.java中增加“添加功能”-addStu

    
    @Insert("INSERT INTO student VALUES (#{number},#{name},#{birthday},#{address})")
    public abstract void addStu(Student stu);

3.5、修改功能的实现

# 数据回显分析
1. 编辑按钮

Element和综合练习

自定义颜色

Java相关栏目本月热门文章