Git Product home page Git Product logo

antabot / white-jotter Goto Github PK

View Code? Open in Web Editor NEW
2.4K 58.0 853.0 223.37 MB

白卷是一款使用 Vue+Spring Boot 开发的前后端分离项目,附带全套开发教程。(A simple CMS developed by Spring Boot and Vue.js with development tutorials)

License: MIT License

Java 46.12% JavaScript 14.27% HTML 0.34% Vue 31.43% SCSS 3.56% CSS 4.28%
spring-boot restful springdata-jpa single-page-app vue

white-jotter's Introduction

wjlogo.png


lisense release

这是一个简单的项目,旨在让新入门 web 的开发者体验使用 Vue + Java(Spring Boot) + Mysql 以前后端分离模式完成开发的流程。由于开发过程中并未充分考虑安全防护问题,并不建议将该项目用于生产环境。

https://github.com/Antabot/White-Jotter)

感谢 JetBrains 提供全家桶开源许可,IDEA 确实是 Java 领域最好用的 IDE。

整体效果

首页

作为展示页面,包括开发这个项目的主要参考资料、近期更新和 Slogan

首页

图书馆

提供图书信息展示功能

图书馆

笔记本

提供笔记、博文展示功能

笔记本首页.png

文章内容.png

后台管理

包含 dashboard、内容管理、用户及权限管理等

后台

架构图

  • 应用架构

应用架构

  • 技术架构

技术架构

主要技术栈

前端

1.Vue.js
2.ElementUI
3.axios

后端

1.Spring Boot
2.Apache Shiro 3.Apache Log4j2 4.Spring Data JPA 5.Spring Data Redis

数据库

1.MySQL
2.Redis

部署方法

1.clone 项目到本地

git clone https://github.com/Antabot/White-Jotter

2.在 mysql 中创建数据库 wj,运行项目,将自动注入数据。如需关闭此功能,请将 application.properties 中的 spring.datasource.initialization-mode=always 代码删除。

数据库完整脚本 wj.sql 放在后端项目的 src\main\resources 目录下,也可根据需要自行在 MySQL 中执行数据库脚本。

运行项目前请启动 Redis 服务,端口为 6379(默认端口),密码为空。

3.数据库配置在后端项目的 src\main\resources 目录下的application.properties 文件中,mysql 版本为 8.0.15 。

4.在IntelliJ IDEA中运行后端项目,为了保证项目成功运行,可以右键点击 pom.xml 选择 maven -> reimport ,并重启项目

至此,服务端就启动成功了,同时,运行前端项目,访问 http://localhost:8080 ,即可进入登录页面,默认账号是 admin,密码是 123

如果要做二次开发,请继续看第五、六步。

5.进入前端项目根目录中,在命令行依次输入如下命令:

# 安装依赖
npm install

# 在 localhost:8080 启动项目
npm run dev

由于在 wj-vue 项目中已经配置了端口转发,将数据转发到SpringBoot上,因此项目启动之后,在浏览器中输入 http://localhost:8080 就可以访问我们的前端项目了,所有的请求通过端口转发将数据传到 SpringBoot 中(注意此时不要关闭 SpringBoot 项目)。

6.最后可以用 WebStorm 等工具打开 wj-vue项目,继续开发,开发完成后,当项目要上线时,依然进入到 wj-vue 目录,然后执行如下命令:

npm run build

该命令执行成功之后, wj-vue 目录下生成一个 dist 文件夹,可以将该文件夹中的两个文件 staticindex.html 拷贝到 wj 项目中 resources/static/ 目录下,然后直接运行 wj 项目,访问 http://localhost:8443 ,实际上是把前端打包后作为静态文件,但不推荐使用这种方式。

前后端分离部署的方式详见教程第十篇:「图片上传与项目的打包部署」

教程

我在 CSDN 上分享了开发这个项目的教程:

1.项目简介

2.使用 CLI 搭建 Vue.js 项目

3.前后端结合测试(登录页面开发)

4.数据库的引入

5.使用 Element 辅助前端开发

6.前端路由与登录拦截器

7.导航栏与图书页面设计

8.数据库设计与增删改查

9.核心功能的前端实现

10.图片上传与项目的打包部署

11.用户角色权限管理模块设计

12.访问控制及其实现思路

13.使用 Shiro 实现用户信息加密与登录认证

14.用户认证方案与完善的访问拦截

15.动态加载后台菜单

16.功能级访问控制的实现

17.后台角色、权限与菜单分配

18.博客功能开发

19.项目优化解决方案

(持续更新中)

重要更新

2020

01-20 利用开源 markdown 编辑器实现文章展示与管理模块


2019

12-01 实现功能级权限控制
11-30 利用 vue-elment-admin 项目完善后台界面设计
11-17 重构项目,完成搭建后台基础界面,实现按角色加载菜单,取消前台访问限制
04-27 使用前端拦截器,数据库迁移至 mysql 8.0.15,后台管理页面初始化
04-13 完成图片的上传功能
04-11 完成图书分类功能
04-08 完成图书分页功能
04-06 完成图书查询功能
04-05 完成图书修改功能
04-04 完成图书删除功能
04-03 完成图书新增功能

white-jotter's People

Contributors

antabot avatar dependabot[bot] avatar hshij avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

white-jotter's Issues

UserService更新用户状态

UserService里面这个更新用户状态好像整错了

    public void updateUserStatus(User user) {
        User userInDB = userDAO.findByUsername(user.getUsername());

        // 这里
        userInDB.setEnabled(user.isEnabled());
        userDAO.save(userInDB);
    }

关于当前版本

我克隆了当前版本 发现项目还在飙红。。。就提交了呢。。?

运行不成功的原因(缺少依赖库)。 应该是没加国内源 (超级小白会遇见的问题)

将下列代码加入到 pom.xml 文件内 就会成功

	<repositories>
		<repository>
			<id>jcenter</id>
			<name>jcenter</name>
			<url>https://maven.aliyun.com/repository/jcenter</url>
		</repository>
		<repository>
			<id>central</id>
			<name>central</name>
			<url>https://maven.aliyun.com/repository/central</url>
		</repository>
	</repositories>

	<pluginRepositories>
		<pluginRepository>
			<id>ali</id>
			<name>ali</name>
			<url>https://maven.aliyun.com/repository/central</url>
		</pluginRepository>
	</pluginRepositories>

建议

建议将前后端分成2个仓,没一个分别维护,慢慢做,有好点子就放进来,会有更多人参加进来的!加油

Use Redis

I will use redis to cache books metadata and articles.

npm漏洞怎么办啊

                             Manual Review                                  
         Some vulnerabilities require your attention to resolve             
                                                                            
      Visit https://go.npm.me/audit-guide for additional guidance           

High Cross-Site Scripting

Package mavon-editor

Patched in No patch available

Dependency of mavon-editor

Path mavon-editor

More info https://npmjs.com/advisories/1169

Low Prototype Pollution

Package minimist

Patched in >=0.2.1 <1.0.0 || >=1.2.3

Dependency of eslint-loader [dev]

Path eslint-loader > loader-fs-cache > mkdirp > minimist

More info https://npmjs.com/advisories/1179

Moderate Cross-Site Scripting

Package serialize-javascript

Patched in >=2.1.1

Dependency of uglifyjs-webpack-plugin [dev]

Path uglifyjs-webpack-plugin > serialize-javascript

More info https://npmjs.com/advisories/1426

High Remote Code Execution

Package serialize-javascript

Patched in >=3.1.0

Dependency of uglifyjs-webpack-plugin [dev]

Path uglifyjs-webpack-plugin > serialize-javascript

More info https://npmjs.com/advisories/1548

found 6 vulnerabilities (3 low, 1 moderate, 2 high) in 2103 scanned packages
run npm audit fix to fix 2 of them.
4 vulnerabilities require manual review. See the full report for details.

项目是否可以加一个开源协议

最近在做这个项目,但是忽然发现作者大大没有加开源协议,那就会变成这样
You're under no obligation to choose a license. However, without a license, the default copyright laws apply, meaning that you retain all rights to your source code and no one may reproduce, distribute, or create derivative works from your work.
任何人都不得复制、分发、使用、修改这段代码用到其他项目里面

POST请求后端接收失败

博主您好,我最近在学习Vue/Spring boot进行web开发,阅读 Vue + Spring Boot 项目实战(三):前后端结合测试(登录页面开发) 文章的时候,尝试把里面的代码运行起来,但是出现下面的问题。

在点击登录button的时候,我执行 alertconsole 输出都成功,我认为POST请求应该是发送成功的。但不知为何会报错。恳请赐教。感谢。

以下是 Chrome 的后台输出:

Access to XMLHttpRequest at 'http://localhost:8443/api/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
log.js?4244:23 [HMR] Waiting for update signal from WDS...
vue.esm.js?efeb:9077 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
:8080/#/login:1 Access to XMLHttpRequest at 'http://localhost:8443/api/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js?ec6c:178 POST http://localhost:8443/api/login net::ERR_FAILED
dispatchXhrRequest      @ xhr.js?ec6c:178
xhrAdapter              @ xhr.js?ec6c:12
dispatchRequest         @ dispatchRequest.js?c4bb:52
Promise.then (async)
request                 @ Axios.js?5e65:61
Axios.<computed>        @ Axios.js?5e65:86
wrap                    @ bind.js?24ff:9
login                   @ Login.vue?03db:27
invokeWithErrorHandling @ vue.esm.js?efeb:1863
invoker                 @ vue.esm.js?efeb:2188
original._wrapper       @ vue.esm.js?efeb:7565

xss

Snipaste_2022-07-07_14-49-02

  • /admin/content/article

  • There is a reflection XSS in the admin/content/article interface。Just login after registration。

  • Source code:src/main/java/com/gm/wj/service/JotterArticleService.java

[webpack-cli] You need to install 'webpack-dev-server' for running 'webpack serve'.

[webpack-cli] You need to install 'webpack-dev-server' for running 'webpack serve'.
Error: Cannot find module 'ajv/dist/compile/codegen'
Require stack:

  • G:\white-jotter\wj-vue\node_modules\ajv-keywords\dist\definitions\typeof.js
  • G:\white-jotter\wj-vue\node_modules\ajv-keywords\dist\keywords\typeof.js
  • G:\white-jotter\wj-vue\node_modules\ajv-keywords\dist\keywords\index.js
  • G:\white-jotter\wj-vue\node_modules\ajv-keywords\dist\index.js
  • G:\white-jotter\wj-vue\node_modules\webpack-dev-server\node_modules\schema-utils\dist\validate.js
  • G:\white-jotter\wj-vue\node_modules\webpack-dev-server\node_modules\schema-utils\dist\index.js
  • G:\white-jotter\wj-vue\node_modules\webpack-dev-server\lib\Server.js
  • G:\white-jotter\wj-vue\node_modules@webpack-cli\serve\lib\index.js
  • G:\white-jotter\wj-vue\node_modules\webpack-cli\lib\webpack-cli.js
  • G:\white-jotter\wj-vue\node_modules\webpack-cli\lib\bootstrap.js
  • G:\white-jotter\wj-vue\node_modules\webpack-cli\bin\cli.js
  • G:\white-jotter\wj-vue\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    npm ERR! code ELIFECYCLE
    npm ERR! errno 2
    npm ERR! [email protected] dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    npm ERR! Exit status 2
    npm ERR!
    npm ERR! Failed at the [email protected] dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Guan Spring\AppData\Roaming\npm-cache_logs\2022-01-21T07_08_01_819Z-debug.log

The project has a shiro deserialization vulnerability

  1. First, build the environment locally to access the backend management system.
    index
  2. You can see that the project's pom.xml file relies on the vulnerable shiro package.
    shiro-package
  3. Using ShiroAttack2 Tools for vulnerability detection. Tool link:https://github.com/SummerSec/ShiroAttack2
    shiro-01
    You can see that Shiro’s secret key was revealed during the explosion.
  4. Detect current Shiro’s exploit chain
    shiro-02
  5. The whoami command was executed successfully, confirming that the vulnerability exists
    shiro-03

登录 Login.vue 表单验证

表单验证rules跟loginForm里的字段名称好像没对上

data () {
    return {
    rules: {
        account: [{required: true, message: '请输入正确的用户名', trigger: 'blur'}],
        checkPass: [{required: true, message: '请输入正确的密码', trigger: 'blur'}]
    },
    checked: true,
    loginForm: {
        username: 'admin',
        password: '123'
    },
    loading: false
    }
}

配置文件

项目运行成功,但是看配置文件好像很简单,基本上感觉什么都没有,日志上什么都看不到,是配置了相关的东西吗?

跨域问题求助

完全按照你博客上的配置的,跨域问题,就是走不了!

感谢老哥

老哥,我是从你博客过来的,这项目真心很棒,老哥求加个Q哇。。。。还有好多问题想要请教。。。

Bug: The display of book page is not reasonable

When change the page and then use sidebar to list books by category, it will still show the previous page, which will cause uncertainty.

The expected behavior

Show the first page when select category.

403

直接down项目,修改好后端地址后,还是会有403跨域的错误,咋整

小bug

保存文章 日期保存不上
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.