拾壹博客的启动及一些注意事项

news/2024/7/10 2:39:39 标签: 博客, vue, 前后端分离

一.后端(blog)启动报错项以及注意事项:


1.后台如果使用JDK17启动会报错:

Caused by: java.lang.NullPointerException: Cannot invoke “Object.hashCode()” because “key” is null

----修改成1.8启动即可解决(作者使用的是1.8)

注意事项:

  1. 正常来说修改application.yml中的数据库链接与密码,即可启动成功

  1. sql脚本执行之前一定要确保没有乱码,否则启动页面会乱码 (我使用DBeaver,把脚本先复制到一个SQL编辑器里面,确保没乱码再执行)

  1. 如需上传文件保存至本地(例如相册的照片),需执行以下操作:
    a. 启动项目后第一时间把 “系统配置”–》“系统配置” 中的文件保存先切换至本地保存


b. “系统配置”–》“本地文件存储” 中的本地文件域名修改为 http://localhost:8800/jpg/ (项目 路径/jpg ,这个jpg对应下面新增JpgPathConfig.java文件中配置的虚拟路径)


c. application.yml中把 upload-folder上传照片的路径修改成本地实际上传路径:

     file:
upload-folder:D:/jpg/#本地上传照片,最后一定要有/,否则文件无法找到

d. 新增配置文件JpgPathConfig.java:

package com.shiyi.config;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@ConfigurationpublicclassJpgPathConfigimplementsWebMvcConfigurer {

    @Value("${file.upload-folder}")//本地上传文件的路径private String UPLOAD_FOLDER;

    @OverridepublicvoidaddResourceHandlers(ResourceHandlerRegistry registry) {
	//   虚拟路径/jpg/对应系统配置中本地文件域名的后缀,
        registry.addResourceHandler("/jpg/**").addResourceLocations("file:" + UPLOAD_FOLDER);
	//把实际上传路径映射到虚拟路径中(当前项目/jpg/),当谷歌浏览器访问虚拟路径就可以看到该文件了
    }
}

也就是说把上传的真实路径 D:/jpg/映射到项目静态文件的jpg文件夹,前台展示的文件url就是http://localhost:8800/jpg/**

4 . pom.xml把log4j的依赖删除,因为使用了logback,并没有使用log4j,启动会一直警告没有配置log4j,

5. 第4步执行完之后,再替换application.yml中的spring.datasource.filters: stat,wall,slf4j #log4j 因为未使用log4j依赖,因此使用slf4j来替换log4j(因为log4j依赖已被删除,因此必须使用logback的slf4j来替换log4j,否则启动报错)


二. 前端前台(blog-web)启动注意事项:


1. shiyi-blog-master\blog-web(前台的前端)根目录下打开cmd ,运行 npm install --registry=https://registry.npmmirror.com ,依赖安装完毕,使用npm run serve 启动测试环境,如果有以下报错信息:

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

执行npm i vue-template-compiler@2.7.14 --save ,2.7.14对应的是当前试用的vue的版本,意思是把某个依赖的版本升级到vue2.7.14对应的版本,再次启动项目,如果还是报错,那么就直接执行npm audit fix --registry=https://registry.npmmirror.com 来修复各依赖的版本,使其对应vue2.7.14的版本修复完毕再次启动项目

~ ------这次启动(npm run serve)成功,访问:http://localhost:80/就好了~


三. 前端后台(blog-admin)启动注意事项:


报错信息:

PS D:\hewenjun\shiyi-blog-master\blog-admin> npm install --registry=https://registry.npmmirror.com
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: sass-loader@8.0.2
npm ERR! Found: node-sass@6.0.1
npm ERR! node_modules/node-sass
npm ERR! dev node-sass@"^6.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional node-sass@"^4.0.0" from sass-loader@8.0.2
npm ERR! node_modules/sass-loader
npm ERR! dev sass-loader@"^8.0.2" from the root project
npm ERR!
npm ERR! node_modules/node-sass
npm ERR! peerOptional node-sass@"^4.0.0" from sass-loader@8.0.2
npm ERR! node_modules/sass-loader
npm ERR! dev sass-loader@"^8.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

解决办法:

npm uninstall sass-loader node-sass 卸载掉

打开package.json文件把"sass-loader": "^8.0.2"版本修改成7.3.1,再次执行npm install --registry=https://registry.npmmirror.com ,

这次搞定,启动成功访问:http://localhost:9528/就好了 ,虽然还有很多报错信息,但也启动成功,注意启动方法是npm run dev,而不是前台的npm run serve否则无法启动成功


http://www.niftyadmin.cn/n/100683.html

相关文章

ZCMU--1970: 潜伏者

Description R 国和 S 国正陷入战火之中&#xff0c;双方都互派间谍&#xff0c;潜入对方内部&#xff0c;伺机行动。  历尽艰险后&#xff0c;潜伏于 S 国的 R 国间谍小 C 终于摸清了 S 国军用密码的编码规则&#xff1a;  1&#xff0e; S 国军方内部欲发送的原信息经过加…

操作系统期末复习

操作系统概论 文章目录操作系统概论操作系统的目标&#xff1a;基本特征:主要功能发展操作系统的运行机制时钟管理中断机制&#xff1a;指令程序处理机状态原语&#xff1a;由若干指令组成的程序段&#xff0c;完成特定功能系统数据结构系统调用体系结构进程--资源分配和调度的…

【经典蓝牙】蓝牙 A2DP协议分析

A2DP 介绍 A2DP(Advanced Audio Distribution Profile)是蓝牙高音质音频传输协议&#xff0c; 用于传输单声道&#xff0c; 双声道音乐&#xff08;一般在 A2DP 中用于 stereo 双声道&#xff09; &#xff0c; 典型应用为蓝牙耳机。 A2DP旨在通过蓝牙连接传输高质量的立体声音…

urho3D属性动画

属性动画是一种设置对象属性值动画的机制。从Animatable派生的对象可以使用属性动画&#xff0c;这包括Node类以及所有Component和UIElement子类。 这是使用属性动画的两种方法。用户可以使用代码创建属性动画&#xff0c;然后将其应用于对象的属性。以下是浅色动画的简单代码…

服务器部署—若依【vue】如何部署到nginx里面?nginx刷新页面404怎么办?【完美解决建议收藏】

服务器部署项目我们大家都会遇到&#xff0c;但是有些铁子会遇到很多的问题&#xff0c;比如前端部署nginx如何操作&#xff1f; 前端有单纯的静态页面、还有前后端分离的项目&#xff1b;这里博主直接分享最牛最到位的前后端分离项目的前端部署到nginx上面&#xff0c;以若依项…

vitepress 就这几步操作,博客就搭好啦?

Ⅰ、什么是vitepress &#x1f48e; vitepress 使用场景 简单的说 &#xff0c;只要 会用 markdown 语法&#xff0c;就能构建自己的 「博客、笔记、使用文档」等系统 &#xff1b; ✨ vitepress 优势 优势介绍傻瓜式操作只需要配置 菜单 和 对应的 markdown 就能实现博客、笔…

IndexDB 浏览器服务器

IndexDB 浏览器服务器 文章部分内容引用&#xff1a; https://www.ruanyifeng.com/blog/2018/07/indexeddb.html https://juejin.cn/post/7026900352968425486#heading-15 基本概念 数据库&#xff1a;IDBDatabase 对象对象仓库&#xff1a;IDBObjectStore 对象索引&#xff1…

零基础如何入门网络安全(黑客)

我经常会看到这一类的问题&#xff1a; 学习XXX知识没效果&#xff1b;学习XXX技能没方向&#xff1b;学习XXX没办法入门&#xff1b; 给大家一个忠告&#xff0c;如果你完全没有基础的话&#xff0c;前期最好不要盲目去找资料学习&#xff0c;因为大部分人把资料收集好之后&a…