从js到数据库

从js到数据库

1.先从数据库开始
使用工具:Navicat
1.1点击 文件—>新建链接–>MySql（可以选择自己希望创建的数据库，我这里以MySql为例）

1.2填写连接名和链接密码，然后点击测试链接成功

1.3点击新建的链接–>选择新建数据库
1.4左击1.3步新建的数据库，选择新建数据表
1.5左击1.4步新建的数据表，选择设计表，添加表字段
到此：一个数据库就建成了

2.创建springboot 项目
2.1 加入mybatis依赖

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
</dependency>

    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.4.5</version>
    </dependency>

//连接版本不能太低，不然执行SQL时，数据库会报错
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.11</version>
    </dependency>
<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis-spring</artifactId>
    <version>2.0.3</version>
</dependency>

2.2springBoot配置文件为

`server.port=8080
//url后面的serverTimezone=UTC是同步服务器与数据库时间
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/net_line?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

//mapper文件位置以及后缀名
mybatis.mapper-locations=classpath:mapper/*Mapper.xml
//dao文件位置，精确到包
mybatis.type-aliases-package=com.springcloud.customer.dao
//日志输出SQL
logging.level.com.tj.mapper=debug
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

2.3 编写一个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.springcloud.customer.dao.com.dog.DogMapper">
    <!--id应该是接口中的方法，结果类型如没有配置别名则应该使用全名称 -->
    <resultMap id="BaseResultMap" type="com.springcloud.customer.dao.Dog">
        <result column="id" jdbcType="INTEGER" property="id" />
        <result column="name" jdbcType="VARCHAR" property="name" />
        <result column="age" jdbcType="INTEGER" property="age" />
    </resultMap>
    <!--获得所有图书 -->
    <select id="getByName" resultType="com.springcloud.customer.dao.Dog">
        select id,name,age from dog_info where name = #{name}
    </select>
    <!--获得图书对象通过编号 -->
    <select id="getById" resultType="com.springcloud.customer.dao.Dog">
        select id,name,age from dog_info where id=#{id}
    </select>
    <!-- 增加 -->
    <insert id="insert">
        <foreach collection="list" item="teacher" separator="," close=";">
            insert into dog_info(id,name,age)
            values(#{teacher.id},#{teacher.name},#{teacher.age})
        </foreach>
    </insert>
    <!-- 更新 -->
    <update id="updateById">
        update dog_info set name=#{dog.name},age=#{dog.age}
        where id=#{dog.id}
    </update>
</mapper>

2.4 解决js跨域请求问题
2.4.1受同源策略影响，js跨域请求时，数据被浏览器拦截，此时愮服务器端提供对应的跨域允许

@Order(1)//拦截器执行顺序标识，数字越大权重越低，执行越靠后
@WebFilter(filterName = "corsFilter", urlPatterns = {"/*"})//过滤器声明
public class CorsFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("初始化filter==========================");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    //允许跨域请求处理
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*"); //  这里最好明确的写允许的域名
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token,Authorization,ybg");
        filterChain.doFilter(servletRequest, servletResponse);
        System.out.println("filter==========================" + servletRequest.getLocalName());
        System.out.println("filter==========================" + servletRequest.getParameterMap());
    }

    @Override
    public void destroy() {
        System.out.println("销毁filter==========================");
    }
}

2.4.2 也可以通过添加@CrossOrigin注解的方式解决跨域
代码示例

@RestController
@RequestMapping("dog/info")
@CrossOrigin//整个contriller都允许进行跨域请求，当注释在方法级别，就只允许这个方法跨域请求
public class HelloController {

    @Autowired
    ServiceMyBatis serviceMyBatis;

    @RequestMapping(value = "hello", method = RequestMethod.GET)
    public String hello(@RequestParam String id,@RequestParam String name){
        System.out.println(id);
        System.out.println(name);
        return "hello01";
    }
}

2.5 启动类添加注解@MapperScan，@ServletComponentScan
@MapperScan 让程序扫描到mapper下的文件
@ServletComponentScan 与前面提到的@WebFilter一起使用

@MapperScan("com.springcloud.customer.dao.com.dog")//mapper扫包
@SpringBootApplication
@ServletComponentScan//拦截器扫包
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

3. 启动springboot，项目正常启动
4. js代码 使用工具visual 编写html文件
   工具方法，用来模拟jaax调用

function ajax(ajax){
    var request = new XMLHttpRequest();
    request.open(ajax.type,ajax.url);
    request.setRequestHeader("Content-Type", "application/json");
    request.onreadystatechange = function(){
        if(request.readyState == 4 && request.status == 200){
            var type = request.getResponseHeader("Content-Type");
            if(type && type.match(/^text/)){
                ajax.success(request.responseText);
            }
        }
    }
    ajax.type == "post"?request.send(ajax.data) : request.send(null);
}

工具方法调用正常

function insertDogInfo(){
    var dogs = [];
    dogs.push({id:4,name:'阿黄',age:5});
    ajaxData = {
        type:"post",
        data:JSON.stringify(dogs),
        url:"http://localhost:8080/dog/info/insert",
        success:function(data){
            console.log(data);
        }
    };
    ajax(ajaxData);
}