20210620——记一次突发奇想的前后端

前言

莫名其妙想实现一个前后端分离的登录功能，就是最简单的，前端把表单信息返给后端，后端接收封装成 实体类，然后去数据库验证，最后实现登录。

时间匆忙，需求很简略

前端

直接在webstorm建的一个项目
以前还需要用git，vue init用vue-cli脚手架搭建来的，现在直接创建就可以了

踩坑1

初始化之后好像需要

npm install 

踩坑2

应该是这种创建方式，没有npm run dev这样的指令，需要npm run serve用来启动

踩坑3

我用了element-ui和axios，别忘了配置全局，在main.js中配置

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import axios from 'axios'

Vue.use(ElementUI);

Vue.config.productionTip = false
Vue.prototype.$http= axios

new Vue({
  render: h => h(App),
}).$mount('#app')

踩坑4

就是写个表单，页面，也没有管这个好不好看什么的，就想实现功能即可。
写的也是一个傻瓜式的axios请求

<template>
  <div>
      <el-input   placeholder="请输入用户名" v-model="ruleForm.username"></el-input>
      <el-input type="password"  placeholder="请输入密码"  v-model="ruleForm.password" show-password></el-input>
      <el-button size="mini" type="primary" @click="submitForm('ruleForm')" icon="el-icon-upload">登录</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
    data(){
      return{
          ruleForm: {
              username: '',
              password: ''
          }
      }
    },
    methods: {
        submitForm (){
            var that = this
            var url = 'http://localhost:8081/login'
            this.$http({
                method: 'post',
                url: url,
                data: {
                    username: that.ruleForm.username,
                    password: that.ruleForm.password
                }
            }).then(function (response) {
                that.$message({
                    message: '登录成功',
                    type: 'success',
                    showClose: true
                })
                console.log(response)
                console.log('信息修改成功')
            }).catch(function (error) {
                console.log(error)
                that.$message({
                    message: '上传失败,请稍后再试',
                    type: 'error',
                })
            })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

后端

建立好项目，第一件事肯定配置pom.xml

踩坑1

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.1</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.mmz</groupId>
    <artifactId>test</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>test</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.28</version>
        </dependency>


        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

踩坑2

项目目录
controller,service,mapper,entity
我就简写了，没写service，直接controller调用mapper
然后用的yml，没用xml
把mapper.xml放在resource下面，记得在application.yml下面配置一下

踩坑3

配置数据源连接池

spring:
  datasource:
    username: root
    password: password
    url: jdbc:mysql://localhost:3306/login?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  type-aliases-package: com.mmz.test.entity
  mapper-locations: classpath:mybatis/mapper/*.xml
server:
  port: 8081

踩坑4

controller别忘了跨域的问题

package com.mmz.test.controller;

import com.alibaba.fastjson.JSONObject;
import com.mmz.test.entity.User;
import com.mmz.test.mapper.UserLoginMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import sun.misc.Request;

import java.util.List;

/**
 * @Classname UserLoginController
 * @Description TODO
 * @Date 2021/6/20 0:05
 * @Created by mmz
 */
@RestController
@CrossOrigin
public class UserLoginController {

    @Autowired
    UserLoginMapper userLoginMapper;

    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public JSONObject queryUserList(@RequestBody User user){

        JSONObject userObject = new JSONObject();
        userObject.put("user",user);
        return userObject;
    }

    @GetMapping("/user")
    public void test(){
        System.out.println("hello mmz");
    }
}

踩坑5

mapper.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.mmz.test.mapper.UserLoginMapper">

    <select id="selectUser" resultType="user">
        select * from user where username = #{username};
    </select>
</mapper>

后记

暂时写这么多，有点困了，代码放在github上面吧。