Axios和springboot

(一)springboot的代码
(1) springboot的基本项目框架和配置文件
(2)在controller创建UserController控制类
(3)在service层创建UserService业务逻辑接口
(4)在dao层中创建Usedao数据接口类,和mapper.xml配置文件
(5)在entity中创建User实体类
(二)Axios的代码

(一)springboot的代码
(1) springboot的基本项目框架和配置文件

applicatio.yml

在这里插入代码片
spring.datasource.username=root
spring.datasource.password=123
spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 整合mybatis
mybatis.type-aliases-package=com.lianwei.entity
mybatis.mapper-locations=classpath:mapper/*.xml

pom.xml

在这里插入代码片
<?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.3.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com</groupId>
    <artifactId>lianwei</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>lianwei</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>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.0</version>
        </dependency>

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


        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

(2)在controller创建UserController控制类

在这里插入代码片
package com.lianwei.controller;

import com.lianwei.entity.User;
import com.lianwei.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 功能描述：
 *
 * @Author: ghh
 * @Date: 2020/10/28 23:05
 */
@RestController
public class UserController {

    @Autowired
    UserService userService;

    @CrossOrigin
    @GetMapping ("/getfindAll")
    public List<User> getfindAll() {
        List<User> userList = userService.findAll();
        System.out.println("user");
        for (User user : userList) {
            System.out.println(user);
        }
        return userList;
    }
    @CrossOrigin
    @PostMapping("/postfindAll")
    public List<User> postfindAll() {
        List<User> userList = userService.findAll();
        System.out.println("user");
        for (User user : userList) {
            System.out.println(user);
        }
        return userList;
    }

    @CrossOrigin
    @PostMapping("/postId")
    public Object postId(Integer id) {
      /*  public Object postId(@Requestbody User user) {*/
        System.out.println("调用了postid方法");
        System.out.println("传入的ID是:" + id);

        if (id != null) {
            Object result = this.userService.selectUserById(id);
            System.out.println(result);
            if (result != null){
                return result;
            }else {
                return "用户不存在";
            }
        }else{
            return "请输入查询id";
        }
    }
    @CrossOrigin
    @GetMapping("/getName")
    public Object getName(String  name) {
        System.out.println("调用了getName方法");
        System.out.println("传入的name是:" + name);
        if (name != null) {
            Object result = this.userService.selectUserByName(name);
            System.out.println(result);
            if (result != null){
                return result;
            }else {
                return "用户不存在";
            }

        }else{
            return "请输入用户名";
        }
    }
}

(3)在service层创建UserService业务逻辑接口

在这里插入代码片package com.lianwei.service;

import com.lianwei.entity.User;

import java.util.List;

/**
 * 功能描述：
 *
 * @Author: ghh
 * @Date: 2020/10/28 23:05
 */
public interface UserService {

    public List<User> findAll();

    public User selectUserById(int id);

    public User selectUserByName(String name);
}

接口的实现类

在这里插入代码片

```package com.lianwei.service;

import com.lianwei.dao.UserDao;
import com.lianwei.entity.User;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

/**
 * 功能描述：
 *
 * @Author: ghh
 * @Date: 2020/10/28 23:06
 */
@Service
public class UserServiceImpl implements UserService{

    @Resource
    UserDao userDao;


    @Override
    public List<User> findAll() {
        return userDao.findAll();
    }

    @Override
    public User selectUserById(int id) {
        System.out.println("service==>"+id);
        return userDao.selectUserById(id);

    }

    @Override
    public User selectUserByName(String name) {
        return userDao.selectUserByName(name);
    }
}

(4)在dao层中创建Usedao数据接口类,和mapper.xml配置文件

在这里插入代码片
package com.lianwei.dao;

import com.lianwei.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;
import java.util.Map;

/**
 * 功能描述：
 *
 * @Author: ghh
 * @Date: 2020/10/28 23:05
 */
@Mapper
@Repository
public interface UserDao {

    public List<User> findAll();

    public User selectUserById(int id);

    public User selectUserByName(String name);

    //关键字查询
    List<User> query(Map map);

    //查询用户表总条数
    int querySize(Map map);
}

数据层的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.lianwei.dao.UserDao">

    <select id="findAll" resultType="User">
        select * from user
    </select>

    <select id="selectUserById" parameterType="int" resultType="User">
   select *  from user where id = #{id};
    </select>

    <select id="selectUserByName" parameterType="String" resultType="User">
        select *  from user where name = #{name}
    </select>

    <insert id="addUser" parameterType="User">
        insert into user (id,name,pwd) value (#{id},#{name},#{pwd})
    </insert>

    <update id="updateUser" parameterType="User">
        update user set name=#{name},pwd=#{pwd} where id = #{id}
    </update>

    <delete id="deleteUser" parameterType="int">
        delete from user where id = #{id}
    </delete>

</mapper>

(5)在entity中创建User实体类

在这里插入代码片package com.lianwei.entity;

/**
 * 功能描述：
 *
 * @Author: ghh
 * @Date: 2020/10/28 23:04
 */
public class User {
    private int id;
    private String name;
    private String pwd;
    private String perms;

    public User(int id, String name, String pwd, String perms) {
        this.id = id;
        this.name = name;
        this.pwd = pwd;
        this.perms = perms;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPwd() {
        return pwd;
    }

    public void setPwd(String pwd) {
        this.pwd = pwd;
    }

    public String getPerms() {
        return perms;
    }

    public void setPerms(String perms) {
        this.perms = perms;
    }
}

(二)Axios的代码
注意: 在HTML中记得引入对应的js文件

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-resource.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="./lib/bootstrap.min.css" rel="stylesheet">
<body>

<div id="app">

    <
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加用户</h3>
        </div>
        <div class="panel-body form-inline text-center">
            <label>
                name:
                <input type="text" v-model="name" class="form-control">
            </label>

            <input type="button" value="添加" @click="add" class="btn btn-primary">
        </div>
    </div>

    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th class ="text-center">ID</th>
            <th class ="text-center">Name</th>
            <th class ="text-center">pwd</th>
            <th class ="text-center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list" :key="item.id" class ="text-center" >
            <td >{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.pwd}}</td>
            <td>
                <a href="" >删除</a>
            </td>
        </tr>
        </tbody>
    </table>

</div>



<script>
    var vm = new Vue({
        el:'#app',
        data: {
            name:'',
            list:[
                {id : 1 , name : '喜羊羊', time : new Date() },
                {id : 2 , name : '懒羊羊', time : new Date() },
                {id : 3, name : '沸羊羊', time : new Date() },
            ]
        },
     created() {
            this.getAllList();
        } ,
        methods: {
            add() { //

            },
            getAllList() {      //  获取所有的品牌列表
               /* this.$http.post('http://localhost:8080/queryUserList').then(result => {
                    var result  = result.body
                    return  this.list = result
                })*/
            axios.get('http://localhost:8080/getfindAll').then(result =>{
                    /*    var result = result.data()*/
                console.log(result.data)
                return this.list = result.data
               /* return this.list = result.data();
                console.log(this.list)*/
                console.log(this.list);

            })
            },
        },

    });
   /*let newVar = axios.create({
       baseU
   });*/

</script>

</body>
</html>