后端用的是springboot框架做的增删改查，前端是用的是vue里的element组件，数据库用的是MySQL
遇见的问题：运行程序时网页没有呈现出数据库里的数据，用网页的检查，检查出来下面的报错
此处是我的Config类
package com.example.common;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* 描述:
* 作者： xq
* 日期： 2020/5/8 13:28
**/
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
//配置跨域访问
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // /**：匹配所有
//允许任何域访问
.allowedHeaders("Content-Type","X-Requested-With","accept,Origin","Access-Control-Request-Method","Access-Control-Request-Headers","token")
.allowedMethods("*")
.allowedOrigins("*")
.allowCredentials(true);
}
}
此处是我的Controller类
package com.example.controller;
import com.example.common.Result;
import com.example.entity.User;
import com.example.service.UserService;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
//作为接口访问层
@RestController //表示这个接口里面所有的方法都是返回。。数据
@RequestMapping("/user")
public class UserController {
@Resource
private UserService userService;
/**
* 新增用户
* @param user
* @return
*/
@PatchMapping
public Result add(@RequestBody User user){
userService.save(user); //新增
return Result.success();
}
/**
* 更新用户
* @param user
* @return
*/
@PutMapping
public Result update(@RequestBody User user){
userService.save(user);
return Result.success();
}
/**
* 删除
* @param id
* @return
*/
@DeleteMapping("/{id}")
public void delete(@PathVariable("id") Long id){
userService.delete(id);
}
/**
* 根据id查询用户信息
* @param id
* @return
*/
@GetMapping("/{id}")
public Result<User> findById(@PathVariable Long id){
return Result.success(userService.findById(id));
}
//查询所有用户
@GetMapping
public Result<List<User>> findAll(){
return Result.success(userService.findAll());
}
//分页查询
@GetMapping("/page")
public Result<Page<User >> findPage(@RequestParam(defaultValue = "1") Integer pageNum ,
@RequestParam (defaultValue = "10") Integer pageSize,
@RequestParam (required = false) String name)
{
return Result.success(userService.findPage(pageNum,pageSize,name));
}
}
此处是我的Service类
package com.example.service;
import com.example.dao.UserDao;
import com.example.entity.User;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
@Service
public class UserService {
@Resource
private UserDao userDao; //导入数据库接口
/**
* 新增和修改
* @param user
*/
public void save(User user){//接收一个User对象
String now = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
user.setCreateTime(now);
userDao.save(user);
}
/**
* 删除
* @param id
*/
public void delete(Long id){
userDao.deleteById(id);
}
/**
* 根据id查询用户
* @param id
* @return
*/
public User findById(Long id){
return userDao.findById(id).orElse(null);//查询不为空则返回id，为空则返回null
}
public List<User> findAll() {
return userDao.findAll();
}
/**
* 分页查询和模糊查询
* @param pageNum
* @param pageSize
* @param name
* @return
*/
//框架提供的Page类型
public Page<User>findPage(Integer pageNum,Integer pageSize,String name){
Sort sort = new Sort(Sort.Direction.DESC,"create_time");//通过create_time来排序
Pageable pageRequest = PageRequest.of(pageNum -1,pageSize,sort);//页码，每页的个数，查询顺序
return userDao.findNameLike(name,pageRequest);//把分页的对象传入
//name 模糊查询需要自己写
}
}
这是我index.heml里的java代码
<script>
new Vue({ //vue实例
el: '#app', //绑定div里的元素
data: { //表格数据来源
page: {}, //用户分页数据
name: '',
pageNum: 1, //前端分页参数
pageSize: 8,
dialogVisible: false,//弹框开关变量
form: {} //新增编辑用户信息的变量
},
created() {
this.loadTable(this.pageNum);
},
methods: { //获取数据的方法
loadTable(num) { //加载数据的方法
this.pageNum = num;
$.get("/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.name).then(res => {
this.page = res.data;//调用后台接口
});
},
add() {
this.dialogVisible = true;
this.form = {};
},
edit(row) {
this.form = row;
this.dialogVisible = true;
},
save() {
let data = JSON.stringify(this.form);
if (this.form.id) {
// 编辑
$.ajax({
url: '/user',
type: 'put',
contentType: 'application/json',
data: data
}).then(res => {
this.dialogVisible = false;
this.loadTable(1);
})
} else {
// 新增
$.ajax({
url: '/user',
type: 'post',
contentType: 'application/json',
data: data
}).then(res => {
this.dialogVisible = false;
this.loadTable(1);
})
}
},
del(id) {
$.ajax({
url: '/user/' + id,
type: 'delete',
contentType: 'application/json'
}).then(res => {
this.loadTable(1);
})
}
}
})
</script>
怀疑是vue跨域的问题，也有说是找不到user，但在网上搜到的解决方法都试过了，楞是不知道问题所在
更一下application.yml配置
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
username: root
password: 13527159546.
url: jdbc:mysql://localhost:3306/mytest?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8
