Vue与Springboot和Mybatis的整理

1、ref与$refs属性

给组件添加ref属性，可以通过$refs直接操纵dom元素,搭配使用。
可以参考这个

2、resetFields()与validate()

resetFields()对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
validate()对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise.

3、输出提示信息

this.$message.success(“succ”);，还有error(),info()等等

4、添加校验规则

loginRules:{
					username:[
						{ required: true, message: '请输入用户名', trigger: 'blur' },//必填项
						{ min: 2, max: 10, message: '长度在 3 ~ 12 个字符', trigger: 'blur' }
					],
					password:[
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{min: 6, max: 12, message: '长度在 6 ~ 12 个字符', trigger: 'blur' }
					],
				},

使用一个校验规则需要这样：
:rules=“loginRules” ，还要有prop属性。
进行校验：

this.$refs.loginFormRef.validate(async valid=>{
					//验证校验规则
					if(!valid)return;
					const {data:res}=await this.$http.post("login",this.loginForm);
					if(res.mark=="ok"){
						//信息提示
						window.sessionStorage.setItem("user",res.user);//把登录者信息存到session
						this.$message.success("succ");
						this.$router.push({path:'/home'});
						
					}else{
						this.$message.error("error");
					}
				})

括号里面为回调函数，如果不写会默认返回一个 promise。

5、async与await

async用于申明一个function是异步的，它的返回值是一个promise对象。

await是等待一个异步方法执行完成，await必须搭配async一起使用，不能单独使用。

一般情况下，await是和async一起使用，这样杜绝了复杂的.then链，使代码更加简洁。
附上promise的说明

6、session

window.sessionStorage.setItem("user",res.user);//把登录者信息存到session

7、配置axios并设置相应的访问端口

import axios from 'axios'
//挂载axios
Vue.prototype.$http=axios
axios.defaults.baseURL="http://localhost:9000/"
Vue.config.productionTip = false

8、发送axios请求

const {data:res}=await this.$http.get("menus");
const {data:res}=await this.$http.get("alluser",{params:this.queryInfo});
const {data:res}=await this.$http.put(`userState?id=${userInfo.id}&state=${userInfo.state}`);
const {data:res}=await this.$http.post("addUser",this.addFrom);

9、springboot项目结构

sport包

bean包可以放一些bean类，还可以将一些信息组合成bean类放在里面。
controller包负责放一些与前端交互的类，也就是提供一些对外的接口。
dao包主要放一些接口，这些接口负责与数据库进行交互，这里没有写接口的实现类，主要是用了Mybatis。
util包放一些常用的工具类，这里放的是负责解决跨域问题的Java类

resourcces包

这个包下面主要有三个包和一个配置文件。
mapper包是自己建的，负责放Mybatis的配置文件，用来与数据库交互。增删改查。
static 包与templates包用来放一些静态的页面和文件，这里用不上，因为是前后端分离，前端的页面和文件后端不需要写。
application文件，这个文件用来配置数据库的信息。可以自己创一个yml后缀的。

10、一些常用注解

@RestController

写在controller类的上面，必写。

@Autowired

表示自动装载bean类，就是不用自己new了。

@RequestMapping("/login")

写在方法上，表示方法的访问路径，就是前端的请求如果访问login界面，就会到这里来了。

@RequestBody

用在方法的参数前面，表示这个参数传过来时是一个json类型的。
例如：

 public String login(@RequestBody User user){
 //这里表示user参数会以JSON的形式传过来。(可能是JSON字符串)
        }

@RequestParam

也是用在方法的参数前面，可以接受简单类型的属性和String，也可以接受对象类型。，但是对象类型可以用上一个注解。

@Param

也是用在方法的参数前面，不过上面的两种是用在controller层，这个是用在dao层定义接口时使用，在方法用多个参数是使用，主要@Param里的内容要与形参名对照。
在只有一个形参时可以不用。

@Repository

用在dao层的接口上面

11、application.yml内容

spring:
  datasource:
    name: sport
    url: jdbc:mysql://localhost:3306/easyproject?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC #url
    username: root
    password: root
    driver-class-name: com.mysql.jdbc.Driver

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.test.bean
server:
  port: 9000

12、Mapping配置文件

头文件的内容，用的时候直接用CV大法即可。

<?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标签对包裹SQL语句

<mapper namespace="com.example.sport.dao.UserDao">
//这里写Mybatis形式的SQL
</mapper>

select语句需要带返回值类型和方法名

 <select id="getUpdate" resultType="com.example.sport.bean.User">
        select*from easyuser where id=#{id}
    </select>

其它的语句只用带一个方法名即可，例如：

<delete id="deleteUser">
        delete from easyuser where id=#{id}
    </delete>

13、解决跨域请求的Java类

package com.example.sport.util;

import org.springframework.boot.autoconfigure.web.servlet.WebMvcAutoConfiguration;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
//说明下面的类是一个全局配置类
//解决跨域请求
public class WebConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080", "null")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }
}