MySQL数据库
建立cat表并存储数据
建立后端
1 点击create new project新建一个项目。
2 点击spring initializr建立springboot项目，点击next
3 填写group和artifact，也可以不修改直接点next
4 点击web，选择web，点击next
5 填写projectName和project location，点击finish。
6 建立的项目目录如图所示
7 配置pom.xml
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
8 配置application.properties(与MySQL数据库相连)
mybatis.mapperLocations=classpath:mapper/*.xml
#端口号server.port=8080
#session失效时间server.session-timeout=30
spring.datasource.url=jdbc:mysql://localhost:3306/mysql?characterEncoding=utf-8&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
9 在src中创建包controller、entity、mapper、service、service.impl。在resources中创建包mapper。
userController
package com.example.demo.Controller;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
import java.util.List;
@Controller
@RequestMapping("/user")
public class UserController {
@Resource
private UserService userService;
@ResponseBody
@RequestMapping("/findAll")
public List
List
return list;
}
@ResponseBody
@RequestMapping("/count")
public int count(){
int count=userService.count();
System.out.println(count);
return count;
}
}
user:
package com.example.demo.entity;
import java.io.Serializable;
public class User implements Serializable {
private Integer id;
private String name;
private Integer age;
public Integer getId() {
return id;
}
public String getName() {
return this.name;
}
public Integer getAge() {
return age;
}
public void setId(Integer id) {
this.id = id;
}
public void setName(String name) {
this.name = name;
}
public void setAge(Integer age) {
this.age = age;
}
public User(){
}
public User(int id){
this.id=id;
}
public User(int age, String name){
this.age=age;
this.name=name;
}
@Override
public String toString() {
return super.toString();
}
}
userMapper:
package com.example.demo.mapper;
import com.example.demo.entity.User;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface UserMapper {
List
int count();
}
userservice
package com.example.demo.service;
import com.example.demo.entity.User;
import java.util.List;
public interface UserService {
List
int count();
}
userserviceImpl
package com.example.demo.service.Impl;
import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service("UserService")
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public List
List
return list; }
@Override
public int count() {
int count=userMapper.count();
return count;
}
}
userMapper.xml
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
SELECT * FROM cat
select count(*) from cat
建立前端react：
1 在根目录下建立react项目web
2 建立好的目录如下图所示
在app.js中用ajax取值。
import React, {Component} from 'react';
import './App.css';
import $ from 'jquery';
class App extends Component{
constructor(props)
{
super(props);
this.state = {
}
}
componentDidMount()
{
//先执行Ajax数据请求，全局的get方法
var source="/user/findAll";
this.serverRequest = $.get(source, function (result) {
alert(result);
this.setState({
result
});
}.bind(this));
}
//组件的render方法
render()
{
let {result=[]}=this.state;
return (
111111111111
| id | 姓名 |
|---|---|
| {id} | {name} |
);
}
}
export default App;
要使用jquery需要先添加，在引用
import $ from'jquery';
要使用后端的数据，需要在package.json中添加
"proxy": "http://localhost:8080"
设置npm
启动前端选start，启动后端选demoApplication，
同时启动后，输入http://localhost:3000/#
显示页面
userMapper显示红线时，需要早fileàsettings中找inspections将autowiring for bean class 中的√取消掉。