vue项目开发实战案例_推荐系统开发实战三大案例复现说明

《推荐系统开发实战》这本书上市已经半年了，鉴于有很多读者对于最后三章的案例复现出现的一些问题和疑问，这里再详细说明一下。

关于代码获取

可在书籍的前几页查看获取方式，之前把这三大案例的代码放到了github上，方便大家下载，但是有“不法分子”在闲鱼等平台进行交易，售价高达299元，我表示也很无奈，所以就把github上的三个库设置为private了，现在获取代码的唯一方式就是通过查看图书前几页的说明进行获取。

复现过程

以新闻推荐系统为例。

Step 1：分别在编译器中NewsRec和NewsRec-Vue项目

例如我这里后端项目(NewsRec)是用PyCharm打开的，前端项目(NewsRec-Vue)是用Sublime打开的。

PyCharm打开后端项目

Sublime打开前端项目

Step 2：查看本机IP

• Linux/MAC终端输入：ifconifg

• Windows终端输入：ipconfig

比如我查看我的IP为：

IP信息查看

Step 3：修改后端和前端中涉及的IP地址

后端

NewsRec/NewsRec/setting.py

ALLOWED_HOSTS = ['192.168.199.165','127.0.0.1']

将上面的 192.168.199.165换成你自己的IP地址

后端IP修改

前端前端有两个地方需要修改(具体如下图所示)

• NewsRec-Vue/config/index.js
• NewsRec-Vue/src/assets/js/linkBase.js

前端IP修改

前端IP修改

Step 4：将newsrec.sql 导入到mysql库中并修改后端mysql的信息

这里使用Navicat for mysql进行文件的导入，首先创建newsrec数据库，然后将sql文件导入，导入成功之后显示为：

sql文件导入成功示例

后端mysql信息修改配置

后端mysql信息修改配置

Step 5：项目运行

后端运行，在编译器中执行(注意端口一定是8000，因为和前端交互中写好了)：

python manage.py runserver 0.0.0.0:8000

前端运行，在终端运行(如果是WebStorm打开的花，也可以在编译器中执行)：

npm installnpm run dev

看到前端项目显示下面这样的话，表示成功。

 1 1 1 1 1 1 1 1 1 1 1 95% emitting                 DONE  Compiled successfully in 3856ms    21:27:50 I  Your application is running here: http://localhost:8001

常见问题

因为这里采用的是前后端分离进行项目构建的，在工业界也是这样，前端和后端之间通过API接口进行数据访问。所以访问IP的准确性显得格外重要，大多数案例复现不成功均是由于IP没有配置正确造成。

• 登录时，下拉无用户可供选择
• 点击下一步没反应
• 小主请稍等，正在加载中
• 界面无新闻、音乐信息、图书信息等数据

如果还有其他问题，可在下方评论区留言，进行解答。

解决方法：

• 检查IP配置！检查IP配置！检查IP配置！
• 在浏览器上进行元素审查(F12)

eg：我把后端项目停了，保证前端项目运行，下拉无用户选择，可以通过f12进行元素审查，如下图所示

F12审查示例

好了，关于三大案例的复现说明就介绍到这里，如果还有什么问题，可以在评论区留言，放拜年其他人查看！