好网站,怎么更改网站里的tdk,正规网站建设空间哪个好,电商网站如何避免客户信息泄露先贴出效果图#xff1a;
留言按照倒序排列。在底部的文本框内输入留言后#xff0c;点击“留言”按钮#xff0c;留言将保存至数据库中#xff0c;同时刷新网页#xff0c;新留言出现在顶部。
当滚动条到底部时#xff0c;自动调用加载函数#xff0c;显示更多早期留…先贴出效果图
留言按照倒序排列。在底部的文本框内输入留言后点击“留言”按钮留言将保存至数据库中同时刷新网页新留言出现在顶部。
当滚动条到底部时自动调用加载函数显示更多早期留言。 前端代码index.vue:
script setup langtsimport { useBoard } from ./utils/hook;
import { ref, markRaw } from vue;const {boardInfo,dataList,onSubmit,onLazyLoad
} useBoard();/scripttemplate
divel-card shadowneverdiv classflex justify-betweenspan classtext-md font-medium留言区/span/div!-- el-scrollbar max-height380 classmt-3 --divel-timeline v-infinite-scrollonLazyLoad styleoverflow:auto classinfinite-listel-timeline-item classinfinite-list-itemv-for(item, index) in dataList:keyindexcenterplacementtop:timestampitem.dateel-cardp{{item.username}}/pp classtext-text_color_regular text-sm{{item.comments}}/p/el-card/el-timeline-item/el-timeline/div!-- /el-scrollbar --/el-cardel-cardel-inputv-modelboardInfo.commentsplaceholder请输入留言typetextarea:autosize{ minRows: 2, maxRows: 3 }maxlength256show-word-limit /divel-button typeprimary classsubmit-btn clickonSubmit(boardInfo)留言/el-button/div/el-card
div
/templatestyle langscss scoped
.infinite-list {height: 440px;padding: 0;margin: 0;list-style: none;
}
.infinite-list .infinite-list-item {display: flex;align-items: center;justify-content: center;height: 110px;margin: 10px;
}.submit-btn{float: right;margin-top: 10px;
}/style
hook.tsx滚动条滚到底时自动调用onLazyLoad函数提交留言调用onSubmit函数。 import { reactive, ref, toRaw, onMounted } from vue;
import { http } from /utils/http;
import { baseUrlApi } from ../../../api/utils;export function useBoard() {type Result {success: boolean;data?: Arrayany;}type ResultTable {success: boolean;data?: {list: Arrayany;total?: number;pageSize?: number;currentPage?: number;};};const boardInfo reactive({avatar: ,nickname: ,comments: ,username: 游客});const dataList ref([]);async function onSubmit(data) {const { success } await addBoard(boardInfo);if (success) {reload();}}const count ref(0);const currentPage ref(-1);const pageSize ref(-1);async function onLazyLoad() {count.value 1;console.log(---------lazyload---- count.value);const param {currentPage: currentPage.value,pageSize: pageSize.value,total: dataList.value.length};const { success, data } await lazyload(param);if (success) {dataList.value dataList.value.concat(data.list);currentPage.value data.currentPage;pageSize.value data.pageSize;}}async function reload() {count.value 1;const param {currentPage: 0,pageSize: 4,total: 0};const { success, data } await lazyload(param);if (success) {dataList.value data.list;currentPage.value data.currentPage;pageSize.value data.pageSize;}}onMounted(async () {});const addBoard (data?: object) {return http.requestResult(post, baseUrlApi(/board/addBoard), { data });};const lazyload (data?: object) {return http.requestResultTable(post, baseUrlApi(/board/getBoard-lazyload), { data });};return {boardInfo,dataList,onSubmit,onLazyLoad};}
后端代码BoardController.java
package com.test.controller;import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.test.Utils;
import com.test.entity.Board;
import com.test.service.BoardService;Controller
RequestMapping(/board)
public class BoardController {Autowiredprivate BoardService boardService;PostMapping(/getBoard-lazyload)ResponseBodypublic Map getBoardLazyLoad(RequestBody MapString,Object param) {Integer currentPage Utils.parseInt(param, currentPage);Integer pagesize Utils.parseInt(param, pageSize);Integer total Utils.parseInt(param, total);currentPage 1;pagesize 4;Map ret new HashMap();System.out.print( currentPage);ListBoard list boardService.getBoards(currentPage, pagesize,total);if(list.size()0) { Map map new HashMap();map.put(list, list);map.put(total, list.size());map.put(pageSize, pagesize);map.put(currentPage, currentPage);ret.put(data, map);ret.put(success, true);}else {ret.put(data, null);ret.put(success, false);}return ret;}PostMapping(/addBoard)ResponseBodyTransactional(value primaryTransactionManager)public Map addBoard(RequestBody MapString, Object param) {Map map new HashMap();try {Board b new Board();b.setComments(Utils.parseString(param, comments));b.setUsername(Utils.parseString(param, username));SimpleDateFormat sdf new SimpleDateFormat(yyyy-MM-dd HH:mm:ss);long timestamp System.currentTimeMillis();String dateString sdf.format(new Date(timestamp));b.setDate(dateString);boardService.addBoard(b); map.put(data, null);map.put(success, true);}catch(Exception e) {map.put(data, null);map.put(success, false);}return map;}}
Hibernate配置类PrimaryDbConfig
package com.test.conf;import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.boot.jdbc.DataSourceBuilder;
import org.springframework.boot.orm.jpa.EntityManagerFactoryBuilder;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Primary;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
import org.springframework.orm.jpa.JpaTransactionManager;
import org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean;
import org.springframework.transaction.PlatformTransactionManager;import javax.sql.DataSource;/*** 数据库配置** basePackagesJPA扫描配置* entityManagerFactoryRef实体扫描配置* transactionManagerRef事务配置** */
Configuration
EnableJpaRepositories(basePackages com.test.dao, entityManagerFactoryRef primaryEntityManager, transactionManagerRef primaryTransactionManager)
public class PrimaryDbConfig {private final Logger log LoggerFactory.getLogger(getClass());private DataSource dataSource;private LocalContainerEntityManagerFactoryBean entityManager;/** 创建数据库连接* Primary 配置多个数据源时用于标记主库* ConfigurationProperties 指定配置文件中的属性前缀** */PrimaryConfigurationProperties(prefix spring.datasource.primary)Bean(name primaryDataSource)public DataSource primaryDataSource() {System.out.printf();dataSource DataSourceBuilder.create().build();log.info(正在连接数据库1...);return dataSource;}/** 实体扫描配置** 方法名与类注解中的entityManagerFactoryRef的值保持一致配置多个数据源时方法名不能相同** */BeanPrimaryLocalContainerEntityManagerFactoryBean primaryEntityManager(EntityManagerFactoryBuilder builder) {log.info(正在扫描接数据库1的实体类...);entityManager builder.dataSource(dataSource).packages(com.test.entity).persistenceUnit(primaryPersistenceUnit).build();return entityManager;}/** 事务配置** 方法名与类注解中的transactionManagerRef的值保持一致配置多个数据源时方法名不能相同** */BeanPrimaryPlatformTransactionManager primaryTransactionManager(EntityManagerFactoryBuilder builder) {log.info(正在配置接数据库1的事务管理器...);return new JpaTransactionManager(entityManager.getObject());}
}
Hibernate配置文件application.properties
server.port5000
spring.datasource.primary.driver-class-namecom.mysql.cj.jdbc.Driver
spring.datasource.primary.jdbc-urljdbc:mysql://localhost:3306/数据库名称
spring.datasource.primary.usernameroot
spring.datasource.primary.password密码
spring.jpa.properties.hibernate.hbm2ddl.autoupdate
spring.jpa.show-sqltrue
spring.jpa.open-in-viewfalseBoardDaoImpl.java:
package com.test.dao;import java.util.List;import org.hibernate.HibernateException;
import org.springframework.stereotype.Repository;
import com.test.entity.Board;
import jakarta.persistence.EntityManager;
import jakarta.persistence.PersistenceContext;
import jakarta.persistence.Query;Repository
public class BoardDaoImpl implements BoardDao {PersistenceContext(unitName primaryEntityManager)private EntityManager entityManager;Override/*** page:当前起始页total已查询的总数*/public ListBoard getBoards(int page, int pagesize, int total) {try {page total / pagesize;String sql select * from board ORDER BY create_time DESC limit :start,:size ;Query query entityManager.createNativeQuery(sql, Board.class);query.setParameter(start, total);query.setParameter(size, pagesize);ListBoard result query.getResultList();return result;} catch (HibernateException e) {e.printStackTrace();}return null;}Overridepublic Boolean addBoard(Board b) {try {entityManager.persist(b);return true;} catch (HibernateException e) {e.printStackTrace();}return false;}}Board.java:
package com.test.entity;import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;Entity
Table(name board)
public class Board {IdGeneratedValue(strategy GenerationType.IDENTITY)private Long id;private String createTime;private String comments;private String username;public Long getId() {return id;}public void setId(Long id) {this.id id;}public String getDate() {return createTime;}public void setDate(String createTime) {this.createTime createTime;}public String getComments() {return comments;}public void setComments(String comments) {this.comments comments;}public String getUsername() {return username;}public void setUsername(String username) {this.username username;}}
