自己后台管理项目遇到的问题如何解决

前后端文件上传

之前我们做文件上传的时候已经有一个可以使用的前端例子 所以 没有关这里我自己后台管理项目需要一个 存放图片的工具

我这里使用了layui来简单的引入图片上传效果

 layui.use('upload', function(){
   var upload = layui.upload;

   //执行实例
   var uploadInst = upload.render({
     elem: '#test1' //绑定元素
     ,url: '/file/' //上传接口
     ,done: function(res){
       //上传完毕回调
     }
     ,error: function(){
       //请求异常回调
     }
   });
 });

注意如果不是模块化的引入 我们引入的文件是layui.all.js

如果是引入模块化的东西我们需要引入的是 layui.js

同样前端引入的内容是

 <link rel="stylesheet" href="dist/css/layui.css">

接受上传的图片的接口是这样写的

    @RequestMapping("/file")
    public String file(MultipartFile file) throws IOException {
        String imageName = file.getOriginalFilename();
        String dir = "C:/PerfLogs/images";
        File dirFile = new File(dir);
        if(!dirFile.exists()) {
            dirFile.mkdirs();
        }
        File fileDir  = new File(dir + "/" + imageName);
        file.transferTo(fileDir);
        return "操作成功";
    }

最终的单图片使用方案

 <div class="form-group">
     <label for="userImageId" class="col-sm-2 control-label">用户头像</label>
     <div class="col-sm-10">
<!--              <div class="layui-upload">-->
<!--                <button type="button" class="layui-btn" id="test2">多图片上传</button>-->
<!--                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">-->
<!--                  预览图：-->
<!--                  <div class="layui-upload-list" id="demo2"></div>-->
<!--                </blockquote>-->
<!--              </div>-->
       <div class="layui-upload">
         <button type="button" class="layui-btn" id="test1">上传图片</button>
         <div class="layui-upload-list">
           <img class="layui-upload-img" id="demo1">
           <p id="demoText"></p>
         </div>
       </div>
       <input name="userImage" type="hidden" class="form-control"  id="userImageId">
     </div>
   </div>

layui.use('upload', function(){
   var upload = layui.upload;


   var uploadInst = upload.render({
     elem: '#test1'
     ,url: 'pic/upload' //改成您自己的上传接口
     ,before: function(obj){
       //预读本地文件示例，不支持ie8
       obj.preview(function(index, file, result){
           console.log(result);
         $('#demo1').attr('src', result); //图片链接（base64）
       });
     }
     ,done: function(res){
       // 如果上传失败
       // if(res.data.error > 0){
       //
       //   return layer.msg('上传失败');
       // }
       // 上传成功
       console.log("上传成功")
       console.log(res)
        $("#demo1").attr("src", res.data.url);
     }
     ,error: function(){
       //演示失败状态，并实现重传
       var demoText = $('#demoText');
       demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
       demoText.find('.demo-reload').on('click', function(){
         uploadInst.upload();
       });
     }
   });

   //多图片上传
   // upload.render({
   //   elem: '#test2'
   //   ,url: '/file' //改成您自己的上传接口
   //   ,multiple: true
   //   ,before: function(obj){
   //     //预读本地文件示例，不支持ie8
   //     obj.preview(function(index, file, result){
   //       $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
   //     });
   //   }
   //   ,done: function(res){
   //     //上传完毕
   //     console.log("上传结果");
   //     console.log(res.data);
   //   }
   // });
 });

使用后台管理页面的时候 cancel页面的时候 我们需要清空 mainContentId 上面的状态

input type = date的时候 赋值是需要格式的

其他格式是不能成功赋值的

var now = new Date();
alert(now.getDate()+'-'+now.getMonth());
//格式化日，如果小于9，前面补0
var day = ("0" + now.getDate()).slice(-2);
//格式化月，如果小于9，前面补0
var month = ("0" + (now.getMonth() + 1)).slice(-2);
//拼装完整日期格式
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
//完成赋值
$('#createStartTime').val(today);

mysql插入大量数据报错

MySql 插入大量数据时报错Error Code:1153 Got a packet bigger than ‘max_allowed_packet’ bytes

今天插入数据的时候，MySQL收到下面异常：ERROR 1153 (08S01): Got a packet bigger than ‘max_allowed_packet’ bytes。

原因：
这是因为没有调整mysql的默认配置，默认最大只能处理16M的文件，而我要导入的伪造数据有50M的一个SQL。

解决方法：
调整配置文件：/etc/my.cnf

vi  /etc/my.cnf

[mysqld]
datadir=/home/tester/mysql_data/mysql
socket=/home/tester/mysql_data/mysql/mysql.sock
user=mysql
# Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=0
max_allowed_packet=50M
[mysqld_safe]
log-error=/var/log/mysqld.log
pid-file=/var/run/mysqld/mysqld.pid

作者：古佛青灯度流年
链接：https://www.jianshu.com/p/1e47800ce133

nginx不能将ip地址做映射 文件夹和地址都不行

spring配置跨域

@Configuration
public class CORSConfig implements WebMvcConfigurer{//web项目的全局配置的接口.

    /**
     * 参数介绍:
     *      1.addMapping()  哪些请求可以进行跨域操作
     *        addMapping("/**")   表示所有访问后端的服务器的请求都允许跨域
     *        addMapping("/addUser/**")  表示部分请求可以跨域
     *        /*       只能拦截一级目录
     *        /**      可以拦截多级目录
     *
     *      2.allowedOrigins("*")  允许哪些网站跨域
     *      3.allowCredentials(true)  请求跨域时是否允许携带Cookie/Session相关
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost,http://localhost:8110")
                .allowCredentials(true);
                //.maxAge();       默认30分钟 是否允许跨域请求 30分钟之内不会再次验证
                //.allowedMethods() 允许请求类型
    }
}

注意这个域名后面不能加斜杠

这里可以使用 * 通配所有的域名 但是这样不安全 所以我们还是使用这个方式来完成跨域

有些时候它会抽风 没有办法启用 你得看看你还有没有类似其他干扰 跨域的东西 比如 @CrossOrgin 的注解不能让他出现

如果要配置多个允许跨域的域名需要使用数组来完成

@Configuration
@PropertySource("classpath:properties/crossOrigin.properties")
public class CORSConfig implements WebMvcConfigurer{//web项目的全局配置的接口.


    @Value("${cross.origin}")
    private String[] crossList;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins(crossList)
                .allowCredentials(true);
                //.maxAge();       默认30分钟 是否允许跨域请求 30分钟之内不会再次验证
                //.allowedMethods() 允许请求类型
    }
}

properties 文件是这样的

cross.origin=http://localhost:80,http://www.jsbcol.com,http://localhost:8110

将时间文字转化为几个小时前文字

  getDateDiff(new Date(articleItem.article.addTime).getTime())

  function getDateDiff (dateTimeStamp) {
	   var result = ''
	   var minute = 1000 * 60
	   var hour = minute * 60
	   var day = hour * 24
	   var month = day * 30
	   var now = new Date().getTime()
	   var diffValue = now - dateTimeStamp
	   if (diffValue < 0) return
	   var monthC = diffValue / month
	   var weekC = diffValue / (7 * day)
	   var dayC = diffValue / day
	   var hourC = diffValue / hour
	   var minC = diffValue / minute
	   if (monthC >= 1) {
		   result = "" + parseInt(monthC) + "月前"
	   }
	   else if (weekC>=1) {
		   result = "" + parseInt(weekC) + "周前"
	   }
	   else if (dayC >= 1) {
		   result = ""+ parseInt(dayC) + "天前"
	   }
	   else if (hourC >= 1){
		   result = "" + parseInt(hourC) + "小时前"
	   }
	   else if (minC >= 1) {
		   result = ""+ parseInt(minC) + "分钟前"
	   } else {
		   result = "刚刚"
	   }
	   return result
   }

sql语句 || 这种连接符号注意运算顺序 有必要用（）包起来

    <sql id = "queryWhereId">
        from busin_article
        where (status = 1 || status = 0)
        <if test="title != null and title != ''">
            and title like concat("%", #{title},"%")
        </if>
    </sql>

    <select id="findPageObjects" resultMap="frontArticleUserMap">
        select *
        <include refid="queryWhereId" />
        order by add_time desc
        limit #{startIndex}, #{pageSize}
    </select>

solr数据库传输文件的时候

sql的字段名如果和关键字重名需要用 刀秋符号" ` "来区分 斜杠是不行的

<dataConfig> 
	<dataSource type="JdbcDataSource" 
			driver="com.mysql.jdbc.Driver" 
			url="jdbc:mysql://127.0.0.1:3306/jsbweb"
			user="root" 
			password="root"
			batchSize="100"
			autoCommit="false" /> 
	<document name="item"> 
		<entity name="item" pk="id" 
             query="SELECT id,title,sell_point sellPoint, image, `status`, updated FROM busin_article"
             deltaQuery="SELECT id,title,sell_point sellPoint, image, `status`, updated FROM busin_article WHERE updated &gt; date_add(str_to_date('${dih.last_index_time}','%Y-%m-%d %H:%i:%s'),interval 8 hour)" 
			 transformer="RegexTransformer">
		</entity> 
	</document> 
</dataConfig>

后台管理项目引入js文件失败

动吧项目引入js文件失败 懂的都懂 = =

可能是这个/ 的问题

也有可能不是 有可能是这个引入的位置

它这里是将

sys里面的页面加载到starter.html中

所以你实际引入的位置应该是starter.html的位置

所以引入的时候应该要少一层

但是实际可能还有其他情况

• 引入测试
  
  

这里引入了两个文件

这个引入失败了

下面引入成功了

实在搞不清楚加载的顺序的时候 可以先把控制台打开 看看加载情况

看看可以加载的文件路径是怎么样的