• 前后端分类 （增加，查询）

    目录

    一，后台代码

    二，前台代码

    一，后台代码

    一，配置文件

    application.yml

    1. server:
    2.   port: 8080
    3.   servlet:
    4.     context-path: /spboot
    5. spring:
    6.   datasource:
    7.     type: com.alibaba.druid.pool.DruidDataSource
    8.     driver-class-name: com.mysql.jdbc.Driver
    9.     url: jdbc:mysql://localhost:3306/bookshop?useUnicode=true&characterEncoding=utf8&useSSL=false
    10.     username: root
    11.     password: 123456
    12.     druid:
    13.       initial-size: 5
    14.       min-idle: 5
    15.       max-active: 20
    16.       max-wait: 60000
    17.       time-between-eviction-runs-millis: 60000
    18.       min-evictable-idle-time-millis: 30000
    19.       validation-query: SELECT 1 FROM DUAL
    20.       test-while-idle: true
    21.       test-on-borrow: true
    22.       test-on-return: false
    23.       pool-prepared-statements: true
    24.       max-pool-prepared-statement-per-connection-size: 20
    25.       filter:
    26.         stat:
    27.           merge-sql: true
    28.           slow-sql-millis: 5000
    29.       web-stat-filter:
    30.         enabled: true
    31.         url-pattern: /*
    32.         exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*"
    33.         session-stat-enable: true
    34.         session-stat-max-count: 100
    35.       stat-view-servlet:
    36.         enabled: true
    37.         url-pattern: /druid/*
    38.         reset-enable: true
    39.         login-username: admin
    40.         login-password: admin
    41.         allow: 127.0.0.1
    42.         #deny: 192.168.1.100
    43.   freemarker:
    44.     cache: false
    45.     charset: UTF-8
    46.     content-type: text/html
    47.     suffix: .ftl
    48.     template-loader-path: classpath:/templates
    49. mybatis:
    50.   mapper-locations: classpath:mapper/*.xml
    51.   type-aliases-package: com.zking.spboot.model
    52.   configuration:
    53.     map-underscore-to-camel-case: true
    54. logging:
    55.   level:
    56.     com.zking.spboot.mapper: debug
    57. pagehelper:
    58.   helperDialect: mysql
    59.   reasonable: true
    60.   supportMethodsArguments: true
    61.   params: count=countSql
    62.

     generatorConfig.xml

    1. "1.0" encoding="UTF-8" ?>
    2. generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
    3.         "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd" >
    4. <generatorConfiguration>
    5.     
    6.     <properties resource="jdbc.properties"/>
    7.  
    8.     
    9.     <classPathEntry location="E:\maven mulu\mvn_repository2\mysql\mysql-connector-java\5.1.44\mysql-connector-java-5.1.44.jar"/>
    10.  
    11.     
    12.     <context id="infoGuardian">
    13.         
    14.         <commentGenerator>
    15.             <property name="suppressAllComments" value="true"/>
    16.             <property name="suppressDate" value="true"/> 
    17.         commentGenerator>
    18.  
    19.         
    20.         <jdbcConnection driverClass="${jdbc.driver}"
    21.                         connectionURL="${jdbc.url}" userId="${jdbc.username}" password="${jdbc.password}"/>
    22.  
    23.         
    24.         <javaTypeResolver>
    25.             
    26.             <property name="forceBigDecimals" value="false"/>
    27.         javaTypeResolver>
    28.  
    29.         
    30.         
    31.         
    32.         <javaModelGenerator targetPackage="com.zking.spboot.model"
    33.                             targetProject="src/main/java">
    34.             
    35.             <property name="enableSubPackages" value="false"/>
    36.             
    37.             <property name="constructorBased" value="true"/>
    38.             
    39.             <property name="trimStrings" value="false"/>
    40.             
    41.             <property name="immutable" value="false"/>
    42.         javaModelGenerator>
    43.  
    44.         
    45.         <sqlMapGenerator targetPackage="com.zking.spboot.mapper"
    46.                          targetProject="src/main/resources">
    47.             
    48.             <property name="enableSubPackages" value="false"/>
    49.         sqlMapGenerator>
    50.  
    51.         
    52.         
    53.         
    54.         
    55.         <javaClientGenerator targetPackage="com.zking.spboot.mapper"
    56.                              targetProject="src/main/java" type="XMLMAPPER">
    57.             
    58.             <property name="enableSubPackages" value="false"/>
    59.         javaClientGenerator>
    60.  
    61.         
    62.         
    63.         
    64.         
    65.         
    66.         
    67.                
    68.                
    69.             
    70.             
    71.             
    72.             
    73.         
    74.  
    75.         <table schema="" tableName="t_book" domainObjectName="Book"
    76.                enableCountByExample="false" enableDeleteByExample="false"
    77.                enableSelectByExample="false" enableUpdateByExample="false">
    82.         table>
    83.  
    84.     context>
    85. generatorConfiguration>

    jdbc.properties

    1. jdbc.driver=com.mysql.jdbc.Driver
    2. jdbc.url=jdbc:mysql://localhost:3306/bookshop?useUnicode=true&characterEncoding=UTF-8
    3. jdbc.username=root
    4. jdbc.password=123456

    二，代码部分

     

    **Mapper.xml

    1. "1.0" encoding="UTF-8" ?>
    2. mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    3. <mapper namespace="com.zking.spboot.mapper.BookMapper" >
    4.   <resultMap id="BaseResultMap" type="com.zking.spboot.model.Book" >
    5.     <constructor >
    6.       <idArg column="id" jdbcType="INTEGER" javaType="java.lang.Integer" />
    7.       <arg column="bookname" jdbcType="VARCHAR" javaType="java.lang.String" />
    8.       <arg column="price" jdbcType="REAL" javaType="java.lang.Float" />
    9.       <arg column="booktype" jdbcType="VARCHAR" javaType="java.lang.String" />
    10.     constructor>
    11.   resultMap>
    12.   <sql id="Base_Column_List" >
    13.     id, bookname, price, booktype
    14.   sql>
    15.   <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
    16.     select 
    17.     <include refid="Base_Column_List" />
    18.     from t_book
    19.     where id = #{id,jdbcType=INTEGER}
    20.   select>
    21.     <select id="qurey" resultType="com.zking.spboot.model.Book">
    22.       select <include refid="Base_Column_List">include> from t_book where 1=1
    23.       <if test="bookname!='' and bookname!=null">
    24.         and bookname like concat('%',#{bookname},'%')
    25.       if>
    26.  
    27.     select>
    28.     <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
    29.     delete from t_book
    30.     where id = #{id,jdbcType=INTEGER}
    31.   delete>
    32.   <insert id="insert" parameterType="com.zking.spboot.model.Book" >
    33.     insert into t_book (id, bookname, price, 
    34.       booktype)
    35.     values (#{id,jdbcType=INTEGER}, #{bookname,jdbcType=VARCHAR}, #{price,jdbcType=REAL}, 
    36.       #{booktype,jdbcType=VARCHAR})
    37.   insert>
    38.   <insert id="insertSelective" parameterType="com.zking.spboot.model.Book" >
    39.     insert into t_book
    40.     <trim prefix="(" suffix=")" suffixOverrides="," >
    41.       <if test="id != null" >
    42.         id,
    43.       if>
    44.       <if test="bookname != null" >
    45.         bookname,
    46.       if>
    47.       <if test="price != null" >
    48.         price,
    49.       if>
    50.       <if test="booktype != null" >
    51.         booktype,
    52.       if>
    53.     trim>
    54.     <trim prefix="values (" suffix=")" suffixOverrides="," >
    55.       <if test="id != null" >
    56.         #{id,jdbcType=INTEGER},
    57.       if>
    58.       <if test="bookname != null" >
    59.         #{bookname,jdbcType=VARCHAR},
    60.       if>
    61.       <if test="price != null" >
    62.         #{price,jdbcType=REAL},
    63.       if>
    64.       <if test="booktype != null" >
    65.         #{booktype,jdbcType=VARCHAR},
    66.       if>
    67.     trim>
    68.   insert>
    69.   <update id="updateByPrimaryKeySelective" parameterType="com.zking.spboot.model.Book" >
    70.     update t_book
    71.     <set >
    72.       <if test="bookname != null" >
    73.         bookname = #{bookname,jdbcType=VARCHAR},
    74.       if>
    75.       <if test="price != null" >
    76.         price = #{price,jdbcType=REAL},
    77.       if>
    78.       <if test="booktype != null" >
    79.         booktype = #{booktype,jdbcType=VARCHAR},
    80.       if>
    81.     set>
    82.     where id = #{id,jdbcType=INTEGER}
    83.   update>
    84.   <update id="updateByPrimaryKey" parameterType="com.zking.spboot.model.Book" >
    85.     update t_book
    86.     set bookname = #{bookname,jdbcType=VARCHAR},
    87.       price = #{price,jdbcType=REAL},
    88.       booktype = #{booktype,jdbcType=VARCHAR}
    89.     where id = #{id,jdbcType=INTEGER}
    90.   update>
    91. mapper>

     **Mapper

    1. package com.zking.spboot.mapper;
    2.  
    3. import com.zking.spboot.model.Book;
    4. import org.springframework.stereotype.Repository;
    5.  
    6. import java.util.List;
    7.  
    8.  
    9. @Repository
    10. public interface BookMapper {
    11.     int deleteByPrimaryKey(Integer id);
    12.  
    13.     //增加
    14.     int insert(Book record);
    15.     //模糊查询
    16.     List qurey(Book book);
    17.  
    18.     int insertSelective(Book record);
    19.  
    20.     Book selectByPrimaryKey(Integer id);
    21.  
    22.     int updateByPrimaryKeySelective(Book record);
    23.  
    24.     int updateByPrimaryKey(Book record);
    25. }

    实体类：

    1. package com.zking.spboot.model;
    2.  
    3. public class Book {
    4.     private Integer id;
    5.  
    6.     private String bookname;
    7.  
    8.     private Float price;
    9.  
    10.     private String booktype;
    11.  
    12.     public Book(Integer id, String bookname, Float price, String booktype) {
    13.         this.id = id;
    14.         this.bookname = bookname;
    15.         this.price = price;
    16.         this.booktype = booktype;
    17.     }
    18.  
    19.     public Book() {
    20.         super();
    21.     }
    22.  
    23.     public Integer getId() {
    24.         return id;
    25.     }
    26.  
    27.     public void setId(Integer id) {
    28.         this.id = id;
    29.     }
    30.  
    31.     public String getBookname() {
    32.         return bookname;
    33.     }
    34.  
    35.     public void setBookname(String bookname) {
    36.         this.bookname = bookname;
    37.     }
    38.  
    39.     public Float getPrice() {
    40.         return price;
    41.     }
    42.  
    43.     public void setPrice(Float price) {
    44.         this.price = price;
    45.     }
    46.  
    47.     public String getBooktype() {
    48.         return booktype;
    49.     }
    50.  
    51.     public void setBooktype(String booktype) {
    52.         this.booktype = booktype;
    53.     }
    54. }

    **Service

    1. package com.zking.spboot.service;
    2.  
    3. import com.zking.spboot.model.Book;
    4.  
    5. import java.util.List;
    6.  
    7.  
    8.  
    9. public interface BookService {
    10.  
    11.     //增加
    12.     int insert(Book record);
    13.     //模糊查询
    14.     List qurey(Book book);
    15.  
    16. }

     ***Impl

    1. package com.zking.spboot.service.impl;
    2.  
    3. import com.zking.spboot.mapper.BookMapper;
    4. import com.zking.spboot.model.Book;
    5. import com.zking.spboot.service.BookService;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.stereotype.Service;
    8.  
    9. import java.util.List;
    10.  
    11. @Service
    12. public class BookServiceImpl implements BookService {
    13.  
    14.  
    15.     @Autowired
    16.     private BookMapper bookMapper;
    17.  
    18.     @Override
    19.     public int insert(Book record) {
    20.         return bookMapper.insert(record);
    21.     }
    22.  
    23.     @Override
    24.     public List qurey(Book book) {
    25.         return bookMapper.qurey(book);
    26.     }
    27. }

     **Controller

    1. package com.zking.spboot.controller;
    2.  
    3. import com.zking.spboot.model.Book;
    4. import com.zking.spboot.service.BookService;
    5. import lombok.AllArgsConstructor;
    6. import lombok.Data;
    7. import lombok.NoArgsConstructor;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.web.bind.annotation.RequestMapping;
    10. import org.springframework.web.bind.annotation.RestController;
    11.  
    12. import java.util.List;
    13.  
    14. /**
    15.  * @author ruojuan
    16.  * @site www.ruojuan.com
    17.  * @company 玉渊工作室
    18.  * @create 2022年11月18日 18:34
    19.  **/
    20. @RestController
    21. @RequestMapping("/book")
    22. public class BookController {
    23.  
    24.     @Autowired
    25.     private BookService bookService;
    26.  
    27.  
    28.     //模糊查询
    29.     @RequestMapping("/list")
    30.     public JsonResponseBody list(Book book){
    31.  
    32.         List qurey = bookService.qurey(book);
    33.  
    34.         return new JsonResponseBody<>(1,"ok",qurey);
    35.     }
    36.  
    37.  
    38.  
    39.     //增加
    40.     @RequestMapping("/add")
    41.     public JsonResponseBody insert(Book book){
    42.  
    43.         int insert = bookService.insert(book);
    44.  
    45.         return new JsonResponseBody<>();
    46.     }
    47.  
    48.  
    49.  
    50.  
    51.  
    52.     @Data
    53.     @AllArgsConstructor
    54.     @NoArgsConstructor
    55.     class JsonResponseBody{
    56.  
    57.         private Integer code = 200;
    58.  
    59.         private String msg="ok";
    60.  
    61.         private T date;
    62.  
    63.  
    64.     }
    65.  
    66. }

    解决跨域问题：

    1. package com.zking.spboot.util;
    2.  
    3. import org.springframework.context.annotation.Configuration;
    4. import org.springframework.web.servlet.config.annotation.CorsRegistry;
    5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    6.  
    7. @Configuration
    8. public class CorsMapping implements WebMvcConfigurer {
    9.  
    10.     /*@Override
    11.     *
    12.      * 重新跨域支持方法
    13.      * CorsRegistry  开启跨域注册
    14.      */
    15.     public void addCorsMappings(CorsRegistry registry) {
    16.         //addMapping 添加可跨域的请求地址
    17.         registry.addMapping("/**")
    18.                 //设置跨域 域名权限 规定由某一个指定的域名+端口能访问跨域项目
    19.                 .allowedOrigins("*")
    20.                 //是否开启cookie跨域
    21.                 .allowCredentials(false)
    22.                 //规定能够跨域访问的方法类型
    23.                 .allowedMethods("GET","POST","DELETE","PUT","OPTIONS")
    24.                 //添加验证头信息  token
    25.                 //.allowedHeaders()
    26.                 //预检请求存活时间 在此期间不再次发送预检请求
    27.                 .maxAge(3600);
    28.     }
    29. }

    二，前台代码

    首先输入命令 npm install

     npm install

     

    main.js

    1. // The Vue build version to load with the `import` command
    2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    3. import Vue from 'vue'
    4. import ElementUI from 'element-ui' //新添加1
    5. import 'element-ui/lib/theme-chalk/index.css' //新添加2，避免后期打包样式不同，要放在import App from './App';之前
    6.  
    7. import axios from '@/api/http'             //vue项目对axios的全局配置
    8.  
    9. import App from './App'
    10. import router from './router'
    11.  
    12. import VueAxios from 'vue-axios' 
    13. Vue.use(VueAxios,axios)
    14.  
    15. Vue.use(ElementUI)   //新添加3
    16. Vue.config.productionTip = false
    17.  
    18. /* eslint-disable no-new */
    19. new Vue({
    20.   el: '#app',
    21.   router,
    22.   components: { App },
    23.   template: ''
    24. })

     App.vue

    1. <template>
    2.   <div id="app">
    3.     <router-view/>
    4.   div>
    5. template>
    6.  
    7. <script>
    8. export default {
    9.   name: 'App'
    10. }
    11. script>
    12.  
    13. <style>
    14. #app {
    15.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
    16.   -webkit-font-smoothing: antialiased;
    17.   -moz-osx-font-smoothing: grayscale;
    18.   text-align: center;
    19.   color: #2c3e50;
    20.   margin-top: 60px;
    21. }
    22. style>

     router/index.js

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import BookList from '@/views/BookList'
    4.  
    5. Vue.use(Router)
    6.  
    7. export default new Router({
    8.   routes: [
    9.     {
    10.       path: '/',
    11.       name: 'BookList',
    12.       component: BookList
    13.     }
    14.   ]
    15. })

    api/actoin.js

    1. /**
    2.  * 对后台请求的地址的封装，URL格式如下：
    3.  * 模块名_实体名_操作
    4.  */
    5. export default {
    6. 	//服务器
    7. 	'SERVER': 'http://localhost:8080/spboot', 
    8. 	'getAll': '/book/list',
    9. 	'add': '/book/add',
    10. 	//获得请求的完整地址，用于mockjs测试时使用
    11. 	'getFullPath': k => {
    12. 		return this.SERVER + this[k];
    13. 	}
    14. }

    api/http.js

    1. /**
    2.  * vue项目对axios的全局配置
    3.  */
    4. import axios from 'axios'
    5. import qs from 'qs'
    6.  
    7. //引入action模块，并添加至axios的类属性urls上
    8. import action from '@/api/action'
    9. axios.urls = action
    10.  
    11. // axios默认配置
    12. axios.defaults.timeout = 10000; // 超时时间
    13. // axios.defaults.baseURL = 'http://localhost:8080/crm'; // 默认地址
    14. axios.defaults.baseURL = action.SERVER;
    15.  
    16. //整理数据
    17. // 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
    18. axios.defaults.transformRequest = function(data) {
    19. 	data = qs.stringify(data);
    20. 	return data;
    21. };
    22.  
    23.  
    24. // 请求拦截器
    25. axios.interceptors.request.use(function(config) {
    26. 	// let jwt = sessionStorage.getItem('jwt');
    27. 	// if (jwt) {
    28. 	// 	config.headers['jwt'] = jwt;
    29. 	// }
    30. 	return config;
    31. }, function(error) {
    32. 	return Promise.reject(error);
    33. });
    34.  
    35. // 响应拦截器
    36. axios.interceptors.response.use(function(response) {
    37. 	// let jwt = response.headers['jwt'];
    38. 	// if (jwt) {
    39. 	// 	sessionStorage.setItem('jwt', jwt);
    40. 	// }
    41. 	return response;
    42. }, function(error) {
    43. 	return Promise.reject(error);
    44. });
    45.  
    46. // // 路由请求拦截
    47. // // http request 拦截器
    48. // axios.interceptors.request.use(
    49. // 	config => {
    50. // 		//config.data = JSON.stringify(config.data);  
    51. // 		//config.headers['Content-Type'] = 'application/json;charset=UTF-8';
    52. // 		//config.headers['Token'] = 'abcxyz';
    53. // 		//判断是否存在ticket，如果存在的话，则每个http header都加上ticket
    54. // 		// if (cookie.get("token")) {
    55. // 		// 	//用户每次操作，都将cookie设置成2小时
    56. // 		// 	cookie.set("token", cookie.get("token"), 1 / 12)
    57. // 		// 	cookie.set("name", cookie.get("name"), 1 / 12)
    58. // 		// 	config.headers.token = cookie.get("token");
    59. // 		// 	config.headers.name = cookie.get("name");
    60. // 		// }
    61. // 		return config;
    62. // 	},
    63. // 	error => {
    64. // 		return Promise.reject(error.response);
    65. // 	});
    66.  
    67. // // 路由响应拦截
    68. // // http response 拦截器
    69. // axios.interceptors.response.use(
    70. // 	response => {
    71. // 		if (response.data.resultCode == "404") {
    72. // 			console.log("response.data.resultCode是404")
    73. // 			// 返回 错误代码-1 清除ticket信息并跳转到登录页面
    74. // 			//      cookie.del("ticket")
    75. // 			//      window.location.href='http://login.com'
    76. // 			return
    77. // 		} else {
    78. // 			return response;
    79. // 		}
    80. // 	},
    81. // 	error => {
    82. // 		return Promise.reject(error.response) // 返回接口返回的错误信息
    83. // 	});
    84.  
    85.  
    86.  
    87. export default axios;

    view/界面

    1. <template>
    2. 	<div>
    3. 		<h1 align="center">SpringBoot阶段机试，ts={{ts}}h1>
    4. 		
    5. 		
    6. 		<el-form :inline="true">
    7.         <el-form-item label="书本名称:">
    8. 		<el-input v-model="bookname" placeholder="请输入书本名称">el-input>
    9. 		el-form-item>
    10. 		<el-form-item>
    11. 		<el-button type="primary" @click="onSubmit">查询el-button>
    12. 		<el-button type="primary" @click="open">增加el-button>
    13. 		el-form-item>
    14. 		el-form>
    15. 		
    16. 		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
    17. 		  <el-table-column prop="id" label="书本编号" width="180">
    18. 		  el-table-column>
    19. 		  <el-table-column prop="bookname" label="书本名称" width="180">
    20. 		  el-table-column>
    21. 		  <el-table-column prop="price" label="书本价格" width="180">
    22. 		  el-table-column>
    23. 		  <el-table-column prop="booktype" label="书本类型" width="180">
    24. 		  el-table-column>
    25. 		el-table> 
    26. 		
    27. 		<el-dialog @close="close" title="增加书籍" :visible.sync="dialogFormVisible">
    28. 		<el-form :model="book" :rules="rules" ref="book">
    29. 		<el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth">
    30. 		<el-input v-model="book.bookname" autocomplete="off">el-input>
    31. 		el-form-item>
    32. 		<el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
    33. 		<el-input v-model="book.price" autocomplete="off">el-input>
    34. 		el-form-item>
    35.        <el-form-item prop="booktype" label="书本类型" :label-width="formLabelWidth">
    36.       <el-select v-model="book.booktype" placeholder="请选择书本类型">
    37.         <el-option label="历史" value="历史">el-option>
    38.         <el-option label="科学" value="科学">el-option>
    39.       el-select>
    40.     el-form-item>
    41.   el-form>
    42.   <div slot="footer" class="dialog-footer">
    43.     <el-button @click="dialogFormVisible = false">取 消el-button>
    44.     <el-button type="primary" @click="onSubmit1">确 定el-button>
    45.   div>
    46. el-dialog>
    47. 		
    48. 		
    49.  
    50. 		
    51. 		
    52. 		
    53. 		
    54. 		
    55. 	div>
    56. template>
    57.  
    58. <style>
    59.   .el-table .warning-row {
    60.     background: oldlace;
    61.   }
    62.  
    63.   .el-table .success-row {
    64.     background: #f0f9eb;
    65.   }
    66. style>
    67.    
    68.  
    69.  
    70.  
    71. <script>
    72. 	export default {
    73. 		data:function(){
    74. 			return {
    75. 				ts:new Date().getTime(),
    76. 				bookname:'',
    77. 				tableData:[],
    78. 				dialogFormVisible:false,
    79. 				book:{
    80. 					bookname:'',
    81. 					price:'',
    82. 					booktype:'',
    83. 				},
    84. 				rules: {
    85. 				  bookname: [
    86. 					{ required: true, message: '请输入书本名称', trigger: 'blur' },
    87. 				  ],
    88. 				  price: [
    89. 				  	{ required: true, message: '请输入书本价格', trigger: 'blur' },
    90. 				  ],
    91. 				  booktype: [
    92. 				  	{ required: true, message: '请选择书本类型', trigger: 'blur' },
    93. 				  ],
    94. 				},
    95. 			};
    96. 		},
    97. 		methods:{
    98. 			tableRowClassName({row, rowIndex}) {
    99.         if (rowIndex === 1) {
    100.           return 'warning-row';
    101.         } else if (rowIndex === 3) {
    102.           return 'success-row';
    103.         }
    104.         return '';
    105.       },
    106. 			open:function(){
    107. 				this.dialogFormVisible=true;
    108. 			},
    109. 			close:function(){
    110. 				this.$refs['book'].resetFields();
    111. 			},
    112. 			onSubmit:function(){
    113. 				//1.查询参数
    114. 				let params = {
    115. 					bookname:this.bookname
    116. 				};
    117. 				//2.请求路径
    118. 				let url = this.axios.urls.getAll;
    119. 				//3.发送
    120. 				this.axios.post(url,params).then(resp=>{
    121. 					let rs = resp.data;
    122. 					console.log(rs);
    123. 					this.tableData = rs.date;
    124. 				}).catch(err=>{
    125. 					
    126. 				})
    127. 			},
    128. 			onSubmit1:function(){
    129. 				this.$refs['book'].validate((valid) => {
    130. 					if(valid){
    131. 						let url = this.axios.urls.add;
    132. 						this.axios.post(url,this.book).then(resp=>{
    133. 							let rs = resp.data;
    134. 							if(rs.code==200){
    135. 								this.dialogFormVisible=false;
    136. 								this.onSubmit();
    137. 							}
    138. 						}).catch(err=>{
    139. 							
    140. 						})
    141. 					}else{
    142. 						console.log('error submit!!');
    143. 						return false;
    144. 					}
    145. 				});
    146. 				
    147. 			}
    148. 		}
    149. 		
    150. 		
    151. 		
    152. 		
    153. 	}
    154. script>
    155.  
    156. <style>
    157. style>

    ==========================以下内容一样可以不用看了===========================

     


       


     


       


     

     

  • 相关阅读:
    这些仪表板常用的数据分析模型，你都见过吗？
    或许你也想做一个这样的动态魔方吗？
    Ribbon负载均衡
    MySQL数据库管理
    怎样自动开始播放网页视频？
    Windows系统配置CUDA编程环境
    pdfjs简单用法
    【Linux】基础：进程的概念
    vue生态技术总结
    go fmt包详解
  • 原文地址：https://blog.csdn.net/weixin_67338832/article/details/127957286