博客

element-ui+springboot功能实现

  • Post author:
  • Post category:其他


今天主要分享两个功能，新增，模糊查询；查询输入框，如果为空的就查询当前所有信息。

后台功能

主程序启动类 

@MapperScan("com.example.demo.mapper")
@EnableTransactionManagement
@EnableAspectJAutoProxy
@SpringBootApplication
public class DemoApplication {

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

}

pom文件配置 

<?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.9.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.zking</groupId>
    <artifactId>spboot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>spboot</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <!--springboot依赖-->
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <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>1.3.2</version>
        </dependency>

        <!--mysql依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.44</version>
            <scope>runtime</scope>
        </dependency>

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

        <!--druid-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.10</version>
        </dependency>

        <!--pagehelper-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>

        <!--freemarker-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</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>
            <plugin>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-maven-plugin</artifactId>
                <version>1.3.2</version>
                <dependencies>
                    <!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 -->
                    <dependency>
                        <groupId>mysql</groupId>
                        <artifactId>mysql-connector-java</artifactId>
                        <version>5.1.44</version>
                    </dependency>
                </dependencies>
                <configuration>
                    <overwrite>true</overwrite>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

application.yml 配置文件 

server:
  port: 8080
  servlet:
    context-path: /
spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/bookshoptest?useUnicode=true&characterEncoding=utf8&useSSL=false
    username: root
    password: 123456
    druid:
      initial-size: 5
      min-idle: 5
      max-active: 20
      max-wait: 60000
      time-between-eviction-runs-millis: 60000
      min-evictable-idle-time-millis: 30000
      validation-query: SELECT 1 FROM DUAL
      test-while-idle: true
      test-on-borrow: true
      test-on-return: false
      pool-prepared-statements: true
      max-pool-prepared-statement-per-connection-size: 20
      filter:
        stat:
          merge-sql: true
          slow-sql-millis: 5000
      web-stat-filter:
        enabled: true
        url-pattern: /*
        exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*"
        session-stat-enable: true
        session-stat-max-count: 100
      stat-view-servlet:
        enabled: true
        url-pattern: /druid/*
        reset-enable: true
        login-username: admin
        login-password: admin
        allow: 127.0.0.1
        #deny: 192.168.1.100
  freemarker:
    cache: false
    charset: UTF-8
    content-type: text/html
    suffix: .ftl
    template-loader-path: classpath:/templates
mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.zking.spboot.model
  configuration:
    map-underscore-to-camel-case: true
logging:
  level:
    com.zking.spboot.mapper: debug
pagehelper:
  helperDialect: mysql
  reasonable: true
  supportMethodsArguments: true
  params: count=countSql


解决跨域请求问题

需要的类 

package com.zking.spboot.util;

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

@Configuration
public class CorsMapping implements WebMvcConfigurer {

    /*@Override
     *
     * 重新跨域支持方法
     * CorsRegistry  开启跨域注册
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //addMapping 添加可跨域的请求地址
        registry.addMapping("/**")
                //设置跨域 域名权限 规定由某一个指定的域名+端口能访问跨域项目
                .allowedOrigins("*")
                //是否开启cookie跨域
                .allowCredentials(false)
                //规定能够跨域访问的方法类型
                .allowedMethods("GET","POST","DELETE","PUT","OPTIONS")
                //添加验证头信息  token
                //.allowedHeaders()
                //预检请求存活时间 在此期间不再次发送预检请求
                .maxAge(3600);
    }
}

后台Controller实现 

@RestController
@RequestMapping("/books")
public class BookController {

    @Autowired
    private IBookService bookService;


    @RequestMapping("/list")
    public Object list(Book book) {
        Map<String, Object> map = new HashMap<>();
        try {
            List<Book> list = bookService.list(book);
            map.put("code", 0);
            map.put("msg", "操作成功");
            map.put("data", list);
        } catch (Exception e) {
            map.put("code", -1);
            map.put("msg", "操作失败");
        }
        return map;
    }

    @PostMapping("/add")
    public Object add(Book book) {
        Map<String, Object> map = new HashMap<>();
        try {
            bookService.add(book);
            map.put("code", 0);
            map.put("msg", "操作成功");
        } catch (Exception e) {
            map.put("code", -1);
            map.put("msg", "操作失败");
        }
        return map;
    }

}

前台代码实现 BookList.vue

<template>
	<div>
		<h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书本名称">
        <el-input v-model="bookname" placeholder="书本名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="qry">查询</el-button>
        <el-button type="primary" @click="add">增加</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="books"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="书本id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="bookname"
        label="书本名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格">
      </el-table-column>
      <el-table-column
        prop="booktype"
        label="书本类型">
      </el-table-column>
    </el-table>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
          <el-input v-model="form.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书本价格" prop="price" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书本类型" prop="booktype" :label-width="formLabelWidth">
          <el-select v-model="form.booktype" placeholder="请选择书本类型">
            <el-option label="散文" value="散文"></el-option>
            <el-option label="小说" value="小说"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

	</div>
</template>

<script>
	export default {
		data:function(){
			return {
				ts:new Date().getTime(),
        bookname: '',
        books: [],
        dialogFormVisible: false,
        formLabelWidth: "100px",

        form: {},

        rules: {
          bookname: [
            { required: true, message: '请输入书本名称', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入价格', trigger: 'blur' }
          ],
          booktype: [
            { required: true, message: '请输入书本类型', trigger: 'blur' }
          ]
        }
			};
		},
    methods: {
      qry() {
        let url = this.axios.urls.BOOK_QRY;
        let param = {
          bookname: this.bookname
        }
        this.axios.get(url, {
          params: param
        }).then(resp => {
          if(resp.data.code == 0) {
             this.books = resp.data.data;
          }
        });
      },

      add() {
         this.dialogFormVisible = true;
         /* this.form.bookname = "";
         this.form.price = "";
         this.form.booktype = ""; */
         this.$refs['form'].resetFields();
      },

      reset() {
        this.form.bookname = "";
        this.form.price = "";
        this.form.booktype = "";
      },

      save() {
        let url = this.axios.urls.BOOK_ADD;

        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.axios.post(url, this.form).then(resp => {
              if(resp.data.code == 0) {
                 this.$message({
                    message: resp.data.msg,
                    type: 'success'
                  });
                  this.qry();
                  this.dialogFormVisible = false;
                  this.reset();
              } else {
                this.$message({
                   message: resp.data.msg,
                   type: 'error'
                 });
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });

                  }

    }
	}
</script>

<style>
</style>


版权声明：本文为Bugxiu_fu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。