自定义一个mvc
package com.example.springboot01.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.View; import org.springframework.web.servlet.ViewResolver; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import java.util.Locale; @Configuration public class MyMvcConfig implements WebMvcConfigurer { public static class MyViewResolver implements ViewResolver { // 自定义一个 自己的视图解析器 @Bean public ViewResolver myViewResolver(){ return new MyViewResolver(); } @Override public View resolveViewName(String viewName, Locale locale) throws Exception { return null; } } }
后端给前端传数据
后端
@RestController public class IndexController { @RequestMapping("/index") public String Hello(){ return "hello"; } }
前端
代理
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, /*关闭语法检查*/ devServer: { proxy: { // 代理 见到 api开头 拦截，然后替换 为 target里面的内容，所以需要将 // ^/api 变为 空字符串 '/api': { //表示 拦截 /api 开头的路径 // 跨域 的域名(不需要写路径) 写 了的话需要替换 // 如果更改了地址就需要在后面加上 target: "http://localhost:8080/", changeOrigin: true, // 是否 开启跨域 pathRewrite: { '^/api': '', // 把/api 变为 空字符串 } }, } }, })
使用
methods: { test() { const a = axios.get("/api/index").then(res => res.data) console.log(a) } }
增删改查
先创建一个数据库
在 配置好 环境 变量下 完成 增删改查
查所有
查所有
先 写一个controller
@RequestMapping public List<User> index(){ return userMapper.findAll(); }
然后创建一个userMapper 接口
@Mapper public interface UserMapper { @Select("select * from sys_user") List<User> findAll(); }
引用 mapper 注意注解
@Autowired private UserMapper userMapper;
通过id删除
语句
调用mapper 一样
@Autowired private UserMapper userMapper; // 删除 @DeleteMapping("/{id}") public Integer delete(@PathVariable Integer id){ return userMapper.deleteById(id); }
创建mapper 文件
@Delete("delete from sys_user where id = #{id}") Integer deleteById(@Param("id") Integer id);
即可
增加
// 增和 改 都在 这个里面 @PostMapping public Integer save(@RequestBody User user){ // 新增或则 更新 都在里面 return userService.save(user); }
此时 使用的 是 userService 文件
@Autowired private UserService userService;
使用一个 判断 整合
@Service public class UserService { @Autowired private UserMapper userMapper; public int save(User user){ if(user.getId() == null){ return userMapper.insert(user); }else { // 否则为更新 return userMapper.update(user); } } }
主要的 增删 改查 还在 mapper 文件中
inser 为 增加
@Insert("INSERT into sys_user (username,password,nickname,email,phone,address) values(#{username},#{password},#{nickname},#{email},#{phone},#{address})") int insert(User user);
更新
先定义一个语句
int update(User user);
在 resources 文件夹下面 创建一个mapper
并在application.yaml 里面配置好
mybatis: mapper-locations: classpath:mapper/*.xml # classpath resources 文件夹 下面的 东西 configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 打印日志
再创建User.xml
为 el语法
updata id= update 为mapper 中 配置的 名字
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.example.springboot.mapper.UserMapper"> <!-- id 和 方法名一样--> <update id="update"> update sys_user <set> <if test="username != null"> username=#{username}, </if> <!-- <if test="password != null">--> <!-- password=#{password}--> <!-- </if>--> <if test="nickname != null"> nickname=#{nickname}, </if> <if test="email != null"> email=#{email}, </if> <if test="phone != null"> phone=#{phone}, </if> <if test="address != null"> address=#{address} </if> </set> <where> id=#{id} </where> </update> </mapper>
分页and 查询
(pageNum-1)*pageSize
pageNum 显示第几页
pageSize 每页显示的 个数
// limit 2,5 // 2 下标0 开始 后面加一 开始, 5 表示 每页显示的 数量 @Select("select * from sys_user Limit #{pageNum},#{page Size}") List <User>selectPage(Integer pageNum, Integer pageSize); @Select("select count(*) from sys_user ") Integer selectTotal(); } // count 表示 数量
// 分页查询接口 //@RequestParam 接收 ?pageNum = 1 pageSize=10 @RequestMapping("/page") public Map<String,Object> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize) { pageNum=(pageNum-1)*pageSize;// 每页数量 开始的 下标 / 你/ 分页 的 方法 得到 data List<User>data=userMapper.selectPage(pageNum,pageSize); // 全部的 数据 Integer total=userMapper.selectTotal(); // 定义一个map 存入 数据 Map<String,Object>res=new HashMap<>(); res.put("data",data); res.put("total",total); return res; } }
在 分页基础 上加一个username 参数 完成 查询
// 分页查询接口 //@RequestParam 接收 ?pageNum = 1 pageSize=10 @RequestMapping("/page") public Map<String,Object> findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize, @RequestParam String username) { pageNum=(pageNum-1)*pageSize;// 每页数量 开始的 下标 username = "%"+username+"%"; // 分页 的 方法 得到 data List<User>data=userMapper.selectPage(pageNum,pageSize,username); // 全部的 数据 Integer total=userMapper.selectTotal(username); // 定义一个map 存入 数据 Map<String,Object>res=new HashMap<>(); res.put("data",data); res.put("total",total); return res; } }
// limit 2,5 // 2 下标0 开始 后面加一 开始, 5 表示 每页显示的 数量 @Select("select * from sys_user where username like #{username} Limit #{pageNum},#{pageSize}") List <User>selectPage(Integer pageNum, Integer pageSize,String username); @Select("select count(*) from sys_user where username like #{username}") Integer selectTotal(String username); }
前端 绑定
现在 el-input 里面绑定 username
在load 方法里面 加参数
点击按钮加载 方法
load() { // 请求分页 fetch(`http://localhost:8081/user/page?pageNum=${this.pageNum}&pageSize=${this.pageSize}&username=${this.username}`).then(res => res.json()).then( res => { this.tableData = res.data, this.total = res.total } ) },
