后台功能的编写
1 添加数据的功能，此时的数据是直接从前端添加到数据库中的。
在后端进行编写好接口之后，然后在前端进行使用
项目中各个包名的含义
common
里面包含两个类，一个是 mybatisplus ，是用来进行引入分页插件的，
Result类是用来统一返回数据的封装类。
mybatisplus类：
package com.example.common;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
//扫描mapper接口所在的包
@MapperScan("com.example.mapper")
public class MyBatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor(){
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
//添加分页插件
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
}
Result类
package com.example.common;
public class Result<T> {
private String code;
private String msg;
private T data;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
public Result() {
}
public Result(T data) {
this.data = data;
}
public static Result success() {
Result result = new Result<>();
result.setCode("0");
result.setMsg("成功");
return result;
}
public static <T> Result<T> success(T data) {
Result<T> result = new Result<>(data);
result.setCode("0");
result.setMsg("成功");
return result;
}
public static Result error(String code, String msg) {
Result result = new Result();
result.setCode(code);
result.setMsg(msg);
return result;
}
}
controller
里面存放的类，是前后台进行数据交互的接口，前后可以通过接口传给后台，后台可以通过数据库把数据查询处理之后，传给前台，之后就可以通过DemoApplication类进行启动后台，前台就可以根据接口，进行获取数据
UserController类：此时里面的内容是没有写完的
package com.example.controller;
import com.example.common.Result;
import com.example.entity.User;
import com.example.mapper.UserMapper;
import org.springframework.web.bind.annotation.PostMapping; //定义一个post接口
import org.springframework.web.bind.annotation.RequestBody; //把传过来的数据转换为java对象
import org.springframework.web.bind.annotation.RequestMapping; //接口统一返回路由
import org.springframework.web.bind.annotation.RestController; //返回json数据的controller
import javax.annotation.Resource;
@RequestMapping("/user")
@RestController
public class UserController {
// 引入mapper中的内容
@Resource
UserMapper userMapper;
@PostMapping
// Result<?>表示接收任何类型的数据
public Result<?> save(@RequestBody User user){
// 插入数据库
// 在里面进行使用
userMapper.insert(user);
return Result.success();
}
}
entity
里面主要是与数据库中相对于的数据，一些getter和setter方法。
package com.example.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName; //使用mybatis-plus 使用户tablename 与数据库的名称一一对应
import lombok.Data;
@TableName("user")
@Data // 自动进行生成getter setter 方法
public class User {
@TableId(value = "id",type = IdType.AUTO)
private Integer id;
private String username;
private String password;
private String nick_name;
private Integer age;
private String sex;
private String address;
}
mapper
里面是一个接口，主要是进行设计方法和数据库语句的书写
package com.example.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.entity.User;
public interface UserMapper extends BaseMapper<User> {
}
编写好代码之后，在前端的操作
需要进行建立一个utils文件夹，在里面建立一个request.js文件，用来封装axios
（1）在进行使用axios之前，需要先进行一下安装。 安装方法
（2）request.js内容
// 用来封装 axios
import axios from 'axios' //引入axios的包
import router from "@/router";
const request = axios.create({
baseURL: "/api",
timeout: 5000
})
// 请求白名单，如果请求在白名单里面，将不会被拦截校验权限
const whiteUrls = ["/user/login", '/user/register']
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// 取出sessionStorage里面缓存的用户信息
let userJson = sessionStorage.getItem("user")
if (!whiteUrls.includes(config.url)) { // 校验请求白名单
if(!userJson) {
router.push("/login")
} else {
let user = JSON.parse(userJson);
config.headers['token'] = user.token; // 设置请求头
}
}
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
// 验证token
if (res.code === '401') {
console.error("token过期，重新登录")
router.push("/login")
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
（3）然后在 home.vue里面进行使用，
主要是在点击弹框的时候，会显示增加的信息，当进行输入完信息之后，会点击确定按钮，此时需要进行发送请求，给确定按钮绑定一个save函数，然后逻辑如下：
// 将数据保存到后台
save() {
request.post("http://localhost:9090/user", this.form).then((res) => {
console.log(res);
});
},
（4）然后会报跨域的问题，在前端进行解决的办法
在项目中创建一个vue.config.js文件，如果存在就不用创建，然后在输入以下内容：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
//记住，别写错了devServer//设置本地默认端口 选填
// 把前端端口8080改为9876，可以不加，选填
port: 9876,
//设置代理，必须填
proxy: {
'/api': {
// 此时主要可以理解为 用/api将后端端口号http://localhost:9090，给替换掉
//设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定
target: 'http://localhost:9090', //代理的目标地址
changeOrigin: true, //是否设置同源，输入是的
pathRewrite: { //路径重写
'/api': '' //选择忽略拦截器里面的单词
}
}
}
}
})
此时在将原先发送请求的路径进行更改为：
// 将数据保存到后台
save() {
// 此时路径不能使用/api/user，要不然会自动拼接
request.post("/user", this.form).then((res) => {
console.log(res);
});
},
此时就能实现将表单的数据添加到数据库中，但是此时有一个小问题，就是在增加用户的时候，并没有进行添加用户的密码，所以要对密码进行统一的管理。
首先先进行判断是否存在密码，不存在，给其设置一个默认的密码。
@RequestMapping("/user")
@RestController
public class UserController {
// 引入mapper中的内容
@Resource
UserMapper userMapper;
@PostMapping
// Result<?>表示接收任何类型的数据
public Result<?> save(@RequestBody User user){
//判断用户的密码是否存在，不存在 设置一个默认的密码
if(user.getPassword() == null){
user.setPassword("123456");
}
// 插入数据库
// 在里面进行使用
userMapper.insert(user);
return Result.success();
}
}
注意：在进行创建user类的时候，使用了lombok中的@Data进行自动注入gette和setter方法，但是在userController中进行使用的时候，并没有相应的方法，解决方法时：
选择File->Settings
然后点击Plugins,在搜索框中进行搜索Lombok,安装即可，安装之后重启，然后就可以找到getter和setter方法了
此时解决所有问题之后，就可以看到，能够将数据添加到数据库中了。
扫一扫
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
