B站上播放量最多的Vue视频的后端代码

偏执的太偏执、 2022-10-08 02:30 29阅读 0赞

### 目录 ###

*   *  一、说明
     *  二、准备工作
     *  三、导入模块
     *  四、如何和当前Vue项目配套使用

## 一、说明 ##

**视频地址：** [哔哩哔哩][Link 1]

**视频图片：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70]

**视频文件：** 链接：[百度网盘][Link 2] 提取码：`2wyf`

**本人说明：** 首先本人是做java后端的，但是对前端也感兴趣，现在风头最盛的前端框架莫过于`Vue`了，然后我就学了这套教程，当看到一半视频的时候，发现需要对老师小小支持一下才能继续用接口，所以我就支持了10块钱（最低好像是9块）。不过我发现老师只是提供了一个接口而已，里面的图片地址都是蘑菇街的，哪一天老师的接口炸了，那我们的前端项目也就没了，作为一个后端程序员，自然要挑起这个大梁，然后今天有点时间，所以就用`SpringBoot+MybatisPlus+Mysql`编写了一个后端模块，这里面的图片都是蘑菇街的图片，如果哪一天蘑菇街官方把图片删除了，或者蘑菇街凉凉了，那这些图片也会消失的，因此这些代码不是永久有效的，感兴趣的朋友可以设计一下数据库表，然后把图片使用阿里云OSS存储到阿里云上，不过实现起来稍微复杂一点，后端模块中的代码很简单，即使你看不懂里面的代码，只要你会导入项目就可以了。为了应和大家的代码，所以我就不用阿里云OSS实现了（主要是我懒，哈哈哈）。

我想说：**这些步骤既然写在这里，说明最终结果已经通过了我的验证，大家可以放心使用，有问题可以评论，不喜欢不要胡乱评论，谢谢！！！**

## 二、准备工作 ##

1.  修改Mysql中的配置文件`my.ini`  
    **原因：** Mysql配置文件中的默认utf8编码最多支持3个字节，而Emoji表情或者某些特殊字符是4个字节，因为商品评论中有Emoji表情，所以需要修改默认字符编码，用来解决数据插入失败的问题  
    **操作：** 首先找到Mysql的安装位置，由于我是按照默认位置安装的，所以位置是`C:\Program Files (x86)\MySQL\MySQL Server 5.5`，你可以对照着去找你自己的，之后打开安装目录下面的`my.ini`文件，主要修改两个地方，分别是：1、`default-character-set=utf8`修改成`default-character-set=utf8mb4` 2、`character-set-server=utf8`修改成`character-set-server=utf8mb4` ，设置之后必须在 **`任务管理器`》》》`服务`》》》`重启Mysql服务`**
2.  创建`utf8mb4`字符编码的数据库，并导入表  
    **创建数据库：** 名称：`mogujie`；字符集：`utf8mb4`；排序规则：`utf8mb4_general_ci`；（建议使用Navicat创建）  
    **导入表：** 链接：[百度网盘][Link 3] 提取码：`6xk0`  
    **模块：** 链接：[百度网盘][Link 4] 提取码：`z59c`

## 三、导入模块 ##

首先`解压下载的zip压缩包`，然后在`IDEA`中创建一个`project工程`，之后在该工程中`导入解压缩之后的模块`，你只要把模块调整到可以正常运行就可以了（注意：resources是一个右下角带有四条横杠的文件夹标志），导入模块图片描述如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 1]

如果导入成功，打开`resources`中的`application.properties`，然后填写上你自己的数据库连接密码，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 2]  
之后就可以启动模块了

## 四、如何和当前Vue项目配套使用 ##

把vue项目中`src》》》network》》》require.js`中的`baseURL`后面的地址更改成`http://localhost:8888/mogujie`，其他前端代码都不需要改变，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 3]  
记得先启动IDEA中的后端代码，在启动前端vue项目就可以了

[Link 1]: https://www.bilibili.com/video/BV15741177Eh
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70]: /images/20221005/790a4bbbe773498cb37947b291e16217.png
[Link 2]: https://pan.baidu.com/s/1SUlAU0yCkY_1d2zz_b5S4Q
[Link 3]: https://pan.baidu.com/s/1fEYY4MeIrtWMm30_tU3UIQ
[Link 4]: https://pan.baidu.com/s/1Jb-5T4P17i9GmMwM687eMw
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 1]: /images/20221005/73bf6e508e29431ca2fa9fc4100e4f38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 2]: /images/20221005/afe9880465ac48d199b411de5fb1bb81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDQ5OTYz_size_16_color_FFFFFF_t_70 3]: /images/20221005/ecef1df0fa7b475cbd72c33dc2cd8905.png