CGB2106-Day04

1.vue脚手架安装2.MP用法3.VUE.JS学习Ajax2天

闪耀太阳

7779人浏览 · 2021-08-24 10:04:51

闪耀太阳 · 2021-08-24 10:04:51 发布

1. 脚手架安装

脚手架安装

1.1 导入项目

说明: 前端的完整项目在码云资源文件中. 用户将资源下载到本地通过vue-cli客户端导入即可.

路径说明
挑选路径点击导入即可
运行项目效果如图

2. MybatisPlus 学习

2.1 MP入门案例

package com.jt;

import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

@SpringBootTest
public class TestMP {

    @Autowired
    private UserMapper userMapper;

    /**
     * 完成数据的入库操作
     * 新增user数据(name="中秋",age=40,sex="厉害")
     * Sql: insert into demo_user value(xx,xx,xx,xx)
     * 思考: MP实现入库流程!!!
     * 选择A: 讲mp入库流程 理论为主.
     */
    @Test
    public void test01(){
        User user = new User();
        user.setName("中秋").setAge(40)
                .setSex("厉害");
        //以对象的方式操作数据!!!
        userMapper.insert(user);
        System.out.println("入库操作成功!!!!");
    }

    /**
     * 以mybatis的方式实现数据库查询
     * 1.实现user入库操作   insert into
     * 2.update  将name="国庆" 改为 name="中秋"
     * 3.delete  将name="国庆"数据删除.
     * 4.select  查询 name="小乔" 并且 性别 ="女"
     * 5.select  查询age < 18岁  性别="女"
     * 6.select  查询  name包含 '君'字的数据
     * 7.select  查询  sex="女"  按照年龄倒序排列.
     * 8.根据 name/sex 不为null的数据查询. 动态Sql!!
     *   name="xxx" sex=null
     *   name="xxx" sex="xx"
     *   name=null  sex=null
     */

    //1.查询ID查询数据库 id=231  主键查询
    @Test
    public void selectById(){
        int id = 231;   //模拟用户参数.
        User user = userMapper.selectById(id);
        System.out.println(user);
    }

    /**
     * 2.查询 name="小乔" 并且 性别 ="女"
     * 思路: 如果将来有多个结果 则使用List进行接收.
     * Sql: select * from demo_user where name="小乔" and sex="女"
     * 注意事项: 默认的连接符  and
     */
    @Test
    public void select01(){
        //1.通过对象封装数据
        User user = new User();
        user.setName("小乔").setSex("女");
        //2.构建条件构造器 根据对象中不为null的属性充当where条件!
        QueryWrapper<User> queryWrapper = new QueryWrapper(user);
        //3.根据条件构造器 实现数据查询
        List<User> userList = userMapper.selectList(queryWrapper);
        System.out.println(userList);
    }

    /**
     * 3.查询 name="小乔" 并且 性别 ="女"
     * 逻辑运算符:  = eq, > gt, < lt
     *            >= ge, <= le
     *            != ne
     */
    @Test
    public void select02(){
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("name","小乔")
                    .eq("sex","女");
        List<User> userList =
                userMapper.selectList(queryWrapper);
        System.out.println(userList);
    }

    /**
     * 4.案例: select  查询age < 18岁  性别="女"
     * 方式1: 利用mybatis方式实现
     * 方式2: 利用MP方式实现
     */
    @Test
    public void select03(){
        //1.mybatis写法
        List<User> userList = userMapper.findList(18,"女");
        System.out.println(userList);

        //2.mp写法
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.lt("age",18)
                        .eq("sex","女");
        List<User> userList2 = userMapper.selectList(queryWrapper);
        System.out.println(userList2);
    }


    /**
     * 5.select  查询  name包含 '君'字的数据
     * 关键字:  like "%xxx%"
     *         以君开头:  likeRight "君%"
     *         以君结尾:  likeLeft  "%君"
     */
    @Test
    public void select04(){
        QueryWrapper queryWrapper = new QueryWrapper();
        queryWrapper.like("name","君");
        List<User> userList = userMapper.selectList(queryWrapper);
        System.out.println(userList);
    }

    /**
     * 6.select  查询  sex="女"  按照年龄倒序排列.
     */
    @Test
    public void select05(){
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("sex","女")
                    .orderByDesc("age");
        List<User> userList = userMapper.selectList(queryWrapper);
        System.out.println(userList);
    }

    /**
     *  7.需求: 动态Sql查询. 如果数据有值 则拼接where条件.
     *                   如果数据为null 则不拼接where条件
     *  语法: condition: true  拼接where条件
     *                  false 不拼接where条件
     */
    @Test
    public void select06(){
        String name = "貂蝉";
        int age = 19;
        boolean nameFlag = name == null ? false : true;
        boolean ageFlag = age == 0 ? false : true;
        QueryWrapper<User> queryWrapper = new QueryWrapper();
        queryWrapper.eq(nameFlag,"name",name)
                    .eq(ageFlag,"age",age);
        List<User> userList = userMapper.selectList(queryWrapper);
        System.out.println(userList);
    }

    /**
     * 8.批量查询  查询id= 1,4,5,6......的数据
     */
    @Test
    public void selectIn(){
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.in("id",1,4,5,6);
        List<User> userList = userMapper.selectList(queryWrapper);
        System.out.println(userList);

        //数组在未来由用户负责传递. 注意使用包装类型
        Integer[] array = new Integer[]{1,4,5,6};
        //数组转化为List集合
        List ids = Arrays.asList(array);
        List<User> userList2 = userMapper.selectBatchIds(ids);
        System.out.println(userList2);
    }

    /**
     * 9.查询性别为男的用户,只查询ID字段
     *  selectObjs(); 只查询第一列字段(主键)
     *  实际用途:  根据业务只需要主键的查询
     */
    @Test
    public void selectObjs(){
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("sex","男");
        List<Object> ids = userMapper.selectObjs(queryWrapper);
        System.out.println(ids);
    }
}

2.2 关于查询总结

1.MP核心: 以对象的方式操作数据库

2.条件构造器: new QueryWrapper<>(); 动态拼接where条件.

3.拼接规则: 根据对象中不为null的属性充当where条件.

4.特殊转义字符: = eq, > gt, < lt, >= ge, <= le,!= ne

5.xml文件中的万能的转义字符: <![CDATA[ sql语句 ]]>

6.关键字: like order by in

7.动态Sql语法:
condition: true 拼接where条件
false 不拼接where条件

2.3 MP更新操作

package com.jt;

import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

@SpringBootTest
public class TestUpdate {

    @Autowired
    private UserMapper userMapper;

    /**
     * 1.将ID=231的数据 name改为 "xx"
     * Sql: update demo_user set name="xx" where id=231

     */
    @Test
    public void testUpdate(){
        User user = new User();
        user.setId(231).setName("中秋节快乐").setAge(10).setSex("男");
        //byId 表示ID只当作where条件.
        //其它不为null的属性 当作set条件
        userMapper.updateById(user);
    }

    /**
     * 2.将name="中秋节快乐" 改为 name="国庆快乐" age=40 sex="男"
     *  .update(arg1,arg2)
     *   arg1: 实体对象  set条件的数据
     *   arg2: updateWrapper 动态拼接where条件
     */
    @Test
    public void testUpdate2(){
        User user = new User();
        user.setName("国庆快乐").setAge(40).setSex("男");
        UpdateWrapper<User> updateWrapper = new UpdateWrapper<>();
        updateWrapper.eq("name","中秋节快乐");
        userMapper.update(user,updateWrapper);
        System.out.println("更新操作成功!!!!");
    }
}

3 前后端交互

3.1 框架之间的关系

1.SpringBoot (工具/框架的框架) 2.Spring(整合第三方)
3.SpringMVC(实现前后端交互) 4.Mybatis/MP(实现持久化操作)

在这里插入图片描述

3.2 完成后端层级代码

说明: MVC思想主要的目的实现代码的解耦. 根据MVC思想演化出层级代码结构 Controller/Service /Dao/Mapper
编码顺序: 1.编辑POJO 2.编辑Mapper接口 3.编辑Service层 4.编辑Controller
在这里插入图片描述

3.3 查询案例

3.3.1 业务需求

用户浏览器输入地址: http://localhost:8090/findAll,
要求: 利用MP查询数据库,返回集合的JSON数据.

3.3.2 编辑UserController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import com.jt.service.UserServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
//@Controller
//@ResponseBody //将服务端数据转化为JSON串返回
public class UserController {

    //编码规则: 面向接口编程 解耦
    @Autowired
    private UserService userService;

    /**
     * 查询所有的数据
     * URL: http://localhost:8090/findAll
     * 参数: 没有参数
     * 返回值: List<User>
     */
    @RequestMapping("/findAll")
    public List<User> findAll(){

        return userService.findAll();
    }




}

3.3.3 编辑UserServiceImpl

@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserMapper userMapper;

    //查询所有的数据 没有where条件所以参数为null
    @Override
    public List<User> findAll() {

        return userMapper.selectList(null);
    }
}

3.3.4 页面效果展现

在这里插入图片描述

SpringMVC调用原理(自己学习)

SpringMVC参数传值原理-Servlet机制

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

闪耀太阳

@qq_16804847

已为社区贡献23条内容