SpringBoot+Vue_登陆注册

前端

登陆页面布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div class="login-container">
    <div class="title">{{ nusicName }}</div>
    <div class="login">
      <el-form :model="ruleForm" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter="submitForm">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

如何搭建一个Vue项目

准备环境：

  1. node 是否有下载？ 在终端输入node -v

  2. npm 是否有下载? 在终端输入npm -v

  3. vue 是否有下载? 同理输入 vue -V

  4. 如何下载一个Vue ：

    1
    npm install -g @vue/cli

  5. 创建一个项目名称

    1
    vue create 项目名称

  6. 选择自定义方式(选择自定义的方式)

image-20221003214705191.png

  1. 选择的项目配置

    image-20221003214845733.png

  2. 选择vue版本

    image-20221003214933581.png

  3. Use history mode for router?(n)

image-20221003215023901.png

  1. 选择简单的css

    image-20221003215117418.png

  2. 选择配置文件

    image-20221003215150291.png

安装axios

  1. 输入命令

    npm install axios –save

    npm install vue-axios –save

  2. 在main.js中引入

    import axios from ‘axios’

    import VueAxios from ‘vue-axios’

    Vue.use(VueAxios,axios) // 激活axios

引入element-ui

  1. 下载

    npm i element-ui -S

​ 2.

运行项目

  1. cd 项目名
  2. npm run serve

后端

什么是跨域？

  1. 协议相同

  2. 端口相同

  3. 主机相同

    没有满足上面三个条件任何一个都叫跨域

解决跨域问题:

后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Bean
    public CorsInterceptor corsInterceptor() {
        return new CorsInterceptor(); // 跨域实列
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(corsInterceptor())
                .addPathPatterns("/**");
    }

}

前端

1
2
3
4
5
6
7
8
9
10
import axios from 'axios'
import router from '../router'

const BASE_URL = process.env.NODE_HOST

axios.defaults.timeout = 5000 // 超时时间设置
axios.defaults.withCredentials = true // true允许跨域
axios.defaults.baseURL = BASE_URL
// Content-Type 响应头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

部署方式

前后端一起部署

​ 在前端执行npm run build 生成一个dist文件夹，将dist文件下的所有文件拷贝到static资源目录下面

前后端分离部署

Nginx(能解决跨域问题) 部署前端，jar 运行后端

登陆注册模块

报错一：

1
Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Unexpected character

原因，前端得用json形式的数据发给后端，因为注解是@RequestBody 只接受json数据的格式。

Controller代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
@Slf4j
@RequestMapping("/user")
@RestController
public class UserController {
    @Autowired
    UserService userService;

    //    用户登陆
    @PostMapping("/login")
    public R<User> login(HttpServletRequest request, @RequestBody User user) {
//        0.将提交过来的密码进行md5加密
        String password = user.getPassword();
        password = DigestUtils.md5DigestAsHex(password.getBytes());
//        1.根据页面提交的用户名username查询数据库
        LambdaQueryWrapper<User> lqw = new LambdaQueryWrapper<>();
        lqw.eq(User::getName,user.getName());
        User one = userService.getOne(lqw);
        //        2.如果没有查询到则返回登陆失败结果
        if (one == null) {
            return R.error("登录失败");
        }
//        3.密码对比，如果不一致则返回登陆失败结果
        if (!one.getPassword().equals(password)) {
            return R.error("密码不一致登录失败");
        }
//        4.查看用户状态 如果为已禁用状态 则返回用户已禁用状态
        if (one.getStatus() == 0) {
            return R.error("账号已禁用");
        }
//        5.登陆成功 将用户id存入Session并返回登陆成功结果
        request.getSession().setAttribute("user",one.getId());
        return R.success(one);
    }
    //    用户退出
    @PostMapping("/logout")
    public R<String> logout(HttpServletRequest request) {
        request.getSession().removeAttribute("user");
        return R.success("退出成功!!!");
    }

    @PostMapping("/register")
    public R<String> register(@RequestBody User user) {
        log.info("新增用户信息{}",user.getName());
        user.setPassword(DigestUtils.md5DigestAsHex("000000".getBytes()));
        userService.save(user);
        return R.success("注册成功");
    }

}

返回通用类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public class R<T> {
    private Integer code; //编码：1成功，0和其它数字为失败

    private String msg; //错误信息

    private T data; //数据

    private Map map = new HashMap(); //动态数据

    public static <T> R<T> success(T object) {
        R<T> r = new R<T>();
        r.data = object;
        r.code = 1;
        return r;
    }

    public static <T> R<T> error(String msg) {
        R r = new R();
        r.msg = msg;
        r.code = 0;
        return r;
    }

    public R<T> add(String key, Object value) {
        this.map.put(key, value);
        return this;
    }
}

Mapper接口

1
2
3
@Mapper
public interface UserMapper extends BaseMapper<User> {
}

Service接口

1
2
public interface UserService extends IService<User> {
}

ServiceImpl实现类

1
2
3
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}