vue+springboot(前后端分离项目)

本文详细介绍了如何使用阿里云服务器创建JAVA后端项目,包括初始化结构、添加依赖、配置Spring和MyBatis,重点讲解了如何将mapper类交给Spring管理以及实现登录功能的过程,涉及数据库连接配置和MapperXML编写。
摘要由CSDN通过智能技术生成

目录

JAVA后端项目

一、创建项目

1、使用aliyun的server url

2、初始化项目结构

3、添加依赖

4、创建文件夹

5、把mapper类交给spring容器管理

5.1、方法1

5.2、方法2

6、在yaml文件中配置数据库信息

7、在yaml文件中配置mapper的xml文件的路径

8、配置mapper的xml文件

二、编写程序

1、登录功能

1.1、编写UserController

1.2、编写UserserviceImpl

1.3、编写接口Userservice

1.4、编写mapper

1.5、编写xml

1.6、前端发请求


JAVA后端项目

一、创建项目

1、使用aliyun的server url
https://start.aliyun.com
2、初始化项目结构

3、添加依赖

4、创建文件夹

5、把mapper类交给spring容器管理
5.1、方法1

在每一个mapper类上加上注解@Mapper

@Mapper
public class UserMapper {
}

缺点:每个mapper文件都得添加

5.2、方法2

在主程序启动类上添加扫描所有mapper

@MapperScan("com.example.goods_admin.mapper")

注意:路径可以是指定文件,或者文件夹。

6、在yaml文件中配置数据库信息
server:
  port: 9090
​
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/goods_admin?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
    username: root
    password: root
    driverClassName: com.mysql.cj.jdbc.Driver
7、在yaml文件中配置mapper的xml文件的路径
mybatis:
  mapper-locations: classpath:mapper/*.xml  //classpath是resources文件夹

8、配置mapper的xml文件
<!--XML头部(固定的)-->
<?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.example.goods_admin.mapper.UserMapper">
<!--    结果映射:数据库字段与实体类字段的映射关系-->
    <resultMap id="BaseResultMap" type="com.example.goods_admin.entity.User">
        <id column="id" jdbcType="VARCHAR" property="id" />
        <result column="userId" jdbcType="VARCHAR" property="userId" />
        <result column="userName" jdbcType="VARCHAR" property="userName" />
        <result column="password" jdbcType="VARCHAR" property="password" />
        <result column="sex" jdbcType="TINYINT" property="sex" />
        <result column="age" jdbcType="INTEGER" property="age" />
        <result column="location" jdbcType="VARCHAR" property="location" />
    </resultMap>
​
</mapper>

二、编写程序

user实体类

package com.example.goods_admin.entity;

public class User {
    private String id;
    private String userId;
    private String userName;
    private String password;
    private String sex;
    private int age;
    private String location;
    //无参构造函数
    public User() {
    }
    //构造函数:用来实例化对象的
    //有参构造函数
    public User(String id, String userId, String userName, String password, String sex, int age, String location) {
        this.id = id;
        this.userId = userId;
        this.userName = userName;
        this.password = password;
        this.sex = sex;
        this.age = age;
        this.location = location;
    }
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getUserId() {
        return userId;
    }
    public void setUserId(String userId) {
        this.userId = userId;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    public String getLocation() {
        return location;
    }
    public void setLocation(String location) {
        this.location = location;
    }


}

1、登录功能

1.1、编写UserController
​
@RestController
//@RequestMapping用于将 HTTP 请求映射到控制器方法上
@RequestMapping("/user")
public class UserController {
​
    @Autowired
    Userservice userservice;
    /*
    **登录
     */
    @PostMapping("/login")
    public Result login(@RequestBody User user){
    return userservice.login(user);
    }
 
​
}
1.2、编写UserserviceImpl
@Service
public class UserserviceImpl implements Userservice {
​
    @Autowired
    UserMapper userMapper;
​
    @Override
    public Result login(User user) {
        /**
         * 1、先根据账号查询,是否账号存在
         * 2、不存在,显示该账户未注册,先注册再登录
         * 3、存在,查询该账户的密码是不是数据库中的密码
         * 4、如果传入的密码和数据库的密码不一样,说明密码错误,请重新输入密码
         * 5、如果传入的密码和数据库的密码一样,说明账号密码都正确,显示登录成功,跳转到首页
         */
​
        //1、根据账号查询,是否账号存在
        User user2 = userMapper.seleteUserByUserId(user.getUserId());
​
        //2、不存在,显示该账户未注册,先注册再登录
        if (user2 == null) {
            return Result.failed("用户不存在,请注册");
        } else {
            //3、存在,查询该账户的密码是不是数据库中的密码
            User user3 = userMapper.seleteUserByPassword(user);
            if (user3 != null && user3.getPassword().equals(user.getPassword())) {
                return Result.succeed("登录成功");
            } else {
                return Result.failed("密码错误");
            }
​
        }
​
    }
​
    
​
​
}
1.3、编写接口Userservice
public interface Userservice {
​
    Result login(User user);
​
}
1.4、编写mapper
@Mapper
public interface UserMapper {
​
    User seleteUserByUserId(String userId);
​
    void login(User user);
​
   
}
1.5、编写xml
<select id="seleteUserByUserId" resultType="com.example.goods_admin.entity.User">
        select * from user where userId=#{userId}
    </select>
    <select id="login">
        select * from user where userId=#{userId}
    </select>
1.6、前端发请求
   login() {
            if (this.userId === '') {
                this.$message.error("请输入账号");
                return;
            } else if (this.password === '') {
                this.$message.error("请输入密码");
                return;
            }
            // 判断是否勾选协议
            if (this.agreementChecked) {
                // 发送登录请求
                this.$axios({
                    method: "post",
                    url: "http://localhost:8080/api/user/login",
                    data: {
                        userId: this.userId,
                        password: this.password,
                    },
                })
                    .then((res) => {
                        console.log(res);
                        if (res.data.code == "200") {
                            // 登录成功,显示成功提示信息
                            this.$message({
                                message: res.data.message,
                                type: "success",
                            });
​
                            //1、储存token(令牌)   保存到浏览器
                            window.sessionStorage.setItem("token", res.data.token);
                            //2、储存user
                            window.sessionStorage.setItem(
                                "user",
                                JSON.stringify(res.data.user)
                            );
                            //3、跳转到后台主页 (编程式导航)
                            this.$router.push("./home"); //
                        } else if (res.data.code == "500") {
                            this.$message({
                                message: res.data.message,
                                type: "error",
                            });
                        }
                    })
                    .catch(() => {
                        // 登录失败,显示提示信息
                        this.$message({
                            message: "该登录失败",
                            type: "error",
                        });
                    });
            } else {
                // 未勾选协议,不执行登录逻辑
                this.$message({
                    message: "请同意用户协议和隐私政策!",
                    type: "error",
                });
            }
        },

注意:先解决跨域问题(vue.config.js文件)

module.exports = {
​
  devServer: {
    proxy: {
      '/api': {//表示拦截以/api开头的请求路径
        target: 'http://localhost:9090',
        changOrigin: true,//是否开启跨域
        pathRewrite: {
          '^/api': '' //重写api,把api变成空字符,因为我们真正请求的路径是没有api的
        }
      }
    }
  }
​
};
​

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

娃哈哈哈哈呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值