简单的springboot + vue

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
  In dedicated config files
> In package.json
?
?

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) n

Vue CLI v4.5.13
?  Creating project in D:\vue\vue20211002\vue\vue_project.
?  Initializing git repository...
??  Installing CLI plugins. This might take a while...


> core-js@3.18.1 postinstall D:\vue\vue20211002\vue\vue_project\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\vue\vue20211002\vue\vue_project\node_modules\ejs
> node ./postinstall.js

added 1220 packages from 635 contributors in 36.733s

81 packages are looking for funding
  run `npm fund` for details

?  Invoking generators...
?  Installing additional dependencies...

added 4 packages from 1 contributor in 3.849s

81 packages are looking for funding
  run `npm fund` for details

?  Running completion hooks...

?  Generating README.md...

?  Successfully created project vue_project.
?  Get started with the following commands:

 $ cd vue_project
 $ npm run serve

PS D:\vue\vue20211002\vue>

启动vue项目

PS D:\vue\vue20211002\vue> cd vue_project
PS D:\vue\vue20211002\vue\vue_project> npm run serve

> vue_project@0.1.0 serve D:\vue\vue20211002\vue\vue_project
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 1793ms                                                                        7:55:17 PM


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.5.14:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

mysql数据库

# Host: 127.0.0.1  (Version: 5.5.53)
# Date: 2020-09-01 16:46:58
# Generator: MySQL-Front 5.3  (Build 4.13)

/*!40101 SET NAMES utf8 */;

#
# Source for table "book"
#

DROP TABLE IF EXISTS `book`;
CREATE TABLE `book` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) DEFAULT NULL,
  `author` varchar(20) DEFAULT NULL,
  `publish` varchar(20) DEFAULT NULL,
  `pages` int(10) DEFAULT NULL,
  `price` float(10,2) DEFAULT NULL,
  `bookcaseid` int(10) DEFAULT NULL,
  `abled` int(10) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `FK_ieh6qsxp6q7oydadktc9oc8t2` (`bookcaseid`)
) ENGINE=MyISAM AUTO_INCREMENT=15 DEFAULT CHARSET=utf8;

#
# Data for table "book"
#

/*!40000 ALTER TABLE `book` DISABLE KEYS */;
INSERT INTO `book` VALUES (1,'解忧杂货店','东野圭吾','电子工业出版社',102,27.30,9,1),(2,'追风筝的人','卡勒德·胡赛尼','中信出版社',330,26.00,1,1),(3,'人间失格','太宰治','作家出版社',150,17.30,1,1),(4,'这就是二十四节气','高春香','电子工业出版社',220,59.00,3,1),(5,'白夜行','东野圭吾','南海出版公司',300,27.30,4,1),(6,'摆渡人','克莱儿·麦克福尔','百花洲文艺出版社',225,22.80,1,1),(7,'暖暖心绘本','米拦弗特毕','湖南少儿出版社',168,131.60,5,1),(8,'天才在左疯子在右','高铭','北京联合出版公司',330,27.50,6,1),(9,'我们仨','杨绛','生活.读书.新知三联书店',89,17.20,7,1),(10,'活着','余华','作家出版社',100,100.00,6,1),(11,'水浒传','施耐庵','三联出版社',300,50.00,1,1),(12,'三国演义','罗贯中','三联出版社',300,50.00,2,1),(13,'红楼梦','曹雪芹','三联出版社',300,50.00,5,1),(14,'西游记','吴承恩','三联出版社',300,60.00,3,1);
/*!40000 ALTER TABLE `book` ENABLE KEYS */;

vue配置


/components/Book.vue

views/About.vue

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

跨域配置

CrosConfig

package com.springbootvue.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author
 * @create-date 2020/9/1 0001 16:27
 */
@Configuration//自动配置
public class CrosConfig implements WebMvcConfigurer { //实现这个接口

    //重新addCorsMappings方法
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")      //添加映射路径，“/**”表示对所有的路径实行全局跨域访问权限的设置
                .allowedOriginPatterns("*")            //开放哪些ip、端口、域名的访问权限
                .allowedMethods( "GET", "POST", "PUT", "OPTIONS", "DELETE")        //开放哪些Http方法，允许跨域访问
                .allowCredentials(true)         //是否允许发送Cookie信息
                .maxAge(3600)
                .allowedHeaders("*");            //允许HTTP请求中的携带哪些Header信息
    }
}


BookController

package com.springbootvue.controller;

import com.springbootvue.dao.BookDao;
import com.springbootvue.entity.Book;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

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

/**
 * @author admin
 * @PROJECT_NAME: springboot-vue
 **/
@RestController("/")
@RequestMapping
public class BookController {
    @Resource
    private BookDao bookDao;
    @GetMapping("/book")
//    @CrossOrigin
    public List findAll(){
        return bookDao.selectAll();
    }
    @GetMapping("/b")
    public Book find(){
        Integer a=1;
        return bookDao.selectByPrimaryKey(a);
    }
}

BookDao

package com.springbootvue.dao;

import com.springbootvue.entity.Book;
import org.apache.ibatis.annotations.Select;

import java.util.List;
public interface BookDao {

    @Select("select * from book")
    List selectAll();
}

Book

package com.springbootvue.entity;

import java.io.Serializable;
import lombok.Data;

/**
 * book
 * @author 
 */
@Data
public class Book implements Serializable {
    private Integer id;

    private String name;

    private String author;

    private String publish;

    private Integer pages;

    private Double price;

    private Integer bookcaseid;

    private Integer abled;

    private static final long serialVersionUID = 1L;

}

SpringbootVueApplication

package com.springbootvue;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @author admin
 */
@SpringBootApplication
@MapperScan("com.springbootvue.dao")
public class SpringbootVueApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootVueApplication.class, args);
    }

}

BookDao.xml

<?xml version="1.0" encoding="UTF-8"?>


  
    
    
    
    
    
    
    
    
  
  
    id, `name`, author, publish, pages, price, bookcaseid, abled
  
  
    select 
    
    from book
  
 

application.yml

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/vuetest?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
    username: root
    password: root
    driver-class-name:  com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
server:
  port: 8888
# mybatis配置
mybatis:
  mapper-locations: classpath:mapper/*.xml    # mapper映射文件位置
  type-aliases-package: com.springbootvue.entity    # 实体类所在的位置
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl   #用于控制台打印sql语句

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.5.5
         
    
    com
    springboot-vue
    0.0.1-SNAPSHOT
    springboot-vue
    Demo project for Spring Boot
    
        UTF-8
        UTF-8
        1.8
    
    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.projectlombok
            lombok
        

        
        
            mysql
            mysql-connector-java
            8.0.20
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.2.0
        
        
            javax
            javaee-api
            7.0
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        

    

    
        
            
                org.apache.maven.plugins
                maven-resources-plugin
                3.1.0
            
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    
                        
                            org.projectlombok
                            lombok