devbox
在线问答5
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：在线问答5 | 2024-07-11 02:35:17

赞

踩

vue+springboot前后端分离项目

目录

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

  1. @Mapper
  2. public class UserMapper {
  3. }

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

5.2、方法2

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

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

注意：路径可以是指定文件，或者文件夹。

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

8、配置mapper的xml文件
  1. <!--XML头部（固定的）-->
  2. <?xml version="1.0" encoding="UTF-8"?>
  3. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  4. <mapper namespace="com.example.goods_admin.mapper.UserMapper">
  5. <!--    结果映射：数据库字段与实体类字段的映射关系-->
  6.     <resultMap id="BaseResultMap" type="com.example.goods_admin.entity.User">
  7.         <id column="id" jdbcType="VARCHAR" property="id" />
  8.         <result column="userId" jdbcType="VARCHAR" property="userId" />
  9.         <result column="userName" jdbcType="VARCHAR" property="userName" />
  10.         <result column="password" jdbcType="VARCHAR" property="password" />
  11.         <result column="sex" jdbcType="TINYINT" property="sex" />
  12.         <result column="age" jdbcType="INTEGER" property="age" />
  13.         <result column="location" jdbcType="VARCHAR" property="location" />
  14.     </resultMap>
  15. ​
  16. </mapper>

二、编写程序

user实体类

  1. package com.example.goods_admin.entity;
  2.  
  3. public class User {
  4.     private String id;
  5.     private String userId;
  6.     private String userName;
  7.     private String password;
  8.     private String sex;
  9.     private int age;
  10.     private String location;
  11.     //无参构造函数
  12.     public User() {
  13.     }
  14.     //构造函数：用来实例化对象的
  15.     //有参构造函数
  16.     public User(String id, String userId, String userName, String password, String sex, int age, String location) {
  17.         this.id = id;
  18.         this.userId = userId;
  19.         this.userName = userName;
  20.         this.password = password;
  21.         this.sex = sex;
  22.         this.age = age;
  23.         this.location = location;
  24.     }
  25.     public String getId() {
  26.         return id;
  27.     }
  28.     public void setId(String id) {
  29.         this.id = id;
  30.     }
  31.     public String getUserId() {
  32.         return userId;
  33.     }
  34.     public void setUserId(String userId) {
  35.         this.userId = userId;
  36.     }
  37.     public String getUserName() {
  38.         return userName;
  39.     }
  40.     public void setUserName(String userName) {
  41.         this.userName = userName;
  42.     }
  43.     public String getPassword() {
  44.         return password;
  45.     }
  46.     public void setPassword(String password) {
  47.         this.password = password;
  48.     }
  49.     public String getSex() {
  50.         return sex;
  51.     }
  52.     public void setSex(String sex) {
  53.         this.sex = sex;
  54.     }
  55.     public int getAge() {
  56.         return age;
  57.     }
  58.     public void setAge(int age) {
  59.         this.age = age;
  60.     }
  61.     public String getLocation() {
  62.         return location;
  63.     }
  64.     public void setLocation(String location) {
  65.         this.location = location;
  66.     }
  67.  
  68.  
  69. }

1、登录功能

1.1、编写UserController
  1. ​
  2. @RestController
  3. //@RequestMapping用于将 HTTP 请求映射到控制器方法上
  4. @RequestMapping("/user")
  5. public class UserController {
  6. ​
  7.     @Autowired
  8.     Userservice userservice;
  9.     /*
  10.     **登录
  11.      */
  12.     @PostMapping("/login")
  13.     public Result login(@RequestBody User user){
  14.     return userservice.login(user);
  15.     }
  16.  
  17. ​
  18. }
1.2、编写UserserviceImpl
  1. @Service
  2. public class UserserviceImpl implements Userservice {
  3. ​
  4.     @Autowired
  5.     UserMapper userMapper;
  6. ​
  7.     @Override
  8.     public Result login(User user) {
  9.         /**
  10.          * 1、先根据账号查询，是否账号存在
  11.          * 2、不存在，显示该账户未注册，先注册再登录
  12.          * 3、存在，查询该账户的密码是不是数据库中的密码
  13.          * 4、如果传入的密码和数据库的密码不一样，说明密码错误，请重新输入密码
  14.          * 5、如果传入的密码和数据库的密码一样，说明账号密码都正确，显示登录成功，跳转到首页
  15.          */
  16. ​
  17.         //1、根据账号查询，是否账号存在
  18.         User user2 = userMapper.seleteUserByUserId(user.getUserId());
  19. ​
  20.         //2、不存在，显示该账户未注册，先注册再登录
  21.         if (user2 == null) {
  22.             return Result.failed("用户不存在，请注册");
  23.         } else {
  24.             //3、存在，查询该账户的密码是不是数据库中的密码
  25.             User user3 = userMapper.seleteUserByPassword(user);
  26.             if (user3 != null && user3.getPassword().equals(user.getPassword())) {
  27.                 return Result.succeed("登录成功");
  28.             } else {
  29.                 return Result.failed("密码错误");
  30.             }
  31. ​
  32.         }
  33. ​
  34.     }
  35. ​
  36.     
  37. ​
  38. ​
  39. }
1.3、编写接口Userservice
  1. public interface Userservice {
  2. ​
  3.     Result login(User user);
  4. ​
  5. }
1.4、编写mapper
  1. @Mapper
  2. public interface UserMapper {
  3. ​
  4.     User seleteUserByUserId(String userId);
  5. ​
  6.     void login(User user);
  7. ​
  8.    
  9. }
1.5、编写xml
  1. <select id="seleteUserByUserId" resultType="com.example.goods_admin.entity.User">
  2.         select * from user where userId=#{userId}
  3.     </select>
  4.     <select id="login">
  5.         select * from user where userId=#{userId}
  6.     </select>
1.6、前端发请求
  1.    login() {
  2.             if (this.userId === '') {
  3.                 this.$message.error("请输入账号");
  4.                 return;
  5.             } else if (this.password === '') {
  6.                 this.$message.error("请输入密码");
  7.                 return;
  8.             }
  9.             // 判断是否勾选协议
  10.             if (this.agreementChecked) {
  11.                 // 发送登录请求
  12.                 this.$axios({
  13.                     method: "post",
  14.                     url: "http://localhost:8080/api/user/login",
  15.                     data: {
  16.                         userId: this.userId,
  17.                         password: this.password,
  18.                     },
  19.                 })
  20.                     .then((res) => {
  21.                         console.log(res);
  22.                         if (res.data.code == "200") {
  23.                             // 登录成功，显示成功提示信息
  24.                             this.$message({
  25.                                 message: res.data.message,
  26.                                 type: "success",
  27.                             });
  28. ​
  29.                             //1、储存token(令牌)   保存到浏览器
  30.                             window.sessionStorage.setItem("token", res.data.token);
  31.                             //2、储存user
  32.                             window.sessionStorage.setItem(
  33.                                 "user",
  34.                                 JSON.stringify(res.data.user)
  35.                             );
  36.                             //3、跳转到后台主页 （编程式导航）
  37.                             this.$router.push("./home"); //
  38.                         } else if (res.data.code == "500") {
  39.                             this.$message({
  40.                                 message: res.data.message,
  41.                                 type: "error",
  42.                             });
  43.                         }
  44.                     })
  45.                     .catch(() => {
  46.                         // 登录失败，显示提示信息
  47.                         this.$message({
  48.                             message: "该登录失败",
  49.                             type: "error",
  50.                         });
  51.                     });
  52.             } else {
  53.                 // 未勾选协议，不执行登录逻辑
  54.                 this.$message({
  55.                     message: "请同意用户协议和隐私政策！",
  56.                     type: "error",
  57.                 });
  58.             }
  59.         },

注意：先解决跨域问题（vue.config.js文件）

  1. module.exports = {
  2. ​
  3.   devServer: {
  4.     proxy: {
  5.       '/api': {//表示拦截以/api开头的请求路径
  6.         target: 'http://localhost:9090',
  7.         changOrigin: true,//是否开启跨域
  8.         pathRewrite: {
  9.           '^/api': '' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
  10.         }
  11.       }
  12.     }
  13.   }
  14. ​
  15. };
  16. ​

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/808487
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号