1. Preparation
1. Install node
You can download the 64-bit msi from the official website , and it should be no problem to go all the way to next
2.idea Ultimate**
idea** tutorial
The idea** tool in the above tutorial - Baidu network disk download
idraIU-2023.2.exe installation program - Baidu network disk download
Restart the computer after running the installation program
The following content is reproduced
It must be necessary to restart IJ, otherwise the next step will show invalid
In the ji huo–code.txt file, paste the corresponding content into the software
3. Install any version of mysql
mysql
4. Install mysql workbench (useless)
5. Install navicate
navicate16** tool-Baidu network disk download
Navicate16 download-Baidu network disk
Extraction code: 1111
Official website download Navicate
My evaluation is that unlimited trial is more convenient than permanent **
6. Install postman
After you may need to create a new workspace, click the plus sign in the circle in the figure below to use postman
7.jdk17 (according to the needs of the springboot version)
Two, Vue front end
Strongly recommend these two blog posts as a reference:
Reference Blog Post-CSDN-Joshua_HIT (Author)-Zero-Basic Vue Entry Learning Record (1)
Reference Blog Post-CSDN-Joshua_HIT (Author)-Zero-Basic Vue Entry Learning Record (2)
(1) Vue configuration:
# 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
create a project
# 注意项目名称不能有大写字母
vue init webpack preject_name
# 我这里
cd preject_name
npm install
# 前后端通信用到的库
Vue add axios
npm run dev
(2) Front-end and back-end communication
1. Create a new page
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. login page
<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. Backend configuration
(1) Environment construction:
Reference blog post: CSDN-kong clear (author) - ten minutes quick start Springboot (entry level)
basically follow the content of the above blog post, some precautions:
1.
After trying the sdk version, select jdk17 and springboot version 3.0.5/3.0.6.
jdk17-installer
2.
The operation of navicat to create a table:
3.
Modify port:
(2) Front-end and back-end communication:
On the basis of the referenced tutorials mentioned above: Reference blog post: CSDN-kong Clear (Author) - Ten Minute Quick Start Springboot (entry level)
The code on the springboot side of this article is as follows: (the design of the student class is different from the reference tutorial)
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.contoller.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 (cross-domain communication)
Reference blog post: CSDN-Love is not as good as Lizi (author)-Springboot+Vue realizes simple front-end and separate data interaction after separation
in section 2.1.5 of the blog post
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>
The content in the database is shown in the figure below, and there is one place that needs special attention: the relative positions of id, name, and benValue should be consistent with the declaration order in the Student class (not necessary)
