我的杂乱日常

已于 2022-07-29 16:12:38 修改
阅读量439 收藏
点赞数 1
分类专栏： 我的日常 文章标签： intellij-idea java intellij idea
于 2021-12-06 11:24:47 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.youkuaiyun.com/qq_38318622/article/details/121743152
版权
本文概述如何在IDEA中解决中文乱码，处理406异常，利用PageHelper实现SSM分页，配置logback日志，并介绍zTree组件的使用方法。同时涉及Vue的计时器和uni-apppicker组件，以及Windows本地Redis安装与配置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

关于IDEA控制台中文乱码，问题

首先是设置一下idea自己文件编码对解决此问题没啥帮但最好设置上
在这里插入图片描述设置idea的服务器tomcat参数

在这里插入图片描述修改idea的默认编解码HELP->Edit Custom VM OPtions中加 -Dfile.encoding=utf-8
在这里插入图片描述

406 异常

在这里插入图片描述发生这样的异常就有一种可能，就是我们在使用ajax异步请求时，发送json数据我们的后端对应的接口地址却是****.html就会引发这样的异常。
解决办法很简单，只要把接口地址改一下，让其不带.html即可

 @RequestMapping("/send/compose/javabenandresult/fuza.html")
 修改后
  @RequestMapping("/send/compose/javabenandresult/fuza")

在ssm中使用分页PageHelper的方式

  <!--配置sqlSessionFactoryBean整合mybatis-->
    <bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--指定mybatis全局配置文件的位置-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <!--指定mapper.xml配置文件的位置-->
        <property name="mapperLocations" value="classpath:mybatis/mapper/*Mapper.xml"/>
        <!--装配数据源-->
        <property name="dataSource" ref="dataSource"/>
        <!--配置插件-->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageHelper">
                    <property name="properties">
                        <props>
                            <!--告诉pagehelper当前使用的数据库-->
                            <prop key="dialect">mysql</prop>
                            <!--配置页面的合理化修正-->
                            <prop key="reasonable">true</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>
    </bean>

logback 日志问题

这样配置日志可是方便调试，问题出现在第几行我们都可以定位到但是不建议会影响速度

<pattern>[%d{yyyy-MM-dd HH:mm:ss.SSS}] [%-5level] [%thread] (%file:%line\) [%msg]%n</pattern>

标准配置

<pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50} - %msg%n</pattern>

zTree使用

这个地址有例子
http://www.treejs.cn/v3/donate.php

我们可以看到这个例子是给我们嵌入到一个iframe里面所我们右键查看框架源代码，嘿嘿就可以看到人家是怎么写的了。
在这里插入图片描述下面我们开始，注意这个我们一定要使用jquery而且jquery的js导入的位置一定要zTree前面导入。

 <%--这个ul标签是ztree动态生成的节点所依附的静态节点--%>
<ul id="treeDemo" class="ztree"></ul>
<script type="text/javascript">
    $(function (){
        // 创建json对象用于存储对ztree所有的设置
        var setting ={};
        var zNodes =[
            { name:"父节点1 - 展开", open:true,
                children: [
                    { name:"父节点11 - 折叠",
                        children: [
                            { name:"叶子节点111"},
                            { name:"叶子节点112"},
                            { name:"叶子节点113"},
                            { name:"叶子节点114"}
                        ]},
                    { name:"父节点12 - 折叠",
                        children: [
                            { name:"叶子节点121"},
                            { name:"叶子节点122"},
                            { name:"叶子节点123"},
                            { name:"叶子节点124"}
                        ]},
                    { name:"父节点13 - 没有子节点", isParent:true}
                ]},
            { name:"父节点2 - 折叠",
                children: [
                    { name:"父节点21 - 展开", open:true,
                        children: [
                            { name:"叶子节点211"},
                            { name:"叶子节点212"},
                            { name:"叶子节点213"},
                            { name:"叶子节点214"}
                        ]},
                    { name:"父节点22 - 折叠",
                        children: [
                            { name:"叶子节点221"},
                            { name:"叶子节点222"},
                            { name:"叶子节点223"},
                            { name:"叶子节点224"}
                        ]},
                    { name:"父节点23 - 折叠",
                        children: [
                            { name:"叶子节点231"},
                            { name:"叶子节点232"},
                            { name:"叶子节点233"},
                            { name:"叶子节点234"}
                        ]}
                ]},
            { name:"父节点3 - 没有子节点", isParent:true}

        ];
        // 初始化树形结构   setting：设置    zNodes：树形结构数据
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
</script>

看一下效果！
在这里插入图片描述这就和人家的案例就一摸一样了。

关于JQuery

对于我这个渣渣来讲$("#"+spanId)？
这是啥，看不懂呀$("#spanId")这样是id选择器但是上面那个是啥？其实上面那个也是id选择器，只不过这个选择选择的标签id被拼装成了字符串所有要这样写！下面我们看一下例子：

<div id="my_div_01">adc</div>
<div id="my_div_02">adc</div>
<script type="text/javascript">
$("#my_div_01");
var id = "my_div"+"_02";
$("#"+id);
</script>

这例子里面使用的都是id选择器，只是第一个我们直接是去的标签的元素属性值，而第二个使我们拼装出来的id值，当然这个id值也是真是存在的！

Vue记录

mounted()

mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
          message:"pan"
        },
        methods:{
            currentTime1:function(){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
            currentTime2:function(){//计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
                this.message = "neon";
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</body>
</html>

注意：methods和compute里的东西不能冲名

  • methods 定义方法，调用currentTime1()需要带括号
  • computed 定义计算属性，调用属性使用currentTime2，不需要带括号this.message是为了能够让currentTime2观察到数据变化而变化

结论：
  调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

uni-app picker日期选择器和时间选择器的用法

在这里插入图片描述
点击后：
在这里插入图片描述

<view class="item">
	<view class="tit">选择时间</view>
	<picker class="picker date" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
		<view>{{ date }}</view>
	</picker>
	<picker class="picker" mode="time" :value="timeStart" start="09:01" end="21:01" @change="bindTimeStart">
		<view class="uni-input">{{ timeStart }}</view>
	</picker>
	-
	<picker class="picker" mode="time" :value="timeEnd" start="09:01" end="21:01" @change="bindTimeEnd">
		<view class="uni-input">{{ timeEnd }}</view>
	</picker>
</view>

data() {
	const currentDate = this.getDate({
		format: true
	});
	return {
		date: currentDate,
		timeStart: '14:00',
		timeEnd: '16:00'
	};
},
computed: {
	startDate() {
		return this.getDate('start');
	},
	endDate() {
		return this.getDate('end');
	}
},
methods: {
	// 选择时间 日期
	bindDateChange: function(e) {
		this.date = e.target.value;
	},
	getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	},
	// 开始时间
	bindTimeStart:function(e){
		this.timeStart = e.target.value;
	},
	// 结束时间
	bindTimeEnd:function(e){
		this.timeEnd = e.target.value;
	},
}

在windows本地安装redis并进行链接

遇到的问题

Caused by: redis.clients.jedis.exceptions.JedisDataException: ERR Client sent AUTH, but no password is set

Redis服务器没有设置密码，但客户端向其发送了AUTH（authentication，身份验证）请求。

redis.windows.conf 文件，用文本编辑工具打开文件，找到“requirepass”，去掉注释设置密码。

绑定主机：bind 127.0.0.1
绑定密码：requirepass redis123
绑定端口号：port 6380

启动命令使用

redis-server.exe redis.windows.conf

浏览器的localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
下面看一下我们程序中使用到的

export function levelFilter(status) {
  if(!status){
    return ''
  }
  let arrayList = JSON.parse(localStorage.getItem('levelKey'));
  let array = arrayList.filter(item => status === item.id)
  if(array.length){
    return array[0].name
  }else{
    return ''
  }
}

  // 等级列表
      levelLists () {
        levelListApi({ page: 1, limit: 9999}).then(async res => {
          this.levelList = res.list
          localStorage.setItem('levelKey', JSON.stringify(res.list))
        })
      },

在这里插入图片描述我们还需要注意一下，这个只是我们使用的一种方式，其实还有很多种使用方式，我们就不都写完了，最后我们下次想使用的时候，直接去查网上就会找到很多

记一次vue前端发送post请求问题

我们先看一下标准的

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import SettingMer from '@/utils/settingMer'
import { isPhone } from "@/libs/wechat";
// create an axios instance
const service = axios.create({
  baseURL: SettingMer.apiBaseURL, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 20000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    const token = !store.getters.token?sessionStorage.getItem('token'):store.getters.token;
    if (token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situationf
      config.headers['Authori-zation'] = token
    }
    if(/get/i.test(config.method)){
      config.params = config.params || {}
      config.params.temp= Date.parse(new Date()) / 1000
    }
    return config
  },
  error => {
    // do something with request error
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data
    // if the custom code is not 20000, it is judged as an error.
    if (res.code === 401) {
      // to re-login
      MessageBox.confirm('您已经登出，您可以取消停留在这个页面，或重新登录', '退出', {
        confirmButtonText: '或重新登录',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        store.dispatch('user/resetToken').then(() => {
          location.reload()
        })
      })
    }
    if (res.code !== 200  && res.code !== 401) {
      if (isPhone()) { //移动端
        return Promise.reject(res || 'Error')
      }
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject()
      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      // return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res.data
    }
  },
  error => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

get

export function statisticsDataApi(params) {
  return request({
    url: `/admin/store/order/statisticsData`,
    method: 'get',
    params
  })
}

export function writeConfirmOrderInfoByVerifyCodeApi(vCode) {
  return request({
    url: `/admin/store/order/writeConfirmOrderInfoByVerifyCode/${vCode}`,
    method: 'get'
  })
}

post

export function writeUpdateOrderInfoByOrderInfoIdApi(data) {
  return request({
    url: `/admin/store/order/writeUpdateOrderInfoByOrderInfoId`,
    method: 'post',
    data
  })
}

犯了错的

export function writeUpdateOrderInfoByOrderInfoIdApi(params) {
  return request({
    url: `/admin/store/order/writeUpdateOrderInfoByOrderInfoId`,
    method: 'post',
    params
  })
}

注意：
我们使用post请求时一定是data，不然发出去的就不对！，后面的接口根本解析不了数据，虽然接口是可以通的！

常看linux剩余空间

df /data -kh

使用逆向工程

  1. 创建数据库表
CREATE DATABASE project_crowd CHARACTER SET utf8;

USE `project_crowd`;

DROP TABLE IF EXISTS t_admin;

CREATE TABLE t_admin
(
id INT NOT NULL AUTO_INCREMENT, # 主键
login_acct VARCHAR(255) NOT NULL, # 登录账号
user_pswd VARCHAR(32) NOT NULL, # 登录密码
user_name VARCHAR(255) NOT NULL, # 昵称
email VARCHAR(255) NOT NULL, # 邮件地址
create_time VARCHAR(19), # 创建时间
PRIMARY KEY (id)
);
  1. 在工程中添加依赖修改build
<dependencies>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.2.8</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-maven-plugin</artifactId>
                <version>1.3.0</version>
                <dependencies>
                    <dependency>
                        <groupId>org.mybatis.generator</groupId>
                        <artifactId>mybatis-generator-core</artifactId>
                        <version>1.3.2</version>
                    </dependency>
                    <dependency>
                        <groupId>com.mchange</groupId>
                        <artifactId>c3p0</artifactId>
                        <version>0.9.2</version>
                    </dependency>
                    <dependency>
                        <groupId>mysql</groupId>
                        <artifactId>mysql-connector-java</artifactId>
                        <version>5.1.8</version>
                    </dependency>
                </dependencies>
            </plugin>
        </plugins>
    </build>
  1. 在项目的resources下创建generatorConfig.xml文件

在这里插入图片描述

generatorConfig.xml

<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<generatorConfiguration>
    <!-- mybatis-generator:generate -->
    <context id="atguiguTables" targetRuntime="MyBatis3">
        <commentGenerator>
            <!-- 是否去除自动生成的注释 true:是;false:否 -->
            <property name="suppressAllComments" value="true" />
        </commentGenerator>
        <!--数据库连接的信息：驱动类、连接地址、用户名、密码 -->
        <jdbcConnection
                driverClass="com.mysql.jdbc.Driver" connectionURL="jdbc:mysql://192.168.1.240:3306/project_crowd"
                userId="root" password="123456">
        </jdbcConnection>
        <!-- 默认 false，把 JDBC DECIMAL 和 NUMERIC 类型解析为 Integer，为 true 时把
        JDBC DECIMAL
        和 NUMERIC 类型解析为 java.math.BigDecimal -->
        <javaTypeResolver>
            <property name="forceBigDecimals" value="false" />
        </javaTypeResolver>
        <!-- targetProject:生成 Entity 类的路径 -->
        <javaModelGenerator targetProject=".\src\main\java" targetPackage="com.atguigu.crowd.entity">
            <!-- enableSubPackages:是否让 schema 作为包的后缀 -->
            <property name="enableSubPackages" value="false" />
            <!-- 从数据库返回的值被清理前后的空格 -->
            <property name="trimStrings" value="true" />
        </javaModelGenerator>
        <!-- targetProject:XxxMapper.xml 映射文件生成的路径 -->
        <sqlMapGenerator targetProject=".\src\main\java"
                         targetPackage="com.atguigu.crowd.mapper">
            <!-- enableSubPackages:是否让 schema 作为包的后缀 -->
            <property name="enableSubPackages" value="false" />
        </sqlMapGenerator>
        <!-- targetPackage：Mapper 接口生成的位置 -->
        <javaClientGenerator type="XMLMAPPER"
                             targetProject=".\src\main\java"
                             targetPackage="com.atguigu.crowd.mapper">
            <!-- enableSubPackages:是否让 schema 作为包的后缀 -->
            <property name="enableSubPackages" value="false" />
        </javaClientGenerator>
        <!-- 数据库表名字和我们的 entity 类对应的映射指定 -->
        <table tableName="t_admin" domainObjectName="Admin" />
    </context>
</generatorConfiguration>
  1. 最后执行指令即可mybatis-generator:generate
    在这里插入图片描述或者

在这里插入图片描述

遇到的问题

IDEA编写jsp是没有提示

在这里插入图片描述在这里插入图片描述在这里插入图片描述按照如上步骤，我们在idea中写jsp时就会有只能提示了，爽！

vscode 上好用的插件

Live Server
这个插件就相当以一个web服务器

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值