Cree un sistema XX simple con separación de front-end y back-end de 0-vue+Springboot+mybatis-plus+mysql

1. Preparación

1. Instalar nodo

Puede descargar el msi de 64 bits del sitio web oficial , y no debería haber ningún problema para ir hasta el siguiente

2.idea definitiva**

idea** tutorial
La herramienta idea** en el tutorial anterior - Descarga del disco de red de Baidu
Programa de instalación idraIU-2023.2.exe - Descarga del disco de red de Baidu
Reinicie la computadora después de ejecutar el programa de instalación
Se reproduce el siguiente contenido

Debe ser necesario reiniciar IJ, de lo contrario, el siguiente paso se mostrará como no válido.
En el archivo ji huo–code.txt, pegue el contenido correspondiente en el software.

3. Instala cualquier versión de mysql

mysql

4. Instale mysql workbench (inútil)

5. Instalar navegar

Artículo de referencia: Baidu-From Xiaobai to Architecture (Autor)-Navicat16** Navicat última versión** tutorial "Permanente, pro-test eficaz"

navicate16** tool-Baidu network disk download
Navicate16 download-Baidu network disk
Código de extracción: 1111
Descarga del sitio web oficial Navicate

Mi evaluación es que la prueba ilimitada es más conveniente que la permanente **

6. Instalar cartero

descargar cartero

Después de que necesite crear un nuevo espacio de trabajo, haga clic en el signo más en el círculo en la figura a continuación para usar cartero

7.jdk17 (según las necesidades de la versión springboot)

jdk17-instalar

Dos, interfaz Vue

Recomiendo encarecidamente estas dos publicaciones de blog como referencia:
Publicación de blog de referencia-CSDN-Joshua_HIT (Autor)-Zero-Basic Vue Entry Learning Record (1)
Publicación de blog de referencia-CSDN-Joshua_HIT (Autor)-Zero-Basic Vue Entry Learning Record ( 2)

(1) configuración Vue:

# npm换源，加速安装过程 ！！！重要重要
npm config set registry http://registry.npm.taobao.org

# 如果需要安装vue3，把下面语句中的2删掉就行
npm install vue2 -g 

npm install @vue/cli -g
npm i -g @vue/cli-init 

crear un proyecto

# 注意项目名称不能有大写字母
vue init webpack preject_name
# 我这里
cd preject_name
npm install
# 前后端通信用到的库
Vue add axios 
npm run dev

(2) Comunicación de front-end y back-end

1. Crea una nueva página

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/components/login'
Vue.use(Router)

export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
    
    
      path: '/login',
      name: 'login',
      component: login
    }
  ]
})

2. página de inicio de sesión

<template>
  <div>
    <h1>show me something different</h1>
    <input type="text" v-model="inputText.id" placeholder="请输入学生ID">
    <br>
    <input type="text" v-model="inputText.name" placeholder="请输入学生姓名">
    <br>
    <input type="text" v-model="inputText.benValue" placeholder="请输入学生笨蛋值">
      <br>
    <button @click="sendRequest">向数据库写入学生信息</button>
    <br>
    <button @click="showData">获取数据库中学生信息</button>
    <p v-if="students.length > 0">获取到的学生数据：</p>
    <ul>
      <li v-for="student in students" >{
   
   { student.id}} -{
   
   { student.name }} -笨蛋值： {
   
   { student.benValue }}</li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'
export default {
      
      
  name: 'login',
  data() {
      
      
    return {
      
      
      inputText: {
      
      
        id: '',
        name: '',
        benValue: ''
      },
      students: []
    }
  },
  methods: {
      
      
    sendRequest() {
      
      
      
      if(this.inputText.id == '' || this.inputText.name == '' || this.inputText.benValue == '' )
      {
      
      
        alert('请填写完整信息')
        return;
      }
      axios.post('http://127.0.0.1:8022/insertStudent', {
      
       id: this.inputText.id, name:this.inputText.name, benValue: parseInt(this.inputText.benValue) })
        .then(response => {
      
      
          this.inputText = ''
          console.log(response.data)
          alert('发送成功')
        })
        .catch(error => {
      
      
          console.log(error)
        })
    },
    showData() {
      
      
      axios.get('http://127.0.0.1:8022/getStudentInfo')
        .then(response => {
      
      
          this.students = response.data
          console.log(this.students)
        })
        .catch(error => {
      
      
          console.log(error)
        })
    }
  }
}
</script>
<style scoped></style>

2. Configuración de back-end

(1) Construcción del entorno:

Publicación de blog de referencia: CSDN-kong clear (autor): diez minutos de inicio rápido Springboot (nivel de entrada)
básicamente siga el contenido de la publicación de blog anterior, algunas precauciones:

1.

Después de probar la versión sdk, seleccione jdk17 y springboot versión 3.0.5/3.0.6.
jdk17-instalador

2.

La operación de navicat para crear una tabla:

3.

Modificar puerto:

(2) Comunicación de front-end y back-end:

Sobre la base de los tutoriales de referencia mencionados anteriormente: Publicación de blog de referencia : CSDN-kong Clear (Autor) - Inicio rápido de diez minutos Springboot (nivel de entrada)
El código en el lado de springboot de este artículo es el siguiente: (el diseño del estudiante clase es diferente del tutorial de referencia)

1.com.demo1.demo.entity.Student.java

package com.demo1.demo.entity;

public class Student {
    
    
    private  String id;
    private String name;
    private int benValue;
    public String getId(){
    
    
        return id;
    }
    public void setId(String id){
    
    
        this.id = id;
    }
    public String getName(){
    
    
        return name;
    }
    public void setName(String name){
    
    
        this.name = name;
    }
    public int getBenValue(){
    
    
        return benValue;
    }
    public void setBenValue(int benValue){
    
    
        this.benValue = benValue;
    }
    public Student(String id, String name, int benValue){
    
    
        this.id = id;
        this.name = name;
        this.benValue = benValue;
    }
}

2.com.demo1.demo.controller.StudentController.java

package com.demo1.demo.controller;

import com.demo1.demo.entity.Student;
import com.demo1.demo.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
public class StudentController {
    
    
    @Autowired
    private StudentService studentService;

    @RequestMapping(value="/getStudentInfo", method = {
    
    RequestMethod.GET, RequestMethod.POST})
    public List<Student> getStudent(){
    
    
        return studentService.findAll();
    }

    @PostMapping("/insertStudent")
    public void insertStudent(@RequestBody Student student){
    
    
        studentService.insert(student);
    }
}

3.com/demo1/demo/service/StudentService.java

package com.demo1.demo.service;

import com.demo1.demo.entity.Student;
import com.demo1.demo.mapper.StudentMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class StudentService {
    
    

    @Autowired
    private StudentMapper studentMapper;

    public List<Student>findAll(){
    
    
        return studentMapper.findAll();
    }

    public void insert(Student new_student) {
    
    studentMapper.insert(new_student);}

}

4.com/demo1/demo/mapper/StudentMapper.java

package com.demo1.demo.mapper;

import com.demo1.demo.entity.Student;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;

@Mapper
public interface StudentMapper {
    
    

    List<Student>findAll();
    int insert(Student student);
}

5.com/demo1/demo/config/corsConfig.java (comunicación entre dominios)

Publicación de blog de referencia: CSDN-Love no es tan bueno como Lizi (autor) -Springboot+Vue realiza una interfaz simple e interacción de datos separados después de la separación
en la sección 2.1.5 de la publicación de blog

package com.demo1.demo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @author young
 * @date 2022/8/23 17:33
 * @description: 跨域配置
 */
@Configuration
public class corsConfig {
    
    
    /**
     * 最大有效时长
     */
    private static final  long MAX_TIMEOUT=24*60*60;
    @Bean
    public CorsConfiguration corsConfiguration(){
    
    
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setMaxAge(MAX_TIMEOUT);
        //设置访问源请求头
        corsConfiguration.addAllowedHeader("*");
        //设置访问源地址
        corsConfiguration.addAllowedOrigin("*");
        //设置访问源请求方法
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }

    /**
     * 设置跨域配置
     * @return
     */
    @Bean
    public CorsFilter corsFilter(){
    
    
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfiguration());
        return new CorsFilter(source);
    }
}

6.StudentMapper.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.demo1.demo.mapper.StudentMapper">
    <select id="findAll" resultType="com.demo1.demo.entity.Student">
        SELECT * FROM student
    </select>
    <insert id="insert" parameterType="com.demo1.demo.entity.Student">
        INSERT INTO student(id, name, benValue) VALUES (#{id}, #{name},  #{benValue})
            ON DUPLICATE KEY UPDATE id = id
    </insert>
</mapper>

El contenido de la base de datos se muestra en la figura a continuación, y hay un lugar que necesita atención especial: las posiciones relativas de id, name y benValue deben ser consistentes con el orden de declaración en la clase Student (no es necesario)