前后端分离工程实现（VUE、JAVA）、附全部源码

朴灿烈づ我的快乐病毒、 2022-02-27 11:40 254阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

1. 整个工程基本情况简述：

前端工程语言：vue （node.js）

后端工程语言：java （springboot、Mybatis）

数据库：mysql

部署方式：docker

反向代理：nginx

服务器：阿里云

查看效果，访问地址：[http://ergouzi.fun/gentle-vue][http_ergouzi.fun_gentle-vue]/

服务器低配，带宽只有1M，首页背景图片有300余K ，首次加载页面比较慢。暂时就不去处理图片了。这个项目只是一个 Demo。

PS : 本人是后端，界面可能引起不适，望忍耐。同时请无限吐嘈，那我以后就更清楚界面应该怎么样改才更好了  ...

2. 运行效果：

左侧是半透明、可收起的一级主菜单、右上角是二级菜单、页面正中是当前页面主要内容。

目前：

主菜单中主要作了个人中心、文章管理、系统管理 。二级菜单主要作了个人中心中个人资料页面的 CRUD 功能。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70][]

3. 工程源码：  [前后端口工程源码地址][Link 2]

红框中工程便是：

![2019052411414651.png][]

4.关于部署：

[Docker 方式 部署 vue 项目 （docker + vue + nginx）][Docker _ _ vue _ _docker _ vue _ nginx]

[Docker 部署应用、jar 工程 docker 方式部署][Docker _jar _ docker]

5. Nginx 中 nginx.conf 配置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1][]

[Link 1]: https://www.captainai.net/jiangyu1013/
[http_ergouzi.fun_gentle-vue]: http://ergouzi.fun/gentle-vue/#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70]: /images/20220227/2ec9575fe2ea49ffb3fe31f6bae2db85.png
[Link 2]: https://gitee.com/jiangyu_1013/events
[2019052411414651.png]: /images/20220227/0749be1c8e754a23909f2eff4397900a.png
[Docker _ _ vue _ _docker _ vue _ nginx]: https://blog.csdn.net/jiangyu1013/article/details/84572582
[Docker _jar _ docker]: https://blog.csdn.net/jiangyu1013/article/details/81988342
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1]: /images/20220227/c1c73cfcae114f889e6bdada2a766be9.png