Vue+SpringBoot实现增删改查

Vue+Spring boot

Vue前端

Vue新建项目

当前我是用的是vue脚手架3.4.1版本

github地址:github.com/liangcongco…

vue create vue-demo //新建项目
 cd vue-demo //进入项目文件夹下
yarn serve //运行项目  
复制代码

默认请况下,在浏览器上访问http://localhost:8080/,可以看到如下界面:

项目目录

vue是单页面应用组件,是通过路由跳转实现与其他页面交互。在项目模板中,App.vue相当于外面的最大组件,其他组件均是在其下,利用路由跳转到其他页面。

App.vue页面如下,主要由三部分组成

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>//组件路由
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'//组件引入

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
复制代码

前端利用axios访问后端api

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。原理:

// get请求 
axios.get('/user', {
  params: {
  ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
// post 请求
axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
复制代码

npm install --save axios

安装axios后, 在项目中设置js文件与后端进行交互

  • index.js中放置api请求基础路径
  • api.resquest.js中放置axios,http请求配置信息
  • user.js中放置实现增删改查方法和http请求

user.js中代码如下

import HttpRequest from '@/axios/api.request'

export const UserQryAction = () => {
  return HttpRequest.request({
    url: 'user/',
    method: 'get'
  })
}

export const UserAddAction = (parameter) => {
  return HttpRequest.request({
    url: 'user/',
    method: 'post',
    params: parameter
  })
}

export const UserUpdateAction = (parameter) => {
  return HttpRequest.request({
    url: 'user/',
    method: 'put',
    params: parameter
  })
}

export const UserDelAction = (parameter) => {
  return HttpRequest.request({
    url: 'user/',
    method: 'delete',
    params: {
      no: parameter
    }
  })
}

复制代码

前端页面如图所示:

增删改查按钮均能实现与后端数据库交互, 后端数据库响应http的get请求所返回数据。

spring boot后端

定义:从根本上来说springboot就是一些库的集合,它能够被任意项目的构建系统所使用,Spring Boot 是所有基于 Spring 开发的项目的。Spring Boot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的配置文件。

利用idea新建spring 项目

项目目录结构:

这里我把springboot项目主要分为五层:model,service,mapper,controller,和config

  • model文件夹中为实体类:用户实体类
public class User {
    private int no;
    private String name;
    private String email;
    public int getNo() {
        return no;
    }
    public void setNo(int no) {
        this.no = no;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
}
复制代码
  • service文件夹为业务层:增,删,改,查四个业务的实现

接口

public interface UserService {
    void AddUser(User user);
    void delUserById(@Param("no") int no);
    void updateUserByNo(User user);

    List<User> getUser();
复制代码

实现类

@Service
public class UserServiceimpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public void AddUser(User user) {
        userMapper.AddUser(user);
    }

    @Override
    public void delUserById(int no) {
        userMapper.delUserById(no);
    }

    @Override
    public void updateUserByNo(User user) {
        userMapper.updateUserByNo(user.getName(),user.getEmail(),user.getNo());
    }

    @Override
    public List<User> getUser() {

        List<User> userList = userMapper.getUser();

        // lamdba表达式的使用

        // List<User> userListOrderBy= userList.stream().filter((User u) -> u.getName() == "1212").collect(Collectors.toList());

        Collections.sort(userList,(user1, user2) -> user1.getNo() - user2.getNo());

        return userList;
    }
}
复制代码
  • mapper文件夹为交互层:对数据库的业务操作
@Mapper
public interface UserMapper {
    @Insert({"insert into user(no, name, email) values(#{no}, #{name}, #{email})"})
    void AddUser(User userInfo);

    @Delete("delete from user where no=#{no}")
    void delUserById(@Param("no") int no);

    @Update("update user set name = #{name}, email = #{email} where no = #{no}")
    void updateUserByNo(@Param("name") String name, @Param("email") String email, @Param("no") int no);

    @Select("select * from user")
    List<User> getUser();
}
复制代码
  • controller文件夹为控制层:用户可以直接访问到的地方,与前端进行交互
@RestController//处理http请求,用来响应页面。
@RequestMapping("/api")//配置url映射
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping(value ="/user", method = RequestMethod.GET)
    public List<User> UserQry() {
        return userService.getUser();
    }

    @RequestMapping(value ="/user", method = RequestMethod.POST)
    public void UserAdd(User user){
        userService.AddUser(user);
    }

    @RequestMapping(value ="/user", method = RequestMethod.PUT)
    public void UserUpdate(User user){
        userService.updateUserByNo(user);
    }

    @RequestMapping(value ="/user", method = RequestMethod.DELETE)
    public void UserDel(@RequestParam(value="no") int no){
        userService.delUserById(no);}

}
复制代码
  • config文件夹为配置层:配置跨域处理相关信息
@Configuration
@AutoConfigureAfter(DispatcherServletAutoConfiguration.class)
public class WebConfiguration extends WebMvcConfigurationSupport {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
        registry.addResourceHandler("swagger-ui.html")
                .addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("/webjars/**")
                .addResourceLocations("classpath:/META-INF/resources/webjars/");
        super.addResourceHandlers(registry);
    }

    /**
     * CROS跨域的处理
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH")
                .allowCredentials(true).maxAge(3600);
    }
}
复制代码

与前端进行交互

1、前端的Http请求会到controller这一层,而controller层根据相应路由信息注解会跳转到相应的类。

2、在框架经过处理以后,最终调用的是mapper层。

3、在执行相应的Sql以后,将会依次返回到controller层,然后在Http的返回中将会以Json串对象返回给前端的调用方。

4、前端在Http的response中拿到返回的值,然后再进行一些处理

连接数据库

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/lcc?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
复制代码

注解

  • @SpringBootApplication @SpringBootApplication = @Configuration + @EnableAutoConfiguration + @ComponentScan 简化程序的配置。
  • @Configuration 注解在类上,表示这是一个IOC容器,相当于spring的配置文件,IOC容器的配置类。
  • @ComponentScan 如果扫描到有@Component @Controller @Service等这些注解的类,则把这些类注册为bean。@Controller, @Service, @Repository是@Component的细化,这三个注解比@Component带有更多的语义,它们分别对应了控制层、服务层、持久层的类。
  • @RestController 告诉Spring以JSON字符串的形式渲染结果,并直接返回给调用者。
  • @RequestMapping 告诉Spring这是一个用来处理请求地址映射的注解。
  • @Autowired 可以对类成员变量、方法及构造函数进行标注。从IoC容器中去查找,并自动装配。(去除@Autowired可以运行一下试试)
  • Mybatis的 @Mapper 注解的接口生成一个实现类
发布了136 篇原创文章 · 获赞 49 · 访问量 24万+
展开阅读全文
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览