admin管理员组文章数量:1616431
孟郎诗词3.0版本问题总结
- 一.ElasticSearch
- 1. ES报错java.lang.RuntimeException: can not run elasticsearch as root
- 2.ES配置外网访问
- 3. ES后台启动
- 4. 解决elasticsearch max virtual memory areas vm.max_map_count [65530] is too low......报错
- 5. 解决报错the default discovery settings are unsuitable for production use; at least one of [discovery.seed_hosts, discovery.seed_providers, cluster.initial_master_nodes] must be configured
- 7. 最完整的安装步骤
- 8.ES查询时指定分析器
- 9. ElasticSearch版本7.6.2 创建索引示例
- 10.ES全量同步到MySQL示例
- 11.ES查询示例
- 12. 查看某个字段的分词效果
- 13. 实战参考：
- 14.match_phrase踩坑
- 15.导入诗人数据示例
- 16.Logstash 启动报错 no implicit conversion of Integer into String
- 二、后台管理-后端
- 1. Spring Boot 不同环境的配置文件
- 2. 自定义IDEA注解
- 3.关于MybatisPlus的主键
- 4. MyBatisPlus如何只查询部分字段
- 5. 关于FastDFS配置的博客
- 6. 关于上传图片的缩略图
- 7.MyBatis处理时间格式
- 8.启动nginx之前需要先启动fastdfs
- 三、后台管理-前端
- 1. less报错`TypeError: this.getOptions is not a function`
- 2. Spring Security解决跨域问题
- 3.axios发送表单
- 4.elementui解决current-page失效问题
- 5. 关于Vuex中**mapState`, `mapGetters`, `mapActions` 和 `mapMutation** 以及modules下的使用
- 6.watch监听Vuex值的变化
- 7. 清空对象
- 8. 文件上传路径
- 9. 关于less的使用
- 四、前台-PC端
- 1. youku渐变背景样式
- 2. Vue中安装sass
- 3. 关于vue-awesome-swiper的使用
- 4. Swiper自定义向前向后按钮样式
- 5. 解决谷歌浏览器点击元素有黑边框问题
- 6. Vue更改默认端口
- 7. 绝对定位居中
- 8. 修改input标签placeholer的颜色
- 9. 解决swiper点击后不再自动轮播的问题
- 10. Vue中style中背景图片用变量拼接的方式
- 11. 关于scoped的样式覆盖问题
- 12. 文字的阴影效果
- 13. 禁止用户选择文字
- 14. 关于heigh:100%
- 15. 安装hanzi-writer
- 16. 实现点击查看更多的功能
- 17. 无限滚动插件
- 18. 解决Vue的History模式下的404问题
- 19.解决swiper图片不会自适应问题
- 20. 解决Vue路由跳转滚动条位置问题
- 21. Vue操作剪切板
- 五、前台后端
- 1. MySQL随机查询
- 2. springboot打包错误：Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0..
- 3.Tomcat配置多个项目
- 4.Tomcat报错The AJP Connector is configured with secretRequired="true" but the secret attribute is either null or "". This combination is not valid
- 5.解决Tomcat启动慢的问题
- 六、前台-移动端
- 1.关于uview主题
- 2.路由推荐使用
- 3.自定义导航栏
- 4.模拟器请求报错
- 5.在uniapp中使用axios
- 6. 在uniapp使用iconfont远程图标
- 7.Vue组件名称的坑
- 8.uniapp实现超出文本显示省略号
- 9.自定义点击事件
- 10.Vue的子传父
- 11.关于搜索页面各个模块的切换
- 12. .9图的制作
- 13. html2canvas相关问题
- 14.文字竖排
- 15. 在使用router插件之后，实现退出应用
- 16.最强居中合集
- 17.解决图片模糊问题
- 18.解决uView中`u-tabs-swiper`滚动条移位问题
- 19. Nginx配置PC和移动端项目
- 20. 解决搜索页面看不到加载中
- 21. 解决启动图延时无效
孟郎诗词网地址：http://www.menglangpoem/home
一.ElasticSearch
1. ES报错java.lang.RuntimeException: can not run elasticsearch as root
有个比较魔幻的点，貌似必须先用root启动并报错之后，再进行后面的操作，才可以正常执行
https://blog.csdn/weixin_41931868/article/details/87859728
https://blog.csdn/abcdad/article/details/93744898
2.ES配置外网访问
https://blog.csdn/qq_19264385/article/details/82950150
3. ES后台启动
./elasticsearch -d
4. 解决elasticsearch max virtual memory areas vm.max_map_count [65530] is too low…报错
https://blog.csdn/qq_41618510/article/details/88314032?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
5. 解决报错the default discovery settings are unsuitable for production use; at least one of [discovery.seed_hosts, discovery.seed_providers, cluster.initial_master_nodes] must be configured
https://blog.csdn/qq_43655835/article/details/104637625
7. 最完整的安装步骤
https://blog.csdn/Ita_Orient/article/details/104545179/
8.ES查询时指定分析器
GET /_search
{
"query": {
"match_phrase": {
"message": {
"query": "this is a test",
"analyzer": "my_analyzer"
}
}
}
}
https://elasticsearch/question/4979
https://blog.csdn/napoay/article/details/80170863
9. ElasticSearch版本7.6.2 创建索引示例
PUT /poem
{
"settings": {
"number_of_shards": 3,
"number_of_replicas": 1,
"index" : {
"analysis.analyzer.default.type": "ik_max_word"
},
"analysis": {
"analyzer": {
"ik_html": {
"tokenizer": "ik_max_word",
"char_filter": ["html_strip"]
}
}
}
},
"mappings": {
"properties":{
"id":{
"type":"long"
},
"title":{
"type":"text"
},
"content":{
"type":"text",
"analyzer":"ik_html"
},
"poetId":{
"type":"long"
},
"notes":{
"type":"text",
"analyzer":"ik_html"
},
"translation":{
"type":"text",
"analyzer":"ik_html"
},
"background":{
"type":"text",
"analyzer":"ik_html"
},
"appreciation":{
"type":"text",
"analyzer":"ik_html"
},
"poetName":{
"type":"text"
},
"dynasty":{
"type":"text"
}
}
}
}
PUT /poet
{
"settings": {
"number_of_shards": 3,
"number_of_replicas": 1,
"index" : {
"analysis.analyzer.default.type": "ik_max_word"
},
"analysis": {
"analyzer": {
"ik_html": {
"tokenizer": "ik_max_word",
"char_filter": ["html_strip"]
}
}
}
},
"mappings": {
"properties":{
"id":{
"type":"long"
},
"name":{
"type":"text",
"analyzer": "ik_html"
},
"avatar":{
"type":"keyword"
},
"dynasty":{
"type": "text"
},
"intro":{
"type": "text",
"analyzer": "ik_html"
},
"story":{
"type": "text",
"analyzer": "ik_html"
},
"achievement":{
"type": "text",
"analyzer": "ik_html"
},
"life":{
"type": "text",
"analyzer": "ik_html"
},
"evaluation":{
"type": "text",
"analyzer": "ik_html"
}
}
}
}
10.ES全量同步到MySQL示例
input {
jdbc {
jdbc_driver_library => "./mysql/mysql-connector-java-5.1.34.jar"
jdbc_driver_class => "com.mysql.jdbc.Driver"
# 数据库相关配置
jdbc_connection_string => "jdbc:mysql://localhost:3306/poetry?useSSL=false&serverTimezone=UTC&characterEncoding=utf8"
jdbc_user => "root"
jdbc_password => ""
statement => "SELECT poem.*,poet.dynasty as dynasty,poet.`name` as poetname FROM poem INNER JOIN poet on poem.poet_id = poet.id where poem.id > :sql_last_value"
#指定追踪的字段，
tracking_column => "id"
#记录最后一次运行的结果
record_last_run => true
jdbc_paging_enabled => "true"
jdbc_page_size => "2000"
schedule => "*/10 * * * *" # 与crontab格式一致，如果一开始logsatsh一直不动，可能是因为这里设置的时间过长
}
}
filter {
mutate {
rename => { "poet_id" => "poetId" }
rename => { "poetname" => "poetName" }
}
}
output {
stdout {
codec => rubydebug
}
elasticsearch {
hosts => "localhost"
#将mysql数据加入myindex索引下，会自动创建
index => "poem"
# 自增ID 需要关联的数据库中有有一个id字段，对应索引的id号
document_id => "%{id}"
}
}
11.ES查询示例
GET poem_index/_search
{
"query": {
"bool": {
"should": [
{"match": {
"content": "明月"
}},
{
"match": {
"title": "雨"
}
},
{
"match": {
"appreciation": "明月"
}
},
{
"match_phrase": {
"content": "清风明月"
}
}
]
}
},
"highlight": {
"fields": {
"content": {},
"title": {}
},
"fragment_size":20
}
}
12. 查看某个字段的分词效果
GET /${index}/${type}/${id}/_termvectors?fields=${fields_name}
13. 实战参考：
https://mp.weixin.qq/s/z8lMdRrMFD5v_0ijqnPvgQ
14.match_phrase踩坑
https://wwwblogs/pyspark/p/8817706.html
15.导入诗人数据示例
刚导入完毕后显示数据量为0，不要慌，过一段时间就有了。
input {
jdbc {
jdbc_driver_library => "./mysql/mysql-connector-java-5.1.34.jar"
jdbc_driver_class => "com.mysql.jdbc.Driver"
# 数据库相关配置
jdbc_connection_string => "jdbc:mysql://localhost:3306/poetry?useSSL=false&serverTimezone=UTC&characterEncoding=utf8"
jdbc_user => "root"
jdbc_password => ""
statement => "select * from poet where id > :sql_last_value"
#指定追踪的字段，
tracking_column => "id"
#记录最后一次运行的结果
record_last_run => true
#是否需要记录某个column 的值,如果 record_last_run 为true,可以自定义我们需要 track 的 column 名称，此时该参数就要为 true. 否则默认 track 的是 timestamp 的值.
use_column_value => true
####### 这两句可能能够解决越往后导入越慢的问题########
#指定文件,来记录上次执行到的 tracking_column 字段的值
#比如上次数据库有 10000 条记录,查询完后该文件中就会有数字 10000 这样的记录,下次执行 SQL 查询可以从 10001 条处开始.
#我们只需要在 SQL 语句中 WHERE MY_ID > :sql_last_value 即可. 其中 :sql_last_value 取得就是该文件中的值(10000).
# last_run_metadata_path => "config/metadata"
#是否清除 last_run_metadata_path 的记录,如果为true那么每次都相当于从头开始查询所有的数据库记录
# clean_run => false
jdbc_paging_enabled => "true"
jdbc_page_size => "2000"
schedule => "*/10 * * * *"
}
}
output {
stdout {
codec => rubydebug
}
elasticsearch {
hosts => "localhost:9200"
#将mysql数据加入myindex索引下，会自动创建
index => "poet"
# 自增ID 需要关联的数据库中有有一个id字段，对应索引的id号
document_id => "%{id}"
}
}
16.Logstash 启动报错 no implicit conversion of Integer into String
https://juejin/post/6870773487922462734
二、后台管理-后端
1. Spring Boot 不同环境的配置文件
https://shentuzhigang.blog.csdn/article/details/108777338
2. 自定义IDEA注解
https://blog.csdn/xiaoliulang0324/article/details/79030752
3.关于MybatisPlus的主键
如果我们设置了主键是数据库自增
@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName(value = "poem")
public class Poem {
@TableId(type = IdType.AUTO)
private int id;
private String title;
private String content;
private int poetId;
private String notes;
private String translation;
private String background;
private String appreciation;
@TableField(exist = false)
private Poet poet;
}
那么在进行插入操作后，MyBatisPlus会自动帮我们更新主键id
public Result addTag(Tag tag){
// 创建所需对象
Result result = new Result();
Map<String,Object> map = new HashMap<>();
// 执行插入操作
this.tagMapper.insert(tag);
map.put("tag",tag); // 此时我们的tag已经被赋予了id
// 返回信息
return result.code(ResultCode.SUCCESS).message("插入成功").data(map);
}
4. MyBatisPlus如何只查询部分字段
https://blog.csdn/evasnowind/article/details/104131428
去重：https://blog.csdn/tcctcszhanghao/article/details/106576886
5. 关于FastDFS配置的博客
博客中的整体步骤是没有问题的，但是一定要注意指令中的文件夹位置，一定要根据自己的实际情况进行灵活的更改。
6. 关于上传图片的缩略图
/**
* 文件上传
* @param file MultipartFile对象(用户上传的文件对象)
* @return 成功:图片路径id 失败：error
*/
public String upload(MultipartFile file) throws IOException {
StorePath storePath = fastFileStorageClient.uploadImageAndCrtThumbImage(file.getInputStream(), file.getSize(), FilenameUtils.getExtension(file.getOriginalFilename()), null);
String thumbImagePath = thumbImageConfig.getThumbImagePath(storePath.getFullPath());
System.out.println("上传图片的缩略图为：" + thumbImagePath);
return storePath.getFullPath();
}
缩略图为上传文件名+缩略图后缀(默认_150x150)
如:源图上传后路径为 xxx.jpg,缩略图为 xxx_150x150.jpg
源图 http://localhost:8098/M00/00/17/rBEAAl33pQaAWNQNAAHYvQQn-YE374.jpg
缩略图 http://localhost:8098/M00/00/17/rBEAAl33pQaAWNQNAAHYvQQn-YE374_150x150.jpg
7.MyBatis处理时间格式
java.lang.String和java.util.Date之间自动转换
@DateTimeFormat(pattern=“yyyy-MM-dd”)//页面写入数据库时格式化
@JSONField(format=“yyyy-MM-dd”)//数据库导出页面时json格式化
public class User implements Serializable{
private Integer id;
private String loginname;
private String password;
private Integer status;
@DateTimeFormat(pattern="yyyy-MM-dd")//页面写入数据库时格式化
@JSONField(format="yyyy-MM-dd")//数据库导出页面时json格式化
private Date createdate;
private String username;
}
传入字符串格式应该为如2021-01-05这样的，2021-1.5是不对的（因为我们的格式要求是MM-dd，必须有两个数字）
8.启动nginx之前需要先启动fastdfs
三、后台管理-前端
1. less报错TypeError: this.getOptions is not a function
https://blog.csdn/qq_42430948/article/details/113552673
2. Spring Security解决跨域问题
Spring Security本身解决跨域：
httpSecurity.cors().and().csrf().disable();
完整配置：
/**
* @ClassName: WebSecurityConfig
* @Description: TODO Spring Security 配置类
* @Author 孟祥龙
* @Date: 2021/4/13 8:52
* @Version 1.0
*/
@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true,securedEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Autowired
private JwtAuthenticationEntryPoint jwtAuthenticationEntryPoint;
@Resource
private JwtAccessDeniedHandler jwtAccessDeniedHandler;
@Resource
private JwtAuthenticationSuccessHandler jwtAuthenticationSuccessHandler;
@Resource
private LoginFailureHandler loginFailureHandler;
@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
// 自定义的Jwt Token过滤器
@Bean
public JwtAuthenticationTokenFilter authenticationTokenFilterBean() throws Exception {
return new JwtAuthenticationTokenFilter();
}
@Override
@Bean
public AuthenticationManager authenticationManagerBean() throws Exception {
return super.authenticationManagerBean();
}
@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
httpSecurity
.formLogin()
//自定义认证成功处理器
.successHandler(jwtAuthenticationSuccessHandler)
// 自定义失败拦截器
.failureHandler(loginFailureHandler)
// 自定义登录拦截URI
.loginProcessingUrl("/login")
.and()
//token的验证方式不需要开启csrf的防护
.csrf().disable()
// 自定义认证失败类
.exceptionHandling().authenticationEntryPoint(jwtAuthenticationEntryPoint)
// 自定义权限不足处理类
.accessDeniedHandler(jwtAccessDeniedHandler)
.and()
//设置无状态的连接,即不创建session
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
.authorizeRequests()
.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
.antMatchers("/login").permitAll()
//配置允许匿名访问的路径
.anyRequest().authenticated();
// 解决跨域问题（重要） 只有在前端请求接口时才发现需要这个
httpSecurity.cors().and().csrf().disable();
//配置自己的jwt验证过滤器
httpSecurity
.addFilterBefore(authenticationTokenFilterBean(), UsernamePasswordAuthenticationFilter.class);
// disable page caching
httpSecurity.headers().cacheControl();
}
}
Spring Boot层面的跨域问题：
https://www.jb51/article/201453.htm
3.axios发送表单
https://blog.csdn/yezongzhen/article/details/104620557/
添加请求头：
export const login = (params) => request.post('/login', params ,{'Content-Type': 'application/x-www-form-urlencoded'});
4.elementui解决current-page失效问题
:current-page.sync="currentPage"
https://blog.csdn/u010265663/article/details/105846820
5. 关于Vuex中mapState, mapGetters, mapActions和mapMutation 以及modules下的使用
看Vuex官网
6.watch监听Vuex值的变化
https://www.jianshu/p/2099ad72d43e
7. 清空对象
https://blog.csdn/qq_24607837/article/details/96459663
8. 文件上传路径
要写完整 ，如http://localhost:8081/file/uploadImg,没有http是无法上传的。
9. 关于less的使用
需要同时安装less和less-loader，less-loader的默认版本可能会偏高，需要指定版本，同时，在安装完成后就可以直接使用了，不需要在main.js中引入。
四、前台-PC端
1. youku渐变背景样式
background-image: -webkit-gradient(linear,right top,left top,from(rgba(22,22,26,0)),to(#16161a));
background-image: -webkit-linear-gradient(right,rgba(22,22,26,0),#16161a);
background-image: linear-gradient(270deg,rgba(22,22,26,0),#16161a);
2. Vue中安装sass
npm install sass-loader@10.1.1 --save
npm install node-sass --sava-dev
注意：要先装sass-loader再装node-sass,同时注意版本问题
3. 关于vue-awesome-swiper的使用
首先想要正常使用swiper的所有功能，需要安装两个模块分别是vue-awesome-swiper和swiper，最好分别安装
先安装vue-awesome-swiper
npm install vue-awesome-swiper --save
然后安装swiper,建议安装5.x版本（待会说原因）
npm install swiper@5 --save
这样就可以按照github中的示例代码对swiper进行配置了。
注意：github给的安装指令是
npm install vue-awesome-swiper --save
这个默认安装的swiper是6.x的，你会发现你的autoplay和分页配置都无效，因为6.x的分页和自动播放都是需要单独引入的
同时，由于我们换了5.x，swiper的引入方式也就不一样了
import 'swiper/css/swiper.css'
4. Swiper自定义向前向后按钮样式
https://www.jianshu/p/436a52387e8b
注意：按钮不垂直居中是因为它的参考元素是body，所以需要用一个div来包裹swiper和两个按钮，并给它加上相对定位的属性。
5. 解决谷歌浏览器点击元素有黑边框问题
添加属性：
{
outline:none;
}
6. Vue更改默认端口
https://blog.csdn/sendear/article/details/107122250
7. 绝对定位居中
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
http://ourjs/detail/54092637f50bcc0a66000004
8. 修改input标签placeholer的颜色
input::-webkit-input-placeholder { color: #ccc; } input::-moz-input-placeholder { color: #ccc; } input::-ms-input-placeholder { color: #ccc; }
9. 解决swiper点击后不再自动轮播的问题
autoplay:{delay:3000,disableOnInteraction :false },
10. Vue中style中背景图片用变量拼接的方式
HTML：
<div :style="{backgroundImage:fullPath(back)}"> </div>
data:
data() { return { back:"https://liangcang-material.alicdn/prod/upload/e3589792b0f944bf826d532bf9e73e85.jpg?x-oss-process=image/resize,w_2074/interlace,1/quality,Q_80" }; },
methods:
methods:{
fullPath(value){
return "url('" + value + "')";
}
}
11. 关于scoped的样式覆盖问题
建议使用文末的方法（使用两个style）
https://wwwblogs/goloving/p/9119460.html
12. 文字的阴影效果
text-shadow: 0 0 0 rgb(0 0 0 / 20%);
荧光效果：
text-shadow:0 0 8px #DD4455,0 0 12px #DD4455;
13. 禁止用户选择文字
user-select: none;
14. 关于heigh:100%
https://www.webhek/post/css-100-percent-height.html
想让height:100%生效，那么它所有的父元素的height都必须被赋有效值。
15. 安装hanzi-writer
npm install hanzi-writer
16. 实现点击查看更多的功能
https://blog.csdn/YoshinoNanjo/article/details/81910805
InfoPanel组件
<template>
<div>
<!--<div class="title">{{ content.name }}</div>-->
<!--<div class="date">{{ content.releaseDate | date }}</div>-->
<!-- 我这里的 showHeight 值是 200，contentTxt 是个富文本 -->
<show-more style="margin-top: 20px" :showHeight="200" :content="content"></show-more>
</div>
</template>
<script>
import ShowMore from './ShowMore'
export default {
name: "InfoPanel",
components:{
ShowMore
},
props:['content']
}
</script>
<style scoped>
</style>
ShowMore组件(博客中少添加了一个mounted时就计算高度的方法)
<template>
<div class="wrapper-container">
<!-- overflow: hidden：清除子元素相对父元素的超界溢出 -->
<div style="overflow: hidden" :style="{height : showMore ? 'auto': showHeight + 'px'}">
<div ref="content">
<slot>
<!-- 当外界 <show-more> 标签中有元素时，使用 <show-more> 标签中的元素进行渲染，否则使用下面这个 div 进行渲染 -->
<div v-html="content"></div>
</slot>
</div>
</div>
<div class="control" v-show="isLongContent" :class="{'show-more' : showMore}">
<el-button type="text" @click="_toggleShowMore">{{ showMore ? '收起' : '显示更多'}}</el-button>
</div>
</div>
</template>
<script>
export default {
name: "ShowMore",
props: {
showHeight: {
type: Number,
required: true,
default: 200
},
content: {
type: String,
default: null
}
},
data () {
return {
showMore: false,
isLongContent: false
}
},
watch: {
// 每当内容变化时都重新计算一次高度
content () {
this._calculateHeight()
}
},
mounted() {
this._calculateHeight()
},
methods: {
refresh () {
this._calculateHeight()
},
_calculateHeight () {
// $nextTick()，等待内容获取完毕再计算高度，异步处理
this.$nextTick().then(() => {
let contentHeight = this.$refs.content.clientHeight
if (contentHeight > this.showHeight) {
this.isLongContent = true
console.log("是长文本")
} else {
console.log("不是长文本")
this.isLongContent = false
}
})
},
_toggleShowMore () {
this.showMore = !this.showMore
}
}
}
</script>
<style scoped lang="less">
.wrapper-container {
position: relative;
padding-bottom: 40px;
.control {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 40px;
text-align: center;
background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 70%);
&.show-more {
padding-top: 0;
background: none;
}
}
}
</style>
17. 无限滚动插件
https://peachscript.github.io/vue-infinite-loading/zh/
https://www.jianshu/p/7f60e5d7fb08/
解决由于组件未重新加载而不触发无限滚动的问题：
就是获取$state对象，在监听器里面调用reset方法
search($state){ // 获取$state对象 this.infinity = $state; ... }
在监听器里面重置状态
watch:{
/**
* @author 孟祥龙
* @Desc TODO 监听路由变化，获取参数
* @date 2021/5/11 14:11
* @return
*/
$route(to,from){
if (to.fullPath.split('/')[1] === "search"){
// 如果是本页面
if (to.fullPath.split('/')[2] === "total"){
this.input = to.fullPath.split('/')[3];
// 倘若未加载
if (this.loading === false){
// 初始化页数
this.pageNum = 0;
// 初始化变量
this.poems = []
// 重置状态
this.infinity.reset();
}
}
}
}
},
18. 解决Vue的History模式下的404问题
https://www.jianshu/p/5714ec0b9102
19.解决swiper图片不会自适应问题
<swiper ref="mySwiper" :options="swiperOption">
<swiper-slide v-for="banner in banners" :key="banner.sequence">
<img :src="banner.img | fullPath">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
其实
swiper-slide本身是自适应的，只是我们的图片没有指定宽度而已
img{
width: 100%;
}
即可解决
20. 解决Vue路由跳转滚动条位置问题
https://blog.csdn/qq_42421611/article/details/106488945
21. Vue操作剪切板
https://juejin/post/6844903709193797645
五、前台后端
1. MySQL随机查询
SELECT * FROM sentence WHERE id >= (SELECT floor(RAND() * (SELECT MAX(id) FROM sentence))) ORDER BY id LIMIT 0,10
这种方法虽然效率很高，但是离散性十分差。
为了提高离散性，应该使用以下方法
SELECT * from sentence ORDER BY RAND() LIMIT 10
单表的执行速度其实也不慢，但是一旦有个联表操作，就会变得非常慢，但是直接根据sentence的id去做联表操作，速度是很快的，这样就有了一个思路，结合Java逻辑去完成随机查询。
先用上述
sql查询出单个表中的名句数据，在拿到数据后，再让Java去调用联表操作
2. springboot打包错误：Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0…
https://blog.csdn/weixin_43567035/article/details/109706572
版本问题
3.Tomcat配置多个项目
https://blog.csdn/qq_44625080/article/details/105893314
<?xml version="1.0" encoding="UTF-8"?>
<Server port="8005" shutdown="SHUTDOWN">
<Listener className="org.apache.catalina.startup.VersionLoggerListener" />
<Listener className="org.apache.catalina.core.AprLifecycleListener" SSLEngine="on" />
<Listener className="org.apache.catalina.core.JreMemoryLeakPreventionListener" />
<Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener" />
<Listener className="org.apache.catalina.core.ThreadLocalLeakPreventionListener" />
<GlobalNamingResources>
<!-- Editable user database that can also be used by
UserDatabaseRealm to authenticate users
-->
<Resource name="UserDatabase" auth="Container"
type="org.apache.catalina.UserDatabase"
description="User database that can be updated and saved"
factory="org.apache.catalina.users.MemoryUserDatabaseFactory"
pathname="conf/tomcat-users.xml" />
</GlobalNamingResources>
<!-- 前台后端 -->
<Service name="Catalina">
<!-- 端口为8081 -->
<Connector port="8081" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />
<Connector port="8009" protocol="AJP/1.3" redirectPort="8443" />
<Engine name="Catalina" defaultHost="localhost">
<Realm className="org.apache.catalina.realm.LockOutRealm">
<Realm className="org.apache.catalina.realm.UserDatabaseRealm"
resourceName="UserDatabase"/>
</Realm>
<Host name="localhost" appBase="webapps"
unpackWARs="true" autoDeploy="true">
<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
prefix="localhost_access_log" suffix=".txt"
pattern="%h %l %u %t "%r" %s %b" />
<Context docBase="../webapps/front" path="" reloadable="true"></Context>
</Host>
</Engine>
</Service>
<!--后台后端-->
<Service name="Catalina1">
<!--这里更改了新的端口为8082-->
<Connector port="8082" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />
<Connector port="8010" protocol="AJP/1.3" redirectPort="8443" />
<!--这里需要将name改为上面建立的名字，要一致-->
<Engine name="Catalina1" defaultHost="localhost">
<Realm className="org.apache.catalina.realm.LockOutRealm">
<Realm className="org.apache.catalina.realm.UserDatabaseRealm"
resourceName="UserDatabase"/>
</Realm>
<Host name="localhost" appBase="webapps"
unpackWARs="true" autoDeploy="true">
<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
prefix="localhost_access_log" suffix=".txt"
pattern="%h %l %u %t "%r" %s %b" />
<Context docBase="../webapps/back" path="" reloadable="true"></Context>
</Host>
</Engine>
</Service>
</Server>
4.Tomcat报错The AJP Connector is configured with secretRequired=“true” but the secret attribute is either null or “”. This combination is not valid
https://wwwblogs/zhang-yawei/p/12975326.html
5.解决Tomcat启动慢的问题
https://blog.csdn/qing_gee/article/details/86705890
六、前台-移动端
1.关于uview主题
可以修改它的theme.scss文件的颜色，以达到自定义主题的目的
2.路由推荐使用
https://ext.dcloud/plugin?id=578
十分接近vue-router
3.自定义导航栏
https://ask.dcloud/article/34921
4.模拟器请求报错
https://wwwblogs/moguzi12345/p/13042159.html
把ip地址换成本机ip，不能用localhost
5.在uniapp中使用axios
需要添加一个是适配器，来使用uniapp的环境
// 封装request/axios请求
import axios from 'axios'
// 创建单例
const instance = axios.create({
baseURL: 'http://122.207.154.220:8081',
timeout: 10000
});
// 响应拦截
instance.interceptors.response.use(res=>{
return res.data; //直接将数据返回
}, err=>{
return Promise.reject(err)
});
axios.defaults.adapter = function(config) { //自己定义个适配器，用来适配uniapp的语法
return new Promise((resolve, reject) => {
console.log(config)
var settle = require('axios/lib/core/settle');
var buildURL = require('axios/lib/helpers/buildURL');
uni.request({
method: config.method.toUpperCase(),
url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
header: config.headers,
data: config.data,
dataType: config.dataType,
responseType: config.responseType,
sslVerify: config.sslVerify,
complete: function complete(response) {
console.log("执行完成：",response)
response = {
data: response.data,
status: response.statusCode,
errMsg: response.errMsg,
header: response.header,
config: config
};
settle(resolve, reject, response);
}
})
})
}
export default instance;
https://blog.csdn/ybyshezhang/article/details/109697503
6. 在uniapp使用iconfont远程图标
https://blog.csdn/rain__chen/article/details/107402099
7.Vue组件名称的坑
Vue不允许有组件名称叫menu，可以叫Menu
8.uniapp实现超出文本显示省略号
需要指定合适的高度才能生效
https://blog.csdn/wusejiege6/article/details/109684647
9.自定义点击事件
https://blog.csdn/yangqii/article/details/103480899
10.Vue的子传父
Vue子传父好像有源码bug，有时候传不过去，父传子没有啥问题，尽量还是用Vuex吧。
11.关于搜索页面各个模块的切换
注意在点击suggest之后的一些特殊操作，如果逻辑忘了回去看源码。
12. .9图的制作
- 在ps中添加1px边框时，宽度和高度各加
2px而不是1px - https://ask.dcloud/article/37365主要看划线的位置
- 在ps里面可以借助参考线
- 按住shift可以画直线https://jingyan.baidu/article/fedf07377ccf3f35ac89778e.html
- 铅笔颜色必须是
#000000，否则无法通过编译
13. html2canvas相关问题
https://segmentfault/a/1190000011478657
https://juejin/post/6844904019605848072
14.文字竖排
https://blog.csdn/sangjinchao/article/details/60139706
15. 在使用router插件之后，实现退出应用
// router.js
import {RouterMount,createRouter} from 'uni-simple-router';
// 点击次数
let backButtonPress = 0;
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
routes: [...ROUTES],
routerErrorEach:({type,msg})=>{
// 退出应用
// #ifdef APP-PLUS
if(type===3){
router.$lockStatus=false;
let main = plus.android.runtimeMainActivity();
//为了防止快速点按返回键导致程序退出重写quit方法改为隐藏至后台
plus.runtime.quit = function(){
main.moveTaskToBack(false);
};
backButtonPress++;
if (backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('再按一次退出孟郎诗词');
}
setTimeout(function() {
backButtonPress = 0;
}, 3000);
return true;
}
// #endif
},
});
export {
router,
RouterMount
}
16.最强居中合集
https://juejin/post/6844903842111340552
17.解决图片模糊问题
https://blog.csdn/qq_27127385/article/details/96272262
把文件下载下来进行替换即可使那两个参数生效。
18.解决uView中u-tabs-swiper滚动条移位问题
这其实不是uview的锅，还是uniapp自带的bug，原因可以参考：
https://ask.dcloud/question/110217
这个问题是页面路由跳转的时候，数据正在加载 但是没有完成方法里面的代码造成的。 目测是这样 其实这个问题不会造成很大的出错，如果使用的是图片懒加在的话 导致图片不显示的问题
帖子中给出的解决方案：
我也出现这个问题了，报错是偶然性的，排错都不好排，每次出错都会概率性阻断我的代码。比较烦
用了一个比较骚的办法，
在生命周期 mounted 的函数里或是其他业务场景里，凡是会被阻断的代码或者会导致错乱的代码都写在 setTimeout 里 ，
用这个方法帮我解决了 NoticeBar 吸顶后错位问题和概率性阻断我代码的问题，依然还是会报那个错误，但是已经不会阻断我的代码了
所以需要加一个延时，打开uView中u-tabs-swipr的源码，修改mounted函数
mounted() {
setTimeout(() => {
this.init();
},100)
},
19. Nginx配置PC和移动端项目
https://learnku/articles/33563
20. 解决搜索页面看不到加载中
.search-list {
display: flex;
flex-direction: column;
height: calc(100vh - var(--status-bar-height) - 85rpx) ; // 解决使用自定义导航栏导致的 --window-top计算有误的问题
width: 100%;
position: relative;
}
最根本的原因是因为我使用了自定义的导航栏插件，导致
--window-top的值已经不再精确，使scroll-view的高度过高，我们改为减去状态栏以及自定义导航栏的高度就可以解决。
21. 解决启动图延时无效
APP:{
loddingPageHook:(view)=>{
// 定时关闭启动图(必须在这个位置写，在App.vue中无效)
setTimeout(() => {
plus.navigator.closeSplashscreen();
},4000)
},
launchedHook:()=>{
console.log('加载完成啦')
}
},
由于用了自定义的路由插件，会导致原生的失效需要对方法进行重写
版权声明：本文标题：孟郎诗词网3.0版本问题总结 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1728741873a1171157.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论