第二个VUE项目（服务端带mysql数据库）

一、序言

        第一个vue只有前端的羡慕部署成功后，立马想试试带数据库的了，于是在gitee上搜索了一下，带着试试的心里做了一次尝试，半天就部署完了，当真还是很兴奋。虽然没有改什么代码，但是熟悉了这整个环境，为将来工作项目里需要使用时打了基础，顿觉不错。

二、项目准备

        羡慕地址：

前端：https://gitee.com/thinkgem/jeesite-vue

后端：https://gitee.com/thinkgem/jeesite5

参考文档：https://jeesite.com/docs/install-deploy/

                https://gitee.com/thinkgem/jeesite5/issues/I18ARR

依旧列一下我们需要准备的基础工具和包：

$ vue --version
2.9.6
$ npm -v
10.8.2
$ node -v
v22.8.0
$ php -v
PHP 8.1.29 (cli) 

$ yarn -v
1.22.22
 

后台服务

 $ java -version
java version "1.8.0_261"

$ httpd -v
Server version: Apache/2.4.62 (Win64)
Eclipse 集成环境使用

$ mysql.exe --version
E:\temp\vuetest\soft_need\mysql_winx64_609101\mysql-8.4.0-winx64\bin\mysql.exe  

Ver 8.4.0 

        基础的先装了就可以。 

三、项目启动

快速运行前台

        1、安装依赖

yarn config set registry https://registry.npmmirror.com
yarn install

        2、直接运行就可以

yarn serve

访问地址： http://localhost:3100/login

特殊注意： 注释的地址换成本机地址就好

快速运行后台

1. 环境准备：JDK 1.8 or 11、17、Maven 3.6+、无需准备数据库（使用内嵌 H2 DB、Vue资源包）
2. 下载源码：登录 - Gitee.com 并解压
3. 执行脚本：/web-fast/bin/run-tomcat.bat 启动服务即可（自动初始化库）
4. 全栈版本地址：http://127.0.0.1:8980/a/login
5. Vue分离版本地址：http://127.0.0.1:8980/vue/login
6. 默认超级管理员账号：system 密码 admin
7. 部署常见问题：https://jeesite.com/docs/faq/

特殊注意：

1、mysql要预先执行以下语句，

会新建一个jeesite用户，到时候初始化会用到

set global read_only=0;
set global optimizer_switch='derived_merge=off';
create user 'jeesite'@'%' identified by 'jeesite';
create database jeesite DEFAULT CHARSET 'utf8mb4' COLLATE 'utf8mb4_unicode_ci';
-- MySql 5.x
-- grant all privileges on jeesite.* to 'jeesite'@'%' identified by 'jeesite';
-- MySql 8.x
grant all privileges on jeesite.* to 'jeesite'@'%';
flush privileges;

2、mysql要执行这个脚本：

jeesite_mysql_v5.6.0_2024-01-04.sql.sql

执行的方法为，在sql中，切换到jeesite用户直接执行：source  jeesite_mysql_v5.6.0_2024-01-04.sql.sql

3、执行下载包的脚本：

        \jeesite5\web-api\bin\package.bat

可能会报错，只需要把maven中settings.xml配置文件中mirrors标签下的地址注释掉就可以。

4、执行启动脚本：

        run-tomcat.bat

        jeesite5\web-api\bin\run-tomcat.bat

        修改一下数据库的名字和密码就可以，在加一句&allowPublicKeyRetrieval=true，最后执行脚本就可以。

 

四、效果图

访问地址：

http://localhost:3100/login

五、结束语

        这里很多疑难的问题是通过通义直接获取了解决方法，当然需要看图文的还得csdn或者百度一下会更具体。

https://tongyi.aliyun.com/qianwen/

        本次通过部署了一个带数据的VUE项目，把前台和后台的结合起来了，用到的包和依赖的库，脚本，以及工具都熟悉了一遍。总体来说本次选的项目文档还是比较全的，这极大的方便了我的部署。欢迎也想尝试的朋友有问题一起沟通。总的来说，部署这个还是非常快的。