• 前后端分离页面(从数据库到前端、后端手把手教你如何搭建 -- 功能实现：增加查询)

    目录

    一、准备条件

    前台

    后台

     二、数据库设计

    建议不要导入，导入有乱码的风险；新建查询运行下面代码更快捷。

     三、导入前端项目

    导入后使用命令行打开黑窗口，测试一下有没有npm -v环境

     如果出现命令无效，就使用管理员身份打开黑窗口

    npm install 

    npm run dev

    四、后台项目导入步骤及编码

     如果忘记电脑的maven在那个盘，使用 mvn -version 查找本机 maven 地址​编辑

    生成mapper类中添加注解 @Repository 

    添加模糊查询方法

    编写SQL

     编写service ​编辑

    编写实现类

    创建controller类

     controller层代码提供

    五、前端编码

    action.js

    index.js 

     编写页面，BookList.vue

     六、前后台代码提供

    后台：

    application.yml

    jdbc.properties

    generatorConfig.xml

    BookMapper

    BookMapper.xml

    BookService

    BookServiceImpl

    BookController

    前台：

    action.js

    router-index.js

    BookList.vue

    一、准备条件

    小编事先准备了一份前台、后台的基本架构的代码，如果你手上有现有的那就按照小编的步骤来就ok，没有就需要创建spa项目、后台项目。

    前台：

       

     后台：

       

     二、数据库设计

    建议不要导入，导入有乱码的风险；新建查询运行下面代码更快捷。

    1. create database if not exists bookshop default charset utf8 collate utf8_general_ci;
    2.  
    3. use bookshop;
    4.  
    5. create table t_book(
    6.    id int not null auto_increment primary key comment '书本编号',
    7.    bookname varchar(50) not null comment '书本名称',
    8.    price float default 0 comment '书本价格',
    9.    booktype varchar(20) comment '书本类型'
    10. ) comment '书本信息表';
    11. insert into t_book(bookname,price,booktype) values
    12. ('三国演义',110,'战争'),
    13. ('西游记',120,'神话'),
    14. ('红楼梦',130,'古典');

          

     三、导入前端项目

    导入手上有的，没有就创建，至于怎么创建，小编就不详讲了。

    怎么导入嘞，你找到项目用鼠标拖进去，也可以右键找到项目地址导入。

     

    导入后使用命令行打开黑窗口，测试一下有没有npm -v环境

     如果出现命令无效，就使用管理员身份打开黑窗口

     

     跳转项目所在盘，将路径复制进去，再输入npm -v

    npm install 

    npm run dev

    或者在HBuilder X中，启动前端看一下页面能不能展示出来

     前端页面可以展示出来，准备后台编码

    四、后台项目导入步骤及编码

    打开IDEA

    找到，选中

     选中maven，finish下一步

     如果忘记电脑的maven在那个盘，使用 mvn -version 查找本机 maven 地址

     项目导入idea中，第一步-->Settings-->maven-->配置maven

    看 application.yml 该改的改一改，数据库名称什么的

     

     jdbc.properties 也改巴改巴，总之改为你电脑的数据库的密码或名称就ok

    generatorConfig.xml 更改指定数据库jdbc驱动jar包的位置，你的jar放哪嘞，应该忘记了吧，问题不大 
    mysql-connector-java\5.1.44\  拷贝它，在本机目录中搜索

    亦或者，打开更改配置maven的地址

     手动复制地址过来后，检查一下Javabean生成位置等，就可以编辑生成表了

    怎么生成呢，小编目前知道的方式有两种方式，教大家一个简单快捷的。

     

     BUILD SUCCESS ok了

    生成mapper类中添加注解 @Repository 

     

    添加模糊查询方法

    编写SQL

    1. <select id="query" resultType="com.zking.spboot.model.Book">
    2.     select <include refid="Base_Column_List"/> from t_book where 1=1
    3.     <if test="null!=bookname and ''!=bookname">
    4.       and bookname like concat('%',#{bookname},'%')
    5.     if>
    6.   select>

     编写service 

    记得将Mapper层的@Repository 注解删掉，service不用注解

    编写实现类

     ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

     添加注解@Service

    创建controller类

     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 小坤
    16.  * @create 2022-11-18-19:19
    17.  */
    18. @RestController
    19. @RequestMapping("/book")
    20. public class BookController {
    21.  
    22.     @Autowired
    23.     private BookService bookService;
    24.  
    25.     @RequestMapping("/query")
    26.     public JsonResponseBody query(Book book){
    27.         List books=bookService.query(book);
    28.         return new JsonResponseBody<>(200,"ok",books);
    29.     }
    30.  
    31.     @RequestMapping("/add")
    32.     public JsonResponseBody add(Book book){
    33.         bookService.insert(book);
    34.         return new JsonResponseBody<>();
    35.     }
    36.  
    37.     @Data
    38.     @AllArgsConstructor
    39.     @NoArgsConstructor
    40.     class JsonResponseBody{
    41.         private int code=200;
    42.         private String msg="ok";
    43.         private T data;
    44.     }
    45.  
    46. }

    运行测试一波

    五、前端编码

    先把这边编写好

    action.js

     ​​​​​​​

    index.js 

     

     编写页面，BookList.vue

    最终效果，想要展示成这样，我们拜读element ui 官网，找到自己需要的样式拷贝下来，改巴改巴

     表单form，搜索栏

     数据表格 table  随便找一个，小编就用第一个最丑的基础表格

     对话框 自定义内容

    表单校验

     ​​​​​​​

     六、前后台代码提供

    后台：

    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.

    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

    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:\SoftwareInstallPath\Maven\apache-maven-3.5.0-bin\apache-maven-3.5.0-bin\mvn_repository\mysql\mysql-connector-java\5.1.44\"/>
    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">
    78.             
    79.             
    80.             
    81.             
    82.         table>
    83.  
    84.     context>
    85. generatorConfiguration>

    BookMapper

    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. @Repository
    9. public interface BookMapper {
    10.     int deleteByPrimaryKey(Integer id);
    11.  
    12.     /**
    13.      * 根据书本名称模糊查询书本信息
    14.      * @param book
    15.      * @return
    16.      */
    17.     List query(Book book);
    18.  
    19.     /**
    20.      * 新增书本
    21.      * @param record
    22.      * @return
    23.      */
    24.     int insert(Book record);
    25.  
    26.     int insertSelective(Book record);
    27.  
    28.     Book selectByPrimaryKey(Integer id);
    29.  
    30.     int updateByPrimaryKeySelective(Book record);
    31.  
    32.     int updateByPrimaryKey(Book record);
    33. }

    BookMapper.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="query" resultType="com.zking.spboot.model.Book">
    22.     select <include refid="Base_Column_List"/> from t_book where 1=1
    23.     <if test="null!=bookname and ''!=bookname">
    24.       and bookname like concat('%',#{bookname},'%')
    25.     if>
    26.   select>
    27.   <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
    28.     delete from t_book
    29.     where id = #{id,jdbcType=INTEGER}
    30.   delete>
    31.   <insert id="insert" parameterType="com.zking.spboot.model.Book" >
    32.     insert into t_book (bookname, price,
    33.       booktype)
    34.     values (#{bookname,jdbcType=VARCHAR}, #{price,jdbcType=REAL},
    35.       #{booktype,jdbcType=VARCHAR})
    36.   insert>
    37.   <insert id="insertSelective" parameterType="com.zking.spboot.model.Book" >
    38.     insert into t_book
    39.     <trim prefix="(" suffix=")" suffixOverrides="," >
    40.       <if test="id != null" >
    41.         id,
    42.       if>
    43.       <if test="bookname != null" >
    44.         bookname,
    45.       if>
    46.       <if test="price != null" >
    47.         price,
    48.       if>
    49.       <if test="booktype != null" >
    50.         booktype,
    51.       if>
    52.     trim>
    53.     <trim prefix="values (" suffix=")" suffixOverrides="," >
    54.       <if test="id != null" >
    55.         #{id,jdbcType=INTEGER},
    56.       if>
    57.       <if test="bookname != null" >
    58.         #{bookname,jdbcType=VARCHAR},
    59.       if>
    60.       <if test="price != null" >
    61.         #{price,jdbcType=REAL},
    62.       if>
    63.       <if test="booktype != null" >
    64.         #{booktype,jdbcType=VARCHAR},
    65.       if>
    66.     trim>
    67.   insert>
    68.   <update id="updateByPrimaryKeySelective" parameterType="com.zking.spboot.model.Book" >
    69.     update t_book
    70.     <set >
    71.       <if test="bookname != null" >
    72.         bookname = #{bookname,jdbcType=VARCHAR},
    73.       if>
    74.       <if test="price != null" >
    75.         price = #{price,jdbcType=REAL},
    76.       if>
    77.       <if test="booktype != null" >
    78.         booktype = #{booktype,jdbcType=VARCHAR},
    79.       if>
    80.     set>
    81.     where id = #{id,jdbcType=INTEGER}
    82.   update>
    83.   <update id="updateByPrimaryKey" parameterType="com.zking.spboot.model.Book" >
    84.     update t_book
    85.     set bookname = #{bookname,jdbcType=VARCHAR},
    86.       price = #{price,jdbcType=REAL},
    87.       booktype = #{booktype,jdbcType=VARCHAR}
    88.     where id = #{id,jdbcType=INTEGER}
    89.   update>
    90. mapper>

    BookService

    1. package com.zking.spboot.service;
    2.  
    3. import com.zking.spboot.model.Book;
    4. import org.springframework.stereotype.Repository;
    5.  
    6. import java.util.List;
    7.  
    8. public interface BookService {
    9.     /**
    10.      * 根据书本名称模糊查询书本信息
    11.      * @param book
    12.      * @return
    13.      */
    14.     List query(Book book);
    15.  
    16.     /**
    17.      * 新增书本
    18.      * @param record
    19.      * @return
    20.      */
    21.     int insert(Book record);
    22.  
    23. }

    BookServiceImpl

    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. /**
    12.  * @author 小坤
    13.  * @create 2022-11-18-19:15
    14.  */
    15. @Service
    16. public class BookServiceImpl implements BookService {
    17.  
    18.     @Autowired
    19.     private BookMapper bookMapper;
    20.  
    21.     @Override
    22.     public List query(Book book) {
    23.         return bookMapper.query(book);
    24.     }
    25.  
    26.     @Override
    27.     public int insert(Book record) {
    28.         return bookMapper.insert(record);
    29.     }
    30.  
    31. }

    BookController

    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 小坤
    16.  * @create 2022-11-18-19:19
    17.  */
    18. @RestController
    19. @RequestMapping("/book")
    20. public class BookController {
    21.  
    22.     @Autowired
    23.     private BookService bookService;
    24.  
    25.     @RequestMapping("/query")
    26.     public JsonResponseBody query(Book book){
    27.         List books=bookService.query(book);
    28.         return new JsonResponseBody<>(200,"ok",books);
    29.     }
    30.  
    31.     @RequestMapping("/add")
    32.     public JsonResponseBody add(Book book){
    33.         bookService.insert(book);
    34.         return new JsonResponseBody<>();
    35.     }
    36.  
    37.     @Data
    38.     @AllArgsConstructor
    39.     @NoArgsConstructor
    40.     class JsonResponseBody{
    41.         private int code=200;
    42.         private String msg="ok";
    43.         private T data;
    44.     }
    45.  
    46. }

    前台：

    action.js

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

    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. })

    BookList.vue

    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="query">查询el-button>
    12. 				<el-button type="primary" @click="open">新增el-button>
    13. 			el-form-item>
    14. 		el-form>  
    15.  
    16.  
    17. 		
    18. 		<el-table :data="tableData" style="width: 100%;">
    19. 			<el-table-column prop="id" label="编号" >
    20. 			el-table-column>
    21. 			<el-table-column prop="bookname" label="书籍名称" >
    22. 			el-table-column>
    23. 			<el-table-column prop="price" label="书籍价格" >
    24. 			el-table-column>
    25. 			<el-table-column prop="booktype" label="书籍类别" >
    26. 			el-table-column>
    27. 		el-table>
    28.  
    29. 		
    30. 		<el-dialog @close="close" title="书籍新增" :visible.sync="dialogFormVisible">
    31. 			<el-form :model="book" :rules="rules" ref="book">
    32. 				<el-form-item prop="bookname" label="书籍名称" :label-width="formLabelWidth">
    33. 					<el-input v-model="book.bookname" autocomplete="off">el-input>
    34. 				el-form-item>
    35. 				<el-form-item prop="price" label="书籍价格" :label-width="formLabelWidth">
    36. 					<el-input v-model="book.price" autocomplete="off">el-input>
    37. 				el-form-item>
    38. 				<el-form-item prop="booktype" label="书籍类型" :label-width="formLabelWidth">
    39. 					<el-select style="width: 100%;" v-model="book.booktype" placeholder="请选择书籍类型">
    40. 						<el-option label="玄幻" value="玄幻">el-option>
    41. 						<el-option label="散文" value="散文">el-option>
    42. 					el-select>
    43. 				el-form-item>
    44. 			el-form>
    45. 			<div slot="footer" class="dialog-footer">
    46. 				<el-button @click="dialogFormVisible = false">取 消el-button>
    47. 				<el-button type="primary" @click="save()">确 定el-button>
    48. 			div>
    49. 		el-dialog>
    50.  
    51. 	div>
    52. template>
    53.  
    54. <script>
    55. 	export default {
    56. 		data: function() {
    57. 			return {
    58. 				ts: new Date().getTime(),
    59. 				bookname: '',
    60. 				tableData: [],
    61. 				dialogFormVisible: false,
    62. 				formLabelWidth: '100px',
    63. 				book: {
    64. 					bookname: '',
    65. 					price: '',
    66. 					booktype: ''
    67. 				},
    68. 				rules: {
    69. 					bookname: [{
    70. 							required: true,
    71. 							message: '请输入书籍名称',
    72. 							trigger: 'blur'
    73. 						}
    74. 					],
    75. 					price: [{
    76. 							required: true,
    77. 							message: '请输入书籍价格',
    78. 							trigger: 'blur'
    79. 						}
    80. 					],
    81. 					booktype: [{
    82. 							required: true,
    83. 							message: '请选择书籍类型',
    84. 							trigger: 'change'
    85. 						}
    86. 					],
    87. 				}
    88. 			};
    89. 		},
    90. 		methods: {
    91. 			close: function() {
    92. 				this.$refs['book'].resetFields();
    93. 			},
    94. 			save: function() {
    95. 				this.$refs['book'].validate((valid) => {
    96. 					if (valid) {
    97. 						//参数
    98. 						let url = this.axios.urls.Add;
    99. 						this.axios.post(url, this.book).then(resp => {
    100. 							let rs = resp.data;
    101. 							if (rs.code == 200) {
    102. 								//关闭对话框
    103. 								this.dialogFormVisible = false;
    104. 								//刷新列表
    105. 								this.query();
    106. 							} else {
    107.  
    108. 							}
    109. 						}).catch(err => {
    110.  
    111. 						});
    112. 					} else {
    113. 						console.log('error submit!!');
    114. 						return false;
    115. 					}
    116. 				});
    117. 			},
    118. 			open: function() {
    119. 				this.dialogFormVisible = true;
    120. 			},
    121. 			query: function() {
    122. 				//1、查询参数
    123. 				let params = {
    124. 					bookname:this.bookname
    125. 				}
    126. 				//2、请求路径
    127. 				let url = this.axios.urls.ALL;
    128. 				//3、发起请求
    129. 				this.axios.post(url, params).then(resp => {
    130. 					let rs = resp.data;
    131. 					console.log(rs);
    132. 					this.tableData = rs.data;
    133. 				}).catch(err => {
    134.  
    135. 				});
    136. 			}
    137. 		}
    138. 	}
    139. script>
    140.  
    141. <style>
    142. style>

    有小伙伴私信小编说：“在前端数据无法展示，后台查询增加生效了，数据库增加成功，但前端数据不展示。” 这里考虑前端的跨域问题

    ​​​​​​​

    这个问题只需要在controller层添加一行注解就可以解决了

     

     

     

    动手去玩一玩吧~拜拜

  • 相关阅读:
    web前端期末大作业：青岛旅游网页主题网站设计——青岛民俗4页 HTML+CSS 民俗网页设计与制作 web网页设计实例作业 html实训大作业
    1001 害死人不偿命的(3n+1)猜想Java
    【flask进阶】手把手带你搭建可扩展的flask项目脚手架
    前端构建工具 webpack 笔记
    代码随想录算法训练营第六十一天 | 503.下一个更大元素II、42. 接雨水
    七夕来临，程序员该如何花式表白？html+css实现简单七夕表白
    JavaScript 数组如何实现冒泡排序？
    大学生登记国家证书软件著作权提升就业资质
    产品质量模型
    详解图（性质，结构，遍历，最小生成树，最短路径）
  • 原文地址：https://blog.csdn.net/weixin_67450855/article/details/127938359