从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);
}
}
- 启动springboot,项目正常启动
- 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);
}